android tablayout的使用,自定义tablayout的每一项视图

一、tablayout菜单按钮只有文字:

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="@dimen/task_executor_height"
            android:background="@color/white"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/login_submit_normal"
            app:tabIndicatorHeight="1dp"
            app:tabMode="fixed"
            app:tabPaddingEnd="10dp"
            app:tabPaddingStart="10dp"
            app:tabSelectedTextColor="@color/login_submit_normal"
            app:tabTextColor="@color/common_text_bg">

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/string"/>

            <android.support.design.widget.TabItem
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/speech"/>

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

二、自定义tablayout的每一项布局:

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="@dimen/task_executor_height"
            android:background="@color/white"
            app:tabGravity="fill"
            app:tabIndicatorColor="@color/login_submit_normal"
            app:tabIndicatorHeight="1dp"
            app:tabMode="fixed"
            app:tabPaddingEnd="10dp"
            app:tabPaddingStart="10dp"
            app:tabSelectedTextColor="@color/login_submit_normal"
            app:tabTextColor="@color/common_text_bg"/>

在activity中代码设置添加每一项的布局

        tabs.addTab(tabs.newTab().setCustomView(tab_icon(getString(R.string.string),R.drawable.tablayout_text_icon_selector)));
        tabs.addTab(tabs.newTab().setCustomView(tab_icon(getString(R.string.speech),R.drawable.tablayout_record_icon_selector)));
tab_icon的代码如下:
private View tab_icon(String name,int iconID){
        View newtab =  LayoutInflater.from(this).inflate(R.layout.tablayout_add_task_item,null);
        TextView tv = (TextView) newtab.findViewById(R.id.tabtext);
        tv.setText(name);
        ImageView im = (ImageView)newtab.findViewById(R.id.tabicon);
        im.setImageResource(iconID);
        return newtab;
    }

tablayout_add_task_item布局:

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

    <ImageView
        android:id="@+id/tabicon"
        android:layout_width="@dimen/tablayout_icon_size"
        android:layout_height="@dimen/tablayout_icon_size"
        android:layout_gravity="center"
        android:src="@drawable/ic_launcher"/>

    <TextView
        android:id="@+id/tabtext"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="TAB"
        android:textColor="@color/tablayout_text_color"
        android:layout_marginLeft="@dimen/add_group_img_tv_space"
        android:textSize="@dimen/title_size"/>
</LinearLayout>

设置文本选择的颜色tablayout_text_color:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/login_submit_normal" android:state_selected="true"/>
    <item android:color="@color/common_text_bg" android:state_selected="false"/>
</selector>

tablayout_text_color需要放在如下位置,否则不生效:

在res下新建个color文件夹,将文件放在该文件夹下

设置tab项的图标tablayout_text_icon_selector(tablayout_record_icon_selector同样):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/text_selector" android:state_selected="true"/>
    <item android:drawable="@drawable/text_normal" android:state_selected="false"/>
</selector>

好啦,写到这里就 结束啦,做了这么久的安卓开发,tablayout的使用一直都是我比较害怕的,因为平时开发中很多时候都copy的代码,需要自定义样式的时候就犯难了,这里做个记录,方便以后随时查看。

我也是参考的网上的大佬写的,链接我忘了,本来想贴的,这里只是为了互相学习

猜你喜欢

转载自blog.csdn.net/yann02/article/details/81912359