ViewPager+FragmentPagerAdapter实现微信5.2.1主界面架构

人的一生，没有一味的苦，没有永远的痛；没有迈不过的坎，没有闯不过的关。

本讲内容：ViewPager+FragmentPagerAdapter实现主界面架构（可以点击和滑动）

示例一：

     

下面是res/layout/top1.xml 布局文件：

[java]  view plain  copy <?xml version="1.0" encoding="utf-8"?>   <LinearLayout xmlns:android="schemas.android./apk/res/android"       android:layout_width="match_parent"       android:layout_height="wrap_content"       android:orientation="vertical" >          <RelativeLayout           android:layout_width="match_parent"           android:layout_height="wrap_content"           android:background="@drawable/top1"           android:padding="10dp" >              <LinearLayout               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:layout_alignParentLeft="true"               android:gravity="center"               android:orientation="horizontal" >                  <ImageView                   android:layout_width="30dp"                   android:layout_height="30dp"                   android:src="@drawable/actionbar_icon" />                  <TextView                   android:layout_width="wrap_content"                   android:layout_height="wrap_content"                   android:layout_marginLeft="10dp"                   android:text="微信"                   android:textColor="@color/lightgray"                   android:textSize="18sp" />           </LinearLayout>              <LinearLayout               android:layout_width="wrap_content"               android:layout_height="wrap_content"               android:layout_alignParentRight="true"               android:gravity="center"               android:orientation="horizontal" >                  <ImageView                   android:layout_width="30dp"                   android:layout_height="30dp"                   android:layout_marginRight="20dp"                   android:src="@drawable/actionbar_search_icon" />                  <ImageView                   android:layout_width="30dp"                   android:layout_height="30dp"                   android:layout_marginRight="20dp"                   android:src="@drawable/actionbar_add_icon" />                  <ImageView                   android:layout_width="30dp"                   android:layout_height="30dp"                   android:src="@drawable/actionbar_more_icon" />           </LinearLayout>       </RelativeLayout>      </LinearLayout>  

下面是res/layout/top2.xml 布局文件：

[java]  view plain  copy <?xml version="1.0" encoding="utf-8"?>   <LinearLayout xmlns:android="schemas.android./apk/res/android"       android:layout_width="match_parent"       android:layout_height="wrap_content"       android:orientation="vertical" >          <LinearLayout           android:layout_width="match_parent"           android:layout_height="wrap_content"           android:orientation="horizontal" >              <LinearLayout               android:id="@+id/id_tab1_chat"               android:layout_width="0dp"               android:layout_height="wrap_content"               android:layout_weight="1"               android:background="@drawable/guide_round"               android:gravity="center"               android:orientation="horizontal"               android:padding="10dp" >                  <TextView                   android:id="@+id/id_chat"                   android:layout_width="wrap_content"                   android:layout_height="wrap_content"                   android:gravity="center"                   android:text="聊天"                   android:textColor="@color/green"                   android:textSize="15dp" />           </LinearLayout>              <LinearLayout               android:id="@+id/id_tab2_found"               android:layout_width="0dp"               android:layout_height="wrap_content"               android:layout_weight="1"               android:background="@drawable/guide_round"               android:gravity="center"               android:orientation="horizontal"               android:padding="10dp" >                  <TextView                   android:id="@+id/id_found"                   android:layout_width="wrap_content"                   android:layout_height="wrap_content"                   android:gravity="center"                   android:text="发现"                   android:textColor="@color/black"                   android:textSize="15dp" />           </LinearLayout>              <LinearLayout               android:id="@+id/id_tab3_contact"               android:layout_width="0dp"               android:layout_height="wrap_content"               android:layout_weight="1"               android:background="@drawable/guide_round"               android:gravity="center"               android:orientation="horizontal"               android:padding="10dp" >                  <TextView                   android:id="@+id/id_contact"                   android:layout_width="wrap_content"                   android:layout_height="wrap_content"                   android:gravity="center"                   android:text="通讯录"                   android:textColor="@color/black"                   android:textSize="15dp" />           </LinearLayout>       </LinearLayout>              <ImageView            android:id="@+id/id_tab_line"           android:layout_width="100dp"           android:layout_height="wrap_content"           android:background="@drawable/tabline"/>      </LinearLayout>  
下面是res/layout/main_layout.xml 布局文件：

