Android 开发之——多种方式实现主界面的Tab

• 前言
• 使用Fragment实现
  • 思路
  • 效果
  • 具体讲解
    • 底部布局
    • 顶部布局
    • Fragment的布局
    • Java控制代码
• 使用ViewPager实现
  • 思路
  • 效果
  • 具体实现
• 使用ViewPagerFragmentPagerAdapter方法实现
  • 思路
  • 效果
  • 补充
  • 具体代码
• 使用框架

前言

这篇文章主要介绍多种方式实现主界面的tab，包括： 
（1）使用Fragment实现 
（2）使用ViewPage实现 
（3）使用ViewPage+FragmentPageAdapter 
（4）使用框架实现

在线的视频课程来自慕课网——多种多样的App主界面Tab实现方法。觉得文字不好理解的小伙伴可以去看视频，然后再回头自己敲一遍。

使用Fragment实现

比较常规的使用方法，需要大家对Fragment有基本了解，这里推荐hongyang大神的几篇博文： 
Android Fragment 真正的完全解析（上） 
Android Fragment 真正的完全解析（下） 
相信各位看完之后对Fragment就能有一个比较清楚的了解。

思路

这种方式实现的思路比较简单： 
1、首先在主布局中加入FragmentLayout 
2、然后在Java代码中监听底部的按钮，当点击时，只需让FragmentLayout加载相应的Fragment即可

效果

可以看到，如果单纯地使用Fragment，实际上是不能实现左右滑动的效果，页面的切换，只能靠点击底部的Button来实现。

具体讲解

底部布局

首先是底部的一个布局文件bottom.xml

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-pi" style="color:#06666;box-sizing: border-box;"><?xml version="1.0" encoding="utf-8"?></span><span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">LinearLayout</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">xmlns:android</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"http://schemas.android.com/apk/res/android"</span>    <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:orientation</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"horizontal"</span>    <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"match_parent"</span>    <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"65dp"</span>    <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:background</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@drawable/bottom_bar"</span>></span>    <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">LinearLayout</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:id</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@+id/id_tab_weixin"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"0dp"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_weight</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"1"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"match_parent"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:gravity</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"center"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:orientation</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"vertical"</span>></span>        <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">ImageButton</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:id</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@+id/id_tab_weixin_img"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:src</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@drawable/tab_weixin_pressed"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:background</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"#0000"</span>/></span>        <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">TextView</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:textColor</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"#fff"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:text</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"微信"</span>/></span>    <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">LinearLayout</span>></span>    <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">LinearLayout</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:id</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@+id/id_tab_frd"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"0dp"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_weight</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"1"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"match_parent"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:gravity</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"center"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:orientation</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"vertical"</span>></span>        <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">ImageButton</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:id</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@+id/id_tab_frd_img"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:src</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@drawable/tab_find_frd_normal"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:background</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"#0000"</span>/></span>        <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">TextView</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:textColor</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"#fff"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:text</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"朋友"</span>/></span>    <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">LinearLayout</span>></span>    <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">LinearLayout</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:id</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@+id/id_tab_address"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"0dp"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_weight</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"1"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"match_parent"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:gravity</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"center"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:orientation</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"vertical"</span>></span>        <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">ImageButton</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:id</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@+id/id_tab_address_img"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:src</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@drawable/tab_address_normal"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:background</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"#0000"</span>/></span>        <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">TextView</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:textColor</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"#fff"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:text</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"通讯录"</span>/></span>    <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">LinearLayout</span>></span>    <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">LinearLayout</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:id</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@+id/id_tab_setting"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"0dp"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_weight</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"1"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"match_parent"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:gravity</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"center"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:orientation</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"vertical"</span>></span>        <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">ImageButton</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:id</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@+id/id_tab_setting_img"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:src</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@drawable/tab_settings_normal"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:background</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"#0000"</span>/></span>        <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">TextView</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:textColor</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"#fff"</span>            <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:text</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"设置"</span>/></span>    <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">LinearLayout</span>></span><span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">LinearLayout</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li></ul>

简单的线性布局，放置我们的按钮。 
 
这个布局在后面的栗子中也会使用。

顶部布局

接下来是一个顶部的title

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-pi" style="color:#06666;box-sizing: border-box;"><?xml version="1.0" encoding="utf-8"?></span><span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">LinearLayout</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">xmlns:android</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"http://schemas.android.com/apk/res/android"</span>    <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:orientation</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"vertical"</span>    <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"match_parent"</span>    <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"45dp"</span>    <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:gravity</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"center"</span>    <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:background</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@drawable/title_bar"</span>></span>    <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">TextView</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:id</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@+id/tv_title"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"wrap_content"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:text</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"微信"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:textColor</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"#ffffff"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:textSize</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"20sp"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:textStyle</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"bold"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_gravity</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"center"</span>/></span><span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">LinearLayout</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul>

就一个TextView。

Fragment的布局

为了简单起见，这里面的布局只放置一个TextView

Java控制代码

