Android学习笔记五—简易新闻应用设计

由于平板Pad屏幕尺寸一般都比较大，在展示内容时，可以同时展示更多信息，如左侧是导航列表，右侧是具体内容（双页模式）。而手机，因为屏幕尺寸限制，只能显示一部分信息，或者是左侧导航列表，或者是右侧具体内容（单页模式）。通常在设计时，需要设计手机版和Pad版。本文为兼容手机和平板，使用碎片Fragment进行设计，可兼容两种屏幕尺寸。
简易新闻应用思路如下：为展示新闻标题列表和新闻内容，需要使用两个碎片，一个用于承载左侧新闻标题列表的碎片NewsTitleFragment，一个用于承载右侧新闻内容的碎片NewsContentFragment。左侧新闻标题列表布局文件news_title_frag.xml，使用RecyclerView控件。使用RecyclerView时，还需要设计其子项的布局，用于展示新闻标题，布局文件为news_item.xml。右侧新闻内容布局文件为news_content_frag.xml。
在res目录下新建layout-sw600dp文件夹，然后在该文件下再新建一个activity_main.xml布局文件，该布局文件引入两个碎片，一个是承载左侧新闻标题列表的碎片NewsTitleFragment，一个是承载新闻内容的碎片NewsContentFragment。运行时，在屏幕超过600dp时，系统自动调用layout-sw600dp文件夹下的布局文件activity_main.xml，实现双页模式。否则就调用layout文件夹下的activity_main.xml布局文件。
为实现手机的单页模式，还需要新建一个活动NewsContentActivity，布局文件为news_content.xml，该布局文件通过android:name可复用news_content_frag.xml文件的布局。
具体设计步骤如下：
首先新建一个Android项目，采用默认设置。
1.新闻列表采用RecyclerView展示，需要在build.gradle中添加RecycleView的依赖库。
2.新闻主要是标题和新闻内容，因此新建新闻实体类，其属性分别是标题title和内容content。

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;}
}

3.新建左侧新闻标题列表布局文件news_title_frag.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.RecyclerView
        android:id="@+id/news_title_recycler_view"android:layout_width="match_parent"android:layout_height="match_parent"/></LinearLayout>

4.新建新闻标题列表子项布局news_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="wrap_content"><TextView
        android:id="@+id/news_title"android:layout_width="match_parent"android:layout_height="wrap_content"android:singleLine="true"android:ellipsize="end"/></LinearLayout>

5.新建左侧新闻标题列表碎片NewsTitleFragment，该类继承Fragment

public class NewsTitleFragment extends Fragment {private boolean isTwoPane;//是否双页模式@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view=inflater.inflate(R.layout.news_title_frag,container,false);return view;}@Overridepublic void onActivityCreated(@Nullable Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);}}

6.新建新闻内容布局文件news_content_frag.xml

<?xml version="1.0" encoding="utf-8"?>
<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:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"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"android:text="新闻标题"/><View
            android:layout_width="match_parent"android:layout_height="1dp"android:background="#000"/><TextView
            android:id="@+id/news_content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:padding="10dp"android:textSize="18sp"/></LinearLayout><View
        android:layout_width="1dp"android:layout_height="match_parent"android:layout_alignParentLeft="true"android:background="#000"/></RelativeLayout>

7.新建新闻内容碎片类NewsContentFragment

public class NewsContentFragment extends Fragment {private View view;@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {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);}
}

8.在res目录下新建layout-sw600dp文件夹，并再新建一个activity_main.xml布局文件。如下所示：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="match_parent"><fragment
        android:id="@+id/news_title_fragment"android:name="com.meizu.xingnana.fragmentbestpractice.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"//代码复用，直接在布局中引入NewsContentFragment，这样也相当于把news_content_frag.xml布局的内容自动加了进来android:name="com.meizu.xingnana.fragmentbestpractice.NewsContentFragment"android:layout_width="match_parent"android:layout_height="match_parent"/></FrameLayout>
</LinearLayout>

上述代码表示，该布局同时添加了两个碎片fragment，并将新闻内容的碎片放在了FrameLayout布局中，该布局id为news_content_layout，可通过能否找到该id，判断是单页模式，还是双页模式。将在下文NewsTitleFragment类中给出代码。
9.新建活动NewsContentActivity，布局文件为news_content.xml
活动NewsContentActivity如下：