[java]  view plain  copy <LinearLayout xmlns:android="schemas.android./apk/res/android"       xmlns:tools="schemas.android./tools"       android:layout_width="match_parent"       android:layout_height="match_parent"       android:background="#eee"       android:orientation="vertical">              <include layout="@layout/top1"/>       <include layout="@layout/top2"/>              <android.support.v4.view.ViewPager           android:id="@+id/id_viewpager"           android:layout_width="match_parent"           android:layout_height="0dp"           android:layout_weight="1"/>          </LinearLayout>  
下面是res/layout/chat_tab_01.xml 布局文件 ：(3个标签页基本一致，不重复贴了。)

[java]  view plain  copy <?xml version="1.0" encoding="utf-8"?>   <LinearLayout xmlns:android="schemas.android./apk/res/android"       android:layout_width="match_parent"       android:layout_height="match_parent"       android:orientation="vertical" >          <TextView           android:layout_width="match_parent"           android:layout_height="match_parent"           android:gravity="center"           android:text="this is first tab"           android:textColor="#000000"           android:textSize="30sp" />      </LinearLayout>  
下面是res/drawable/guide_round.xml 文件

[java]  view plain  copy <?xml version="1.0" encoding="utf-8"?>   <selector xmlns:android="schemas.android./apk/res/android" >       <item android:state_enabled="true" android:drawable="@drawable/top2_tv_bg1"></item>       <item android:state_enabled="false" android:drawable="@drawable/top2_tv_bg2"></item>      </selector>  

下面是res/values/colors.xml 文件

