相關閱讀：
title: 帶你實現開發者頭條APP(三) 首頁實現
tags: 輪播廣告,ViewPager切換,圓形圖片
grammar_cjkRuby: true
一.前言
今天實現開發者頭條APP的首頁。是本系列的第三篇文章，效果圖如下:
從gif動態效果圖中我們可以看出，最外層有三個tab(精選，訂閱，發現)，在精選界面頂部有一個輪播的圖片廣告，廣告下面是一個精選文章列表。
二.外層三個tab實現
我這里用Viewpager實現的，可以左右滑動，靈活的隱藏下面fragment的顯示隱藏。
1.布局文件
布局文件比較簡單，上面包涵三個TextView的RelativeLayout ＋ 下面的ViewPager
<?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"android:background="@color/white_normal"><RelativeLayoutandroid:id="@+id/ll_title"android:layout_width="match_parent"android:layout_height="44dp" ><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/main_color"android:orientation="horizontal" ><TextViewandroid:id="@+id/tv_selected"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_weight="1"android:gravity="center_horizontal"android:text="精選"android:textColor="@drawable/main_title_txt_sel" /><TextViewandroid:id="@+id/tv_subscribe"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_weight="1"android:gravity="center_horizontal"android:text="訂閱"android:textColor="@drawable/main_title_txt_sel" /><TextViewandroid:id="@+id/tv_find"android:layout_width="0dp"android:layout_height="wrap_content"android:layout_gravity="center_vertical"android:layout_weight="1"android:gravity="center_horizontal"android:text="發現"android:textColor="@drawable/main_title_txt_sel" /></LinearLayout><Viewandroid:id="@+id/view_indicator"android:layout_width="15dp"android:layout_height="2dp"android:layout_alignParentBottom="true"android:background="@color/white_normal" /></RelativeLayout><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager_home"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@+id/ll_title"/></RelativeLayout>
2.初始化三個Fragment 并且填充到ViewPager,給ViewPager設置改變監聽。
vPager = (ViewPager) rootView.findViewById(R.id.viewpager_home);SelectedFragment selectedFragment=new SelectedFragment();SubscribeFragment subscribeFragment=new SubscribeFragment();FindFragment findFragment=new FindFragment();list.add(selectedFragment);list.add(subscribeFragment);list.add(findFragment);adapter = new FragmentAdapter(getActivity().getSupportFragmentManager(),list);vPager.setAdapter(adapter);vPager.setOffscreenPageLimit(2);vPager.setCurrentItem(0);vPager.setOnPageChangeListener(pageChangeListener);
3.FragmentAdapter.java
繼承FragmentStatePagerAdapter，Viewpager填充適配器，實現起來很簡單。
/*** ViewPager適配器* @author ansen* @create time 2016-04-18*/public class FragmentAdapter extends FragmentStatePagerAdapter {private List<Fragment> list;public FragmentAdapter(FragmentManager fm, List<Fragment> list) {super(fm);this.list = list;}public FragmentAdapter(FragmentManager fm) {super(fm);}@Overridepublic Fragment getItem(int arg0) {return list.get(arg0);}@Overridepublic int getCount() {return list.size();}}4.指示器初始化
當我們Viewpager滑動的時候需要滑動指示器，并且指示器的寬度占屏幕的三分之一，所以我們需要在activity創建的時候給指示器賦值哦，并且移動到起始位置。
private void initCursorPosition(){LayoutParams layoutParams=viewIndicator.getLayoutParams();layoutParams.width=screenWidth/3;viewIndicator.setLayoutParams(layoutParams);TranslateAnimation animation = new TranslateAnimation(-screenWidth/3,0,0,0);animation.setFillAfter(true);viewIndicator.startAnimation(animation);}5.Viewpager切換時應該做什么？
1).移動指示器
2).改變文字顏色
3).設置當前選中，指示器移動的時候需要用到。
private OnPageChangeListener pageChangeListener=new OnPageChangeListener() {@Overridepublic void onPageSelected(int index){translateAnimation(index);//移動指示器changeTextColor(index);//改變文字顏色currentIndex=index;//設置當前選中}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}}; 6.指示器移動方法translateAnimation
傳入一個下標判斷當前位置，然后判斷上次的位置，知道從哪里移動到哪個位置，然后開啟android自帶的移動動畫。
private void translateAnimation(int index){TranslateAnimation animation = null;switch (index){case 0://訂閱->精選animation=new TranslateAnimation((screenWidth/3),0,0,0);break;case 1://if(0==currentIndex){//精選->訂閱animation=new TranslateAnimation(0,screenWidth/3,0,0);}else if(2==currentIndex){//發現->訂閱animation=new TranslateAnimation((screenWidth/3)*2,screenWidth/3,0,0);}break;case 2://訂閱－》發現animation=new TranslateAnimation(screenWidth/3,(screenWidth/3)*2,0,0);break;}animation.setFillAfter(true);animation.setDuration(300);viewIndicator.startAnimation(animation);}7.獲取屏幕寬高
我這邊把方法寫在activity里面，在工作中大家最好把他放到工具類里面。
private void getScreenSize(Activity context) {DisplayMetrics dm = new DisplayMetrics();context.getWindowManager().getDefaultDisplay().getMetrics(dm);screenWidth = dm.widthPixels;screenHeight = dm.heightPixels;}三."精選" Fragment實現
從整體來看，就是一個ListView，頂部輪播是ListView的頭部。頭部輪播也是用的ViewPager實現，起始這里跟我們第一篇文章講的開發者頭條APP啟動頁實現原理很相似。然后再加一個定時器隔一段時間設置ViewPager的當前頁面即可。
說明:我們這里的圖片用的是靜態的，一個商業APP輪播圖片肯定是從服務器獲取的，開發者頭條app就是從服務器獲取。
1.頭布局文件
就是一個ViewPager＋裝載點點點的LinearLayout 然后外層布局設置一個高度200dp
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical" ><RelativeLayoutandroid:layout_width="wrap_content"android:layout_height="200dp" ><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="match_parent" /><TextViewandroid:id="@+id/tv_content"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_marginBottom="10dp"android:layout_marginLeft="5dp"android:text="公眾號:ansen_666" /><RelativeLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="vertical" ><LinearLayoutandroid:id="@+id/viewGroup"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_marginBottom="5dp"android:gravity="center_horizontal"android:orientation="horizontal"/></RelativeLayout></RelativeLayout></LinearLayout>
2.可滑動的靜態圖片實現
初始化輪播的Viewpager，初始化點點點View，并且加入線性布局，最后把整個布局加入ListView頭部。
viewPager = (ViewPager)headView.findViewById(R.id.viewpager);selectedPagerAdapter=new SelectedPagerAdapter(getActivity(),carousePagerSelectView);viewPager.setOffscreenPageLimit(2);viewPager.setCurrentItem(0);viewPager.setOnPageChangeListener(onPageChangeListener);viewPager.setAdapter(selectedPagerAdapter);ViewGroup group = (ViewGroup) headView.findViewById(R.id.viewGroup);// 初始化底部顯示控件tips = new ImageView[3];for (int i = 0; i < tips.length; i++){ImageView imageView = new ImageView(getActivity());if (i == 0) {imageView.setBackgroundResource(R.drawable.page_indicator_focused);} else {imageView.setBackgroundResource(R.drawable.page_indicator_unfocused);}tips[i] = imageView;LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));layoutParams.leftMargin = 10;// 設置點點點view的左邊距layoutParams.rightMargin = 10;// 設置點點點view的右邊距group.addView(imageView, layoutParams);}listView=(ListView) rootView.findViewById(R.id.list);listView.addHeaderView(headView); 3.如何實現輪播效果
我這邊是用Timer＋Handler實現，Timer用來計時，Handler用來更新UI。
注意事項:
1).在輪播的時候需要判斷是否已經最后一頁
2).更新UI需要在主線程。
private Timer timer;private final int CAROUSEL_TIME = 3000;//滾動間隔 timer = new Timer(true);//初始化計時器timer.schedule(task, 0, CAROUSEL_TIME);//延時0ms后執行,3000ms執行一次 TimerTask task = new TimerTask() {public void run() {handler.sendEmptyMessage(CAROUSEL_TIME);}}; private Handler handler=new Handler(){public void handleMessage(Message msg) {switch (msg.what) {case CAROUSEL_TIME:if(currentIndex>=tips.length-1){//已經滾動到最后,從第一頁開始viewPager.setCurrentItem(0);}else{//開始下一頁viewPager.setCurrentItem(currentIndex+1);}break;}};};關于Android開發之開發者頭條APP(三)實現首頁的相關介紹，就給大家介紹這么多，希望對大家有所幫助！
新聞熱點
疑難解答
