一.前言

　　今天实现开发者头条APP的首页。是本系列的第三篇文章，效果图如下:

　　从gif动态效果图中我们可以看出，最外层有三个tab(精选，订阅，发现)，在精选界面顶部有一个轮播的图片广告，广告下面是一个精选文章列表。

　　二.外层三个tab实现

　　我这里用Viewpager实现的，可以左右滑动，灵活的隐藏下面fragment的显示隐藏。

　　1.布局文件

　　布局文件比较简单，上面包涵三个TextView的RelativeLayout ＋ 下面的ViewPager

XML/HTML代码
  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.     android:background="@color/white_normal">  
  6.       
  7.     <RelativeLayout  
  8.         android:id="@+id/ll_title"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="44dp" >  
  11.   
  12.         <LinearLayout  
  13.             android:layout_width="match_parent"  
  14.             android:layout_height="match_parent"  
  15.             android:background="@color/main_color"  
  16.             android:orientation="horizontal" >  
  17.   
  18.             <TextView  
  19.                 android:id="@+id/tv_selected"  
  20.                 android:layout_width="0dp"  
  21.                 android:layout_height="wrap_content"  
  22.                 android:layout_gravity="center_vertical"  
  23.                 android:layout_weight="1"  
  24.                 android:gravity="center_horizontal"  
  25.                 android:text="精选"  
  26.                 android:textColor="@drawable/main_title_txt_sel" />  
  27.   
  28.             <TextView  
  29.                 android:id="@+id/tv_subscribe"  
  30.                 android:layout_width="0dp"  
  31.                 android:layout_height="wrap_content"  
  32.                 android:layout_gravity="center_vertical"  
  33.                 android:layout_weight="1"  
  34.                 android:gravity="center_horizontal"  
  35.                 android:text="订阅"  
  36.                 android:textColor="@drawable/main_title_txt_sel" />  
  37.   
  38.             <TextView  
  39.                 android:id="@+id/tv_find"  
  40.                 android:layout_width="0dp"  
  41.                 android:layout_height="wrap_content"  
  42.                 android:layout_gravity="center_vertical"  
  43.                 android:layout_weight="1"  
  44.                 android:gravity="center_horizontal"  
  45.                 android:text="发现"  
  46.                 android:textColor="@drawable/main_title_txt_sel" />  
  47.         </LinearLayout>  
  48.   
  49.         <View  
  50.             android:id="@+id/view_indicator"  
  51.             android:layout_width="15dp"  
  52.             android:layout_height="2dp"  
  53.             android:layout_alignParentBottom="true"  
  54.             android:background="@color/white_normal" />  
  55.     </RelativeLayout>  
  56.   
  57.     <android.support.v4.view.ViewPager  
  58.         android:id="@+id/viewpager_home"  
  59.         android:layout_width="match_parent"  
  60.         android:layout_height="match_parent"  
  61.         android:layout_below="@+id/ll_title"/>  
  62. </RelativeLayout>  

　　2.初始化三个Fragment 并且填充到ViewPager,给ViewPager设置改变监听。

Java代码
  1. vPager = (ViewPager) rootView.findViewById(R.id.viewpager_home);  
  2.           
  3. SelectedFragment selectedFragment=new SelectedFragment();  
  4. SubscribeFragment subscribeFragment=new SubscribeFragment();  
  5. FindFragment findFragment=new FindFragment();  
  6.           
  7. list.add(selectedFragment);  
  8. list.add(subscribeFragment);  
  9. list.add(findFragment);  
  10.           
  11. adapter = new FragmentAdapter(getActivity().getSupportFragmentManager(),list);  
  12. vPager.setAdapter(adapter);  
  13. vPager.setOffscreenPageLimit(2);  
  14. vPager.setCurrentItem(0);  
  15. vPager.setOnPageChangeListener(pageChangeListener);  

　　3.FragmentAdapter.java

　　继承FragmentStatePagerAdapter，Viewpager填充适配器，实现起来很简单。

Java代码
  1. /** 
  2.  * ViewPager适配器 
  3.  * @author ansen 
  4.  * @create time 2016-04-18 
  5.  */  
  6. public class FragmentAdapter extends FragmentStatePagerAdapter {  
  7.     private List<Fragment> list;  
  8.   
  9.     public FragmentAdapter(FragmentManager fm, List<Fragment> list) {  
  10.         super(fm);  
  11.         this.list = list;  
  12.     }  
  13.   
  14.     public FragmentAdapter(FragmentManager fm) {  
  15.         super(fm);  
  16.     }  
  17.   
  18.     @Override  
  19.     public Fragment getItem(int arg0) {  
  20.         return list.get(arg0);  
  21.     }  
  22.   
  23.     @Override  
  24.     public int getCount() {  
  25.         return list.size();  
  26.     }  
  27. }  

