Kotlin编程中如何改变Android TabLayout中每一个Tabs字体大小，样式，table选中和未选中时的字体颜色，样式，大小变化设置

其他 2018-06-24 04:31:10 阅读次数: 2

Kotlin中如何改变TabLayout中每一个Tabs字体大小，样式，table选中和未选中时的字体颜色，样式，大小变化设置
如果你没有特别的要求，不需要点击后动态的改变tab中每个字体的样式和大小的话，用第一种方案就可以满足你的需求。如果有特殊的需求你就应该参考第二种自定义tablayout中的每一个tab的方案了。

第一种方案：改变TabLayout中tab的字体默认大小，仅需要两步：

步骤1. 自定义 Style 在values.xml文件中：

<style name="MyTabText" parent="TextAppearance.Design.Tab">
    <item name="android:textSize">12sp</item>
    <item name="android:textStyle">bold</item>
    <item name="android:textAllCaps">true</item>
</style>

步骤2.在xml布局中引用的时候加上我们自定义的字体样式的teyle：

<android.support.design.widget.TabLayout
    android:id="@+id/tabLayout"
    app:tabTextAppearance="@style/MyTabText" 
    android:layout_width="match_parent"
    android:layout_height="wrap_content" 
    app:tabIndicatorColor="#99ffffff" //滑动指针颜色
    app:tabIndicatorHeight="2dp"  //滑动指针高度
     app:tabMode="scrollable"/>

第二种方案：自定义tablayout中的每一个tab的tabItem和代码里面动态控制每一个tab选中和未选中时的tabtext的字体样式和字体大小，透明度等：

效果图如下：
这里写图片描述
自定义一个tabitem.xml布局来定义这个自定义的tabItem（可以自定很多你喜欢的类型，textview或者imageview或者其他）：

tabitem.xml布局代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tab_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:gravity="center"
        android:textColor="@color/white"
        android:textSize="24sp" />
</LinearLayout>

activity_main.xml布局文件：

  <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbarlayout"
            android:layout_width="match_parent"
            android:layout_height="110dp"
            android:background="@drawable/bg_zodiac">




            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@drawable/bg_zodiac_top_copy"
                app:contentInsetStart="0dp"
                app:layout_collapseMode="pin">


                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <ImageView
                        android:id="@+id/btn_mean"
                        android:layout_width="20dp"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:layout_centerVertical="true"
                        android:scaleType="fitXY"
                        android:src="@drawable/btn_mean" />
                    <TextView
                        android:id="@+id/article_title_tv"
                        android:layout_width="wrap_content"
                                 android:layout_toRightOf="@+id/article_custom_btn_mean"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="25dp"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="Arts"
                        android:textColor="#ffffff"
                        android:textSize="21sp"
                        android:textStyle="bold" />

                </RelativeLayout>

            </android.support.v7.widget.Toolbar>

            <!--选项卡-->
            <android.support.design.widget.TabLayout
                android:id="@+id/tablayout"
                android:layout_width="match_parent"
                android:layout_height="57dp"
                android:layout_gravity="bottom"
                app:tabIndicatorColor="#99ffffff"
                app:tabIndicatorHeight="2dp"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="#FFF"
                app:tabTextColor="#e1dcdc"
                />
            <!--app:tabTextAppearance="@style/MyCustomTabText"-->


        </android.support.design.widget.AppBarLayout>


        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />




        <include layout="@layout/menu_layout" />

    </LinearLayout>

如果tabllayout要与viewpager联动的话，再自定义一个CustomTabPagerAdapter类

CustomTabPagerAdapter.java类代码如下：

/**
 * Created by wjj on 2018/4/10
 * 自定义tablayout的tab样式时，联动的viewpager需要用到的apapter
 */

public class CustomTabPagerAdapter extends FragmentPagerAdapter {
    List<Fragment> list;
    Context con;
    private FragmentManager fm;
//    private String[] strs;

    public CustomTabPagerAdapter(FragmentManager fm, List<Fragment> list, Context con, String[] strs) {
        super(fm);
        this.list = list;
        this.con = con;
        this.fm = fm;
//        this.strs = strs;
    }

