Android 使用Fragment，ViewPagerIndicator主要架構(制作csdn app一)

本來準備下載下傳個CSDN的用戶端放手機上，沒事可以浏覽浏覽資訊，下載下傳了官方的之後，發現并不能很好的使用。恰好搜到一個大神自己寫的csdn的app，下載下傳安裝了一下，感覺很不錯，也很流暢，基本滿足了我們 日常浏覽的需求。

app效果圖：

我會在部落格中完整的介紹這個項目的制作，第一篇當然是整個項目的整體結構了。

效果圖：

1、頭部的布局檔案，這個很簡單：

[html]  view plain copy

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="wrap_content"  
5.     android:background="@color/light_blue"  
6.     android:orientation="horizontal" >  
7.     <ImageView  
8.         android:layout_width="wrap_content"  
9.         android:layout_height="wrap_content"  
10.         android:layout_gravity="center_vertical"  
11.         android:layout_marginLeft="8dp"  
12.         android:layout_marginRight="4dp"  
13.         android:src="@drawable/biz_navigation_tab_news_pressed" />  
14.     <ImageView  
15.         android:layout_width="wrap_content"  
16.         android:layout_height="wrap_content"  
17.         android:layout_gravity="center_vertical"  
18.         android:layout_marginLeft="4dp"  
19.         android:layout_marginRight="4dp"  
20.         android:src="@drawable/base_action_bar_back_divider" />  
21.     <TextView  
22.         android:id="@+id/headTV"  
23.         android:layout_width="0dp"  
24.         android:layout_height="wrap_content"  
25.         android:layout_gravity="center_vertical"  
26.         android:layout_marginLeft="4dp"  
27.         android:layout_weight="1"  
28.         android:text="CSDN資訊"  
29.         android:textColor="@color/white"  
30.         android:textSize="21sp"  
31.         android:textStyle="bold" >  
32.     </TextView>  
33. </LinearLayout>  

就顯示一個圖示和标題。

2、主布局檔案：

[html]  view plain copy

1. <LinearLayout 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.     android:orientation="vertical" >  
7.     <include layout="@layout/main_head" />  
8.     <com.viewpagerindicator.TabPageIndicator  
9.         android:id="@+id/id_indicator"  
10.         android:layout_width="fill_parent"  
11.         android:layout_height="wrap_content"  
12.         android:background="@color/transparentblue" >  
13.     </com.viewpagerindicator.TabPageIndicator>  
14.     <android.support.v4.view.ViewPager  
15.         android:id="@+id/id_pager"  
16.         android:layout_width="fill_parent"  
17.         android:layout_height="0dp"  
18.         android:layout_weight="1" />  
19. </LinearLayout>  

一個TabPageIndicator和一個ViewPager。

3、主Activity

[java]  view plain copy

1. package com.zhy.csdndemo;  
2. import com.viewpagerindicator.TabPageIndicator;  
3. import android.os.Bundle;  
4. import android.support.v4.app.FragmentActivity;  
5. import android.support.v4.app.FragmentPagerAdapter;  
6. import android.support.v4.view.ViewPager;  
7. public class MainActivity extends FragmentActivity  
8. {  
9.     private TabPageIndicator mIndicator ;  
10.     private ViewPager mViewPager ;  
11.     private FragmentPagerAdapter mAdapter ;  
12.     @Override  
13.     protected void onCreate(Bundle savedInstanceState)  
14.     {  
15.         super.onCreate(savedInstanceState);  
16.         setContentView(R.layout.activity_main);  
17.         mIndicator = (TabPageIndicator) findViewById(R.id.id_indicator);  
18.         mViewPager = (ViewPager) findViewById(R.id.id_pager);  
19.         mAdapter = new TabAdapter(getSupportFragmentManager());  
20.         mViewPager.setAdapter(mAdapter);  
21.         mIndicator.setViewPager(mViewPager, 0);  
22.     }  
23. }  

TabAdapter.java

[java]  view plain copy

1. package com.zhy.csdndemo;  
2. import android.support.v4.app.Fragment;  
3. import android.support.v4.app.FragmentManager;  
4. import android.support.v4.app.FragmentPagerAdapter;  
5. public class TabAdapter extends FragmentPagerAdapter  
6. {  
7.     public static final String[] TITLES = new String[] { "業界", "移動", "研發", "程式員雜志", "雲計算" };  
8.     public TabAdapter(FragmentManager fm)  
9.     {  
10.         super(fm);  
11.     }  
12.     @Override  
13.     public Fragment getItem(int arg0)  
14.     {  
15.         MainFragment fragment = new MainFragment(arg0);  
16.         return fragment;  
17.     }  
18.     @Override  
19.     public CharSequence getPageTitle(int position)  
20.     {  
21.         return TITLES[position % TITLES.length];  
22.     }  
23.     @Override  
24.     public int getCount()  
25.     {  
26.         return TITLES.length;  
27.     }  
28. }  

MainFragment.java

[java]  view plain copy

1. package com.zhy.csdndemo;  
2. import android.annotation.SuppressLint;  
3. import android.os.Bundle;  
4. import android.support.v4.app.Fragment;  
5. import android.view.LayoutInflater;  
6. import android.view.View;  
7. import android.view.ViewGroup;  
8. import android.widget.TextView;  
9. @SuppressLint("ValidFragment")  
10. public class MainFragment extends Fragment  
11. {  
12.     private int newsType = 0;  
13.     public MainFragment(int newsType)  
14.     {  
15.         this.newsType = newsType;  
16.     }  
17.     @Override  
18.     public void onActivityCreated(Bundle savedInstanceState)  
19.     {  
20.         super.onActivityCreated(savedInstanceState);  
21.     }  
22.     @Override  
23.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)  
24.     {  
25.         View view = inflater.inflate(R.layout.tab_item_fragment_main, null);  
26.         TextView tip = (TextView) view.findViewById(R.id.id_tip);  
27.         tip.setText(TabAdapter.TITLES[newsType]);  
28.         return view;  
29.     }  
30. }  

4、在styles.xml中自定義Theme

  [html]  view plain copy

1. <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.     <style name="MyTextAppearance.TabPageIndicator" parent="Widget">  
20.         <item name="android:textStyle">bold</item>  
21.         <item name="android:textColor">@color/black</item>  
22.     </style>  

在AndroidManifest中注冊使用：

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
3.     package="com.zhy.csdndemo"  
4.     android:versionCode="1"  
5.     android:versionName="1.0" >  
6.     <uses-sdk  
7.         android:minSdkVersion="13"  
8.         android:targetSdkVersion="17" />  
9.     <application  
10.         android:allowBackup="true"  
11.         android:icon="@drawable/ic_launcher"  
12.         android:label="@string/app_name"  
13.         android:theme="@style/AppTheme" >  
14.         <activity  
15.             android:name="com.zhy.csdndemo.MainActivity"  
16.             android:label="@string/app_name"   
17.             android:theme="@style/MyTheme">  
18.             <intent-filter>  
19.                 <action android:name="android.intent.action.MAIN" />  
20.                 <category android:name="android.intent.category.LAUNCHER" />  
21.             </intent-filter>  
22.         </activity>  
23.     </application>  
24. </manifest>  

總體還是很簡單的，但是效果很不錯啊，現在不是流行Fragment麼~好了 ，如果這篇文章對你有幫助，贊一個~

轉載請注明出處：http://blog.csdn.net/lmj623565791/article/details/23513993

源碼點選此處下載下傳