Android design支持库中的TabLayout一般都用来实现头部Tab的效果,
比如:
但是像微信这种底部Tab布局在我们实际项目中还是非常常见的设计,
现在我们也可以用TabLayout非常方便的实现。
布局
下面我们开始实现底部Tab,layout布局比较简单,我们只用把TabLayout放置在底部即可
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@+id/appbar" android:orientation="vertical"> <android.support.v4.view.ViewPager android:id="@+id/viewPager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1.0" android:scrollbars="none" /> <android.support.design.widget.TabLayout android:id="@+id/tabLayout" style="@style/MyCustomTabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" /> </LinearLayout> |
我定义了一个自定义的style,把tabIndicatorHeight设为0dp
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"> <item name="tabMaxWidth">@dimen/tab_max_width</item> <item name="tabIndicatorColor">?attr/colorAccent</item> <item name="tabIndicatorHeight">0dp</item> <item name="tabPaddingStart">12dp</item> <item name="tabPaddingEnd">12dp</item> <item name="tabBackground">@color/tab_bgcolor</item> <item name="tabSelectedTextColor">?android:textColorPrimary</item> </style> |
代码实现
我们首先设置好ViewPager,然后设置TabLayout与ViewPager的对应关系,
最后最关键的是使用TabLayout的setCustomView设置自定义的TAB View。
viewPager = (ViewPager)findViewById(R.id.viewPager); tabLayout = (TabLayout) findViewById(R.id.tabLayout); SampleFragmentPagerAdapter pagerAdapter = new SampleFragmentPagerAdapter(getSupportFragmentManager(), this); viewPager.setAdapter(pagerAdapter); tabLayout.setupWithViewPager(viewPager); for (int i = 0; i < tabLayout.getTabCount(); i++) { TabLayout.Tab tab = tabLayout.getTabAt(i); if (tab != null) { tab.setCustomView(pagerAdapter.getTabView(i)); } } viewPager.setCurrentItem(1); |
public View getTabView(int position) { View v = LayoutInflater.from(context).inflate(R.layout.custom_tab, null); TextView tv = (TextView) v.findViewById(R.id.textView); tv.setText(tabTitles[position]); ImageView img = (ImageView) v.findViewById(R.id.imageView); //img.setImageResource(imageResId[position]); return v; } |
相关推荐
Android 基于TabLayout实现的TAB页导航切换效果 仿今日头条底部的TAB选项卡效果,TabLayout与ViewPager结合使用可以达到点击tab更新ViewPager、滑动ViewPager更新Tab的效果。这种效果现在在PC端、移动设备端已经很...
主要介绍了Android Tablayout 自定义Tab布局的使用案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
使用Tablayout和RadioGroup两种方式实现底部导航,使用Tablayout实现顶部导航
本篇文章主要介绍了Android TabLayout 实现底部Tab的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
tablayout+viewpager自定义tab和自定义指示器。完美解决滑动卡顿。
仿美团登陆页面顶部tab实现,利用TabLayout + Fragment + ViewPager实现顶部tab选项卡切换,替换了过时的TabHost,
Android TabLayout、ViewPager实现顶部和底部Tab导航 http://blog.csdn.net/RichieZhu/article/details/50966690
TabLayout+ViewPager,自定义tab:图片+文字、文字、图片,tab可以自定义和平时写xml一样随心所欲。实现仿淘宝TabLayout价格动态变换。
ViewPager+TabLayout快速集成底部Tab栏+Fragment!!!!!!!!!!!!!!!!
实现底部tab和顶部tab,底部tab仿微信,顶部tab可左右滑动
高仿新浪微博的底部Tab布局,基于Activity实现
动态添加,移除View及使用RadioButton实现底部Tab效果,可也实现底部菜单控件
viewpager2 tablayout fragment, tab自定义,嵌套
类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab切换效果类似微信底部tab...
下面小编就为大家分享一篇基于TabLayout中的Tab间隔设置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
TabLayout实现仿今日头条顶部tab导航效果
仿微信例子,使用TabHost实现底部tab,可以显示未读信息条数。适合初学者学习研究。
模仿考试应用的底部+顶部Tab布局,适合新手学习布局之用,GB编码