当前位置:   article > 正文

Fragment(碎片)一个简易的新闻应用-Android_碎片实践简易版新闻应用为什么点击按钮之后不显示内容

碎片实践简易版新闻应用为什么点击按钮之后不显示内容

先看效果

1.首先,要实现上面的效果,就必须得有两个字段,用来显示新闻的标题和内容,所以新建一个新闻类(News)

  1. public class News {
  2. private String title;
  3. private String content;
  4. public String getTitle() {
  5. return title;
  6. }
  7. public void setTitle(String title) {
  8. this.title = title;
  9. }
  10. public String getContent() {
  11. return content;
  12. }
  13. public void setContent(String content) {
  14. this.content = content;
  15. }
  16. }

2.创建用于显示新闻内容的布局

可以看到做左边是可以实现滑动效果的,所以我们新建一个news_title_frag.xml布局来实现它

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:orientation="vertical"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent">
  5. <androidx.recyclerview.widget.RecyclerView
  6. android:id="@+id/news_title_recycler_view"
  7. android:layout_width="match_parent"
  8. android:layout_height="match_parent"/>
  9. </LinearLayout>

接着再新建一个news_item.xml布局作为上面RecyclerView要展示的内容

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <TextView xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/news_title"
  4. android:layout_width="match_parent"
  5. android:layout_height="wrap_content"
  6. android:maxLines="2"
  7. android:ellipsize="end"
  8. android:textSize="18sp"
  9. android:paddingLeft="10dp"
  10. android:paddingRight="10dp"
  11. android:paddingTop="15dp"
  12. android:paddingBottom="15dp">
  13. </TextView>

右边的布局就如下展示

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent">
  5. <!--新闻内容的布局-->
  6. <LinearLayout
  7. android:id="@+id/visibility_layout"
  8. android:layout_width="match_parent"
  9. android:layout_height="match_parent"
  10. android:orientation="vertical"
  11. android:visibility="invisible">
  12. <TextView
  13. android:gravity="center"
  14. android:padding="10dp"
  15. android:textSize="20sp"
  16. android:id="@+id/news_title"
  17. android:layout_width="match_parent"
  18. android:layout_height="wrap_content" />
  19. <View
  20. android:layout_width="match_parent"
  21. android:layout_height="1dp"
  22. android:background="#000000"/>
  23. <TextView
  24. android:padding="15dp"
  25. android:textSize="18sp"
  26. android:id="@+id/news_content"
  27. android:layout_weight="1"
  28. android:layout_width="match_parent"
  29. android:layout_height="0dp" />
  30. </LinearLayout>
  31. <View
  32. android:layout_width="10dp"
  33. android:layout_height="match_parent"
  34. android:layout_alignParentLeft="true"
  35. android:background="#000" />
  36. </RelativeLayout>

3.接着在res目录下新建layout-600dp文件夹,在这里面新建一个activity_main.xml文件,并对他添加以下代码,那么我们的布局就已经完成了,接下来就是往布局里添加具体内容了

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:id="@+id/news_title_layout"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. >
  7. <fragment
  8. android:layout_weight="1"
  9. android:id="@+id/news_title_fragment"
  10. android:layout_width="0dp"
  11. android:layout_height="match_parent"
  12. android:name="com.example.demo_fragment2.NewsTitleFragment" />
  13. <FrameLayout
  14. android:id="@+id/news_content_layout"
  15. android:layout_weight="3"
  16. android:layout_width="0dp"
  17. android:layout_height="match_parent">
  18. <fragment
  19. android:id="@+id/news_content_fragment"
  20. android:layout_width="match_parent"
  21. android:layout_height="match_parent"
  22. android:name="com.example.demo_fragment2.NewsContentFragment"/>
  23. </FrameLayout>
  24. </LinearLayout>

