帶你實現開發者頭條（一） 啟動頁實現

　　對於很多初學者或者剛工作的Android新手來說，我們的項目經驗還停留在做demo的階段，有沒有一種很low的感覺，並且當你真正上手做大項目的時候又不知道把自己學到的東西用上去。有一種自己家裡有座金山卻不知道可以用來換錢換吃的。

　　我下載了一個開發者頭條app(之前從未用過，是不是很out)。用了之後總結他的技術，打算以仿開發者頭條項目為主線寫一系列的Android開發教程，中間會穿插各種常用到的知識點模塊，最終完成這樣一個項目。

　　廢話就說這麼多了，開始今天的正題，帶你實現開發者頭條APP的啟動頁。

　　一.老規矩，先上效果圖

　　從效果圖中我們可以看出，整個滑動的界面就是一個ViewPager實現，然後監聽ViewPager的滑動事件，改變底部四個小圖標的切換，以及跳轉到首頁的按鈕的隱藏顯示。

　　二.代碼實現

　　1).整個布局文件。上面是ViewPager，下面是四個小圖標存放的容器。

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.     android:background="#FCF2E4">  
6.     <android.support.v4.view.ViewPager  
7.         android:id="@+id/viewpager_launcher"  
8.         android:layout_width="match_parent"  
9.         android:layout_height="match_parent" />  
10.     <RelativeLayout  
11.         android:layout_width="fill_parent"  
12.         android:layout_height="wrap_content"  
13.         android:orientation="vertical" >  
14.         <LinearLayout  
15.             android:id="@+id/viewGroup"  
16.             android:layout_width="fill_parent"  
17.             android:layout_height="wrap_content"  
18.             android:layout_alignParentBottom="true"  
19.             android:layout_marginBottom="30dp"  
20.             android:gravity="center_horizontal"  
21.             android:orientation="horizontal"/>  
22.     </RelativeLayout>  
23. </RelativeLayout>  

　　2).LauncherActivity 首先判斷是否第一次啟動，如果不是第一次直接進入首頁，是第一次啟動就初始化ViewPager，設置適配器，設置ViewPager滑動監聽，然後添加底部的。。。View。 在Viewpager監聽函數裡面改變底部圖標的選中狀態，如果是最後一頁顯示“開啟我的頭條”按鈕。

1. /** 
2.  * 第一次啟動頁面 
3.  *  
4.  * @author Ansen 
5.  * @create time 2016-04-15 
6.  */  
7. @SuppressLint("ResourceAsColor")  
8. public class LauncherActivity extends FragmentActivity implements ILauncherView {  
9.     private ViewPager viewpagerLauncher;  
10.     private LauncherPagerAdapter adapter;  
11.   
12.     private ImageView[] tips;  
13.   
14.     @Override  
15.     protected void onCreate(Bundle savedInstanceState) {  
16.         super.onCreate(savedInstanceState);  
17.   
18.         setContentView(R.layout.activity_luancher);  
19.           
20.         if(!isFirst()){  
21.             gotoMain();  
22.         }  
23.         viewpagerLauncher = (ViewPager) findViewById(R.id.viewpager_launcher);  
24.         adapter = new LauncherPagerAdapter(this, this);  
25.         viewpagerLauncher.setOffscreenPageLimit(2);  
26.         viewpagerLauncher.setCurrentItem(0);  
27.         viewpagerLauncher.setOnPageChangeListener(changeListener);  
28.         viewpagerLauncher.setAdapter(adapter);  
29.         viewpagerLauncher.setOnPageChangeListener(changeListener);  
30.         ViewGroup group = (ViewGroup) findViewById(R.id.viewGroup);// 初始化底部顯示控件  
31.         tips = new ImageView[4];  
32.         for (int i = 0; i < tips.length; i++) {  
33.             ImageView imageView = new ImageView(this);  
34.             if (i == 0) {  
35.                 imageView.setBackgroundResource(R.drawable.page_indicator_focused);  
36.             } else {  
37.                 imageView.setBackgroundResource(R.drawable.page_indicator_unfocused);  
38.             }  
39.             tips[i] = imageView;  
40.             LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));  
41.             layoutParams.leftMargin = 10;// 設置點點點view的左邊距  
42.             layoutParams.rightMargin = 10;// 設置點點點view的右邊距  
43.             group.addView(imageView, layoutParams);  
44.         }  
45.     }  
46.   
47.     private OnPageChangeListener changeListener = new OnPageChangeListener() {  
48.         @Override  
49.         public void onPageScrollStateChanged(int arg0) {}  
50.         @Override  
51.         public void onPageScrolled(int arg0, float arg1, int arg2) {}  
52.         @Override  
53.         public void onPageSelected(int index) {  
54.             setImageBackground(index);// 改變點點點的切換效果  
55.   
56.             TextView tvStartHeadlines = (TextView) adapter.getViews().get(index).findViewById(R.id.tv_start_headlines);  
57.             if (index == tips.length - 1) {// 最後一個  
58.                 tvStartHeadlines.setVisibility(View.VISIBLE);  
59.             } else {  
60.                 tvStartHeadlines.setVisibility(View.INVISIBLE);  
61.             }  
62.         }  
63.     };  
64.   
65.     /** 
66.      * 改變點點點的切換效果 
67.      * @param selectItems 
68.      */  
69.     private void setImageBackground(int selectItems) {  
70.         for (int i = 0; i < tips.length; i++) {  
71.             if (i == selectItems) {  
72.                 tips[i].setBackgroundResource(R.drawable.page_indicator_focused);  
73.             } else {  
74.                 tips[i].setBackgroundResource(R.drawable.page_indicator_unfocused);  
75.             }  
76.         }  
77.     }  
78.   
79.     @Override  
80.     public void gotoMain() {  
81.         Intent intent = new Intent(this, MainActivity.class);  
82.         startActivity(intent);  
83.         finish();  
84.     }  
85.   
86.     private boolean isFirst() {  
87.         SharedPreferences setting = getSharedPreferences("headlines", 0);  
88.         Boolean user_first = setting.getBoolean("FIRST", true);  
89.         if (user_first) {// 第一次  
90.             setting.edit().putBoolean("FIRST", false).commit();  
91.             return true;  
92.         } else {  
93.             return false;  
94.         }  
95.     }  
96. }  

