ViewPager+FragmentPagerAdapter实现简单新闻客户端

2016-03-19 22:29 阅读 6,029 次 评论 10 条
版权声明:本文著作权归TeachCourse所有,未经许可禁止转载,谢谢支持!
转载请注明出处:http://teachcourse.cn/1590.html

一、摘要

今天工作那么久第一次加班,加班的目的修改已完成大部分的新闻列表的接口,早上一个上午在思考如何在Activity和Fragment之间传递值,Google搜索了一下发现,使用setArguments()和getArguments()方法可以实现,但是集合到现有的掌声平桂APP开发中,一直报错,调试一次次都没法解决,干脆不做了,心烦。。。
004-ViewPager+FragmentPagerAdapter demo

二、查看官方Demo

Google的官方Demo介绍如何使用FragmentPagerAdapter在一个Activity中添加多个Fragment,这些Fragment之间除了传递的参数不一样外,展示的样式和布局都是一样的,有一种恍然一醒的感觉,以前自己的做法是每个Fragment创建一个类,如果有四个Fragment就创建四个,这样做显得有点多余,在官网的Demo里面只有一个Fragment,同时可以在一个ViewPager中创建了无数个Fragment,处理的思路:1、首先创建一个Fragment模板,2、在Fragment构造方法中传递不同的参数,3、重复创建多个Fragment

于是改变一下以往的思路,根据官网提供的做法,自己先创建了一个Demo,项目的结构如下:
001-construction

三、项目结构分析

PagerSlidingTabStrip:

这是一个网上别人封装好的一个自定义View,该类的作用——实现新闻头部拖动或手势滑动切换Fragment的效果,在布局文件activity_main中添加,如下图:
002-navigation

MainActivity:

主要的界面,初始化ViewPager、PagerSlidingTabStrip视图,同时设置ViewPager的FragmentPagerAdapter适配器,这一步设置创建多个Fragment,然后在Fragment设置UI界面。

WebViewFragment:

该类用于获取从MainActivity类传递过来的实参,然后展示,这里直接使用一个WebView控件加载网页,还可以像很多新闻一样获取后台新闻数据,然后排版成新闻列表的样式,如果之前你看过《Android开发之ListView添加多种布局效果演示》这篇文章,你会发现新闻列表之间其实就是多个Fragment,然后添加不同的新闻数据,所以WebViewFragment最终的样式效果,可以根据需要更改。

NewsBean:

这是一个新闻实体,添加了title和url两个属性,一个显示Fragment头部滚动的栏目,一个在WebViewFragment中加载TeachCourse博客栏目页面。

基本思路就是这样子,然后开始完善每个类的代码。再一次验证以前说过的一句话:编程的思路决定出路,有很多时候问题并不是真的很难解决,换个思路考虑,理清楚逻辑比你绞尽脑汁思考要重要得多,总结了那么多,发现还是一塌糊涂
003-layout

四、代码实现

添加webview_fragment.xml布局代码:

  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.     <WebView   
  6.         android:id="@+id/webview_id"  
  7.         android:layout_width="match_parent"  
  8.         android:layout_height="match_parent"/>  
  9.   
  10. </RelativeLayout>  