TestActivity2

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">class</span> <span class="hljs-title" style="color:#66066;box-sizing: border-box;">TestActivity2</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">extends</span> <span class="hljs-title" style="color:#66066;box-sizing: border-box;">Activity</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">implements</span> <span class="hljs-title" style="color:#66066;box-sizing: border-box;">View</span>.<span class="hljs-title" style="color:#66066;box-sizing: border-box;">OnClickListener</span> {</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> LinearLayout mTabWeixin;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> LinearLayout mTabFrd;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> LinearLayout mTabAddress;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> LinearLayout mTabSetting;    <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//底部的按钮</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> ImageButton mWeiXin;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> ImageButton mFriend;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> ImageButton mAddress;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> ImageButton mSetting;    <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//FragmentLayout要加载的四个Fragment</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> WeiXinFragment weiXinFragment;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> FriendFragment friendFragment;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> AddressFragment addressFragment;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> SettingFragment settingFragment;    <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//顶部的标题</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> TextView tvTitle;    <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onCreate</span>(Bundle savedInstanceState) {        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">super</span>.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.test_ac_2);        initView();        initEvents();        setSelect(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">0</span>);    }    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initEvents</span>() {        mWeiXin.setOnClickListener(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">this</span>);        mFriend.setOnClickListener(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">this</span>);        mAddress.setOnClickListener(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">this</span>);        mSetting.setOnClickListener(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">this</span>);    }    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initView</span>() {        <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//初始化</span>        mTabWeixin= (LinearLayout) findViewById(R.id.id_tab_weixin);        mTabFrd= (LinearLayout) findViewById(R.id.id_tab_frd);        mTabAddress= (LinearLayout) findViewById(R.id.id_tab_address);        mTabSetting= (LinearLayout) findViewById(R.id.id_tab_setting);        mWeiXin= (ImageButton) findViewById(R.id.id_tab_weixin_img);        mFriend= (ImageButton) findViewById(R.id.id_tab_frd_img);        mAddress= (ImageButton) findViewById(R.id.id_tab_address_img);        mSetting= (ImageButton) findViewById(R.id.id_tab_setting_img);        tvTitle= (TextView) findViewById(R.id.tv_title);    }    <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(View view) {        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">switch</span> (view.getId()){            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> R.id.id_tab_weixin_img:                setSelect(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">0</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> R.id.id_tab_frd_img:                setSelect(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">1</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> R.id.id_tab_address_img:                setSelect(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">2</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> R.id.id_tab_setting_img:                setSelect(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">3</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;        }    }    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">hideFragment</span>(FragmentTransaction fragmentTransaction) {        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">if</span> (weiXinFragment!=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">null</span>){            fragmentTransaction.hide(weiXinFragment);        }        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">if</span> (friendFragment!=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">null</span>){            fragmentTransaction.hide(friendFragment);        }        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">if</span> (addressFragment!=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">null</span>){            fragmentTransaction.hide(addressFragment);        }        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">if</span> (settingFragment!=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">null</span>){            fragmentTransaction.hide(settingFragment);        }    }    <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">/*    * 重置所有的图片，让其恢复到灰色状态    * */</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">resetImage</span>() {        mSetting.setImageResource(R.drawable.tab_settings_normal);        mWeiXin.setImageResource(R.drawable.tab_weixin_normal);        mAddress.setImageResource(R.drawable.tab_address_normal);        mFriend.setImageResource(R.drawable.tab_find_frd_normal);    }    <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">/*    * 设置某个Fragment    * */</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">setSelect</span>(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> i){        FragmentManager fm=getFragmentManager();        FragmentTransaction fragmentTransaction=fm.beginTransaction();        <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//重置图片状态</span>        resetImage();        hideFragment(fragmentTransaction);        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">switch</span> (i){            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">0</span>:                <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//设置标题</span>                tvTitle.setText(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"微信"</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">if</span> (weiXinFragment==<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">null</span>){                    <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//如果Fragment还没实例化，实例化，并在fragmentTransaction中添加</span>                    weiXinFragment=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> WeiXinFragment();                    fragmentTransaction.add(R.id.id_content,weiXinFragment);                }<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">else</span>{                    <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//如果已经实例化了，就显示</span>                    fragmentTransaction.show(weiXinFragment);                }                fragmentTransaction.commit();                <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//改变底部图标的状态</span>                mWeiXin.setImageResource(R.drawable.tab_weixin_pressed);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">1</span>:                tvTitle.setText(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"朋友"</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">if</span> (friendFragment==<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">null</span>){                    friendFragment=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> FriendFragment();                    fragmentTransaction.add(R.id.id_content,friendFragment);                }<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">else</span>{                    fragmentTransaction.show(friendFragment);                }                fragmentTransaction.commit();                mFriend.setImageResource(R.drawable.tab_find_frd_pressed);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">2</span>:                tvTitle.setText(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"通讯录"</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">if</span> (addressFragment==<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">null</span>){                    addressFragment=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> AddressFragment();                    fragmentTransaction.add(R.id.id_content,addressFragment);                }<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">else</span>{                    fragmentTransaction.show(addressFragment);                }                fragmentTransaction.commit();                mAddress.setImageResource(R.drawable.tab_address_pressed);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">3</span>:                tvTitle.setText(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"设置"</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">if</span> (settingFragment==<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">null</span>){                    settingFragment=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> SettingFragment();                    fragmentTransaction.add(R.id.id_content,settingFragment);                }<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">else</span>{                    fragmentTransaction.show(settingFragment);                }                fragmentTransaction.commit();                mSetting.setImageResource(R.drawable.tab_settings_pressed);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;        }    }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li><li style="box-sizing: border-box; padding: 0px 5px;">118</li><li style="box-sizing: border-box; padding: 0px 5px;">119</li><li style="box-sizing: border-box; padding: 0px 5px;">120</li><li style="box-sizing: border-box; padding: 0px 5px;">121</li><li style="box-sizing: border-box; padding: 0px 5px;">122</li><li style="box-sizing: border-box; padding: 0px 5px;">123</li><li style="box-sizing: border-box; padding: 0px 5px;">124</li><li style="box-sizing: border-box; padding: 0px 5px;">125</li><li style="box-sizing: border-box; padding: 0px 5px;">126</li><li style="box-sizing: border-box; padding: 0px 5px;">127</li><li style="box-sizing: border-box; padding: 0px 5px;">128</li><li style="box-sizing: border-box; padding: 0px 5px;">129</li><li style="box-sizing: border-box; padding: 0px 5px;">130</li><li style="box-sizing: border-box; padding: 0px 5px;">131</li><li style="box-sizing: border-box; padding: 0px 5px;">132</li><li style="box-sizing: border-box; padding: 0px 5px;">133</li><li style="box-sizing: border-box; padding: 0px 5px;">134</li><li style="box-sizing: border-box; padding: 0px 5px;">135</li><li style="box-sizing: border-box; padding: 0px 5px;">136</li><li style="box-sizing: border-box; padding: 0px 5px;">137</li><li style="box-sizing: border-box; padding: 0px 5px;">138</li><li style="box-sizing: border-box; padding: 0px 5px;">139</li><li style="box-sizing: border-box; padding: 0px 5px;">140</li><li style="box-sizing: border-box; padding: 0px 5px;">141</li><li style="box-sizing: border-box; padding: 0px 5px;">142</li><li style="box-sizing: border-box; padding: 0px 5px;">143</li><li style="box-sizing: border-box; padding: 0px 5px;">144</li><li style="box-sizing: border-box; padding: 0px 5px;">145</li><li style="box-sizing: border-box; padding: 0px 5px;">146</li><li style="box-sizing: border-box; padding: 0px 5px;">147</li><li style="box-sizing: border-box; padding: 0px 5px;">148</li><li style="box-sizing: border-box; padding: 0px 5px;">149</li><li style="box-sizing: border-box; padding: 0px 5px;">150</li><li style="box-sizing: border-box; padding: 0px 5px;">151</li><li style="box-sizing: border-box; padding: 0px 5px;">152</li><li style="box-sizing: border-box; padding: 0px 5px;">153</li><li style="box-sizing: border-box; padding: 0px 5px;">154</li><li style="box-sizing: border-box; padding: 0px 5px;">155</li><li style="box-sizing: border-box; padding: 0px 5px;">156</li><li style="box-sizing: border-box; padding: 0px 5px;">157</li><li style="box-sizing: border-box; padding: 0px 5px;">158</li><li style="box-sizing: border-box; padding: 0px 5px;">159</li><li style="box-sizing: border-box; padding: 0px 5px;">160</li><li style="box-sizing: border-box; padding: 0px 5px;">161</li><li style="box-sizing: border-box; padding: 0px 5px;">162</li><li style="box-sizing: border-box; padding: 0px 5px;">163</li><li style="box-sizing: border-box; padding: 0px 5px;">164</li><li style="box-sizing: border-box; padding: 0px 5px;">165</li><li style="box-sizing: border-box; padding: 0px 5px;">166</li><li style="box-sizing: border-box; padding: 0px 5px;">167</li><li style="box-sizing: border-box; padding: 0px 5px;">168</li><li style="box-sizing: border-box; padding: 0px 5px;">169</li><li style="box-sizing: border-box; padding: 0px 5px;">170</li><li style="box-sizing: border-box; padding: 0px 5px;">171</li><li style="box-sizing: border-box; padding: 0px 5px;">172</li><li style="box-sizing: border-box; padding: 0px 5px;">173</li><li style="box-sizing: border-box; padding: 0px 5px;">174</li><li style="box-sizing: border-box; padding: 0px 5px;">175</li><li style="box-sizing: border-box; padding: 0px 5px;">176</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li><li style="box-sizing: border-box; padding: 0px 5px;">118</li><li style="box-sizing: border-box; padding: 0px 5px;">119</li><li style="box-sizing: border-box; padding: 0px 5px;">120</li><li style="box-sizing: border-box; padding: 0px 5px;">121</li><li style="box-sizing: border-box; padding: 0px 5px;">122</li><li style="box-sizing: border-box; padding: 0px 5px;">123</li><li style="box-sizing: border-box; padding: 0px 5px;">124</li><li style="box-sizing: border-box; padding: 0px 5px;">125</li><li style="box-sizing: border-box; padding: 0px 5px;">126</li><li style="box-sizing: border-box; padding: 0px 5px;">127</li><li style="box-sizing: border-box; padding: 0px 5px;">128</li><li style="box-sizing: border-box; padding: 0px 5px;">129</li><li style="box-sizing: border-box; padding: 0px 5px;">130</li><li style="box-sizing: border-box; padding: 0px 5px;">131</li><li style="box-sizing: border-box; padding: 0px 5px;">132</li><li style="box-sizing: border-box; padding: 0px 5px;">133</li><li style="box-sizing: border-box; padding: 0px 5px;">134</li><li style="box-sizing: border-box; padding: 0px 5px;">135</li><li style="box-sizing: border-box; padding: 0px 5px;">136</li><li style="box-sizing: border-box; padding: 0px 5px;">137</li><li style="box-sizing: border-box; padding: 0px 5px;">138</li><li style="box-sizing: border-box; padding: 0px 5px;">139</li><li style="box-sizing: border-box; padding: 0px 5px;">140</li><li style="box-sizing: border-box; padding: 0px 5px;">141</li><li style="box-sizing: border-box; padding: 0px 5px;">142</li><li style="box-sizing: border-box; padding: 0px 5px;">143</li><li style="box-sizing: border-box; padding: 0px 5px;">144</li><li style="box-sizing: border-box; padding: 0px 5px;">145</li><li style="box-sizing: border-box; padding: 0px 5px;">146</li><li style="box-sizing: border-box; padding: 0px 5px;">147</li><li style="box-sizing: border-box; padding: 0px 5px;">148</li><li style="box-sizing: border-box; padding: 0px 5px;">149</li><li style="box-sizing: border-box; padding: 0px 5px;">150</li><li style="box-sizing: border-box; padding: 0px 5px;">151</li><li style="box-sizing: border-box; padding: 0px 5px;">152</li><li style="box-sizing: border-box; padding: 0px 5px;">153</li><li style="box-sizing: border-box; padding: 0px 5px;">154</li><li style="box-sizing: border-box; padding: 0px 5px;">155</li><li style="box-sizing: border-box; padding: 0px 5px;">156</li><li style="box-sizing: border-box; padding: 0px 5px;">157</li><li style="box-sizing: border-box; padding: 0px 5px;">158</li><li style="box-sizing: border-box; padding: 0px 5px;">159</li><li style="box-sizing: border-box; padding: 0px 5px;">160</li><li style="box-sizing: border-box; padding: 0px 5px;">161</li><li style="box-sizing: border-box; padding: 0px 5px;">162</li><li style="box-sizing: border-box; padding: 0px 5px;">163</li><li style="box-sizing: border-box; padding: 0px 5px;">164</li><li style="box-sizing: border-box; padding: 0px 5px;">165</li><li style="box-sizing: border-box; padding: 0px 5px;">166</li><li style="box-sizing: border-box; padding: 0px 5px;">167</li><li style="box-sizing: border-box; padding: 0px 5px;">168</li><li style="box-sizing: border-box; padding: 0px 5px;">169</li><li style="box-sizing: border-box; padding: 0px 5px;">170</li><li style="box-sizing: border-box; padding: 0px 5px;">171</li><li style="box-sizing: border-box; padding: 0px 5px;">172</li><li style="box-sizing: border-box; padding: 0px 5px;">173</li><li style="box-sizing: border-box; padding: 0px 5px;">174</li><li style="box-sizing: border-box; padding: 0px 5px;">175</li><li style="box-sizing: border-box; padding: 0px 5px;">176</li></ul>

