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

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


本讲内容:ViewPager+FragmentPagerAdapter实现主界面架构(可以点击和滑动)


示例一:

     

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

[java]  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:orientation="vertical" >  
  6.   
  7.     <RelativeLayout  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:background="@drawable/top1"  
  11.         android:padding="10dp" >  
  12.   
  13.         <LinearLayout  
  14.             android:layout_width="wrap_content"  
  15.             android:layout_height="wrap_content"  
  16.             android:layout_alignParentLeft="true"  
  17.             android:gravity="center"  
  18.             android:orientation="horizontal" >  
  19.   
  20.             <ImageView  
  21.                 android:layout_width="30dp"  
  22.                 android:layout_height="30dp"  
  23.                 android:src="@drawable/actionbar_icon" />  
  24.   
  25.             <TextView  
  26.                 android:layout_width="wrap_content"  
  27.                 android:layout_height="wrap_content"  
  28.                 android:layout_marginLeft="10dp"  
  29.                 android:text="微信"  
  30.                 android:textColor="@color/lightgray"  
  31.                 android:textSize="18sp" />  
  32.         </LinearLayout>  
  33.   
  34.         <LinearLayout  
  35.             android:layout_width="wrap_content"  
  36.             android:layout_height="wrap_content"  
  37.             android:layout_alignParentRight="true"  
  38.             android:gravity="center"  
  39.             android:orientation="horizontal" >  
  40.   
  41.             <ImageView  
  42.                 android:layout_width="30dp"  
  43.                 android:layout_height="30dp"  
  44.                 android:layout_marginRight="20dp"  
  45.                 android:src="@drawable/actionbar_search_icon" />  
  46.   
  47.             <ImageView  
  48.                 android:layout_width="30dp"  
  49.                 android:layout_height="30dp"  
  50.                 android:layout_marginRight="20dp"  
  51.                 android:src="@drawable/actionbar_add_icon" />  
  52.   
  53.             <ImageView  
  54.                 android:layout_width="30dp"  
  55.                 android:layout_height="30dp"  
  56.                 android:src="@drawable/actionbar_more_icon" />  
  57.         </LinearLayout>  
  58.     </RelativeLayout>  
  59.   
  60. </LinearLayout>  


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

[java]  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:orientation="vertical" >  
  6.   
  7.     <LinearLayout  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="wrap_content"  
  10.         android:orientation="horizontal" >  
  11.   
  12.         <LinearLayout  
  13.             android:id="@+id/id_tab1_chat"  
  14.             android:layout_width="0dp"  
  15.             android:layout_height="wrap_content"  
  16.             android:layout_weight="1"  
  17.             android:background="@drawable/guide_round"  
  18.             android:gravity="center"  
  19.             android:orientation="horizontal"  
  20.             android:padding="10dp" >  
  21.   
  22.             <TextView  
  23.                 android:id="@+id/id_chat"  
  24.                 android:layout_width="wrap_content"  
  25.                 android:layout_height="wrap_content"  
  26.                 android:gravity="center"  
  27.                 android:text="聊天"  
  28.                 android:textColor="@color/green"  
  29.                 android:textSize="15dp" />  
  30.         </LinearLayout>  
  31.   
  32.         <LinearLayout  
  33.             android:id="@+id/id_tab2_found"  
  34.             android:layout_width="0dp"  
  35.             android:layout_height="wrap_content"  
  36.             android:layout_weight="1"  
  37.             android:background="@drawable/guide_round"  
  38.             android:gravity="center"  
  39.             android:orientation="horizontal"  
  40.             android:padding="10dp" >  
  41.   
  42.             <TextView  
  43.                 android:id="@+id/id_found"  
  44.                 android:layout_width="wrap_content"  
  45.                 android:layout_height="wrap_content"  
  46.                 android:gravity="center"  
  47.                 android:text="发现"  
  48.                 android:textColor="@color/black"  
  49.                 android:textSize="15dp" />  
  50.         </LinearLayout>  
  51.   
  52.         <LinearLayout  
  53.             android:id="@+id/id_tab3_contact"  
  54.             android:layout_width="0dp"  
  55.             android:layout_height="wrap_content"  
  56.             android:layout_weight="1"  
  57.             android:background="@drawable/guide_round"  
  58.             android:gravity="center"  
  59.             android:orientation="horizontal"  
  60.             android:padding="10dp" >  
  61.   
  62.             <TextView  
  63.                 android:id="@+id/id_contact"  
  64.                 android:layout_width="wrap_content"  
  65.                 android:layout_height="wrap_content"  
  66.                 android:gravity="center"  
  67.                 android:text="通讯录"  
  68.                 android:textColor="@color/black"  
  69.                 android:textSize="15dp" />  
  70.         </LinearLayout>  
  71.     </LinearLayout>  
  72.       
  73.     <ImageView   
  74.         android:id="@+id/id_tab_line"  
  75.         android:layout_width="100dp"  
  76.         android:layout_height="wrap_content"  
  77.         android:background="@drawable/tabline"/>  
  78.   
  79. </LinearLayout>  

