碎片实例：简易版本的新闻应用(碎片+列表显示的问题)

最新推荐文章于 2021-06-30 11:11:47 发布

hll174

最新推荐文章于 2021-06-30 11:11:47 发布

阅读量2.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：安卓

本文链接：https://blog.youkuaiyun.com/hll174/article/details/45676381

安卓专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种基于安卓平台的双碎片新闻阅读应用实现方案，重点讲解了使用Fragment进行界面布局划分的方法，并通过实例展示了如何创建新闻标题列表及内容展示页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先回顾一下：

1，之前最先是做的一个水果列表的问题

实现是一个水果类fruit.java+主XML文件中是ListView

另外一个单独的水果子项fruit_item.xml

然后是一个适配器Adapter.java

2个xml文件+三个类

2，实现碎片的时候

主xml文件中是Fragment（放碎片）,加别的frag的时候带上完整包名就行，所以外加

一个fragment.xml文件（碎片中的具体布局）和一个fragment.java

所以基本的情况是2个xml文件+2个类

再来看下实现效果的大致文件目录

android:padding表示给控件的周围加上补白

android:ellipsize 用于设定当文本内容超出控
件宽度时，文本的缩略方式，这里指定成 end 表示在尾部进行缩略。

-----------------------------------------------------------------------------------------------------

3，activity_main.xml:主xml布局，还可以自动判断单双页

2，MainActivity.java:主活动

首先分析做这个需要的类

1，News.java类：基础信息

先考虑左边的标题列表，列表又是放在左边碎片中的，所以

4，news_title_frag.xml文件：放标题列表listview，同时也是碎片类具体小布局

5，news_item.xml：标题列表中的小子项

6，NewsAdapter.java:左边标题列表的适配器

7，NewsTitleFragment.java类:关联左边的碎片
这样左边标题列表算是弄完了

右边

8，news_content.xml：右边的碎片放在哪

9，news_content_frag.xml；右边碎片中具体的小布局

10，NewsContentFragment.java:右边碎片关联的类

此外我们还多加了一个

11，NewsContentActivity.java类作为显示新闻中的内容，只在后面响应单机事件的时候会出发这个活动的启动，跳出一个新的界面

--------------------------------------------------------------------------------------------------------

1，首先来看News.java,很简单没什么说的

public class News {
private String title ;
private String content ;
public String getTitle() {
     return title;
}
public void setTitle(String title ) {
     this.title = title;
}
public String getContent() {
     return content;
}
public void setContent(String content ) {
     this.content = content;
}
}

2，然后来看MainActivity.java,也没什么说的加载主活动，然后设置无标题

3，关于activity_main.xml文件有两个，一个小的，一个大的

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width= "match_parent"
    android:layout_height= "match_parent"
    tools:context="com.example.fragmentbasepractice.MainActivity" >
    <fragment
        android:id= "@+id/news_title_fragment"
        android:name= "com.example.fragmentbasepractice.NewsTitleFragment"
        android:layout_width= "match_parent"
        android:layout_height= "match_parent"
        />
</LinearLayout>

再看大的

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width= "match_parent"
    android:layout_height= "match_parent" >
    <fragment
        android:id= "@+id/news_title_fragment"
        android:name= "com.example.fragmentbasepractice.NewsTitleFragment"
        android:layout_width= "0dp"
        android:layout_height= "match_parent"
        android:layout_weight= "1" />
    <FrameLayout
        android:id= "@+id/news_content_layout"
        android:layout_width= "0dp"
        android:layout_height= "match_parent"
        android:layout_weight= "3" >
        <fragment
            android:id= "@+id/news_content_fragment"
            android:name= "com.example.fragmentbasepractice.NewsContentFragment"
            android:layout_width= "match_parent"
            android:layout_height= "match_parent"
            />
    </FrameLayout >
</LinearLayout>

4，关于左边标题列表news_title_frag.xml,同时也是一个碎片类具体小布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width= "match_parent"
    android:layout_height= "match_parent"
    android:orientation="vertical" >
<ListView
    android:id="@+id/news_title_list_view"
    android:layout_width= "match_parent"
    android:layout_height= "match_parent"
    ></ListView >
</LinearLayout>

5,列表中的小子项news_item.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width= "match_parent"
    android:layout_height= "match_parent"
    android:orientation="vertical" >
    <TextView
        android:id= "@+id/news_title"
        android:layout_width= "match_parent"
        android:layout_height= "wrap_content"
        android:singleLine= "true"
        android:ellipsize= "end"
        android:textSize= "18sp"
        android:paddingLeft= "10dp"
        android:paddingRight= "10dp"
        android:paddingTop= "15dp"
        android:paddingBottom= "15dp"
        />
</LinearLayout>

6，这些小子项的适配器NewsAdapter.java

public class NewsAdapter extends ArrayAdapter<News> {
     private int resourecId;

     public NewsAdapter(Context context, int resource, List<News> objects) {
            super( context, resource, objects);
            // TODO Auto-generated constructor stub
            resourecId = resource;
     }
     @Override
     public View getView( int position, View convertView, ViewGroup parent) {
            // TODO Auto-generated method stub
            /* return super.getView(position, convertView, parent); */
           News news = getItem( position);

           View view;
            if ( convertView == null) {
                 view = LayoutInflater.from(getContext()).inflate( resourecId, null);
           } else {
                 view = convertView;
           }
           TextView newTitleText = (TextView) view.findViewById(R.id. news_title);
            newTitleText.setText( news.getTitle());
            return view;
     }

7,即是列表又是碎片布局的xml文件关联的碎片标题类NewsTitleFragment.java

public class NewsTitleFragment extends Fragment implements OnItemClickListener {
     private ListView newsTitleListView;
     private List<News> newsList;
     private NewsAdapter adapter;
     private boolean isTwoPane;

