Android中通过布局制作标签栏

标签栏制作文章导航

Android中通过布局制作标签栏

Android中通过TabLayout制作标签栏

开发中我们时长会遇到标签栏的制作。往往我们一说到标签栏，大家想到的就是Activity+Fragment。不过今天不说这个，今天说一种标签栏的制作方法。

1.制作思路：

• 我们通过LinearLayout容器去平分空间，实现不同数量的标签都可以沾满屏幕，实现多机型适配目的。
• 每一个标签我们都用一个TextView实现，标签如果含有图片，使用DrawableTop属性设置。这里我们的示例是有图片的。
• 我们将公共属性会提到Style中，方便修改。
• 使用状态列表实现点击变色/高亮效果。

2.代码示例

• 布局文件

在layout中添加activity_main.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:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            style="@style/TabButton"
            android:id="@+id/tv1"
            android:text="首页"
            android:drawableTop="@drawable/text_pic"/>

        <TextView
            android:id="@+id/tv2"
            style="@style/TabButton"
            android:text="商品"
            android:drawableTop="@drawable/text_pic"/>

        <TextView
            android:id="@+id/tv3"
            android:text="发现"
            android:drawableTop="@drawable/text_pic"
            style="@style/TabButton"/>

        <TextView
            android:id="@+id/tv4"
            android:text="我的"
            android:drawableTop="@drawable/text_pic"
            style="@style/TabButton"/>
    </LinearLayout>
</LinearLayout>

• 样式文件

styles.xml中我们加入如下代码块

<style name="TabButton">
    <item name="android:layout_width">0dp</item>
    <item name="android:layout_weight">1</item>
    <item name="android:layout_height">60dp</item>
    <item name="android:gravity">center_horizontal</item>
    <item name="android:textSize">12sp</item>
    <item name="android:textColor">@drawable/text_color</item>
    <item name="android:drawablePadding">5dp</item>
    <item name="android:paddingTop">10dp</item>
    <item name="android:background">@drawable/bg_text</item>
</style>

• 文字颜色状态列表

在drawable中添加text_color.xml

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

• 背景状态列表

在drawable中添加bg_text.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="@android:color/holo_green_light" />
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/white" />
        </shape>
    </item>
</selector>

• 图片状态列表

在drawable中添加text_pic.xml

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

• Activity中代码

在java中创建MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private TextView tv1;
    private TextView tv2;
    private TextView tv3;
    private TextView tv4;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tv1 = findViewById(R.id.tv1);
        tv2 = findViewById(R.id.tv2);
        tv3 = findViewById(R.id.tv3);
        tv4 = findViewById(R.id.tv4);
        tv1.setOnClickListener(this);
        tv2.setOnClickListener(this);
        tv3.setOnClickListener(this);
        tv4.setOnClickListener(this);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.tv1:
                if (!tv1.isSelected()){
                    tv1.setSelected(true);
                    tv2.setSelected(false);
                    tv3.setSelected(false);
                    tv4.setSelected(false);
                }
                break;
            case R.id.tv2:
                if (!tv2.isSelected()) {
                    tv1.setSelected(false);
                    tv2.setSelected(true);
                    tv3.setSelected(false);
                    tv4.setSelected(false);
                }
                break;
            case R.id.tv3:
                if (!tv3.isSelected()) {
                    tv1.setSelected(false);
                    tv2.setSelected(false);
                    tv3.setSelected(true);
                    tv4.setSelected(false);
                }
                break;
            case R.id.tv4:
                if (!tv4.isSelected()) {
                    tv1.setSelected(false);
                    tv2.setSelected(false);
                    tv3.setSelected(false);
                    tv4.setSelected(true);
                }
                break;
        }
    }
}

我们具体选中后的操作，比如切换页面等，可以在if判断中添加。