    @Override
    public int getItemPosition(Object object) {

        return PagerAdapter.POSITION_NONE;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object instantiateItem(ViewGroup vg, int position) {

        return super.instantiateItem(vg, position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        super.destroyItem(container, position, object);
    }

    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

//    @Override
//    public CharSequence getPageTitle(int position) {
//        if (strs == null)
//            return super.getPageTitle(position);
//        else
//            return strs[position];
//    }
}

其实你会发现和平常的适配器写的时候只有一点区别，唯一的区别就是把下面这个方法注释掉了

//    @Override
//    public CharSequence getPageTitle(int position) {
//        if (strs == null)
//            return super.getPageTitle(position);
//        else
//            return strs[position];
//    }

这里需要注意的一点就是是setupWithViewPager这个方法会先将tab清除然后再根据ViewPage的adapter里的count去取pagetitle所以要在tablayout.setupWithViewPager()方法后再循环给tab 设置CustomView。

步骤3：在activity中调用：

private fun initFragment() {
         var strs = arrayOf("Newest", "Hottest", "Love")

        var j = 0
        while (j<strs.size){
            tablayout.addTab(tablayout.newTab())
            j++
        }
        tablayout.setupWithViewPager(viewpager)
        /**这里需要注意的一点就是是setupWithViewPager这个方法会
         *先将tab清除然后再根据ViewPager的adapter里的count去取pagetitle
         *所以要在tablayout.setupWithViewPager()方法后再循环给tab 设置CustomView
         **/
        var list: MutableList<Fragment>? = mutableListOf<Fragment>()
        var i = 0
        while (i<strs.size){
            var articleBundle = Bundle()
            testBundle.putSerializable("type", strs[i].toLowerCase())
            var testFragment = TestFragment()
            testFragment.setArguments(testBundle)
            list!!.add(testFragment)
            i++
        }
        var adapter = CustomTabPagerAdapter(supportFragmentManager, list, this@ArticleActivity, strs)
        article_viewpager.adapter=adapter
        val font = Typeface.createFromAsset(this.assets, "fonts/ARJULIAN.ttf")
        for (i in 0 until adapter.count) {
            val tab = tablayout.getTabAt(i)//获得每一个tab
            tab?.setCustomView(R.layout.tab_item)//给每一个tab设置view
            if (i == 0) {
                // 设置默认第一个tab的TextView是被选择的样式
                val tv = tab?.customView!!.findViewById(R.id.tab_text) as TextView
                initTableText(true,tv,19f,0.9F,font,strs[i])
            }else{
                val tv = tab?.customView!!.findViewById(R.id.tab_text) as TextView
                initTableText(false,tv,15f,0.5F,font,strs[i])

            }

        }

        tablayout.setOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) {
                val tv = tab.customView!!.findViewById(R.id.tab_text) as TextView
                initTableText(true,tv,19f,0.9F)
                article_viewpager.currentItem = tab.position
            }

            override fun onTabUnselected(tab: TabLayout.Tab) {
                val tv = tab.customView!!.findViewById(R.id.tab_text) as TextView
                initTableText(false,tv,15f,0.5F)
            }

            override fun onTabReselected(tab: TabLayout.Tab) {

            }
        })



    }

    private fun initTableText(isSelected: Boolean, tv: TextView, textSize: Float, alpha: Float, font: Typeface?, s: String) {
        tv?.isSelected = isSelected//tab是否被选中
        tv.textSize = textSize
        tv.alpha =alpha
        tv.typeface = font
        tv.text = s//设置tab上的文字
    }
    private fun initTableText(isSelected: Boolean, tv: TextView, textSize: Float, alpha: Float) {
        tv?.isSelected = isSelected//tab是否被选中
        tv.textSize = textSize
        tv.alpha =alpha
    }

最后提醒，别忘了在asstes目录下放置你的字体文件
这里写图片描述

猜你喜欢

转载自blog.csdn.net/wjj1996825/article/details/79882478
今日推荐
周排行
vue + echart +map中国地图，省市地图，区县地图
spring boot2 (31)-cors跨域请求
『学习资料推荐』299元买的微信营销资料打包
个人学习卷积神经网络的疑惑解答
网络工程师-软考
模拟人生4 春夏秋冬、星梦起飞版更新下载方法以及常见问题
python关于对象的字符串显示str和repr以及
奇怪的session混乱问题
【3】分治法（divide-and-conquer）
Java项目开发成绩管理系统（九） 各模块实现信息修改
每日归档
更多
2024-08-07(0)
2024-08-06(0)
2024-08-05(0)
2024-08-04(0)
2024-08-03(0)
2024-08-02(0)
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022