　　4.指示器初始化

　　当我们Viewpager滑动的时候需要滑动指示器，并且指示器的宽度占屏幕的三分之一，所以我们需要在activity创建的时候给指示器赋值哦，并且移动到起始位置。

Java代码
  1. private void initCursorPosition(){  
  2.         LayoutParams layoutParams=viewIndicator.getLayoutParams();  
  3.         layoutParams.width=screenWidth/3;  
  4.         viewIndicator.setLayoutParams(layoutParams);  
  5.           
  6.         TranslateAnimation animation = new TranslateAnimation(-screenWidth/3,0,0,0);  
  7.         animation.setFillAfter(true);  
  8.         viewIndicator.startAnimation(animation);  
  9. }  

　　5.Viewpager切换时应该做什么？

　　1).移动指示器

　　2).改变文字颜色

　　3).设置当前选中，指示器移动的时候需要用到。

Java代码
  1. private OnPageChangeListener pageChangeListener=new OnPageChangeListener() {  
  2.        @Override  
  3.        public void onPageSelected(int index){  
  4.            translateAnimation(index);//移动指示器  
  5.            changeTextColor(index);//改变文字颜色  
  6.            currentIndex=index;//设置当前选中  
  7.        }  
  8.          
  9.        @Override  
  10.        public void onPageScrolled(int arg0, float arg1, int arg2) {}  
  11.          
  12.        @Override  
  13.        public void onPageScrollStateChanged(int arg0) {}  
  14. };  

　　6.指示器移动方法translateAnimation

　　传入一个下标判断当前位置，然后判断上次的位置，知道从哪里移动到哪个位置，然后开启android自带的移动动画。

Java代码
  1. private void translateAnimation(int index){  
  2.         TranslateAnimation animation = null;  
  3.         switch (index){  
  4.         case 0://订阅->精选  
  5.             animation=new TranslateAnimation((screenWidth/3),0,0,0);  
  6.             break;  
  7.         case 1://  
  8.             if(0==currentIndex){//精选->订阅  
  9.                 animation=new TranslateAnimation(0,screenWidth/3,0,0);  
  10.             }else if(2==currentIndex){//发现->订阅  
  11.                 animation=new TranslateAnimation((screenWidth/3)*2,screenWidth/3,0,0);  
  12.             }  
  13.             break;  
  14.         case 2://订阅－》发现  
  15.             animation=new TranslateAnimation(screenWidth/3,(screenWidth/3)*2,0,0);  
  16.             break;  
  17.         }  
  18.         animation.setFillAfter(true);  
  19.         animation.setDuration(300);  
  20.         viewIndicator.startAnimation(animation);  
  21. }  

　　7.获取屏幕宽高

　　我这边把方法写在activity里面，在工作中大家最好把他放到工具类里面。

Java代码
  1. private void getScreenSize(Activity context) {  
  2.         DisplayMetrics dm = new DisplayMetrics();  
  3.         context.getWindowManager().getDefaultDisplay().getMetrics(dm);  
  4.         screenWidth = dm.widthPixels;  
  5.         screenHeight = dm.heightPixels;  
  6. }  

　　三."精选" Fragment实现

　　从整体来看，就是一个ListView，顶部轮播是ListView的头部。头部轮播也是用的ViewPager实现，起始这里跟我们第一篇文章讲的开发者头条APP启动页实现原理很相似。然后再加一个定时器隔一段时间设置ViewPager的当前页面即可。

　　说明:我们这里的图片用的是静态的，一个商业APP轮播图片肯定是从服务器获取的，开发者头条app就是从服务器获取。

　　1.头布局文件

　　就是一个ViewPager＋装载点点点的LinearLayout 然后外层布局设置一个高度200dp