代码逻辑很清楚，中间需要提醒的地方已经用注释表明，这个小栗子其实就是Fragment的常规使用，涉及到的内容也都是Fragment基础知识，需要各位小伙伴烂熟于心。

使用ViewPager实现

思路

在上一个栗子当中，我们使用的是FragmentLayout来作为填充Fragment的容器。当使用ViewPage，我们需要把布局文件中的Layout替换成ViewPager。这就要求开发者对ViewPager的使用有基本的了解。

效果

可以看到使用了ViewPager之后不仅可以实现左右的滑动，而且还能通过底部的点击来实现页面切换的效果

具体实现

首先是布局文件

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-pi" style="color:#06666;box-sizing: border-box;"><?xml version="1.0" encoding="utf-8"?></span><span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">LinearLayout</span> <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">xmlns:android</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"http://schemas.android.com/apk/res/android"</span>    <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:orientation</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"vertical"</span>    <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"match_parent"</span>    <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"match_parent"</span>></span>    <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">include</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">layout</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@layout/top"</span>/></span>    <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">android.support.v4.view.ViewPager</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:id</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@+id/id_viewpager"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_width</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"match_parent"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_weight</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"1"</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">android:layout_height</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"0dp"</span>></span>    <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">android.support.v4.view.ViewPager</span>></span>    <span class="hljs-tag" style="color:#06666;box-sizing: border-box;"><<span class="hljs-title" style="color:#0088;box-sizing: border-box;">include</span>        <span class="hljs-attribute" style="color:#66066;box-sizing: border-box;">layout</span>=<span class="hljs-value" style="color:#0880;box-sizing: border-box;">"@layout/bottom"</span>/></span><span class="hljs-tag" style="color:#06666;box-sizing: border-box;"></<span class="hljs-title" style="color:#0088;box-sizing: border-box;">LinearLayout</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li></ul>

