最详细的 TabLayout 的用法
pklq6594
8年前
<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>