　　3).LauncherPagerAdapter 繼承PagerAdapter，在構造函數中初始化要顯示的所有頁面，其他的跟普通的適配器沒啥區別，就多了兩個重寫的方法，destroyItem跟instantiateItem。destroyItem是刪除一個頁面，instantiateItem是加載一個頁面。

1. /** 
2.  * ViewPager適配器 
3.  * @author ansen 
4.  * @create time 2016-04-15 
5.  */  
6. public class LauncherPagerAdapter extends PagerAdapter implements OnClickListener{  
7.     private ILauncherView launcherView;  
8.       
9.     private List<View> views;  
10.     //每頁顯示的圖片  
11.     private int[] images=new int[]{R.drawable.tutorial_1,R.drawable.tutorial_2,R.drawable.tutorial_3,R.drawable.tutorial_4};  
12.       
13.     public LauncherPagerAdapter(Context context,ILauncherView launcherView){  
14.         views=new ArrayList<View>();  
15.         this.launcherView=launcherView;  
16.         //初始化每頁顯示的View  
17.         for(int i=0;i<images.length;i++){  
18.             View item=LayoutInflater.from(context).inflate(R.layout.activity_luancher_pager_item, null);  
19.             ImageView imageview=(ImageView) item.findViewById(R.id.imageview);  
20.             imageview.setImageResource(images[i]);  
21.             item.findViewById(R.id.tv_start_headlines).setOnClickListener(this);  
22.             views.add(item);  
23.         }  
24.     }  
25.       
26.     public List<View> getViews() {  
27.         return views;  
28.     }  
29.       
30.     @Override  
31.     public int getCount() {  
32.         return views == null ? 0 : views.size();  
33.     }  
34.   
35.     @Override  
36.     public boolean isViewFromObject(View arg0, Object arg1) {  
37.         return arg0==arg1;  
38.     }  
39.       
40.     @Override  
41.     public void destroyItem(ViewGroup container, int position, Object object){  
42.         ((ViewPager) container).removeView(views.get(position));  
43.     }  
44.   
45.     @Override  
46.     public Object instantiateItem(ViewGroup container, int position) {  
47.         ((ViewPager) container).addView(views.get(position), 0);  
48.         return views.get(position);  
49.     }  
50.   
51.     @Override  
52.     public void onClick(View v) {  
53.         launcherView.gotoMain();  
54.     }  
55. }  

　　4).還有每一頁顯示的item布局，以及“開啟我的頭條”按鈕的背景shape我就不一一貼出來了。有興趣的可以自行去下載demo。

　　三.源碼下載

　　點擊下載源碼