Android TabLayout 浅显总结
环境搭建
1.Android design支持包和Android v4 支持包。
2.在build.gradle中添加
dependencies { compile files('libs/android-support-v4.jar') compile 'com.android.support:design:23.1.0' }
3.如果TabLayout的Title想自己定义Layout则需根据需求自己添加Layout文件。
示例代码(如何使用)
布局文件:activity_sxp_tablayout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/tb_transitions" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> <android.support.design.widget.TabLayout android:id="@+id/sliding_tabs" style="@style/CustomTabLayout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabMode="fixed" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="0px" android:layout_weight="1" android:background="@android:color/white" /> </LinearLayout>
TabLayout Title 样式
<style name="CustomTabLayout" parent="Widget.Design.TabLayout"> <!--<item name="tabMaxWidth">@dimen/tab_max_width</item>--> <item name="tabIndicatorColor">@color/tab_indicator_color</item> <item name="tabIndicatorHeight">10dp</item> <item name="tabPaddingStart">12dp</item> <item name="tabPaddingEnd">12dp</item> <item name="tabBackground">@color/colorPrimary</item> <item name="tabTextAppearance">@style/CustomTabTextAppearance</item> <item name="tabSelectedTextColor">@color/tab_indicator_color</item> </style> <style name="CustomTabTextAppearance" parent="TextAppearance.Design.Tab"> <item name="android:textSize">20sp</item> <item name="android:textColor">@color/white</item> <item name="textAllCaps">false</item> </style>
1.tabMaxWidth:tab item的最大宽度,当app:tabMode="fixed"时不起作用,当app:tabMode="fixed"时才起作用。其中:
2.tabIndicatorColor:TabLayout指示器的颜色
3.tabIndicatorHeight:TabLayout指示器高度
4.tabPaddingStart:距离开始的长度
5.tabPaddingEnd:距离结束的长度
6.tabBackground:背景
7.tabTextAppearance:TabLayout title字体属性
8.tabSelectedTextColor:当前选择的tab的字体颜色
9.textAllCaps:TabLayout创建的Tab默认的是true,如果设置图标的话要设置成false。
初始化TabLayout和ViewPager
//初始化ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); // 设置适配器 pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this); viewPager.setAdapter(pagerAdapter); // 初始化TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs); // 为TabLayout设置ViewPager tabLayout.setupWithViewPager(viewPager);
ViewPager适配器
public class SimpleFragmentPagerAdapter extends FragmentPagerAdapter { private Context context; // TabLayout title private String tabTitles[] = new String[]{"TAB1", "TAB2", "TAB3"}; // TabLayout 图标 private int[] imageResId = {R.mipmap.icon_tab, R.mipmap.icon_tab, R.mipmap.icon_tab}; public SimpleFragmentPagerAdapter(FragmentManager fm, Context context) { super(fm); this.context = context; } @Override public Fragment getItem(int position) { return PageFragment.newInstance(position + 1); } @Override public int getCount() { return tabTitles.length; } @Override public CharSequence getPageTitle(int position) { // 返回纯文字 // return tabTitles[position]; // 返回ICON和文字 Drawable image = context.getResources().getDrawable(imageResId[position]); image.setBounds(0, 0, image.getIntrinsicWidth() * 2, image.getIntrinsicHeight() * 2); SpannableString sb = new SpannableString(tabTitles[position]); ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); sb.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); return sb; } /** * 自定义TabLayout title * @param position * @return */ public View getTabView(int position){ View view = LayoutInflater.from(context).inflate(R.layout.view_sxp_tab_title, null); TextView tv= (TextView) view.findViewById(R.id.textView); tv.setText(tabTitles[position]); ImageView img = (ImageView) view.findViewById(R.id.imageView); img.setImageResource(imageResId[position]); return view; } }
其中getTagView()方法是自己定义的方法,作用是自定义TabLayout Title,需要在初始化TabLayout的时候调用:
//初始化ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager); // 设置适配器 pagerAdapter = new SimpleFragmentPagerAdapter(getSupportFragmentManager(), this); viewPager.setAdapter(pagerAdapter); // 初始化TabLayout tabLayout = (TabLayout) findViewById(R.id.sliding_tabs); // 为TabLayout设置ViewPager tabLayout.setupWithViewPager(viewPager); for (int i = 0; i < tabLayout.getTabCount(); i++) { TabLayout.Tab tab = tabLayout.getTabAt(i); tab.setCustomView(pagerAdapter.getTabView(i)); }
常见问题
1.自定义TabLayout Title时需要自己在ViewPager的OnPageChangeListener中自己处理。
相关推荐
sfhong00 2020-06-05
yinbaoshiguang 2019-07-01
蓝蓝的天 2019-06-29
Palingenesis 2019-06-28
Palingenesis 2019-06-20
importSUC 2017-09-13
zhuch 2017-04-30