帶你實現開發者頭條（三） 首頁的實現

　　一.前言

　　今天實現開發者頭條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，還有其他的一些布局文件的代碼我就不一一貼出來了。。。有需要的自行下載源碼.