public class NewsContentActivity extends AppCompatActivity {//启动活动,传入新闻标题和新闻内容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);}@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.news_content);String newsTitle=getIntent().getStringExtra("news_title");//获取传入的新闻标题String newsContent=getIntent().getStringExtra("news_content");NewsContentFragment newsContentFragment=(NewsContentFragment) getSupportFragmentManager().findFragmentById(R.id.news_content_fragment);newsContentFragment.refresh(newsTitle,newsContent);//刷新NewsContentFragment界面}
}

布局文件news_content.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/news_content"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><fragment
        android:id="@+id/news_content_fragment"android:name="com.meizu.xingnana.fragmentbestpractice.NewsContentFragment"android:layout_width="match_parent"android:layout_height="match_parent"/></LinearLayout>

上述代码表示，在单页模式下，只会加载新闻标题的碎片。
10.最后一步，为RecyclerView填充数据。
10.1 在NewsTitleFragment类中增加适配器类NewsAdapter，该类作为NewsTitleFragment的内部类，该类可将数据和RecyclerView关联起来。

    //内部类，新闻适配器class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder>{private List<News> mNewsList;class ViewHolder extends RecyclerView.ViewHolder{TextView newsTitleText;public ViewHolder(View view){super(view);newsTitleText=(TextView)view.findViewById(R.id.news_title);}}public NewsAdapter(List<News> newsList){mNewsList=newsList;}@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view=LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item,parent,false);final ViewHolder holder=new ViewHolder(view);//RecyclerView子项点击事件view.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {News news=mNewsList.get(holder.getAdapterPosition());if(isTwoPane){//双页模式NewsContentFragment newsContentFragment=(NewsContentFragment)getFragmentManager().findFragmentById(R.id.news_content_fragment);newsContentFragment.refresh(news.getTitle(),news.getContent());}else {//单页模式NewsContentActivity.actionStart(getActivity(),news.getTitle(),news.getContent());}}});return holder;}@Overridepublic void onBindViewHolder(ViewHolder holder, int position) {News news=mNewsList.get(position);holder.newsTitleText.setText(news.getTitle());}@Overridepublic int getItemCount() {return mNewsList.size();}}

10.2制造数据源

//新闻数据源private List<News> getNews(){List<News> newsList=new ArrayList<>();for(int i=1;i<=50;i++){News news=new News();news.setTitle("新闻标题"+i);news.setContent(getRandomLengthContent("新闻内容"+i));newsList.add(news);}return newsList;}private String getRandomLengthContent(String content){Random random=new Random();int length=random.nextInt(20)+1;StringBuilder builder=new StringBuilder();for(int i=0;i<length;i++){builder.append(content);}return builder.toString();}

10.3获得RecyclerView，并添加适配器

RecyclerView newsTitleRecyclerView=(RecyclerView)view.findViewById(R.id.news_title_recycler_view);LinearLayoutManager layoutManager=new LinearLayoutManager(getActivity());newsTitleRecyclerView.setLayoutManager(layoutManager);NewsAdapter adapter=new NewsAdapter(getNews());newsTitleRecyclerView.setAdapter(adapter);

完整的NewsTitleFragment类如下：