下面是res/layout/main_layout.xml 布局文件:

[java]  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.   
  8.         <include layout="@layout/top1"/>  
  9.     <include layout="@layout/top2"/>  
  10.       
  11.     <android.support.v4.view.ViewPager  
  12.         android:id="@+id/id_viewpager"  
  13.         android:layout_width="match_parent"  
  14.         android:layout_height="0dp"  
  15.         android:layout_weight="1"/>  
  16.       
  17. </LinearLayout>  

下面是res/layout/chat_tab_01.xml 布局文件 :(3个标签页基本一致,不重复贴了。)

[java]  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="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <TextView  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="match_parent"  
  10.         android:gravity="center"  
  11.         android:text="this is first tab"  
  12.         android:textColor="#000000"  
  13.         android:textSize="30sp" />  
  14.   
  15. </LinearLayout>  

下面是res/drawable/guide_round.xml 文件

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


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

[java]  view plain  copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <resources>  
  3.     <color name="white">#FFFFFF</color><!--白色 -->  
  4.   
  5.     <color name="ivory">#FFFFF0</color><!--象牙色 -->  
  6.   
  7.     <color name="lightyellow">#FFFFE0</color><!--亮黄色 -->  
  8.   
  9.     <color name="yellow">#FFFF00</color><!--黄色 -->  
  10.   
  11.     <color name="snow">#FFFAFA</color><!--雪白色 -->  
  12.   
  13.     <color name="floralwhite">#FFFAF0</color><!--花白色 -->  
  14.   
  15.     <color name="lemonchiffon">#FFFACD</color><!--柠檬绸色 -->  
  16.   
  17.     <color name="cornsilk">#FFF8DC</color><!--米绸色 -->  
  18.   
  19.     <color name="seashell">#FFF5EE</color><!--海贝色 -->  
  20.   
  21.     <color name="lavenderblush">#FFF0F5</color><!--淡紫红 -->  
  22.   
  23.     <color name="papayawhip">#FFEFD5</color><!--番木色 -->  
  24.   
  25.     <color name="blanchedalmond">#FFEBCD</color><!--白杏色 -->  
  26.   
  27.     <color name="mistyrose">#FFE4E1</color><!--浅玫瑰色 -->  
  28.       
  29.     <color name="text_color">#717171</color><!--浅玫瑰色 -->  
  30.   
  31.     <color name="bisque">#FFE4C4</color><!--桔黄色 -->  
  32.   
  33.     <color name="moccasin">#FFE4B5</color><!--鹿皮色 -->  
  34.     <color name="navajowhite">#FFDEAD</color><!--纳瓦白 -->  
  35.   
  36.     <color name="peachpuff">#FFDAB9</color><!--桃色 -->  
  37.   
  38.     <color name="gold">#FFD700</color><!--金色 -->  
  39.   
  40.     <color name="pink">#FFC0CB</color><!--粉红色 -->  
  41.   
  42.     <color name="lightpink">#FFB6C1</color><!--亮粉红色 -->  
  43.   
  44.     <color name="orange">#FFA500</color><!--橙色 -->  
  45.   
  46.     <color name="lightsalmon">#FFA07A</color><!--亮肉色 -->  
  47.   
  48.     <color name="darkorange">#FF8C00</color><!--暗桔黄色 -->  
  49.   
  50.     <color name="coral">#FF7F50</color><!--珊瑚色 -->  
  51.   
  52.     <color name="hotpink">#FF69B4</color><!--热粉红色 -->  
  53.   
  54.     <color name="tomato">#FF6347</color><!--西红柿色 -->  
  55.   
  56.     <color name="orangered">#FF4500</color><!--红橙色 -->  
  57.   
  58.     <color name="deeppink">#FF1493</color><!--深粉红色 -->  
  59.   
  60.     <color name="fuchsia">#FF00FF</color><!--紫红色 -->  
  61.   
  62.     <color name="magenta">#FF00FF</color><!--红紫色 -->  
  63.   
  64.     <color name="red">#FF0000</color><!--红色 -->  
  65.   
  66.     <color name="oldlace">#FDF5E6</color><!--老花色 -->  
  67.   
  68.     <color name="lightgoldenrodyellow">#FAFAD2</color><!--亮金黄色 -->  
  69.   
  70.     <color name="linen">#FAF0E6</color><!--亚麻色 -->  
  71.   
  72.     <color name="antiquewhite">#FAEBD7</color><!--古董白 -->  
  73.   
  74.     <color name="salmon">#FA8072</color><!--鲜肉色 -->  
  75.   
  76.     <color name="ghostwhite">#F8F8FF</color><!--幽灵白 -->  
  77.     <color name="mintcream">#F5FFFA</color><!--薄荷色 -->  
  78.   
  79.     <color name="whitesmoke">#F5F5F5</color><!--烟白色 -->  
  80.   
  81.     <color name="beige">#F5F5DC</color><!--米色 -->  
  82.   
  83.     <color name="wheat">#F5DEB3</color><!--浅黄色 -->  
  84.   
  85.     <color name="sandybrown">#F4A460</color><!--沙褐色 -->  
  86.   
  87.     <color name="azure">#F0FFFF</color><!--天蓝色 -->  
  88.   
  89.     <color name="honeydew">#F0FFF0</color><!--蜜色 -->  
  90.   
  91.     <color name="aliceblue">#F0F8FF</color><!--艾利斯兰 -->  
  92.   
  93.     <color name="khaki">#F0E68C</color><!--黄褐色 -->  
  94.   
  95.     <color name="lightcoral">#F08080</color><!--亮珊瑚色 -->  
  96.   
  97.     <color name="palegoldenrod">#EEE8AA</color><!--苍麒麟色 -->  
  98.   
  99.     <color name="violet">#EE82EE</color><!--紫罗兰色 -->  
  100.   
  101.     <color name="darksalmon">#E9967A</color><!--暗肉色 -->  
  102.   
  103.     <color name="lavender">#E6E6FA</color><!--淡紫色 -->  
  104.   
  105.     <color name="lightcyan">#E0FFFF</color><!--亮青色 -->  
  106.   
  107.     <color name="burlywood">#DEB887</color><!--实木色 -->  
  108.   
  109.     <color name="plum">#DDA0DD</color><!--洋李色 -->  
  110.   
  111.     <color name="gainsboro">#DCDCDC</color><!--淡灰色 -->  
  112.   
  113.     <color name="crimson">#DC143C</color><!--暗深红色 -->  
  114.   
  115.     <color name="palevioletred">#DB7093</color><!--苍紫罗兰色-->  
  116.   
  117.     <color name="goldenrod">#DAA520</color><!--金麒麟色 -->  
  118.     <color name="orchid">#DA70D6</color><!--淡紫色 -->  
  119.   
  120.     <color name="thistle">#D8BFD8</color><!--蓟色 -->  
  121.   
  122.     <color name="lightgray">#D3D3D3</color><!--亮灰色 -->  
  123.   
  124.     <color name="lightgrey">#D3D3D3</color><!--亮灰色 -->  
  125.   
  126.     <color name="tan">#D2B48C</color><!--茶色 -->  
  127.   
  128.     <color name="chocolate">#D2691E</color><!--巧可力色 -->  
  129.   
  130.     <color name="peru">#CD853F</color><!--秘鲁色 -->  
  131.   
  132.     <color name="indianred">#CD5C5C</color><!--印第安红 -->  
  133.   
  134.     <color name="mediumvioletred">#C71585</color><!--中紫罗兰色 -->  
  135.   
  136.     <color name="silver">#C0C0C0</color><!--银色 -->  
  137.   
  138.     <color name="darkkhaki">#BDB76B</color><!-- 暗黄褐色 -->  
  139.     <color name="rosybrown">#BC8F8F</color><!--褐玫瑰红-->  
  140.   
  141.     <color name="mediumorchid">#BA55D3</color><!--中粉紫色 -->  
  142.   
  143.     <color name="darkgoldenrod">#B8860B</color><!--暗金黄色 -->  
  144.   
  145.     <color name="firebrick">#B22222</color><!--火砖色 -->  
  146.   
  147.     <color name="powderblue">#B0E0E6</color><!--粉蓝色 -->  
  148.   
  149.     <color name="lightsteelblue">#B0C4DE</color><!--亮钢兰色 -->  
  150.   
  151.     <color name="paleturquoise">#AFEEEE</color><!--苍宝石绿 -->  
  152.   
  153.     <color name="greenyellow">#ADFF2F</color><!--黄绿色 -->  
  154.   
  155.     <color name="lightblue">#ADD8E6</color><!--亮蓝色 -->  
  156.   
  157.     <color name="darkgray">#A9A9A9</color><!--暗灰色 -->  
  158.     <color name="darkgrey">#A9A9A9</color><!--暗灰色 -->  
  159.   
  160.     <color name="brown">#A52A2A</color><!--褐色 -->  
  161.   
  162.     <color name="sienna">#A0522D</color><!--赭色 -->  
  163.   
  164.     <color name="darkorchid">#9932CC</color><!--暗紫色 -->  
  165.   
  166.     <color name="palegreen">#98FB98</color><!--苍绿色 -->  
  167.   
  168.     <color name="darkviolet">#9400D3</color><!--暗紫罗兰色 -->  
  169.   
  170.     <color name="mediumpurple">#9370DB</color><!--中紫色 -->  
  171.   
  172.     <color name="lightgreen">#90EE90</color><!--亮绿色 -->  
  173.   
  174.     <color name="darkseagreen">#8FBC8F</color><!--暗海兰色 -->  
  175.   
  176.     <color name="saddlebrown">#8B4513</color><!--重褐色 -->  
  177.   
  178.     <color name="darkmagenta">#8B008B</color><!--暗洋红 -->  
  179.   
  180.     <color name="darkred">#8B0000</color><!--暗红色 -->  
  181.   
  182.     <color name="blueviolet">#8A2BE2</color><!-- 紫罗兰蓝色-->  
  183.     <color name="lightskyblue">#87CEFA</color><!--亮天蓝色-->  
  184.   
  185.     <color name="skyblue">#87CEEB</color><!--天蓝色 -->  
  186.   
  187.     <color name="gray">#808080</color><!--灰色 -->  
  188.   
  189.     <color name="grey">#808080</color><!--灰色 -->  
  190.   
  191.     <color name="olive">#808000</color><!--橄榄色 -->  
  192.   
  193.     <color name="purple">#800080</color><!--紫色 -->  
  194.   
  195.     <color name="maroon">#800000</color><!--粟色 -->  
  196.   
  197.     <color name="aquamarine">#7FFFD4</color><!--碧绿色 -->  
  198.   
  199.     <color name="chartreuse">#7FFF00</color><!--黄绿色 -->  
  200.     <color name="lawngreen">#7CFC00</color><!--草绿色 -->  
  201.   
  202.     <color name="mediumslateblue">#7B68EE</color><!--中暗蓝色 -->  
  203.   
  204.     <color name="lightslategray">#778899</color><!--亮蓝灰 -->  
  205.   
  206.     <color name="lightslategrey">#778899</color><!--亮蓝灰 -->  
  207.   
  208.     <color name="slategray">#708090</color><!--灰石色 -->  
  209.   
  210.     <color name="slategrey">#708090</color><!--灰石色 -->  
  211.   
  212.     <color name="olivedrab">#6B8E23</color><!--深绿褐色 -->  
  213.   
  214.     <color name="slateblue">#6A5ACD</color><!--石蓝色 -->  
  215.   
  216.     <color name="dimgray">#696969</color><!--暗灰色 -->  
  217.   
  218.     <color name="dimgrey">#696969</color><!--暗灰色 -->  
  219.   
  220.     <color name="mediumaquamarine">#66CDAA</color><!--中绿色-->  
  221.   
  222.     <color name="cornflowerblue">#6495ED</color><!--菊兰色 -->  
  223.   
  224.     <color name="cadetblue">#5F9EA0</color><!--军兰色 -->  
  225.   
  226.     <color name="darkolivegreen">#556B2F</color><!-- 暗橄榄绿 -->  
  227.     <color name="indigo">#4B0082</color><!--靛青色 -->  
  228.   
  229.     <color name="mediumturquoise">#48D1CC</color><!--中绿宝石-->  
  230.   
  231.     <color name="darkslateblue">#483D8B</color><!--暗灰蓝色 -->  
  232.   
  233.     <color name="steelblue">#4682B4</color><!--钢兰色 -->  
  234.   
  235.     <color name="royalblue">#4169E1</color><!--皇家蓝 -->  
  236.   
  237.     <color name="turquoise">#40E0D0</color><!--青绿色 -->  
  238.   
  239.     <color name="mediumseagreen">#3CB371</color><!--中海蓝 -->  
  240.     <color name="limegreen">#32CD32</color><!--橙绿色 -->  
  241.   
  242.     <color name="darkslategray">#2F4F4F</color><!--暗瓦灰色 -->  
  243.   
  244.     <color name="darkslategrey">#2F4F4F</color><!--暗瓦灰色 -->  
  245.   
  246.     <color name="seagreen">#2E8B57</color><!--海绿色 -->  
  247.   
  248.     <color name="forestgreen">#228B22</color><!--森林绿 -->  
  249.   
  250.     <color name="lightseagreen">#20B2AA</color><!--亮海蓝色 -->  
  251.   
  252.     <color name="dodgerblue">#1E90FF</color><!--闪兰色 -->  
  253.   
  254.     <color name="midnightblue">#191970</color><!--中灰兰色 -->  
  255.   
  256.     <color name="aqua">#00FFFF</color><!--浅绿色 -->  
  257.   
  258.     <color name="cyan">#00FFFF</color><!--青色 -->  
  259.   
  260.     <color name="springgreen">#00FF7F</color><!--春绿色 -->  
  261.   
  262.     <color name="lime">#00FF00</color><!--酸橙色 -->  
  263.   
  264.     <color name="mediumspringgreen">#00FA9A</color><!--中春绿色 -->  
  265.   
  266.     <color name="darkturquoise">#00CED1</color><!--暗宝石绿 -->  
  267.   
  268.     <color name="deepskyblue">#00BFFF</color><!--深天蓝色 -->  
  269.   
  270.     <color name="darkcyan">#008B8B</color><!--暗青色 -->  
  271.   
  272.     <color name="teal">#008080</color><!--水鸭色 -->  
  273.   
  274.     <color name="green">#008000</color><!--绿色 -->  
  275.   
  276.     <color name="darkgreen">#006400</color><!--暗绿色 -->  
  277.   
  278.     <color name="blue">#0000FF</color><!--蓝色 -->  
  279.   
  280.     <color name="mediumblue">#0000CD</color><!--中兰色 -->  
  281.   
  282.     <color name="darkblue">#00008B</color><!--暗蓝色 -->  
  283.   
  284.     <color name="navy">#000080</color><!--海军色 -->  
  285.   
  286.     <color name="black">#000000</color><!--黑色 -->  
  287. </resources>  