WebViewFragment重写onCreate()、onCreateView()两个方法,在构造方法中设置传入的参数,并在onCreateView()方法中获取

  1. public class WebViewFragment extends Fragment {  
  2.     String mUrlString;// Activity传递过来的url地址  
  3.   
  4.     /** 
  5.      * 创建多个Fragment,根据传递的值 
  6.      *  
  7.      * @param url 
  8.      * @return 
  9.      */  
  10.     public static WebViewFragment newInstance(String url) {  
  11.         WebViewFragment fragment = new WebViewFragment();  
  12.         Bundle args = new Bundle();  
  13.         args.putString("url", url);  
  14.   
  15.         fragment.setArguments(args);  
  16.         return fragment;  
  17.     }  
  18.       
  19.     /** 
  20.      * 获取传递过来的URL地址 
  21.      *  
  22.      *  
  23.      *  
  24.      */  
  25.     @Override  
  26.     public void onCreate(@Nullable Bundle savedInstanceState) {  
  27.         // TODO Auto-generated method stub  
  28.         super.onCreate(savedInstanceState);  
  29.         mUrlString = getArguments() != null ? getArguments().getString("url")  
  30.                 : "";  
  31.     }  
  32.       
  33.     /* 
  34.      * 初始化布局,并显示URL地址对应的网页 
  35.      *  
  36.      */  
  37.     @Override  
  38.     @Nullable  
  39.     public View onCreateView(LayoutInflater inflater,  
  40.             @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {  
  41.         super.onCreateView(inflater, container, savedInstanceState);  
  42.           
  43.         View view=inflater.inflate(R.layout.webview_fragment, container,false);  
  44.         //获取WebView控件  
  45.         WebView mWebView=(WebView)view.findViewById(R.id.webview_id);  
  46.         WebSettings setting=mWebView.getSettings();  
  47.         setting.setJavaScriptEnabled(true);//设置支持JavaScript  
  48.         mWebView.setWebViewClient(new WebViewClient());  
  49.         mWebView.loadUrl(mUrlString);  
  50.         return view;  
  51.           
  52.     }  
  53.   
  54. }  

添加activity_main.xml布局代码:

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     tools:context="cn.teachcourse.main.MainActivity" >  
  6.   
  7.     <RelativeLayout  
  8.         android:id="@+id/main_news_rr"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent"  
  11.         android:visibility="visible" >  
  12.   
  13.         <cn.teachcourse.main.view.PagerSlidingTabStrip  
  14.             android:id="@+id/tabs"  
  15.             android:layout_width="match_parent"  
  16.             android:layout_height="40dp" />  
  17.   
  18.         <android.support.v4.view.ViewPager  
  19.             android:id="@+id/pager"  
  20.             android:layout_width="match_parent"  
  21.             android:layout_height="wrap_content"  
  22.             android:layout_below="@+id/tabs" />  
  23.     </RelativeLayout>  
  24.   
  25. </RelativeLayout>  

MainActivity类实现:

  • 在该类中添加了MyPagerAdapter内部类继承FragmentPagerAdapter,必须重写getCount()和getItem()方法两个方法,在getItem()中调用WebViewFragment中newInstance()返回一个Fragment,这一步是是关键,当前getCount()返回的个数决定创建Fragment的个数
  • 初始布局文件,获取控件ViewPager、PagerSlidingTabStrip,并添加ViewPager的适配器MyPagerAdapter
    1. pager.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));  
  • 设置PagerSlidingTabStrip的一些基本属性(通用的代码,不理解也没关系)
    1. tabs.setViewPager(pager);  
    2. // 设置Tab是自动填充满屏幕的  
    3. tabs.setShouldExpand(true);  
    4. // 设置Tab的分割线是透明的  
    5. tabs.setDividerColor(Color.TRANSPARENT);  
    6. // 设置Tab底部线的高度  
    7. tabs.setUnderlineHeight((int) TypedValue.applyDimension(  
    8. TypedValue.COMPLEX_UNIT_DIP, 1, dm));  
    9. // 设置Tab Indicator的高度  
    10. tabs.setIndicatorHeight((int) TypedValue.applyDimension(  
    11.                         TypedValue.COMPLEX_UNIT_DIP, 4, dm));  
    12. // 设置Tab标题文字的大小  
    13. tabs.setTextSize((int) TypedValue.applyDimension(  
    14.                         TypedValue.COMPLEX_UNIT_SP, 16, dm));  
    15. // 设置Tab Indicator的颜色  
    16. tabs.setIndicatorColor(Color.parseColor("#9c231b"));  
    17. // 设置选中Tab文字的颜色 (这是我自定义的一个方法)  
    18. tabs.setSelectedTextColor(Color.parseColor("#9c231b"));  
    19. // 取消点击Tab时的背景色  
    20. tabs.setTabBackground(0);  
  • Demo使用一个工作线程获取NewsBean实体数据,如果你需要获取服务器数据,子线程是必须的,防止阻塞主线程,具体代码:
    1. private void setValues() {  
    2.   
    3.         Runnable run = new Runnable() {  
    4.   
    5.             @Override  
    6.             public void run() {  
    7.                 mList.add(new NewsBean("Android移动开发",  
    8.                         "http://teachcourse.cn/cat/android"));  
    9.                 mList.add(new NewsBean("Android Studio",  
    10.                         "http://teachcourse.cn/cat/android-studio"));  
    11.                 mList.add(new NewsBean("Genymotion",  
    12.                         "http://teachcourse.cn/cat/android/android-genymotion"));  
    13.                 mList.add(new NewsBean("Eclipse",  
    14.                         "http://teachcourse.cn/cat/android/android-eclipse"));  
    15.                 mList.add(new NewsBean("忘不掉的旅行""http://go.teachcourse.cn/"));  
    16.   
    17.                 mHandler.sendEmptyMessage(MESSAGE_REFRESH);  
    18.             }  
    19.         };  
    20.         mHandler.post(run);  
    21.     }  

