使用TabLayout实现底部Tab布局
2016-03-07 11:58
537 查看
使用TabLayout实现底部Tab布局
发表于 2015-08-09 | 分类于 Android | 12条评论
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 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; } |
#TabLayout
相关文章推荐
- 1049 数列的片段和(20)
- JavaScript面向对象编程高级2
- CUDA 7.5 + VS2010安装使用
- C#检测是否联网
- 监听启动时出错 错误 1067: 进程意外终止。
- Android学习:Activity
- http://www.jianshu.com/p/584707554ed7?ref=myread
- QT中使用函数指针
- Android Studio 我常用快捷键
- [POJ2186]Popular Cows(强连通分量)
- Android Activity:四种启动模式,Intent Flags和任务栈
- Android学习笔记----json
- 移植Oracle procedure 到 postgresql
- H5 audio标签属性使用
- VS 2008配置cppcheck
- LVS负载均衡之session解决方案
- mysql explain用法和结果的含义
- Mysql在大型网站的应用架构演变
- java程序将汉字转成拼音的两种方法
- CF 468E