非常简单，就是把中间的FragmentLayout换成了ViewPager。

重点在于接下里的Java代码当中,里面涉及到了ViewPager的基本使用。

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">class</span> <span class="hljs-title" style="color:#66066;box-sizing: border-box;">TestActivity1</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">extends</span> <span class="hljs-title" style="color:#66066;box-sizing: border-box;">Activity</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">implements</span> <span class="hljs-title" style="color:#66066;box-sizing: border-box;">View</span>.<span class="hljs-title" style="color:#66066;box-sizing: border-box;">OnClickListener</span> {</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> ViewPager viewPager;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> PagerAdapter pagerAdapter;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> List<View> mViews =<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> ArrayList<>();    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> FragmentPagerAdapter fragmentPagerAdapter;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> FragmentStatePagerAdapter fragmentStatePagerAdapter;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> LinearLayout mTabWeixin;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> LinearLayout mTabFrd;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> LinearLayout mTabAddress;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> LinearLayout mTabSetting;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> ImageButton mWeiXin;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> ImageButton mFriend;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> ImageButton mAddress;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> ImageButton mSetting;    <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onCreate</span>(Bundle savedInstanceState) {        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">super</span>.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.test_ac_1);        initView();        initEvents();    }    <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">/*    * 初始化事件    * */</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initEvents</span>() {        mWeiXin.setOnClickListener(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> View.OnClickListener() {            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(View view) {                viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">0</span>);                mWeiXin.setImageResource(R.drawable.tab_weixin_pressed);            }        });        mSetting.setOnClickListener(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> View.OnClickListener() {            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(View view) {                viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">3</span>);                mSetting.setImageResource(R.drawable.tab_settings_pressed);            }        });        mAddress.setOnClickListener(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> View.OnClickListener() {            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(View view) {                viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">2</span>);                mAddress.setImageResource(R.drawable.tab_address_pressed);            }        });        mFriend.setOnClickListener(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> View.OnClickListener() {            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(View view) {                viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">1</span>);                mFriend.setImageResource(R.drawable.tab_find_frd_pressed);            }        });        viewPager.addOnPageChangeListener(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> ViewPager.OnPageChangeListener() {            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onPageScrolled</span>(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> position, <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">float</span> positionOffset, <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> positionOffsetPixels) {                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> currentItem =viewPager.getCurrentItem();                resetImage();                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">switch</span> (currentItem){                    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">0</span>:                        mWeiXin.setImageResource(R.drawable.tab_weixin_pressed);                        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;                    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">1</span>:                        mFriend.setImageResource(R.drawable.tab_find_frd_pressed);                        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;                    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">2</span>:                        mAddress.setImageResource(R.drawable.tab_address_pressed);                        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;                    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">3</span>:                        mSetting.setImageResource(R.drawable.tab_settings_pressed);                        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;                }            }            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onPageSelected</span>(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> position) {            }            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onPageScrollStateChanged</span>(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> state) {            }        });    }    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initView</span>() {        <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//初始化</span>        viewPager= (ViewPager) findViewById(R.id.id_viewpager);        mTabWeixin= (LinearLayout) findViewById(R.id.id_tab_weixin);        mTabFrd= (LinearLayout) findViewById(R.id.id_tab_frd);        mTabAddress= (LinearLayout) findViewById(R.id.id_tab_address);        mTabSetting= (LinearLayout) findViewById(R.id.id_tab_setting);        mWeiXin= (ImageButton) findViewById(R.id.id_tab_weixin_img);        mFriend= (ImageButton) findViewById(R.id.id_tab_frd_img);        mAddress= (ImageButton) findViewById(R.id.id_tab_address_img);        mSetting= (ImageButton) findViewById(R.id.id_tab_setting_img);        LayoutInflater mLayoutInfater=LayoutInflater.from(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">this</span>);        View view1=mLayoutInfater.inflate(R.layout.tab01,<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">null</span>);        View view2=mLayoutInfater.inflate(R.layout.tab02,<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">null</span>);        View view3=mLayoutInfater.inflate(R.layout.tab03,<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">null</span>);        View view4=mLayoutInfater.inflate(R.layout.tab04,<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">null</span>);        mViews.add(view1);        mViews.add(view2);        mViews.add(view3);        mViews.add(view4);        pagerAdapter=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> PagerAdapter() {            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> Object <span class="hljs-title" style="box-sizing: border-box;">instantiateItem</span>(ViewGroup container, <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> position) {                View view=mViews.get(position);                container.addView(view);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">return</span> view;            }            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">destroyItem</span>(ViewGroup container, <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> position, Object object) {                container.removeView(mViews.get(position));            }            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> <span class="hljs-title" style="box-sizing: border-box;">getCount</span>() {                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">return</span> mViews.size();            }            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">boolean</span> <span class="hljs-title" style="box-sizing: border-box;">isViewFromObject</span>(View view, Object object) {                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">return</span> view==object;            }        };        viewPager.setAdapter(pagerAdapter);    }    <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(View view) {        Log.d(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"--tab--"</span>,<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"tab click"</span>);        <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//重置所有的图片</span>        resetImage();        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">switch</span> (view.getId()){            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> R.id.id_tab_weixin:                viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">0</span>);                mWeiXin.setImageResource(R.drawable.tab_weixin_pressed);                Log.d(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"--tab--"</span>,<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"tab weixin"</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> R.id.id_tab_frd:                viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">1</span>);                mFriend.setImageResource(R.drawable.tab_find_frd_pressed);                Log.d(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"--tab--"</span>,<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"tab friend"</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> R.id.id_tab_address:                viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">2</span>);                mAddress.setImageResource(R.drawable.tab_address_pressed);                Log.d(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"--tab--"</span>,<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"tab address"</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> R.id.id_tab_setting:                viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">3</span>);                mSetting.setImageResource(R.drawable.tab_settings_pressed);                Log.d(<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"--tab--"</span>,<span class="hljs-string" style="color:#0880;box-sizing: border-box;">"tab setting"</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;        }    }    <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">/*    * 让所有的图片都变暗    * */</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">resetImage</span>() {        mSetting.setImageResource(R.drawable.tab_settings_normal);        mWeiXin.setImageResource(R.drawable.tab_weixin_normal);        mAddress.setImageResource(R.drawable.tab_address_normal);        mFriend.setImageResource(R.drawable.tab_find_frd_normal);    }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li><li style="box-sizing: border-box; padding: 0px 5px;">118</li><li style="box-sizing: border-box; padding: 0px 5px;">119</li><li style="box-sizing: border-box; padding: 0px 5px;">120</li><li style="box-sizing: border-box; padding: 0px 5px;">121</li><li style="box-sizing: border-box; padding: 0px 5px;">122</li><li style="box-sizing: border-box; padding: 0px 5px;">123</li><li style="box-sizing: border-box; padding: 0px 5px;">124</li><li style="box-sizing: border-box; padding: 0px 5px;">125</li><li style="box-sizing: border-box; padding: 0px 5px;">126</li><li style="box-sizing: border-box; padding: 0px 5px;">127</li><li style="box-sizing: border-box; padding: 0px 5px;">128</li><li style="box-sizing: border-box; padding: 0px 5px;">129</li><li style="box-sizing: border-box; padding: 0px 5px;">130</li><li style="box-sizing: border-box; padding: 0px 5px;">131</li><li style="box-sizing: border-box; padding: 0px 5px;">132</li><li style="box-sizing: border-box; padding: 0px 5px;">133</li><li style="box-sizing: border-box; padding: 0px 5px;">134</li><li style="box-sizing: border-box; padding: 0px 5px;">135</li><li style="box-sizing: border-box; padding: 0px 5px;">136</li><li style="box-sizing: border-box; padding: 0px 5px;">137</li><li style="box-sizing: border-box; padding: 0px 5px;">138</li><li style="box-sizing: border-box; padding: 0px 5px;">139</li><li style="box-sizing: border-box; padding: 0px 5px;">140</li><li style="box-sizing: border-box; padding: 0px 5px;">141</li><li style="box-sizing: border-box; padding: 0px 5px;">142</li><li style="box-sizing: border-box; padding: 0px 5px;">143</li><li style="box-sizing: border-box; padding: 0px 5px;">144</li><li style="box-sizing: border-box; padding: 0px 5px;">145</li><li style="box-sizing: border-box; padding: 0px 5px;">146</li><li style="box-sizing: border-box; padding: 0px 5px;">147</li><li style="box-sizing: border-box; padding: 0px 5px;">148</li><li style="box-sizing: border-box; padding: 0px 5px;">149</li><li style="box-sizing: border-box; padding: 0px 5px;">150</li><li style="box-sizing: border-box; padding: 0px 5px;">151</li><li style="box-sizing: border-box; padding: 0px 5px;">152</li><li style="box-sizing: border-box; padding: 0px 5px;">153</li><li style="box-sizing: border-box; padding: 0px 5px;">154</li><li style="box-sizing: border-box; padding: 0px 5px;">155</li><li style="box-sizing: border-box; padding: 0px 5px;">156</li><li style="box-sizing: border-box; padding: 0px 5px;">157</li><li style="box-sizing: border-box; padding: 0px 5px;">158</li><li style="box-sizing: border-box; padding: 0px 5px;">159</li><li style="box-sizing: border-box; padding: 0px 5px;">160</li><li style="box-sizing: border-box; padding: 0px 5px;">161</li><li style="box-sizing: border-box; padding: 0px 5px;">162</li><li style="box-sizing: border-box; padding: 0px 5px;">163</li><li style="box-sizing: border-box; padding: 0px 5px;">164</li><li style="box-sizing: border-box; padding: 0px 5px;">165</li><li style="box-sizing: border-box; padding: 0px 5px;">166</li><li style="box-sizing: border-box; padding: 0px 5px;">167</li><li style="box-sizing: border-box; padding: 0px 5px;">168</li><li style="box-sizing: border-box; padding: 0px 5px;">169</li><li style="box-sizing: border-box; padding: 0px 5px;">170</li><li style="box-sizing: border-box; padding: 0px 5px;">171</li><li style="box-sizing: border-box; padding: 0px 5px;">172</li><li style="box-sizing: border-box; padding: 0px 5px;">173</li><li style="box-sizing: border-box; padding: 0px 5px;">174</li><li style="box-sizing: border-box; padding: 0px 5px;">175</li><li style="box-sizing: border-box; padding: 0px 5px;">176</li><li style="box-sizing: border-box; padding: 0px 5px;">177</li><li style="box-sizing: border-box; padding: 0px 5px;">178</li><li style="box-sizing: border-box; padding: 0px 5px;">179</li><li style="box-sizing: border-box; padding: 0px 5px;">180</li><li style="box-sizing: border-box; padding: 0px 5px;">181</li><li style="box-sizing: border-box; padding: 0px 5px;">182</li><li style="box-sizing: border-box; padding: 0px 5px;">183</li><li style="box-sizing: border-box; padding: 0px 5px;">184</li><li style="box-sizing: border-box; padding: 0px 5px;">185</li><li style="box-sizing: border-box; padding: 0px 5px;">186</li><li style="box-sizing: border-box; padding: 0px 5px;">187</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li><li style="box-sizing: border-box; padding: 0px 5px;">118</li><li style="box-sizing: border-box; padding: 0px 5px;">119</li><li style="box-sizing: border-box; padding: 0px 5px;">120</li><li style="box-sizing: border-box; padding: 0px 5px;">121</li><li style="box-sizing: border-box; padding: 0px 5px;">122</li><li style="box-sizing: border-box; padding: 0px 5px;">123</li><li style="box-sizing: border-box; padding: 0px 5px;">124</li><li style="box-sizing: border-box; padding: 0px 5px;">125</li><li style="box-sizing: border-box; padding: 0px 5px;">126</li><li style="box-sizing: border-box; padding: 0px 5px;">127</li><li style="box-sizing: border-box; padding: 0px 5px;">128</li><li style="box-sizing: border-box; padding: 0px 5px;">129</li><li style="box-sizing: border-box; padding: 0px 5px;">130</li><li style="box-sizing: border-box; padding: 0px 5px;">131</li><li style="box-sizing: border-box; padding: 0px 5px;">132</li><li style="box-sizing: border-box; padding: 0px 5px;">133</li><li style="box-sizing: border-box; padding: 0px 5px;">134</li><li style="box-sizing: border-box; padding: 0px 5px;">135</li><li style="box-sizing: border-box; padding: 0px 5px;">136</li><li style="box-sizing: border-box; padding: 0px 5px;">137</li><li style="box-sizing: border-box; padding: 0px 5px;">138</li><li style="box-sizing: border-box; padding: 0px 5px;">139</li><li style="box-sizing: border-box; padding: 0px 5px;">140</li><li style="box-sizing: border-box; padding: 0px 5px;">141</li><li style="box-sizing: border-box; padding: 0px 5px;">142</li><li style="box-sizing: border-box; padding: 0px 5px;">143</li><li style="box-sizing: border-box; padding: 0px 5px;">144</li><li style="box-sizing: border-box; padding: 0px 5px;">145</li><li style="box-sizing: border-box; padding: 0px 5px;">146</li><li style="box-sizing: border-box; padding: 0px 5px;">147</li><li style="box-sizing: border-box; padding: 0px 5px;">148</li><li style="box-sizing: border-box; padding: 0px 5px;">149</li><li style="box-sizing: border-box; padding: 0px 5px;">150</li><li style="box-sizing: border-box; padding: 0px 5px;">151</li><li style="box-sizing: border-box; padding: 0px 5px;">152</li><li style="box-sizing: border-box; padding: 0px 5px;">153</li><li style="box-sizing: border-box; padding: 0px 5px;">154</li><li style="box-sizing: border-box; padding: 0px 5px;">155</li><li style="box-sizing: border-box; padding: 0px 5px;">156</li><li style="box-sizing: border-box; padding: 0px 5px;">157</li><li style="box-sizing: border-box; padding: 0px 5px;">158</li><li style="box-sizing: border-box; padding: 0px 5px;">159</li><li style="box-sizing: border-box; padding: 0px 5px;">160</li><li style="box-sizing: border-box; padding: 0px 5px;">161</li><li style="box-sizing: border-box; padding: 0px 5px;">162</li><li style="box-sizing: border-box; padding: 0px 5px;">163</li><li style="box-sizing: border-box; padding: 0px 5px;">164</li><li style="box-sizing: border-box; padding: 0px 5px;">165</li><li style="box-sizing: border-box; padding: 0px 5px;">166</li><li style="box-sizing: border-box; padding: 0px 5px;">167</li><li style="box-sizing: border-box; padding: 0px 5px;">168</li><li style="box-sizing: border-box; padding: 0px 5px;">169</li><li style="box-sizing: border-box; padding: 0px 5px;">170</li><li style="box-sizing: border-box; padding: 0px 5px;">171</li><li style="box-sizing: border-box; padding: 0px 5px;">172</li><li style="box-sizing: border-box; padding: 0px 5px;">173</li><li style="box-sizing: border-box; padding: 0px 5px;">174</li><li style="box-sizing: border-box; padding: 0px 5px;">175</li><li style="box-sizing: border-box; padding: 0px 5px;">176</li><li style="box-sizing: border-box; padding: 0px 5px;">177</li><li style="box-sizing: border-box; padding: 0px 5px;">178</li><li style="box-sizing: border-box; padding: 0px 5px;">179</li><li style="box-sizing: border-box; padding: 0px 5px;">180</li><li style="box-sizing: border-box; padding: 0px 5px;">181</li><li style="box-sizing: border-box; padding: 0px 5px;">182</li><li style="box-sizing: border-box; padding: 0px 5px;">183</li><li style="box-sizing: border-box; padding: 0px 5px;">184</li><li style="box-sizing: border-box; padding: 0px 5px;">185</li><li style="box-sizing: border-box; padding: 0px 5px;">186</li><li style="box-sizing: border-box; padding: 0px 5px;">187</li></ul>