下面是 ChatMainTab01 .java界面文件 :(3个Fragment.jaca基本一致,不重复贴了。)

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

[java]  view plain  copy
  1. public class ChatMainTab01 extends Fragment{  
  2.     public View onCreateView(LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState) {  
  3.         View view = inflater.inflate(R.layout.chat_tab_01, container, false);  
  4.         return view;  
  5.     }  
  6. }  

下面是 FragmentAdapter .java界面文件

[java]  view plain  copy
  1. /** 
  2.  * 功能:主页引导栏的三个Fragment页面设置适配器 
  3.  */  
  4. public class FragmentAdapter extends FragmentPagerAdapter{  
  5.     private List<Fragment> fragments;  
  6.       
  7.     public FragmentAdapter(FragmentManager fm,List<Fragment> fragments) {  
  8.         super(fm);  
  9.         this.fragments=fragments;  
  10.     }  
  11.   
  12.     public Fragment getItem(int fragment) {  
  13.         return fragments.get(fragment);  
  14.     }  
  15.   
  16.     public int getCount() {  
  17.         return fragments.size();  
  18.     }  
  19.   
  20. }  

下面是MainActivity.java主界面文件:

[java]  view plain  copy
  1. public class MainActivity extends FragmentActivity {  
  2.     /** 
  3.      * 顶部三个LinearLayout 
  4.      */  
  5.     private LinearLayout mTabChat;  
  6.     private LinearLayout mTabFound;  
  7.     private LinearLayout mTabContact;  
  8.       
  9.     /** 
  10.      * 顶部的三个TextView 
  11.      */  
  12.     private TextView chat;  
  13.     private TextView found;  
  14.     private TextView contact;  
  15.       
  16.     /** 
  17.      * Tab的那个引导线 
  18.      */  
  19.     private ImageView mTabLine;  
  20.     /** 
  21.      * 屏幕的宽度 
  22.      */  
  23.     private int screenWidth;  
  24.       
  25.     private ViewPager mViewPager;  
  26.     private FragmentAdapter mAdapter;  
  27.     private List<Fragment> fragments = new ArrayList<Fragment>();  
  28.       
  29.     private Resources res;  
  30.   
  31.     protected void onCreate(Bundle savedInstanceState) {  
  32.         super.onCreate(savedInstanceState);  
  33.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  34.         setContentView(R.layout.activity_main);  
  35.         res=getResources();  
  36.           
  37.         initView();  
  38.           
  39.         mViewPager=(ViewPager) findViewById(R.id.id_viewpager);  
  40.           
  41.         /** 
  42.          * 初始化Adapter 
  43.          */  
  44.         mAdapter=new FragmentAdapter(getSupportFragmentManager(), fragments);  
  45.           
  46.         mViewPager.setAdapter(mAdapter);  
  47.         mViewPager.setOnPageChangeListener(new TabOnPageChangeListener());  
  48.           
  49.         initTabLine();  
  50.     }  
  51.   
  52.     /** 
  53.      * 根据屏幕的宽度,初始化引导线的宽度 
  54.      */  
  55.     private void initTabLine() {  
  56.         mTabLine=(ImageView) findViewById(R.id.id_tab_line);  
  57.           
  58.         //获取屏幕的宽度  
  59.         DisplayMetrics outMetrics=new DisplayMetrics();  
  60.         getWindow().getWindowManager().getDefaultDisplay().getMetrics(outMetrics);  
  61.         screenWidth=outMetrics.widthPixels;  
  62.           
  63.         //获取控件的LayoutParams参数(注意:一定要用父控件的LayoutParams写LinearLayout.LayoutParams)  
  64.         LinearLayout.LayoutParams lp=(android.widget.LinearLayout.LayoutParams) mTabLine.getLayoutParams();  
  65.         lp.width=screenWidth/3;//设置该控件的layoutParams参数  
  66.         mTabLine.setLayoutParams(lp);//将修改好的layoutParams设置为该控件的layoutParams  
  67.     }  
  68.   
  69.     /** 
  70.      * 初始化控件,初始化Fragment 
  71.      */  
  72.     private void initView() {  
  73.         chat=(TextView) findViewById(R.id.id_chat);  
  74.         found=(TextView) findViewById(R.id.id_found);  
  75.         contact=(TextView) findViewById(R.id.id_contact);  
  76.           
  77.         chat.setOnClickListener(new TabOnClickListener(0));  
  78.         found.setOnClickListener(new TabOnClickListener(1));  
  79.         contact.setOnClickListener(new TabOnClickListener(2));  
  80.           
  81.         fragments.add(new ChatMainTab01());  
  82.         fragments.add(new FoundMainTab02());  
  83.         fragments.add(new ContactMainTab03());  
  84.           
  85.         mTabChat=(LinearLayout) findViewById(R.id.id_tab1_chat);  
  86.         mTabFound=(LinearLayout) findViewById(R.id.id_tab2_found);  
  87.         mTabContact=(LinearLayout) findViewById(R.id.id_tab3_contact);  
  88.     }  
  89.       
  90.     /** 
  91.      * 重置颜色 
  92.      */  
  93.     private void resetTextView() {  
  94.         chat.setTextColor(res.getColor(R.color.black));  
  95.         found.setTextColor(res.getColor(R.color.black));  
  96.         contact.setTextColor(res.getColor(R.color.black));  
  97.     }  
  98.       
  99.     /** 
  100.      * 功能:点击主页TAB事件 
  101.      */  
  102.     public class TabOnClickListener implements View.OnClickListener{  
  103.         private int index=0;  
  104.   
  105.         public TabOnClickListener(int i){  
  106.             index=i;  
  107.         }  
  108.           
  109.         public void onClick(View v) {  
  110.             mViewPager.setCurrentItem(index);//选择某一页  
  111.         }  
  112.           
  113.     }  
  114.       
  115.     /** 
  116.      * 功能:Fragment页面改变事件 
  117.      */  
  118.     public class TabOnPageChangeListener implements OnPageChangeListener{  
  119.   
  120.         //当滑动状态改变时调用   
  121.         public void onPageScrollStateChanged(int state) {  
  122.               
  123.         }  
  124.   
  125.         //当前页面被滑动时调用   
  126.         public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels){  
  127.             LinearLayout.LayoutParams lp=(android.widget.LinearLayout.LayoutParams) mTabLine.getLayoutParams();  
  128.             //返回组件距离左侧组件的距离  
  129.             lp.leftMargin= (int) ((positionOffset+position)*screenWidth/3);  
  130.             mTabLine.setLayoutParams(lp);  
  131.         }  
  132.   
  133.         //当新的页面被选中时调用  
  134.         public void onPageSelected(int position) {  
  135.             //重置所有TextView的字体颜色  
  136.             resetTextView();  
  137.             switch (position) {  
  138.             case 0:  
  139.                 chat.setTextColor(res.getColor(R.color.green));  
  140.                 break;  
  141.             case 1:  
  142.                 found.setTextColor(res.getColor(R.color.green));  
  143.                 break;  
  144.             case 2:  
  145.                 contact.setTextColor(res.getColor(R.color.green));  
  146.                 break;  
  147.             }  
  148.         }  
  149.     }  
  150.   
  151. }  


Take your time and enjoy it 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值