组合控件——底部标签栏——自定义标签按钮

雨点打透心脏的1/2处 2023-09-28 23:02 109阅读 0赞

![07548beca12283a9b8bd2b75eb7fe403.png][]

**自定义标签按钮的步骤**

(1)定义一个状态图形的XML描述文件，当状态为选中时展示高亮图标，其余情况展示普通图标；

(2)在活动页面的XML文件中添加CheckBox节点，并给该节点的background、drawableTop、textColor三个属性分别设置对应的状态图形；

(3)活动页面的Java代码给复选框ck\_tab设置勾选监听器，用来监听复选框的选中事件和取消选中事件；

![c41e4ba79cf1b1567a82358def1ac9b8.png][]

==========================================================================================================

布局：

![3b3e9e440882fcf6820eea0762fee193.png][]

![521aa85c9dc94f8edc9e9392a3b1f79e.png][]

![11da7f4d3e43e9f94c86c9d7d0829524.png][]

![acec4c7e9cce14cf57458adf4da84e3b.png][]

![42415303d2ecc7dcb6148a8b3253afaf.png][]

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="colorPrimary">#008577</color>
        <color name="colorPrimaryDark">#00574B</color>
        <color name="colorAccent">#D81B60</color>
        <color name="black">#000000</color>
        <color name="white">#ffffff</color>
        <color name="purple_200">#FFBB86FC</color>
        <color name="purple_500">#FF6200EE</color>
        <color name="purple_700">#FF3700B3</color>
        <color name="teal_200">#FF03DAC5</color>
        <color name="teal_700">#FF018786</color>
        <color name="tab_text_selected">#0084e8</color>
        <color name="tab_text_normal">#7597b3</color>
    </resources>

![685e054498f4e293073a52e1dc3b0118.png][]

<resources>
    
        
        <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
            <item name="customButtonStyle">@style/CommonButton</item>
        </style>
    
        
        <style name="CommonButton">
            <item name="android:textAllCaps">false</item>
            <item name="android:textColor">#000000</item>
            <item name="android:textSize">20sp</item>
        </style>
    
    
    
        <style name="TabButton">
            <item name="android:layout_width">0dp</item>
            <item name="android:layout_height">match_parent</item>
            <item name="android:layout_weight">1</item>
            <item name="android:padding">5dp</item>
            <item name="android:gravity">center</item>
            <item name="android:background">@drawable/tab_bg_selector</item>
            <item name="android:textSize">12sp</item>
            <item name="android:textColor">@drawable/tab_text_selector</item>
            <item name="android:button">@null</item>
        </style>
    
    
    
    </resources>

![49f6dc95881ba90e4205b9e260e499b9.png][]

主代码：

package com.example.myapplication;
    import android.os.Bundle;
    import android.widget.CheckBox;
    import android.widget.CompoundButton;
    import android.widget.TextView;
    import androidx.appcompat.app.AppCompatActivity;
    
    public class MainActivity extends AppCompatActivity
    {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
    
            final TextView tv_select = findViewById(R.id.tv_select);
            
            
            CheckBox ck_tab = findViewById(R.id.ck_tab);
    
            // 给复选框设置勾选监听器
            ck_tab.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener()
            {
                @Override
                public void onCheckedChanged(CompoundButton buttonView, boolean isChecked)
                {
                    if (buttonView.getId() == R.id.ck_tab)
                    {
                        String desc = String.format("标签按钮被%s了", isChecked?"选中":"取消选中");
                        tv_select.setText(desc);
                    }
                }
            });
        }
    
    }

![b68ebed47d8e509096a3000a4528bb73.png][]

![d2bc5a9c5f659afd669c0357fda1efad.png][]

![0f7fd77bb5617bc8dd1cda6c8f3a0e8b.png][]

=======================================================================================================

![1f76d77b9d6482a60e2cb9e5781c2311.png][]

![b80f49735a0e207d9687d52a124aedba.png][]

![29d68c0a4212523351cdf36ff643b808.png][]

![868332e1e18e177416bed9c7ce6d5de7.png][]

![ccc30b46728146c30f6bbba8ee12008a.png][]

![05a7c340dc406ce29ebe9f1f75d662cd.png][]

![f22815bceb45577f2a1823c45b0b8739.png][]

[07548beca12283a9b8bd2b75eb7fe403.png]: https://img-blog.csdnimg.cn/img_convert/07548beca12283a9b8bd2b75eb7fe403.png
[c41e4ba79cf1b1567a82358def1ac9b8.png]: https://img-blog.csdnimg.cn/img_convert/c41e4ba79cf1b1567a82358def1ac9b8.png
[3b3e9e440882fcf6820eea0762fee193.png]: https://img-blog.csdnimg.cn/img_convert/3b3e9e440882fcf6820eea0762fee193.png
[521aa85c9dc94f8edc9e9392a3b1f79e.png]: https://img-blog.csdnimg.cn/img_convert/521aa85c9dc94f8edc9e9392a3b1f79e.png
[11da7f4d3e43e9f94c86c9d7d0829524.png]: https://img-blog.csdnimg.cn/img_convert/11da7f4d3e43e9f94c86c9d7d0829524.png
[acec4c7e9cce14cf57458adf4da84e3b.png]: https://img-blog.csdnimg.cn/img_convert/acec4c7e9cce14cf57458adf4da84e3b.png
[42415303d2ecc7dcb6148a8b3253afaf.png]: https://img-blog.csdnimg.cn/img_convert/42415303d2ecc7dcb6148a8b3253afaf.png
[685e054498f4e293073a52e1dc3b0118.png]: https://img-blog.csdnimg.cn/img_convert/685e054498f4e293073a52e1dc3b0118.png
[49f6dc95881ba90e4205b9e260e499b9.png]: https://img-blog.csdnimg.cn/img_convert/49f6dc95881ba90e4205b9e260e499b9.png
[b68ebed47d8e509096a3000a4528bb73.png]: https://img-blog.csdnimg.cn/img_convert/b68ebed47d8e509096a3000a4528bb73.png
[d2bc5a9c5f659afd669c0357fda1efad.png]: https://img-blog.csdnimg.cn/img_convert/d2bc5a9c5f659afd669c0357fda1efad.png
[0f7fd77bb5617bc8dd1cda6c8f3a0e8b.png]: https://img-blog.csdnimg.cn/img_convert/0f7fd77bb5617bc8dd1cda6c8f3a0e8b.png
[1f76d77b9d6482a60e2cb9e5781c2311.png]: https://img-blog.csdnimg.cn/img_convert/1f76d77b9d6482a60e2cb9e5781c2311.png
[b80f49735a0e207d9687d52a124aedba.png]: https://img-blog.csdnimg.cn/img_convert/b80f49735a0e207d9687d52a124aedba.png
[29d68c0a4212523351cdf36ff643b808.png]: https://img-blog.csdnimg.cn/img_convert/29d68c0a4212523351cdf36ff643b808.png
[868332e1e18e177416bed9c7ce6d5de7.png]: https://img-blog.csdnimg.cn/img_convert/868332e1e18e177416bed9c7ce6d5de7.png
[ccc30b46728146c30f6bbba8ee12008a.png]: https://img-blog.csdnimg.cn/img_convert/ccc30b46728146c30f6bbba8ee12008a.png
[05a7c340dc406ce29ebe9f1f75d662cd.png]: https://img-blog.csdnimg.cn/img_convert/05a7c340dc406ce29ebe9f1f75d662cd.png
[f22815bceb45577f2a1823c45b0b8739.png]: https://img-blog.csdnimg.cn/img_convert/f22815bceb45577f2a1823c45b0b8739.png