[java]  view plain  copy <?xml version="1.0" encoding="utf-8"?>   <resources>       <color name="white">#FFFFFF</color><!--白色 -->          <color name="ivory">#FFFFF0</color><!--象牙色 -->          <color name="lightyellow">#FFFFE0</color><!--亮黄色 -->          <color name="yellow">#FFFF00</color><!--黄色 -->          <color name="snow">#FFFAFA</color><!--雪白色 -->          <color name="floralwhite">#FFFAF0</color><!--花白色 -->          <color name="lemonchiffon">#FFFACD</color><!--柠檬绸色 -->          <color name="cornsilk">#FFF8DC</color><!--米绸色 -->          <color name="seashell">#FFF5EE</color><!--海贝色 -->          <color name="lavenderblush">#FFF0F5</color><!--淡紫红 -->          <color name="papayawhip">#FFEFD5</color><!--番木色 -->          <color name="blanchedalmond">#FFEBCD</color><!--白杏色 -->          <color name="mistyrose">#FFE4E1</color><!--浅玫瑰色 -->              <color name="text_color">#717171</color><!--浅玫瑰色 -->          <color name="bisque">#FFE4C4</color><!--桔黄色 -->          <color name="moasin">#FFE4B5</color><!--鹿皮色 -->       <color name="navajowhite">#FFDEAD</color><!--纳瓦白 -->          <color name="peachpuff">#FFDAB9</color><!--桃色 -->          <color name="gold">#FFD700</color><!--金色 -->          <color name="pink">#FFC0CB</color><!--粉红色 -->          <color name="lightpink">#FFB6C1</color><!--亮粉红色 -->          <color name="orange">#FFA500</color><!--橙色 -->          <color name="lightsalmon">#FFA07A</color><!--亮肉色 -->          <color name="darkorange">#FF8C00</color><!--暗桔黄色 -->          <color name="coral">#FF7F50</color><!--珊瑚色 -->          <color name="hotpink">#FF69B4</color><!--热粉红色 -->          <color name="tomato">#FF6347</color><!--西红柿色 -->          <color name="orangered">#FF4500</color><!--红橙色 -->          <color name="deeppink">#FF1493</color><!--深粉红色 -->          <color name="fuchsia">#FF00FF</color><!--紫红色 -->          <color name="magenta">#FF00FF</color><!--红紫色 -->          <color name="red">#FF0000</color><!--红色 -->          <color name="oldlace">#FDF5E6</color><!--老花色 -->          <color name="lightgoldenrodyellow">#FAFAD2</color><!--亮金黄色 -->          <color name="linen">#FAF0E6</color><!--亚麻色 -->          <color name="antiquewhite">#FAEBD7</color><!--古董白 -->          <color name="salmon">#FA8072</color><!--鲜肉色 -->          <color name="ghostwhite">#F8F8FF</color><!--幽灵白 -->       <color name="mintcream">#F5FFFA</color><!--薄荷色 -->          <color name="whitesmoke">#F5F5F5</color><!--烟白色 -->          <color name="beige">#F5F5DC</color><!--米色 -->          <color name="wheat">#F5DEB3</color><!--浅黄色 -->          <color name="sandybrown">#F4A460</color><!--沙褐色 -->          <color name="azure">#F0FFFF</color><!--天蓝色 -->          <color name="honeydew">#F0FFF0</color><!--蜜色 -->          <color name="aliceblue">#F0F8FF</color><!--艾利斯兰 -->          <color name="khaki">#F0E68C</color><!--黄褐色 -->          <color name="lightcoral">#F08080</color><!--亮珊瑚色 -->          <color name="palegoldenrod">#EEE8AA</color><!--苍麒麟色 -->          <color name="violet">#EE82EE</color><!--紫罗兰色 -->          <color name="darksalmon">#E9967A</color><!--暗肉色 -->          <color name="lavender">#E6E6FA</color><!--淡紫色 -->          <color name="lightcyan">#E0FFFF</color><!--亮青色 -->          <color name="burlywood">#DEB887</color><!--实木色 -->          <color name="plum">#DDA0DD</color><!--洋李色 -->          <color name="gainsboro">#DCDCDC</color><!--淡灰色 -->          <color name="crimson">#DC143C</color><!--暗深红色 -->          <color name="palevioletred">#DB7093</color><!--苍紫罗兰色-->          <color name="goldenrod">#DAA520</color><!--金麒麟色 -->       <color name="orchid">#DA70D6</color><!--淡紫色 -->          <color name="thistle">#D8BFD8</color><!--蓟色 -->          <color name="lightgray">#D3D3D3</color><!--亮灰色 -->          <color name="lightgrey">#D3D3D3</color><!--亮灰色 -->          <color name="tan">#D2B48C</color><!--茶色 -->          <color name="chocolate">#D2691E</color><!--巧可力色 -->          <color name="peru">#CD853F</color><!--秘鲁色 -->          <color name="indianred">#CD5C5C</color><!--印第安红 -->          <color name="mediumvioletred">#C71585</color><!--中紫罗兰色 -->          <color name="silver">#C0C0C0</color><!--银色 -->          <color name="darkkhaki">#BDB76B</color><!-- 暗黄褐色 -->       <color name="rosybrown">#BC8F8F</color><!--褐玫瑰红-->          <color name="mediumorchid">#BA55D3</color><!--中粉紫色 -->          <color name="darkgoldenrod">#B8860B</color><!--暗金黄色 -->          <color name="firebrick">#B22222</color><!--火砖色 -->          <color name="powderblue">#B0E0E6</color><!--粉蓝色 -->          <color name="lightsteelblue">#B0C4DE</color><!--亮钢兰色 -->          <color name="paleturquoise">#AFEEEE</color><!--苍宝石绿 -->          <color name="greenyellow">#ADFF2F</color><!--黄绿色 -->          <color name="lightblue">#ADD8E6</color><!--亮蓝色 -->          <color name="darkgray">#A9A9A9</color><!--暗灰色 -->       <color name="darkgrey">#A9A9A9</color><!--暗灰色 -->          <color name="brown">#A52A2A</color><!--褐色 -->          <color name="sienna">#A0522D</color><!--赭色 -->          <color name="darkorchid">#9932CC</color><!--暗紫色 -->          <color name="palegreen">#98FB98</color><!--苍绿色 -->          <color name="darkviolet">#9400D3</color><!--暗紫罗兰色 -->          <color name="mediumpurple">#9370DB</color><!--中紫色 -->          <color name="lightgreen">#90EE90</color><!--亮绿色 -->          <color name="darkseagreen">#8FBC8F</color><!--暗海兰色 -->          <color name="saddlebrown">#8B4513</color><!--重褐色 -->          <color name="darkmagenta">#8B008B</color><!--暗洋红 -->          <color name="darkred">#8B0000</color><!--暗红色 -->          <color name="blueviolet">#8A2BE2</color><!-- 紫罗兰蓝色-->       <color name="lightskyblue">#87CEFA</color><!--亮天蓝色-->          <color name="skyblue">#87CEEB</color><!--天蓝色 -->          <color name="gray">#808080</color><!--灰色 -->          <color name="grey">#808080</color><!--灰色 -->          <color name="olive">#808000</color><!--橄榄色 -->          <color name="purple">#800080</color><!--紫色 -->          <color name="maroon">#800000</color><!--粟色 -->          <color name="aquamarine">#7FFFD4</color><!--碧绿色 -->          <color name="chartreuse">#7FFF00</color><!--黄绿色 -->       <color name="lawngreen">#7CFC00</color><!--草绿色 -->          <color name="mediumslateblue">#7B68EE</color><!--中暗蓝色 -->          <color name="lightslategray">#778899</color><!--亮蓝灰 -->          <color name="lightslategrey">#778899</color><!--亮蓝灰 -->          <color name="slategray">#708090</color><!--灰石色 -->          <color name="slategrey">#708090</color><!--灰石色 -->          <color name="olivedrab">#6B8E23</color><!--深绿褐色 -->          <color name="slateblue">#6A5ACD</color><!--石蓝色 -->          <color name="dimgray">#696969</color><!--暗灰色 -->          <color name="dimgrey">#696969</color><!--暗灰色 -->          <color name="mediumaquamarine">#66CDAA</color><!--中绿色-->          <color name="cornflowerblue">#6495ED</color><!--菊兰色 -->          <color name="cadetblue">#5F9EA0</color><!--军兰色 -->          <color name="darkolivegreen">#556B2F</color><!-- 暗橄榄绿 -->       <color name="indigo">#4B0082</color><!--靛青色 -->          <color name="mediumturquoise">#48D1CC</color><!--中绿宝石-->          <color name="darkslateblue">#483D8B</color><!--暗灰蓝色 -->          <color name="steelblue">#4682B4</color><!--钢兰色 -->          <color name="royalblue">#4169E1</color><!--皇家蓝 -->          <color name="turquoise">#40E0D0</color><!--青绿色 -->          <color name="mediumseagreen">#3CB371</color><!--中海蓝 -->       <color name="limegreen">#32CD32</color><!--橙绿色 -->          <color name="darkslategray">#2F4F4F</color><!--暗瓦灰色 -->          <color name="darkslategrey">#2F4F4F</color><!--暗瓦灰色 -->          <color name="seagreen">#2E8B57</color><!--海绿色 -->          <color name="forestgreen">#228B22</color><!--森林绿 -->          <color name="lightseagreen">#20B2AA</color><!--亮海蓝色 -->          <color name="dodgerblue">#1E90FF</color><!--闪兰色 -->          <color name="midnightblue">#191970</color><!--中灰兰色 -->          <color name="aqua">#00FFFF</color><!--浅绿色 -->          <color name="cyan">#00FFFF</color><!--青色 -->          <color name="springgreen">#00FF7F</color><!--春绿色 -->          <color name="lime">#00FF00</color><!--酸橙色 -->          <color name="mediumspringgreen">#00FA9A</color><!--中春绿色 -->          <color name="darkturquoise">#00CED1</color><!--暗宝石绿 -->          <color name="deepskyblue">#00BFFF</color><!--深天蓝色 -->          <color name="darkcyan">#008B8B</color><!--暗青色 -->          <color name="teal">#008080</color><!--水鸭色 -->          <color name="green">#008000</color><!--绿色 -->          <color name="darkgreen">#006400</color><!--暗绿色 -->          <color name="blue">#0000FF</color><!--蓝色 -->          <color name="mediumblue">#0000CD</color><!--中兰色 -->          <color name="darkblue">#00008B</color><!--暗蓝色 -->          <color name="navy">#000080</color><!--海军色 -->          <color name="black">#000000</color><!--黑色 -->   </resources>  
下面是 ChatMainTab01 .java界面文件 ：(3个Fragment.jaca基本一致，不重复贴了。)

