码迷，mamicode.com
首页 > 移动开发 > 详细

Android应用经典主界面框架之二:仿网易新闻客户端、CSDN 客户端 (Fragment ViewPager)

时间：2014-12-23 15:14:56      阅读：207      评论：0      收藏：0      [点我收藏+]

标签：

第二种主界面风格则是以网易新闻、凤凰新闻以及新推出的新浪博客(阅读版)为代表，使用ViewPager+Fragment，即ViewPager里适配器里放的不是一般的View，而是Fragment。所以适配器不能继承PagerAdapter，而要继承FragmentPagerAdapter，这是在android.support.v4.app.FragmentPagerAdapter包里的。有点奇葩的是，FragmentPagerAdapter只在这个包里有，在android.app.*这个包下面么有。到后面会发现，只能用android.support.v4.app.*包下面的东西。两个包里的FragmentManager是不通用的，而且两个包里提供的Fragment也不大一样。如果继承android.app.*下的Fragment，则不能重新写构造函数，只能用默认的。v4的包里么有这个限制。

下图是网易新闻、凤凰新闻、新浪博客的截图:

技术分享

 

关于仿网易新闻客户端代码已经很多了，本人主要根据开源的这个CSDN客户端的制作，准备一步步搞下。这本是一个大牛之作发在oschina上，参考链接里分5步去实现。我看了它的代码，是染在一起的。比如要完这个导航不需要额外的三个包，而他的资源里是弄一起的。所以准备自己玩玩，顺便记录开发中的问题。

第一步：最上面的导航栏

即有“网易新闻”四个大字这一栏。布局文件head_title_panel.xml：

 

[html] view plaincopyprint?技术分享技术分享
 
  1. <span style="font-family:Comic Sans MS;font-size:18px;"><?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:background="@color/light_blue"  
  6.     android:orientation="horizontal" >  
  7.   
  8.     <ImageView  
  9.         android:id="@+id/headIcon"  
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="wrap_content"  
  12.         android:layout_gravity="center_vertical"  
  13.         android:layout_marginLeft="8dp"  
  14.         android:layout_marginRight="4dp"  
  15.         android:src="@drawable/biz_navigation_tab_news_pressed" />  
  16.   
  17.     <ImageView  
  18.         android:id="@+id/headDivider"  
  19.         android:layout_width="wrap_content"  
  20.         android:layout_height="wrap_content"  
  21.         android:layout_gravity="center_vertical"  
  22.         android:layout_marginLeft="4dp"  
  23.         android:layout_marginRight="4dp"  
  24.         android:src="@drawable/base_action_bar_back_divider" />  
  25.   
  26.     <TextView  
  27.         android:id="@+id/headTV"  
  28.         android:layout_width="0dp"  
  29.         android:layout_height="wrap_content"  
  30.         android:layout_gravity="center_vertical"  
  31.         android:layout_marginLeft="4dp"  
  32.         android:layout_weight="1"  
  33.         android:text="CSDN资讯"  
  34.         android:textColor="@color/white"  
  35.         android:textSize="21sp"  
  36.         android:textStyle="bold">  
  37.     </TextView>  
  38.   
  39.   
  40. </LinearLayout></span>  

为了日后操作上的方便，我将它映射成一个HeadTitlePanel.java文件，可以看到这种写法跟上篇 上下panel的定义是有点区别的。

 

 

[java] view plaincopyprint?技术分享技术分享
 
  1. <span style="font-family:Comic Sans MS;font-size:18px;">package org.yanzi.ui;  
  2.   
  3. import org.yanzi.csdnproject.R;  
  4.   
  5. import android.content.Context;  
  6. import android.util.AttributeSet;  
  7. import android.view.LayoutInflater;  
  8. import android.view.View;  
  9. import android.widget.ImageView;  
  10. import android.widget.RelativeLayout;  
  11. import android.widget.TextView;  
  12.   
  13. public class HeadTitlePanel extends RelativeLayout {  
  14.   
  15.     private Context mContext;  
  16.     private TextView mHeadTV;  
  17.     private ImageView mHeadIcon;  
  18.     private ImageView mHeadDivider;  
  19.       
  20.     public HeadTitlePanel(Context context, AttributeSet attrs) {  
  21.         super(context, attrs);  
  22.         // TODO Auto-generated constructor stub  
  23.         mContext = context;  
  24.         View parent = LayoutInflater.from(mContext).inflate(R.layout.head_title_panel, this, true);  
  25.         mHeadTV = (TextView) parent.findViewById(R.id.headTV);  
  26.     }  
  27.   
  28.       
  29.   
  30. }  
  31. </span>  

 

第二步：ViewPager的导航栏

 

这个本来我是准备自己封装个的，网上也有用Radiobutton封装的，考虑到它这个导航栏还是不固定长度可以滑动的，时间原因暂时不封装了，使用开源Android-ViewPagerIndicator-master.zip 这个包，这个人的github链接：https://github.com/JakeWharton 将其中的library文件夹改名ViewPagerIndicator_library导进来。这个里面有好几种Indicator，我们主要用TabPageIndicator这个。