XML/HTML代码
  1. <?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="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <RelativeLayout  
  8.         android:layout_width="wrap_content"  
  9.         android:layout_height="200dp" >  
  10.   
  11.         <android.support.v4.view.ViewPager  
  12.             android:id="@+id/viewpager"  
  13.             android:layout_width="match_parent"  
  14.             android:layout_height="match_parent" />  
  15.   
  16.         <TextView  
  17.             android:id="@+id/tv_content"  
  18.             android:layout_width="wrap_content"  
  19.             android:layout_height="wrap_content"  
  20.             android:layout_alignParentBottom="true"  
  21.             android:layout_marginBottom="10dp"  
  22.             android:layout_marginLeft="5dp"  
  23.             android:text="公众号:ansen_666" />  
  24.   
  25.         <RelativeLayout  
  26.             android:layout_width="fill_parent"  
  27.             android:layout_height="wrap_content"  
  28.             android:orientation="vertical" >  
  29.   
  30.             <LinearLayout  
  31.                 android:id="@+id/viewGroup"  
  32.                 android:layout_width="fill_parent"  
  33.                 android:layout_height="wrap_content"  
  34.                 android:layout_alignParentBottom="true"  
  35.                 android:layout_marginBottom="5dp"  
  36.                 android:gravity="center_horizontal"  
  37.                 android:orientation="horizontal"/>  
  38.         </RelativeLayout>  
  39.     </RelativeLayout>  
  40. </LinearLayout>  

　　2.可滑动的静态图片实现

　　初始化轮播的Viewpager，初始化点点点View，并且加入线性布局，最后把整个布局加入ListView头部。

Java代码
  1. viewPager = (ViewPager)headView.findViewById(R.id.viewpager);  
  2. selectedPagerAdapter=new SelectedPagerAdapter(getActivity(),carousePagerSelectView);  
  3. viewPager.setOffscreenPageLimit(2);  
  4. viewPager.setCurrentItem(0);  
  5. viewPager.setOnPageChangeListener(onPageChangeListener);  
  6. viewPager.setAdapter(selectedPagerAdapter);  
  7.           
  8. ViewGroup group = (ViewGroup) headView.findViewById(R.id.viewGroup);// 初始化底部显示控件  
  9. tips = new ImageView[3];  
  10. for (int i = 0; i < tips.length; i++){  
  11.      ImageView imageView = new ImageView(getActivity());  
  12.      if (i == 0) {  
  13.           imageView.setBackgroundResource(R.drawable.page_indicator_focused);  
  14.      } else {  
  15.           imageView.setBackgroundResource(R.drawable.page_indicator_unfocused);  
  16.      }  
  17.               
  18.      tips[i] = imageView;  
  19.      LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));  
  20.      layoutParams.leftMargin = 10;// 设置点点点view的左边距  
  21.      layoutParams.rightMargin = 10;// 设置点点点view的右边距  
  22.      group.addView(imageView, layoutParams);  
  23. }  
  24. listView=(ListView) rootView.findViewById(R.id.list);  
  25. listView.addHeaderView(headView);  

　　3.如何实现轮播效果

　　我这边是用Timer＋Handler实现，Timer用来计时，Handler用来更新UI。

　　注意事项:

　　1).在轮播的时候需要判断是否已经最后一页

　　2).更新UI需要在主线程。

Java代码
  1. private Timer timer;  
  2. private final int  CAROUSEL_TIME = 3000;//滚动间隔  
Java代码
  1. timer = new Timer(true);//初始化计时器  
  2. timer.schedule(task, 0, CAROUSEL_TIME);//延时0ms后执行,3000ms执行一次     
Java代码
  1. TimerTask task = new TimerTask() {  
  2.     public void run() {  
  3.         handler.sendEmptyMessage(CAROUSEL_TIME);  
  4.     }  
  5. };  
Java代码
  1. private Handler handler=new Handler(){  
  2.     public void handleMessage(Message msg) {  
  3.         switch (msg.what) {  
  4.         case CAROUSEL_TIME:  
  5.             if(currentIndex>=tips.length-1){//已经滚动到最后,从第一页开始  
  6.                 viewPager.setCurrentItem(0);  
  7.             }else{//开始下一页  
  8.                 viewPager.setCurrentItem(currentIndex+1);  
  9.             }  
  10.             break;  
  11.         }  
  12.     };  
  13. };  

　　4.其他

　　还有精品列表ListView列表的适配器，还有三个Tab点击改变文字颜色，还有显示圆形头像自定义的View，还有其他的一些布局文件的代码我就不一一贴出来了。。。有需要的自行下载源码.

本文发布：Android开发网
本文地址：http://www.jizhuomi.com/android/example/574.html
2016年5月18日
发布:鸡啄米 分类:Android开发实例 浏览: 评论:0