注意全部导入import android.support.v4.app.Fragment;而非import android.app.Fragment;以兼容底版本

[java]  view plain  copy public class ChatMainTab01 extends Fragment{       public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {           View view = inflater.inflate(R.layout.chat_tab_01, container, false);           return view;       }   }  
下面是 FragmentAdapter .java界面文件 ：

[java]  view plain  copy /**   * 功能：主页引导栏的三个Fragment页面设置适配器   */   public class FragmentAdapter extends FragmentPagerAdapter{       private List<Fragment> fragments;              public FragmentAdapter(FragmentManager fm,List<Fragment> fragments) {           super(fm);           this.fragments=fragments;       }          public Fragment getItem(int fragment) {           return fragments.get(fragment);       }          public int getCount() {           return fragments.size();       }      }  
下面是MainActivity.java主界面文件：

[java]  view plain  copy public class MainActivity extends FragmentActivity {       /**       * 顶部三个LinearLayout       */       private LinearLayout mTabChat;       private LinearLayout mTabFound;       private LinearLayout mTabContact;              /**       * 顶部的三个TextView       */       private TextView chat;       private TextView found;       private TextView contact;              /**       * Tab的那个引导线       */       private ImageView mTabLine;       /**       * 屏幕的宽度       */       private int screenWidth;              private ViewPager mViewPager;       private FragmentAdapter mAdapter;       private List<Fragment> fragments = new ArrayList<Fragment>();              private Resources res;          protected void onCreate(Bundle savedInstanceState) {           super.onCreate(savedInstanceState);           requestWindowFeature(Window.FEATURE_NO_TITLE);           setContentView(R.layout.activity_main);           res=getResources();                      initView();                      mViewPager=(ViewPager) findViewById(R.id.id_viewpager);                      /**           * 初始化Adapter           */           mAdapter=new FragmentAdapter(getSupportFragmentManager(), fragments);                      mViewPager.setAdapter(mAdapter);           mViewPager.setOnPageChangeListener(new TabOnPageChangeListener());                      initTabLine();       }          /**       * 根据屏幕的宽度，初始化引导线的宽度       */       private void initTabLine() {           mTabLine=(ImageView) findViewById(R.id.id_tab_line);                      //获取屏幕的宽度           DisplayMetrics outMetrics=new DisplayMetrics();           getWindow().getWindowManager().getDefaultDisplay().getMetrics(outMetrics);           screenWidth=outMetrics.widthPixels;                      //获取控件的LayoutParams参数(注意：一定要用父控件的LayoutParams写LinearLayout.LayoutParams)           LinearLayout.LayoutParams lp=(android.widget.LinearLayout.LayoutParams) mTabLine.getLayoutParams();           lp.width=screenWidth/3;//设置该控件的layoutParams参数           mTabLine.setLayoutParams(lp);//将修改好的layoutParams设置为该控件的layoutParams       }          /**       * 初始化控件，初始化Fragment       */       private void initView() {           chat=(TextView) findViewById(R.id.id_chat);           found=(TextView) findViewById(R.id.id_found);           contact=(TextView) findViewById(R.id.id_contact);                      chat.setOnClickListener(new TabOnClickListener(0));           found.setOnClickListener(new TabOnClickListener(1));           contact.setOnClickListener(new TabOnClickListener(2));                      fragments.add(new ChatMainTab01());           fragments.add(new FoundMainTab02());           fragments.add(new ContactMainTab03());                      mTabChat=(LinearLayout) findViewById(R.id.id_tab1_chat);           mTabFound=(LinearLayout) findViewById(R.id.id_tab2_found);           mTabContact=(LinearLayout) findViewById(R.id.id_tab3_contact);       }              /**       * 重置颜色       */       private void resetTextView() {           chat.setTextColor(res.getColor(R.color.black));           found.setTextColor(res.getColor(R.color.black));           contact.setTextColor(res.getColor(R.color.black));       }              /**       * 功能：点击主页TAB事件       */       public class TabOnClickListener implements View.OnClickListener{           private int index=0;              public TabOnClickListener(int i){               index=i;           }                      public void onClick(View v) {               mViewPager.setCurrentItem(index);//选择某一页           }                  }              /**       * 功能：Fragment页面改变事件       */       public class TabOnPageChangeListener implements OnPageChangeListener{              //当滑动状态改变时调用            public void onPageScrollStateChanged(int state) {                          }              //当前页面被滑动时调用            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels){               LinearLayout.LayoutParams lp=(android.widget.LinearLayout.LayoutParams) mTabLine.getLayoutParams();               //返回组件距离左侧组件的距离               lp.leftMargin= (int) ((positionOffset+position)*screenWidth/3);               mTabLine.setLayoutParams(lp);           }              //当新的页面被选中时调用           public void onPageSelected(int position) {               //重置所有TextView的字体颜色               resetTextView();               switch (position) {               case 0:                   chat.setTextColor(res.getColor(R.color.green));                   break;               case 1:                   found.setTextColor(res.getColor(R.color.green));                   break;               case 2:                   contact.setTextColor(res.getColor(R.color.green));                   break;               }           }       }      }  

Take your time and enjoy it