第三步：MainActivity的布局：

activity_main.xml

 

[html] view plaincopyprint?技术分享技术分享
 
  1. <span style="font-family:Comic Sans MS;font-size:18px;"><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.     android:background="#eee"  
  6.     tools:context=".MainActivity" >  
  7.   
  8.     <org.yanzi.ui.HeadTitlePanel  
  9.         android:id="@+id/head_title_panel"  
  10.         android:layout_width="match_parent"  
  11.         android:layout_height="wrap_content"  
  12.         android:layout_alignParentTop="true" />  
  13.   
  14.     <com.viewpagerindicator.TabPageIndicator  
  15.         android:id="@+id/page_indicator"  
  16.         android:layout_width="match_parent"  
  17.         android:layout_height="wrap_content"  
  18.         android:layout_below="@id/head_title_panel"  
  19.         android:background="@color/transparentblue" />  
  20.   
  21.     <android.support.v4.view.ViewPager  
  22.         android:id="@+id/view_pager"  
  23.         android:layout_width="match_parent"  
  24.         android:layout_height="match_parent"  
  25.         android:layout_below="@id/page_indicator"  
  26.        />  
  27.   
  28. </RelativeLayout></span>  

MainActivity.java

 

 

[java] view plaincopyprint?技术分享技术分享
 
  1. <span style="font-family:Comic Sans MS;font-size:18px;">package org.yanzi.csdnproject;  
  2.   
  3. import org.yanzi.viewpager.adapter.TabAdapter;  
  4.   
  5. import com.viewpagerindicator.TabPageIndicator;  
  6.   
  7. import android.os.Bundle;  
  8. import android.app.Activity;  
  9. import android.app.FragmentManager;  
  10. import android.view.Menu;  
  11. import android.support.v4.app.FragmentActivity;  
  12. import android.support.v4.app.FragmentPagerAdapter;  
  13. import android.support.v4.view.ViewPager;  
  14.   
  15. public class MainActivity extends FragmentActivity {  
  16. private TabPageIndicator mPageIndicator;  
  17. private ViewPager mViewPager;  
  18. private FragmentPagerAdapter fragPagerAdapter;  
  19.   
  20.     @Override  
  21.     protected void onCreate(Bundle savedInstanceState) {  
  22.         super.onCreate(savedInstanceState);  
  23.         setContentView(R.layout.activity_main);  
  24.         initUI();  
  25.           
  26.         fragPagerAdapter = new TabAdapter(getSupportFragmentManager());  
  27.         mViewPager.setAdapter(fragPagerAdapter);  
  28.         mPageIndicator.setViewPager(mViewPager, 0);  
  29.           
  30.           
  31.     }  
  32.   
  33.     @Override  
  34.     public boolean onCreateOptionsMenu(Menu menu) {  
  35.         // Inflate the menu; this adds items to the action bar if it is present.  
  36.         getMenuInflater().inflate(R.menu.main, menu);  
  37.         return true;  
  38.     }  
  39.     private void initUI(){  
  40.         mPageIndicator = (TabPageIndicator)findViewById(R.id.page_indicator);  
  41.         mViewPager = (ViewPager)findViewById(R.id.view_pager);  
  42.     }  
  43.   
  44. }  
  45. </span>  


出奇的简单，比单纯用Fragment还简单，原因是只需把Fragment塞到适配器里就ok了，适配器为我们做了Fragment的切换等工作，我们能做的也就是在适配器里new Fragment的时候判断是否已存在。以下几点需要注意:

 

1、在styles.xml里它定义了样式:

 

[html] view plaincopyprint?技术分享技术分享
 
  1. <span style="font-family:Comic Sans MS;font-size:18px;">    <style name="MyTheme" parent="AppBaseTheme">  
  2.         <item name="vpiTabPageIndicatorStyle">@style/MyWidget.TabPageIndicator</item>  
  3.         <item name="android:windowBackground">@drawable/init_pic</item>  
  4.         <item name="android:windowNoTitle">true</item>  
  5.         <item name="android:animationDuration">5000</item>  
  6.         <item name="android:windowContentOverlay">@null</item>  
  7.     </style>  
  8.     <style name="MyWidget.TabPageIndicator" parent="Widget">  
  9.         <item name="android:gravity">center</item>  
  10.         <item name="android:background">@drawable/vpi__tab_indicator</item>  
  11.         <item name="android:paddingLeft">22dip</item>  
  12.         <item name="android:paddingRight">22dip</item>  
  13.         <item name="android:paddingTop">8dp</item>  
  14.         <item name="android:paddingBottom">8dp</item>  
  15.         <item name="android:textAppearance">@style/MyTextAppearance.TabPageIndicator</item>  
  16.         <item name="android:textSize">16sp</item>  
  17.         <item name="android:maxLines">1</item>  
  18.     </style>  
  19.   
  20.     <style name="MyTextAppearance.TabPageIndicator" parent="Widget">  
  21.         <item name="android:textStyle">bold</item>  
  22.         <item name="android:textColor">@color/black</item>  
  23.     </style></span>  


