这篇文章主要介绍了TabLayout用法详解及自定义样式的相关资料,需要的朋友可以参考下
TabLayout的默认样式:
app:theme="@style/Widget.Design.TabLayout"
从系统定义的该样式继续深入:
接着,看看系统定义Tab文本的样式(注意textAllcaps这个属性):
从系统定义TabLayout的默认样式可以看出,我们可以改变TabLayout对应的系统样式的属性值来适配我们自己的需求.
TabLayout的基本用法
TabLayout独立使用使用时,可以xml布局中静态添加tab个数及其样式,也可以动态添加Tab的个数及其样式,如:
或者:
private int[] images = new int[]{ R.drawable.ic_account_balance_wallet_black, R.drawable.ic_android_black, R.drawable.ic_account_box_black}; private String[] tabs = new String[]{"小说", "电影", "相声"}; TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout); tabLayout.addTab(tabLayout.newTab().setIcon(images[0]).setText(tabs[0]),true); tabLayout.addTab(tabLayout.newTab().setIcon(images[1]).setText(tabs[1]),false); tabLayout.addTab(tabLayout.newTab().setIcon(images[2]).setText(tabs[2]),false);
TabLayout在实际开发中最多的是与ViewPager联合使用,实现TabLayout与ViewPager的联动:
TabLayout tabLayout = (TabLayout) findViewById(R.id.tablayout); ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager); viewPager.setAdapter(new TabPagerAdapter(getSupportFragmentManager())); tabLayout.setupWithViewPager(viewPager);
值得注意的是:
在TabPagerAdapter中需要实现getPagerTitle()否则,TabLayout的Tab将不显示,先看TabLayout#setupWithPager()源码,发现Tab的添加是在populateFromPagerAdapter()中实现,实现源码如下,可以看出该方法调用了PagerAdpater#getPagerTitle()为Tab设置文本信息,如果我们自定义的Adapter没有实现getPagerTitle()将会导致Tab不显示文本信息.
void populateFromPagerAdapter() { removeAllTabs(); if (mPagerAdapter != null) { final int adapterCount = mPagerAdapter.getCount(); for (int i = 0; i 0) { final int curItem = mViewPager.getCurrentItem(); if (curItem != getSelectedTabPosition() && curItem 另外, 我们发现getPagerTitle()方法的返回值CharSequence而不是String,那么Tab的文本信息的设置将变得更加灵活,比如设置一个SpanableString,将图片和文本设置Tab的文本.
@Override public CharSequence getPageTitle(int position) { Drawable image = TablayoutActivity.this.getResources().getDrawable(images[position]); image.setBounds(0, 0, image.getIntrinsicWidth()/2, image.getIntrinsicHeight()/2); ImageSpan imageSpan = new ImageSpan(image, ImageSpan.ALIGN_BOTTOM); SpannableString ss = new SpannableString(" "+tabs[position]); ss.setSpan(imageSpan, 0, 1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE); return ss; }
但是Tab缺没有显示任何信息,一片空白,从上面提到的TabLayout的系统默认样式中我们发现:
修改Indicator的长度:
从TabLayout的源码可以看出Indicator的绘制,是在其内部类SlidingTabStrip中绘制,而SlingTabStrip类继承LinearLayout,源码如下:
@Override public void draw(Canvas canvas) { super.draw(canvas); // Thick colored underline below the current selection if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) { canvas.drawRect(mIndicatorLeft, getHeight() - mSelectedIndicatorHeight, mIndicatorRight, getHeight(), mSelectedIndicatorPaint); } }在onDraw()中主要是就绘制一个Rect,并且宽度是根据mIndicatorLeft和mIndicatorRight设置的,而mIndicatorLeft等的宽度来自SlidingTabStrip的child,而Child就相当于一个Tab,这样我们就通过修改Child的margin来设置mIndicatorLeft的值.
public void setIndicator(TabLayout tabs, int leftDip, int rightDip) { Class tabLayout = tabs.getClass(); Field tabStrip = null; try { tabStrip = tabLayout.getDeclaredField("mTabStrip"); } catch (NoSuchFieldException e) { e.printStackTrace(); } tabStrip.setAccessible(true); LinearLayout llTab = null; try { llTab = (LinearLayout) tabStrip.get(tabs); } catch (IllegalAccessException e) { e.printStackTrace(); } int left = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, leftDip, Resources.getSystem().getDisplayMetrics()); int right = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, rightDip, Resources.getSystem().getDisplayMetrics()); for (int i = 0; i < llTab.getChildCount(); i++) { View child = llTab.getChildAt(i); child.setPadding(0, 0, 0, 0); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.MATCH_PARENT, 1); params.leftMargin = left; params.rightMargin = right; child.setLayoutParams(params); child.invalidate(); } }然后在代码中调用即可,但是要注意,必须要在Tablayout渲染出来后调用,我们可以选择view.post()方法来实现:
tabLayout.post(new Runnable() { @Override public void run() { setIndicator(tabLayout, 20, 20); } });最后得到效果图如下:
自定义TabLayout的TabItem及TabItem的点击事件
在TabLayout的Api是没有提供TabItem点击事件的方法,如果我们想实现如下效果图,怎么办?
先自定义一个TabItem:
在自定义的Adapter中可以定义一个getTabView的方法:
public View getTabView(int position){ View view = LayoutInflater.from(context).inflate(R.layout.tab_item, 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; }重新设置点击事件:
viewPager.setAdapter(pagerAdapter); tabLayout.setupWithViewPager(viewPager); for (int i = 0; i
以上所述是小编给大家介绍的TabLayout用法详解及自定义样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对html中文网网站的支持！
以上就是TabLayout用法详解及自定义样式的详细内容，更多请关注0133技术站其它相关文章！