使用ViewPager+FragmentPagerAdapter方法实现

思路

同ViewPager实现相同

效果

同ViewPager实现相同

补充

既然这种方式使用的思路和效果和直接使用ViewPager的相同，那么采用FragmenAdapter的方式来实现Tab页面切换有什么好处呢？

首先单纯使用ViewPager时，里面的View是通过LayoutInfater装载进去的，虽然也能够实现和和采用FragmentPagerAdapter一样的效果，但是如果这么做，必然所有的逻辑控制都放在MainActivity当中，对于后期代码的维护十分不利。

使用FragmentPagerAdapter的好处之一就是能够使得当前页面的逻辑处理仅有当前Fragment来承担，相当于把MainActivity里面的事件逻辑分派给了Fragment来处理。这个优点，其实在使用Fragment的时候也能体现出来。

所以说，如果仅仅是页面的展示（如图片轮播），直接使用ViewPager就好了，但如果ViewPager的每个页面中包含比较复杂的逻辑，就应该使用ViewPager+FragmentPagerAdapter的方式来完成Tab页面的切换。

具体代码

xml与ViewPager实现的相同，不再重复。

Java代码：

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">class</span> <span class="hljs-title" style="color:#66066;box-sizing: border-box;">TestActivity3</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">extends</span> <span class="hljs-title" style="color:#66066;box-sizing: border-box;">FragmentActivity</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">implements</span> <span class="hljs-title" style="color:#66066;box-sizing: border-box;">View</span>.<span class="hljs-title" style="color:#66066;box-sizing: border-box;">OnClickListener</span> {</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> ViewPager viewPager;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> FragmentPagerAdapter mAdapter;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> List<Fragment> fragments;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> LinearLayout mTabWeixin;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> LinearLayout mTabFrd;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> LinearLayout mTabAddress;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> LinearLayout mTabSetting;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> ImageButton mWeiXin;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> ImageButton mFriend;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> ImageButton mAddress;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> ImageButton mSetting;    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> select;    <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">protected</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onCreate</span>(Bundle savedInstanceState) {        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">super</span>.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.test_ac_3);        initView();        initEvent();    }    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initEvent</span>() {        mWeiXin.setOnClickListener(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">this</span>);        mFriend.setOnClickListener(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">this</span>);        mAddress.setOnClickListener(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">this</span>);        mSetting.setOnClickListener(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">this</span>);    }    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">initView</span>() {        <span class="hljs-comment" style="color:#8800;box-sizing: border-box;">//初始化</span>        viewPager= (ViewPager) findViewById(R.id.id_viewpager3);        mTabWeixin= (LinearLayout) findViewById(R.id.id_tab_weixin);        mTabFrd= (LinearLayout) findViewById(R.id.id_tab_frd);        mTabAddress= (LinearLayout) findViewById(R.id.id_tab_address);        mTabSetting= (LinearLayout) findViewById(R.id.id_tab_setting);        mWeiXin= (ImageButton) findViewById(R.id.id_tab_weixin_img);        mFriend= (ImageButton) findViewById(R.id.id_tab_frd_img);        mAddress= (ImageButton) findViewById(R.id.id_tab_address_img);        mSetting= (ImageButton) findViewById(R.id.id_tab_setting_img);        fragments=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> ArrayList<>();        WeiXinFragment weiXinFragment=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> WeiXinFragment();        FriendFragment friendFragment=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> FriendFragment();        AddressFragment addressFragment=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> AddressFragment();        SettingFragment settingFragment=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> SettingFragment();        fragments.add(weiXinFragment);        fragments.add(friendFragment);        fragments.add(addressFragment);        fragments.add(settingFragment);        mAdapter=<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> FragmentPagerAdapter(getSupportFragmentManager()) {            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> Fragment <span class="hljs-title" style="box-sizing: border-box;">getItem</span>(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> position) {                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">return</span> fragments.get(position);            }            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> <span class="hljs-title" style="box-sizing: border-box;">getCount</span>() {                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">return</span> fragments.size();            }        };        viewPager.setAdapter(mAdapter);        viewPager.setOnPageChangeListener(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">new</span> ViewPager.OnPageChangeListener() {            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onPageScrolled</span>(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> position, <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">float</span> positionOffset, <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> positionOffsetPixels) {            }            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onPageSelected</span>(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> position) {                resetImage();                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">switch</span> (position){                    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">0</span>:                        mWeiXin.setImageResource(R.drawable.tab_weixin_pressed);                        viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">0</span>);                        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;                    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">1</span>:                        mFriend.setImageResource(R.drawable.tab_find_frd_pressed);                        viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">1</span>);                        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;                    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">2</span>:                        mAddress.setImageResource(R.drawable.tab_address_pressed);                        viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">2</span>);                        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;                    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">3</span>:                        mSetting.setImageResource(R.drawable.tab_settings_pressed);                        viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">3</span>);                        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;                }            }            <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onPageScrollStateChanged</span>(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> state) {            }        });    }    <span class="hljs-annotation" style="color:#9b859d;box-sizing: border-box;">@Override</span>    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onClick</span>(View view) {        resetImage();        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">switch</span> (view.getId()) {            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> R.id.id_tab_weixin_img:                setSelect(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">0</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> R.id.id_tab_frd_img:                setSelect(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">1</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> R.id.id_tab_address_img:                setSelect(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">2</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> R.id.id_tab_setting_img:                setSelect(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">3</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;        }    }    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">setSelect</span>(<span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">int</span> select) {        <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">switch</span> (select){            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">0</span>:                mWeiXin.setImageResource(R.drawable.tab_weixin_pressed);                viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">0</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">1</span>:                mFriend.setImageResource(R.drawable.tab_find_frd_pressed);                viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">1</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">2</span>:                mAddress.setImageResource(R.drawable.tab_address_normal);                viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">2</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;            <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">case</span> <span class="hljs-number" style="color:#06666;box-sizing: border-box;">3</span>:                mSetting.setImageResource(R.drawable.tab_settings_pressed);                viewPager.setCurrentItem(<span class="hljs-number" style="color:#06666;box-sizing: border-box;">3</span>);                <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">break</span>;        }    }    <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color:#0088;box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">resetImage</span>() {        mSetting.setImageResource(R.drawable.tab_settings_normal);        mWeiXin.setImageResource(R.drawable.tab_weixin_normal);        mAddress.setImageResource(R.drawable.tab_address_normal);        mFriend.setImageResource(R.drawable.tab_find_frd_normal);    }}</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li><li style="box-sizing: border-box; padding: 0px 5px;">118</li><li style="box-sizing: border-box; padding: 0px 5px;">119</li><li style="box-sizing: border-box; padding: 0px 5px;">120</li><li style="box-sizing: border-box; padding: 0px 5px;">121</li><li style="box-sizing: border-box; padding: 0px 5px;">122</li><li style="box-sizing: border-box; padding: 0px 5px;">123</li><li style="box-sizing: border-box; padding: 0px 5px;">124</li><li style="box-sizing: border-box; padding: 0px 5px;">125</li><li style="box-sizing: border-box; padding: 0px 5px;">126</li><li style="box-sizing: border-box; padding: 0px 5px;">127</li><li style="box-sizing: border-box; padding: 0px 5px;">128</li><li style="box-sizing: border-box; padding: 0px 5px;">129</li><li style="box-sizing: border-box; padding: 0px 5px;">130</li><li style="box-sizing: border-box; padding: 0px 5px;">131</li><li style="box-sizing: border-box; padding: 0px 5px;">132</li><li style="box-sizing: border-box; padding: 0px 5px;">133</li><li style="box-sizing: border-box; padding: 0px 5px;">134</li><li style="box-sizing: border-box; padding: 0px 5px;">135</li><li style="box-sizing: border-box; padding: 0px 5px;">136</li><li style="box-sizing: border-box; padding: 0px 5px;">137</li><li style="box-sizing: border-box; padding: 0px 5px;">138</li><li style="box-sizing: border-box; padding: 0px 5px;">139</li><li style="box-sizing: border-box; padding: 0px 5px;">140</li><li style="box-sizing: border-box; padding: 0px 5px;">141</li><li style="box-sizing: border-box; padding: 0px 5px;">142</li><li style="box-sizing: border-box; padding: 0px 5px;">143</li><li style="box-sizing: border-box; padding: 0px 5px;">144</li><li style="box-sizing: border-box; padding: 0px 5px;">145</li><li style="box-sizing: border-box; padding: 0px 5px;">146</li><li style="box-sizing: border-box; padding: 0px 5px;">147</li><li style="box-sizing: border-box; padding: 0px 5px;">148</li><li style="box-sizing: border-box; padding: 0px 5px;">149</li><li style="box-sizing: border-box; padding: 0px 5px;">150</li><li style="box-sizing: border-box; padding: 0px 5px;">151</li><li style="box-sizing: border-box; padding: 0px 5px;">152</li><li style="box-sizing: border-box; padding: 0px 5px;">153</li><li style="box-sizing: border-box; padding: 0px 5px;">154</li><li style="box-sizing: border-box; padding: 0px 5px;">155</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li><li style="box-sizing: border-box; padding: 0px 5px;">54</li><li style="box-sizing: border-box; padding: 0px 5px;">55</li><li style="box-sizing: border-box; padding: 0px 5px;">56</li><li style="box-sizing: border-box; padding: 0px 5px;">57</li><li style="box-sizing: border-box; padding: 0px 5px;">58</li><li style="box-sizing: border-box; padding: 0px 5px;">59</li><li style="box-sizing: border-box; padding: 0px 5px;">60</li><li style="box-sizing: border-box; padding: 0px 5px;">61</li><li style="box-sizing: border-box; padding: 0px 5px;">62</li><li style="box-sizing: border-box; padding: 0px 5px;">63</li><li style="box-sizing: border-box; padding: 0px 5px;">64</li><li style="box-sizing: border-box; padding: 0px 5px;">65</li><li style="box-sizing: border-box; padding: 0px 5px;">66</li><li style="box-sizing: border-box; padding: 0px 5px;">67</li><li style="box-sizing: border-box; padding: 0px 5px;">68</li><li style="box-sizing: border-box; padding: 0px 5px;">69</li><li style="box-sizing: border-box; padding: 0px 5px;">70</li><li style="box-sizing: border-box; padding: 0px 5px;">71</li><li style="box-sizing: border-box; padding: 0px 5px;">72</li><li style="box-sizing: border-box; padding: 0px 5px;">73</li><li style="box-sizing: border-box; padding: 0px 5px;">74</li><li style="box-sizing: border-box; padding: 0px 5px;">75</li><li style="box-sizing: border-box; padding: 0px 5px;">76</li><li style="box-sizing: border-box; padding: 0px 5px;">77</li><li style="box-sizing: border-box; padding: 0px 5px;">78</li><li style="box-sizing: border-box; padding: 0px 5px;">79</li><li style="box-sizing: border-box; padding: 0px 5px;">80</li><li style="box-sizing: border-box; padding: 0px 5px;">81</li><li style="box-sizing: border-box; padding: 0px 5px;">82</li><li style="box-sizing: border-box; padding: 0px 5px;">83</li><li style="box-sizing: border-box; padding: 0px 5px;">84</li><li style="box-sizing: border-box; padding: 0px 5px;">85</li><li style="box-sizing: border-box; padding: 0px 5px;">86</li><li style="box-sizing: border-box; padding: 0px 5px;">87</li><li style="box-sizing: border-box; padding: 0px 5px;">88</li><li style="box-sizing: border-box; padding: 0px 5px;">89</li><li style="box-sizing: border-box; padding: 0px 5px;">90</li><li style="box-sizing: border-box; padding: 0px 5px;">91</li><li style="box-sizing: border-box; padding: 0px 5px;">92</li><li style="box-sizing: border-box; padding: 0px 5px;">93</li><li style="box-sizing: border-box; padding: 0px 5px;">94</li><li style="box-sizing: border-box; padding: 0px 5px;">95</li><li style="box-sizing: border-box; padding: 0px 5px;">96</li><li style="box-sizing: border-box; padding: 0px 5px;">97</li><li style="box-sizing: border-box; padding: 0px 5px;">98</li><li style="box-sizing: border-box; padding: 0px 5px;">99</li><li style="box-sizing: border-box; padding: 0px 5px;">100</li><li style="box-sizing: border-box; padding: 0px 5px;">101</li><li style="box-sizing: border-box; padding: 0px 5px;">102</li><li style="box-sizing: border-box; padding: 0px 5px;">103</li><li style="box-sizing: border-box; padding: 0px 5px;">104</li><li style="box-sizing: border-box; padding: 0px 5px;">105</li><li style="box-sizing: border-box; padding: 0px 5px;">106</li><li style="box-sizing: border-box; padding: 0px 5px;">107</li><li style="box-sizing: border-box; padding: 0px 5px;">108</li><li style="box-sizing: border-box; padding: 0px 5px;">109</li><li style="box-sizing: border-box; padding: 0px 5px;">110</li><li style="box-sizing: border-box; padding: 0px 5px;">111</li><li style="box-sizing: border-box; padding: 0px 5px;">112</li><li style="box-sizing: border-box; padding: 0px 5px;">113</li><li style="box-sizing: border-box; padding: 0px 5px;">114</li><li style="box-sizing: border-box; padding: 0px 5px;">115</li><li style="box-sizing: border-box; padding: 0px 5px;">116</li><li style="box-sizing: border-box; padding: 0px 5px;">117</li><li style="box-sizing: border-box; padding: 0px 5px;">118</li><li style="box-sizing: border-box; padding: 0px 5px;">119</li><li style="box-sizing: border-box; padding: 0px 5px;">120</li><li style="box-sizing: border-box; padding: 0px 5px;">121</li><li style="box-sizing: border-box; padding: 0px 5px;">122</li><li style="box-sizing: border-box; padding: 0px 5px;">123</li><li style="box-sizing: border-box; padding: 0px 5px;">124</li><li style="box-sizing: border-box; padding: 0px 5px;">125</li><li style="box-sizing: border-box; padding: 0px 5px;">126</li><li style="box-sizing: border-box; padding: 0px 5px;">127</li><li style="box-sizing: border-box; padding: 0px 5px;">128</li><li style="box-sizing: border-box; padding: 0px 5px;">129</li><li style="box-sizing: border-box; padding: 0px 5px;">130</li><li style="box-sizing: border-box; padding: 0px 5px;">131</li><li style="box-sizing: border-box; padding: 0px 5px;">132</li><li style="box-sizing: border-box; padding: 0px 5px;">133</li><li style="box-sizing: border-box; padding: 0px 5px;">134</li><li style="box-sizing: border-box; padding: 0px 5px;">135</li><li style="box-sizing: border-box; padding: 0px 5px;">136</li><li style="box-sizing: border-box; padding: 0px 5px;">137</li><li style="box-sizing: border-box; padding: 0px 5px;">138</li><li style="box-sizing: border-box; padding: 0px 5px;">139</li><li style="box-sizing: border-box; padding: 0px 5px;">140</li><li style="box-sizing: border-box; padding: 0px 5px;">141</li><li style="box-sizing: border-box; padding: 0px 5px;">142</li><li style="box-sizing: border-box; padding: 0px 5px;">143</li><li style="box-sizing: border-box; padding: 0px 5px;">144</li><li style="box-sizing: border-box; padding: 0px 5px;">145</li><li style="box-sizing: border-box; padding: 0px 5px;">146</li><li style="box-sizing: border-box; padding: 0px 5px;">147</li><li style="box-sizing: border-box; padding: 0px 5px;">148</li><li style="box-sizing: border-box; padding: 0px 5px;">149</li><li style="box-sizing: border-box; padding: 0px 5px;">150</li><li style="box-sizing: border-box; padding: 0px 5px;">151</li><li style="box-sizing: border-box; padding: 0px 5px;">152</li><li style="box-sizing: border-box; padding: 0px 5px;">153</li><li style="box-sizing: border-box; padding: 0px 5px;">154</li><li style="box-sizing: border-box; padding: 0px 5px;">155</li></ul>

使用框架

如果每一次在开发的过程当中都去写一个这样的Tab页面，无疑耗时耗力，当然，对于初学者而言，这种“耗时耗力”能够帮助他们了解效果实现的基本实现原理。

在这里推荐给大家一款比较不错的ViewPager框架：

LuckyJayce/ViewPagerIndicator

里面的介绍比较详细，这里就不多讲了，对这个框架感兴趣的小伙伴可以去github上仔细研读一下~

最后附上下载的源码：github