public class NewsTitleFragment extends Fragment {private boolean isTwoPane;@Nullable@Overridepublic View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view=inflater.inflate(R.layout.news_title_frag,container,false);RecyclerView newsTitleRecyclerView=(RecyclerView)view.findViewById(R.id.news_title_recycler_view);LinearLayoutManager layoutManager=new LinearLayoutManager(getActivity());newsTitleRecyclerView.setLayoutManager(layoutManager);NewsAdapter adapter=new NewsAdapter(getNews());newsTitleRecyclerView.setAdapter(adapter);return view;}@Overridepublic void onActivityCreated(@Nullable Bundle savedInstanceState) {super.onActivityCreated(savedInstanceState);if(getActivity().findViewById(R.id.news_content_layout)!=null){isTwoPane=true;//可以找到news_content_layout时，为双页布局}else {isTwoPane=false;}}//新闻数据源private List<News> getNews(){List<News> newsList=new ArrayList<>();for(int i=1;i<=50;i++){News news=new News();news.setTitle("新闻标题"+i);news.setContent(getRandomLengthContent("新闻内容"+i));newsList.add(news);}return newsList;}private String getRandomLengthContent(String content){Random random=new Random();int length=random.nextInt(20)+1;StringBuilder builder=new StringBuilder();for(int i=0;i<length;i++){builder.append(content);}return builder.toString();}//内部类，新闻适配器class NewsAdapter extends RecyclerView.Adapter<NewsAdapter.ViewHolder>{private List<News> mNewsList;class ViewHolder extends RecyclerView.ViewHolder{TextView newsTitleText;public ViewHolder(View view){super(view);newsTitleText=(TextView)view.findViewById(R.id.news_title);}}public NewsAdapter(List<News> newsList){mNewsList=newsList;}@Overridepublic ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {View view=LayoutInflater.from(parent.getContext()).inflate(R.layout.news_item,parent,false);final ViewHolder holder=new ViewHolder(view);//RecyclerView子项点击事件view.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {News news=mNewsList.get(holder.getAdapterPosition());if(isTwoPane){//双页模式NewsContentFragment newsContentFragment=(NewsContentFragment)getFragmentManager().findFragmentById(R.id.news_content_fragment);newsContentFragment.refresh(news.getTitle(),news.getContent());}else {//单页模式NewsContentActivity.actionStart(getActivity(),news.getTitle(),news.getContent());}}});return holder;}@Overridepublic void onBindViewHolder(ViewHolder holder, int position) {News news=mNewsList.get(position);holder.newsTitleText.setText(news.getTitle());}@Overridepublic int getItemCount() {return mNewsList.size();}}
}

到此，整个设计完成，分别在手机和平板运行该程序，有两种不同的效果，对两种设备有很好的兼容。

Android学习笔记五—简易新闻应用设计相关推荐

android学习笔记五。2、其他组件
一.ContentProvider内容提供者.是是android中一个应用向第三方共享数据的方式,android中的联系人,sms(短信记录)等都是通过这一方式来向外提供的 1.使用: 在应用中使用C ...
Android学习笔记第五篇--网络连接与云服务(一)
Android学习笔记第五篇–网络连接与云服务第一章.无线连接设备除了能够在云端通讯,Android的无线API也允许在同一局域网内的设备通讯,**甚至没有连接网络,而是物理具体相近,也可以相 ...
【转】Pro Android学习笔记（二五）：用户界面和控制（13）：LinearLayout和TableLayout...
目录(?)[-] 布局Layout 线性布局LinearLayout 表格布局TableLayout 布局Layout Layout是容器,用于对所包含的view进行布局.layout是view的子类 ...
Android学习笔记之（一）开发环境搭建
Android学习笔记之(一)开发环境搭建 zouxy09@qq.com http://blog.csdn.net/zouxy09 至于说Android是什么之类的俺就不啰嗦了,因为它离我们太近了.直 ...
Android学习笔记：Android基础知识点（不断更新中）
1.Android学习笔记:OkHttp 2.Android学习笔记:更新UI的方法(UI线程和非UI线程) 3.Android学习笔记:Volley 4.Android学习笔记:Handler 5. ...
android jackson xml,[Android学习笔记]jackson库的使用
Jackson库一般用于序列化和反序列化操作,通常会涉及到的操作是: 1. Java Object -> Json String 2. Java Object -> Xml String ...
python函数是一段具有特定功能的语句组_Python学习笔记(五)函数和代码复用
本文将为您描述Python学习笔记(五)函数和代码复用,具体完成步骤: 函数能提高应用的模块性,和代码的重复利用率.在很多高级语言中,都可以使用函数实现多种功能.在之前的学习中,相信你已经知道Pyth ...
Android学习笔记36：使用SQLite方式存储数据
在Android中一共提供了5种数据存储方式,分别为: (1)Files:通过FileInputStream和FileOutputStream对文件进行操作.具体使用方法可以参阅博文<Andro ...
【AngularJs学习笔记五】AngularJS从构建项目开始
为什么80%的码农都做不了架构师?>>> #0 系列目录# AngularJs学习笔记 [AngularJs学习笔记一]Bower解决js的依赖管理 [AngularJs学习笔 ...

Android学习笔记五—简易新闻应用设计

Android学习笔记五—简易新闻应用设计相关推荐

最新文章

热门文章