4.接着分别创建NewsTitleFragment类和NewsContentFragment类继承Fragment

  1. package com.example.demo_fragment2;
  2. import android.os.Bundle;
  3. import android.view.LayoutInflater;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  6. import android.widget.TextView;
  7. import androidx.annotation.NonNull;
  8. import androidx.annotation.Nullable;
  9. import androidx.fragment.app.Fragment;
  10. import androidx.recyclerview.widget.LinearLayoutManager;
  11. import androidx.recyclerview.widget.RecyclerView;
  12. import java.util.ArrayList;
  13. import java.util.List;
  14. public class NewsTitleFragment extends Fragment {
  15. //新建一个内部类来作为RecyclerView的适配器
  16. class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder>{
  17. private List<News> mNewsList;
  18. class ViewHolder extends RecyclerView.ViewHolder{
  19. TextView newstitleText;
  20. public ViewHolder(View view){
  21. super(view);
  22. newstitleText = view.findViewById(R.id.news_title);
  23. }
  24. }
  25. public NewsAdapter(List<News> newsList){
  26. mNewsList=newsList;
  27. }
  28. @NonNull
  29. @Override
  30. public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
  31. View view = LayoutInflater.from(parent.getContext())
  32. .inflate(R.layout.new_item, parent, false);
  33. final ViewHolder holder = new ViewHolder(view);
  34. return holder;
  35. }
  36. @Override
  37. public void onBindViewHolder( ViewHolder holder, int position) {
  38. News news = mNewsList.get(position);
  39. holder.newstitleText.setText(news.getTitle());
  40. holder.itemView.setOnClickListener(new View.OnClickListener() {
  41. @Override
  42. public void onClick(View view) {
  43. NewsContentFragment fragment= (NewsContentFragment) getFragmentManager()
  44. .findFragmentById(R.id.news_content_fragment);
  45. fragment.refresh(news.getTitle(),news.getContent());
  46. }
  47. });
  48. }
  49. @Override
  50. public int getItemCount() {
  51. return mNewsList.size();
  52. }
  53. }
  54. @Nullable
  55. @Override
  56. public View onCreateView(@NonNull LayoutInflater inflater,
  57. @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
  58. View view = inflater.inflate(R.layout.news_title_frag,container,false);
  59. RecyclerView news_title_recycler_view = view.findViewById(R.id.news_title_recycler_view);
  60. LinearLayoutManager linearLayout = new LinearLayoutManager(getActivity());
  61. news_title_recycler_view.setLayoutManager(linearLayout);
  62. NewsAdapter adapter=new NewsAdapter(getNews());
  63. news_title_recycler_view.setAdapter(adapter);
  64. return view;
  65. }
  66. private List<News> getNews(){
  67. List<News> newsList = new ArrayList<>();
  68. for (int i = 0; i <= 50; i++) {
  69. News news = new News();
  70. news.setTitle("这是一个 news title"+i);
  71. news.setContent("这是一个 news Content"+i+"****");
  72. newsList.add(news);
  73. }
  74. return newsList;
  75. }
  76. }
  1. package com.example.demo_fragment2;
  2. import android.os.Bundle;
  3. import android.view.LayoutInflater;
  4. import android.view.View;
  5. import android.view.ViewGroup;
  6. import android.widget.TextView;
  7. import androidx.annotation.NonNull;
  8. import androidx.annotation.Nullable;
  9. import androidx.fragment.app.Fragment;
  10. public class NewsContentFragment extends Fragment {
  11. private View view;
  12. @Override
  13. public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
  14. //绑定外面的布局
  15. view=inflater.inflate(R.layout.news_content_frag,container,false);
  16. return view;
  17. }
  18. //用于将新闻的标题和内容展示
  19. public void refresh(String newTitle,String newContent){
  20. View visibility_layout = view.findViewById(R.id.visibility_layout);
  21. visibility_layout.setVisibility(View.VISIBLE);
  22. TextView title = view.findViewById(R.id.news_title);
  23. TextView content = view.findViewById(R.id.news_content);
  24. title.setText(newTitle);
  25. content.setText(newContent);
  26. }
  27. }

记住,因为我们实现的效果需要平板才能看到

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/凡人多烦事01/article/detail/355320
推荐阅读
相关标签
  

闽ICP备14008679号