     @Override
     public void onAttach(Activity activity) {
            // TODO Auto-generated method stub
            super.onAttach( activity);
            // 初始化数据
            newsList = getNews();
        adapter=new NewsAdapter( activity, R.layout. news_item, newsList);
     }

     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            // TODO Auto-generated method stub
           View view= inflater.inflate(R.layout. news_title_frag, container, false);
         newsTitleListView=(ListView) view.findViewById(R.id. news_title_list_view);
            newsTitleListView.setAdapter( adapter);
            newsTitleListView.setOnItemClickListener( this);
            return view;
           
     }    
     @Override
     public void onActivityCreated(Bundle savedInstanceState) {
            // TODO Auto-generated method stub
            super.onActivityCreated( savedInstanceState);
            if (getActivity().findViewById(R.id.news_content_layout )!=null) {
                 //可以找到news_content-fragment布局的时候，为双页布局
                 isTwoPane= true;
           } else {
          isTwoPane= false;
           }
     }
     
     /*
      * 初始化数据
      */
     private List<News> getNews() {
            // TODO Auto-generated method stub
           List<News> newsList1 = new ArrayList<News>();
           News new1 = new News();
           News new2 = new News();
            new1.setTitle( "这是标题1");
            new1.setContent( "xxxx是的，这就是标题1的内容xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" );
            new2.setTitle( "这是标题2");
            new2.setContent( "yyyy是的，这就是标题2的内容yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy" );
            newsList1.add( new1);
            newsList1.add( new2);
            return newsList1;
     }

     @Override
     public void onItemClick(AdapterView<?> parent, View view, int position,
                 long id) {
            // TODO Auto-generated method stub
           News news= newsList.get( position);
            if( isTwoPane){
                 //双页模式，刷新NewsContentFragment中的内容
           NewsContentFragment newsContentFragment=(NewsContentFragment) getFragmentManager().findFragmentById(R.id.news_content_fragment );
            newsContentFragment.refresh( news.getTitle(), news.getContent());
           } else{
           NewsContentActivity. actionStart(getActivity(), news.getTitle(), news.getContent());
           }
     }
}

8，右边的碎片布局news_content.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width= "match_parent"
    android:layout_height= "match_parent"
    android:orientation="vertical" >
    <fragment
        android:id= "@+id/news_content_fragment"
        android:name= "com.example.fragmentbasepractice.NewsContentFragment"
        android:layout_width= "match_parent"
        android:layout_height= "match_parent"
        />
</LinearLayout>

9,右边碎片中的具体小布局news_content_frag.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width= "match_parent"
    android:layout_height= "match_parent">  
<LinearLayout
    android:id="@+id/visibility_layout"
    android:layout_width= "match_parent"
    android:layout_height= "match_parent"
    android:orientation="vertical"
 android:visibility="invisible" >  
    <TextView
        android:id= "@+id/news_title"
        android:layout_width= "match_parent"
        android:layout_height= "wrap_content"
        android:gravity= "center"
        android:padding= "10dp"
        android:textSize= "20sp"
        />
    <ImageView
        android:layout_width= "match_parent"
        android:layout_height= "1dp"
        android:scaleType= "fitXY"
        android:src= "@drawable/spilt_line"
        />  
    <TextView
        android:id= "@+id/news_content"
        android:layout_width= "match_parent"
        android:layout_height= "0dp"
        android:layout_weight= "1"
        android:padding= "15dp"
        android:textSize= "18sp"
        />
    </LinearLayout >
    <ImageView
        android:layout_width= "1dp"
        android:layout_height= "match_parent"
        android:layout_alignParentLeft="true"
        android:scaleType= "fitXY"
        android:src= "@drawable/spilt_line_vertical"
        />

</RelativeLayout>

10,右边碎片具体小布局关联的类NewsContentFragment.java

public class NewsContentFragment extends Fragment {
     private View view;
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            // TODO Auto-generated method stub
            view = inflater.inflate(R.layout. news_content_frag, container, false);
            return view;
     }
     public void refresh(String newsTitle, String newsContent) {
           View visibilityLayout = view.findViewById(R.id. visibility_layout);
            visibilityLayout.setVisibility(View. VISIBLE);
           TextView newsTitleText = (TextView) view.findViewById(R.id. news_title);
           TextView newsContentText = (TextView) view
                     .findViewById(R.id. news_content);
            // 刷新新闻的标题
            newsTitleText.setText( newsTitle);
         //刷新新闻的内容
            newsContentText.setText( newsContent);
     }
}

11,另外我们还加了一个显示新闻中的内容，只在后面响应单机事件的时候会出发这个活动的启动，跳出一个新的界面活动NewsContentActivity.java

public class NewsContentActivity extends Activity {
     public static void actionStart(Context context, String newsTitle,
                String newsContent) {
  Intent intent=new Intent(context, NewsContentActivity. class);
  intent .putExtra("news_title" , newsTitle );
  intent .putExtra("news_content" , newsContent );
     context.startActivity( intent);
     }
     
     @Override
     protected void onCreate(Bundle savedInstanceState) {
            // TODO Auto-generated method stub
            super.onCreate( savedInstanceState);
           requestWindowFeature(Window. FEATURE_NO_TITLE);
           setContentView(R.layout. news_content);
           
            //获取传入的新闻标题
           String newsTitle=getIntent().getStringExtra( "news_title");
            //获取传入的新闻内容
           String newsContent=getIntent().getStringExtra( "news_content");
           
           NewsContentFragment newsContentFragment=(NewsContentFragment) getFragmentManager().findFragmentById(R.id.news_content_fragment );
       //刷新NewsContentFragment界面
            newsContentFragment.refresh( newsTitle, newsContent);
     }

效果如下：