NewsBean实体类:

  1. public class NewsBean implements Serializable {  
  2.   
  3.     /** 
  4.      *  
  5.      */  
  6.     private static final long serialVersionUID = 1L;  
  7.       
  8.     private String title;  
  9.     private String url;  
  10.   
  11.     public NewsBean(String title, String url) {  
  12.         super();  
  13.         this.title = title;  
  14.         this.url = url;  
  15.     }  
  16.     public String getTitle() {  
  17.         return title;  
  18.     }  
  19.     public void setTitle(String title) {  
  20.         this.title = title;  
  21.     }  
  22.     public String getUrl() {  
  23.         return url;  
  24.     }  
  25.     public void setUrl(String url) {  
  26.         this.url = url;  
  27.     }  
  28.       
  29.   
  30. }  

五、manifest添加权限

访问网络需要添加如下权限:

  1. <uses-permission android:name="android.permission.INTERNET"/>  

六、推荐阅读:

AsyncTask==Handler+Thread对比使用说明

ProgressBar+WebView实现自定义浏览器

关注公众号 扫一扫二维码,加我QQ

如果文章对你有帮助,欢迎点击上方按钮关注作者

来源:TeachCourse每周一次,深入学习Android教程,关注(QQ1589359239或公众号TeachCourse)
转载请注明出处:http://teachcourse.cn/1590.html

资源分享

源码下载
”Found 2 version of android-support-v4.jar in the dependency list“解决思路 ”Found 2 version of android-
浅谈SortedList方法使用 浅谈SortedList方法使用
WebView加载HTML5视频退出后无法停止播放问题解决办法 WebView加载HTML5视频退出
Android开发之枚举(Enum)在实际项目中的应用 Android开发之枚举(Enum)在实

发表评论

呲牙 憨笑 坏笑 偷笑 色 微笑 抓狂 睡觉 酷 流汗 鼓掌 大哭 可怜 疑问 晕 惊讶 得意 尴尬 发怒 奋斗 衰 骷髅 啤酒 吃饭 礼物 强 弱 握手 OK NO 勾引 拳头 差劲 爱你

表情

  1. JACK的机器人
    JACK的机器人 【农民】 @回复

    之前做一个类似文件管理器的项目时,也遇到过Fragment复用的问题,最初使用的就是对一个类绑定的
    Fragment反复切换复用,基本相当于一个类可以有无数个Fragment。但是,由于是使用的ListView进行文件列表显示,最终还是直接更新适配器数据效率更高,而且无闪现效果。

  2. 米粒博客
    米粒博客 【队长】 @回复

    很实用 晚上捣鼓捣鼓

    • TeachCourse博主
      TeachCourse博主 【县长】【站长】 @回复

      没事,就当是娱乐一下也好!!

  3. 爱你文字网
    爱你文字网 【农民】 @回复

    下午好,表示我没看懂

    • TeachCourse博主
      TeachCourse博主 【县长】【站长】 @回复

      没事,谈谈飘过!!谢谢互粉。。

  4. 深圳SEO
    深圳SEO 【农民】 @回复

    不懂,学习一下。

  5. 明月登楼
    明月登楼 【农民】 @回复

    没有看懂,但还是要纯支持一下的!