这个是依赖于导进去的包的。

 

2、它这里用了android:windowBackground的属性，所以app开启瞬间会有图片弹出，之后设置MainActivity的布局背景为android:background="#eee"，又把图片替换了。如果不设android:background="#eee" 会一直看到这个图片不消失。

3、因为开篇讲的原因，MainActivity只能继承自FragmentActivity。

第四步：MainFragment.java,此类继承Fragment，且是android.support.v4.app.Fragment下的。

 

[java] view plaincopyprint?技术分享技术分享
 
  1. <span style="font-family:Comic Sans MS;font-size:18px;">package org.yanzi.fragment;  
  2.   
  3. import org.yanzi.csdnproject.R;  
  4.   
  5. import android.os.Bundle;  
  6. import android.support.v4.app.Fragment;  
  7. import android.view.LayoutInflater;  
  8. import android.view.View;  
  9. import android.view.ViewGroup;  
  10. import android.widget.TextView;  
  11.   
  12. public class MainFragment extends Fragment {  
  13.     private int mNewsType = 0;  
  14.   
  15.     @Override  
  16.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  17.             Bundle savedInstanceState) {  
  18.         // TODO Auto-generated method stub  
  19.         View v = inflater.inflate(R.layout.tab_item_fragment_main, null);  
  20.         TextView tip = (TextView) v.findViewById(R.id.id_tip);  
  21.         Bundle b = getArguments();  
  22.         String title = b.getString("TITLES");  
  23.         tip.setText(title);  
  24.         return v;  
  25.     }  
  26.     @Override  
  27.     public void onActivityCreated(Bundle savedInstanceState) {  
  28.         // TODO Auto-generated method stub  
  29.         super.onActivityCreated(savedInstanceState);  
  30.     }  
  31.       
  32.   
  33. }  
  34. </span>  

就是弄了一个布局，然后从中取得参数并显示。

 

第五步：ViewPager的适配器TabAdapter.java

 

[java] view plaincopyprint?技术分享技术分享
 
  1. <span style="font-family:Comic Sans MS;font-size:18px;">package org.yanzi.viewpager.adapter;  
  2.   
  3. import org.yanzi.constant.Constant;  
  4. import org.yanzi.fragment.MainFragment;  
  5.   
  6. import android.os.Bundle;  
  7. import android.support.v4.app.Fragment;  
  8. import android.support.v4.app.FragmentManager;  
  9. import android.support.v4.app.FragmentPagerAdapter;  
  10.   
  11. public class TabAdapter extends FragmentPagerAdapter {  
  12.   
  13.     public TabAdapter(FragmentManager fm) {  
  14.           
  15.         super(fm);  
  16.         // TODO Auto-generated constructor stub  
  17.     }  
  18.   
  19.     @Override  
  20.     public Fragment getItem(int position) {  
  21.         // TODO Auto-generated method stub  
  22.         MainFragment fragment = new MainFragment();  
  23.         Bundle b = new Bundle();  
  24.         String title = Constant.TITLES[position];  
  25.         b.putString("TITLES", title);  
  26.         fragment.setArguments(b);  
  27.         return fragment;  
  28.     }  
  29.   
  30.     @Override  
  31.     public CharSequence getPageTitle(int position) {  
  32.         // TODO Auto-generated method stub  
  33.         return Constant.TITLES[position];  
  34.     }  
  35.   
  36.     @Override  
  37.     public int getCount() {  
  38.         // TODO Auto-generated method stub  
  39.         return Constant.TITLES.length;  
  40.     }  
  41.   
  42. }  
  43. </span>  


主要是重写getItem，在这里实例化Fragment，同时设传递的参数。其实这里可以通过

[java] view plaincopyprint?技术分享技术分享
 
  1. <span style="font-family:Comic Sans MS;font-size:18px;">FragmentManager</span>  

按照Tag查找对应的Fragment是否存在，再进行实例化。

 

另外，getPageTitle这个接口必须重写，其实看TabPageIndicator.java这个类的实现可以发现，它需要传进去一个ViewPager，然后获得适配器，从适配器里得到Title。因为用了这个开源包，不能再用ViewPager的setOnPageChangeListener接口，只能用mPageIndicator.setOnPageChangeListener(listener)进行监听。

完毕，源码链接：链接：http://pan.baidu.com/s/1bn4EFbp 密码：dx4s

效果如下：

 

技术分享

 

 

 http://blog.csdn.net/yanzi1225627/article/details/31462007#comments

Android应用经典主界面框架之二:仿网易新闻客户端、CSDN 客户端 (Fragment ViewPager)

标签：

原文地址：http://www.cnblogs.com/cmblogs/p/4180005.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！