最详细的 TabLayout 的用法

pklq6594 7年前
   <p>TabLayout是属于容器控件, 提供水平显示Tab的效果. 常常和ViewPager配合使用. 我将全面地讲解其用法. 反正我是没看过比我还详细的了.</p>    <h2>演示</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/263fc4498a0a44636c5a3ac383840b4b.jpg"></p>    <h3>添加依赖</h3>    <p>这是Android Design 包下的类, 该包是Android5.0 引入的UI包</p>    <pre>  <code class="language-java">compile 'com.android.support:design:25.2.0'  </code></pre>    <h3>布局</h3>    <pre>  <code class="language-java"><android.support.design.widget.TabLayout      android:id="@+id/tab_layout"      android:layout_width="match_parent"      android:layout_height="wrap_content">    </android.support.design.widget.TabLayout>  </code></pre>    <h3>代码</h3>    <pre>  <code class="language-java">public classMainActivityextendsAppCompatActivity{        @BindView(R.id.tab_layout)      TabLayout mTabLayout;        @Override      protectedvoidonCreate(Bundle savedInstanceState){          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);          ButterKnife.bind(this);            mTabLayout.addTab(mTabLayout.newTab().setText("首页"));          mTabLayout.addTab(mTabLayout.newTab().setText("分类"));          mTabLayout.addTab(mTabLayout.newTab().setText("设置"));      }  }  </code></pre>    <h3>第二种方式</h3>    <p>完全通过布局创建</p>    <pre>  <code class="language-java"><android.support.design.widget.TabLayout      android:id="@+id/tab_layout"      android:layout_width="match_parent"      android:layout_height="wrap_content">        <android.support.design.widget.TabItem          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:text="首页"          />        <android.support.design.widget.TabItem          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:text="分类"          />        <android.support.design.widget.TabItem          android:layout_width="wrap_content"          android:layout_height="wrap_content"          android:text="设置"          />    </android.support.design.widget.TabLayout>  </code></pre>    <h2>TabLayout</h2>    <p>方法有点多</p>    <h3>属性</h3>    <p>修改布局的属性</p>    <p>显示模式</p>    <p>可滑动</p>    <pre>  <code class="language-java">app:tabMode="scrollable"  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/cdec81f50a0a3fde2429138f4579e2d8.jpg"></p>    <p>固定</p>    <pre>  <code class="language-java">app:tabMode="fixed"  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/7d696480f452179a933276906d3cb857.jpg"></p>    <p>指示器选项</p>    <pre>  <code class="language-java">app:tabIndicatorHeight="10dp" //指示器高度  app:tabIndicatorColor="@color/colorPrimary" // 指示器颜色  </code></pre>    <p>文字选项</p>    <pre>  <code class="language-java">app:tabSelectedTextColor="#ffffff" // 选择的Tab的文字颜色  app:tabTextColor="#000000" // 未选择的Tab文字颜色  app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Large" // 文字样式  </code></pre>    <p>背景设置</p>    <p>两者没什么区别</p>    <pre>  <code class="language-java">android:background="@color/colorAccent" // 背景  app:tabBackground="@color/colorPrimary" //背景  </code></pre>    <p>标签距离</p>    <pre>  <code class="language-java">app:tabPaddingStart="10dp"  app:tabPaddingBottom="10dp"  app:tabPadding="10dp"  app:tabPaddingEnd="10dp"  app:tabPaddingTop="10dp"  </code></pre>    <p>对齐方式</p>    <p>居中显示</p>    <pre>  <code class="language-java">app:tabGravity="center"  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/80998a747496ce0484f9f49187ba5d62.jpg"></p>    <p>填充</p>    <pre>  <code class="language-java">app:tabGravity="fill"  </code></pre>    <p><img src="https://simg.open-open.com/show/9de7b5065536fd766a36130e202709bb.jpg" alt="最详细的 TabLayout 的用法" width="550" height="978"></p>    <p>偏移</p>    <p>从左边开始偏移距离, 必须是可滑动的模式 scrollable</p>    <pre>  <code class="language-java">app:tabContentStart="200dp"  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0370ebde8d1094cd41b7162ead55da47.jpg"></p>    <p>标签宽度限制</p>    <p>最大宽度</p>    <pre>  <code class="language-java">app:tabMaxWidth="50dp"  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0c51e303ceadff6bf416a3f466968afb.jpg"></p>    <p>最小宽度</p>    <pre>  <code class="language-java">app:tabMinWidth="100dp"  </code></pre>    <h3>代码</h3>    <p>TabLayout提供的方法</p>    <p>标签</p>    <p>创建标签</p>    <pre>  <code class="language-java">TabLayout.TabnewTab()  </code></pre>    <p>添加标签, 只有添加后才能显示</p>    <pre>  <code class="language-java">voidaddTab(TabLayout.Tab tab)    void addTab (TabLayout.Tab tab,                  int position)                    void addTab (TabLayout.Tab tab,                  boolean setSelected)    void addTab (TabLayout.Tab tab,                  int position,                   boolean setSelected)  </code></pre>    <p>删除标签</p>    <pre>  <code class="language-java">voidremoveTab(TabLayout.Tab tab)  </code></pre>    <p>通过索引删除标签</p>    <pre>  <code class="language-java">voidremoveTabAt(intposition)  </code></pre>    <p>删除全部标签</p>    <pre>  <code class="language-java">voidremoveAllTabs()  </code></pre>    <p>得到标签</p>    <pre>  <code class="language-java">TabLayout.TabgetTabAt(intindex)  </code></pre>    <p>得到标签总数</p>    <pre>  <code class="language-java">intgetTabCount()  </code></pre>    <p>设置样式</p>    <p>指示器</p>    <pre>  <code class="language-java">voidsetSelectedTabIndicatorColor(intcolor)// 指示器颜色  void setSelectedTabIndicatorHeight (intheight) // 指示器高度  </code></pre>    <p>标签文本</p>    <pre>  <code class="language-java">voidsetTabTextColors(intnormalColor, // 正常颜色                  int selectedColor) // 选择状态颜色    void setTabTextColors (ColorStateList textColor) // 状态颜色  </code></pre>    <p>显示模式</p>    <p>这个之前属性里面介绍过了</p>    <pre>  <code class="language-java">intgetTabMode()  void setTabMode (intmode)  </code></pre>    <p>mode:</p>    <ol>     <li>MODE_SCROLLABLE</li>     <li>MODE_FIXED</li>    </ol>    <p>对齐方式</p>    <pre>  <code class="language-java">voidsetTabGravity(intgravity)  int getTabGravity ()  </code></pre>    <p>添加View</p>    <p>不止是添加标签Tab还可以直接添加View</p>    <pre>  <code class="language-java">voidaddView(View child)    void addView (View child,                  int index)                    void addView (View child,                  ViewGroup.LayoutParams params)    void addView (View child, // View对象                  int index, // 位置索引                  ViewGroup.LayoutParams params) // 布局参数  </code></pre>    <p>得到当前选择的位置</p>    <pre>  <code class="language-java">intgetSelectedTabPosition()  </code></pre>    <p>监听器</p>    <p>选择监听器</p>    <p>该方法已经被废弃, 不推荐使用.</p>    <pre>  <code class="language-java">voidsetOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)  </code></pre>    <p>替代的方法是</p>    <pre>  <code class="language-java">voidaddOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)  </code></pre>    <p>该监听器用完后需要删除</p>    <pre>  <code class="language-java">voidremoveOnTabSelectedListener(TabLayout.OnTabSelectedListener listener)  </code></pre>    <p>一次性删除所有添加的选择监听器</p>    <pre>  <code class="language-java">voidclearOnTabSelectedListeners()  </code></pre>    <h2>Tab</h2>    <p>该类是TabLayout的内部类, 表示TabLayout中的每一个标签. 我将介绍这个类的所有方法</p>    <h3>判断是否被选择</h3>    <pre>  <code class="language-java">booleanisSelected()  </code></pre>    <h3>设置为被选择状态</h3>    <pre>  <code class="language-java">voidselect()  </code></pre>    <h3>描述内容</h3>    <p>如果你没用设置描述内容, 默认的是标签的标题</p>    <pre>  <code class="language-java">TabLayout.TabsetContentDescription(intresId)// 用strings id的  TabLayout.Tab setContentDescription (CharSequence contentDesc)  CharSequence getContentDescription ()  </code></pre>    <h3>自定义标签的内容</h3>    <p>每个标签可以尽情的自定义视图</p>    <pre>  <code class="language-java">TabLayout.TabsetCustomView(intresId)  TabLayout.Tab setCustomView (View view)  </code></pre>    <h3>标签的标签</h3>    <p>给Tab设置tag, 然后就可以通过tag得到Tab</p>    <pre>  <code class="language-java">TabLayout.TabsetTag(Object tag)  Object getTag ()  </code></pre>    <h3>添加图标</h3>    <pre>  <code class="language-java">TabLayout.TabsetIcon(Drawable icon)  TabLayout.Tab setIcon (intresId)  Drawable getIcon ()  </code></pre>    <h3>标题的文字</h3>    <pre>  <code class="language-java">TabLayout.TabsetText(intresId)  TabLayout.Tab setText (CharSequence text)  CharSequence getText ()  </code></pre>    <h3>当前标签位置</h3>    <pre>  <code class="language-java">intgetPosition()  </code></pre>    <h2>关联ViewPager</h2>    <p style="text-align:center">​ <img src="https://simg.open-open.com/show/78bf01b58a283737052e6758a4f83583.gif"></p>    <p>TabLayout和ViewPager配合使用是最常见的运用方式, 可以说量身打造. 这里我将介绍两种方式.</p>    <p>两者配合使用后TabLayout就不能通过自己创建Tab了, 需要PagerAdapter中实现 getPagerTitle() 方法返回标签的文字. 标签的数量有ViewPager的分页数量决定.</p>    <h3>布局中嵌套</h3>    <p>布局</p>    <pre>  <code class="language-java"><android.support.v4.view.ViewPager      android:id="@+id/viewpager"      android:layout_width="match_parent"      android:layout_height="match_parent">        <android.support.design.widget.TabLayout          android:id="@+id/tab_layout"          android:layout_width="match_parent"          android:layout_height="wrap_content"/>    </android.support.v4.view.ViewPager>  </code></pre>    <p>代码</p>    <pre>  <code class="language-java">public classMainActivityextendsAppCompatActivity{        @BindView(R.id.tab_layout)      TabLayout mTabLayout;      @BindView(R.id.viewpager)      ViewPager mViewpager;      private ArrayList<View> mList;      private String[] mTitle;        @Override      protectedvoidonCreate(Bundle savedInstanceState){          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);          ButterKnife.bind(this);            initData();            mViewpager.setAdapter(new PagerAdapter() {              @Override              publicintgetCount(){                  return mList.size();              }                @Override              publicbooleanisViewFromObject(View view, Object object){                  return view == object;              }                @Override              publicObjectinstantiateItem(ViewGroup container,intposition){                  View view = mList.get(position);                  container.addView(view);                  return view;              }                @Override              publicvoiddestroyItem(ViewGroup container,intposition, Object object){                  container.removeView((View) object);              }                @Override              publicCharSequencegetPageTitle(intposition){                  return mTitle[position];              }          });      }        privatevoidinitData(){          View viewpagerA = getLayoutInflater().inflate(R.layout.viewpager_a, null);          View viewpagerB = getLayoutInflater().inflate(R.layout.viewpager_b, null);          View viewpagerC = getLayoutInflater().inflate(R.layout.viewpager_c, null);            mList = new ArrayList<>();          mList.add(viewpagerA);          mList.add(viewpagerB);          mList.add(viewpagerC);            mTitle = new String[]{"首页", "分类", "设置"};      }  </code></pre>    <h3>布局中关联</h3>    <p>如果布局没有嵌套</p>    <pre>  <code class="language-java"><android.support.design.widget.TabLayout      android:id="@+id/tab_layout"      android:layout_width="match_parent"      android:layout_height="wrap_content"/>    <android.support.v4.view.ViewPager      android:id="@+id/viewpager"      android:layout_width="match_parent"      android:layout_height="match_parent"/>  </code></pre>    <p>就需要在ViewPager设置PagerAdapter之前关联两者</p>    <pre>  <code class="language-java">mTabLayout.setupWithViewPager(mViewpager);  </code></pre>    <p>虽然配合ViewPager后TabLayout创建的Tab并不能正常显示, 因为setupWithViewPager内部方法是先删除所有的标签再添加.</p>    <p>但是还是可以通过 getTabAt() 得到标签之后进行修改.</p>    <p> </p>    <p>来自:http://liangjingkanji.coding.me/2017/03/03/TabLayout/</p>    <p> </p>