组合控件——底部标签栏——结合RadioGroup和ViewPager自定义底部标签栏

骑猪看日落 2023-09-28 23:02 2阅读 0赞

![cbe318a757396171f0bc6f1397781c04.png][]

![88713322cc7d93b79194efc91e1b5d5f.png][]

![b87cfb582a7b75c1048b1cd26c5bec80.png][]

(1)编写活动页面的XML文件，添加ViewPager和RadioGroup节点，其中ViewPager容纳主体页面，RadioGroup容纳底部的一排标签按钮。

(2)左右滑动翻页视图的时候，每当页面滚动结束，就自动选择对应位置的单选按钮。

(3)点击某个单选按钮的时候，先判断当前选择的是第几个按钮，再将翻页视图翻到第几个页面。

![b664f76952012c6404d97b68d05ad43d.png][]

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

布局：

![321c907d737274d0386e05299f695ecc.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>

![f86f4b26d6f28a7e9310b894208de137.png][]

![148c160017c1580e48ac90e1fa04eb13.png][]

![64a0f8b17156de8a53ebbb22f3b14aab.png][]

![387caf97b1c277cb722e71a68f270ab5.png][]

abPagerAdapter

package com.example.myapplication.adapter;
    
    import androidx.fragment.app.Fragment;
    import androidx.fragment.app.FragmentManager;
    import androidx.fragment.app.FragmentPagerAdapter;
    import com.example.myapplication.fragment.TabFirstFragment;
    import com.example.myapplication.fragment.TabSecondFragment;
    import com.example.myapplication.fragment.TabThirdFragment;
    
    public class TabPagerAdapter extends FragmentPagerAdapter
    {
        // 碎片页适配器的构造方法，传入碎片管理器
        public TabPagerAdapter(FragmentManager fm) {
            super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
        }
    
        // 获取指定位置的碎片Fragment
        @Override
        public Fragment getItem(int position)
        {
            if (position == 0)
            {
                return new TabFirstFragment();  // 返回第一个碎片
            }
            else if (position == 1)
            {
                return new TabSecondFragment();  // 返回第二个碎片
            }
            else if (position == 2)
            {
                return new TabThirdFragment();  // 返回第三个碎片
            }
            else
            {
                return null;
            }
        }
    
        // 获取碎片Fragment的个数
        @Override
        public int getCount() {
            return 3;
        }
    }

![0141c453e07eabea28bb69bfee134183.png][]

![bc94f17412b58de38d95daabd03add95.png][]

package com.example.myapplication.fragment;
    
    import android.content.Context;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.TextView;
    import androidx.fragment.app.Fragment;
    import com.example.myapplication.R;
    
    public class TabFirstFragment extends Fragment 
    {
        
        private static final String TAG = "TabFirstFragment";
        protected View mView; // 声明一个视图对象
        protected Context mContext; // 声明一个上下文对象
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
        {
            mContext = getActivity(); // 获取活动页面的上下文
            
            // 根据布局文件fragment_tab_first.xml生成视图对象
            mView = inflater.inflate(R.layout.fragment_tab_first, container, false);
            
            TextView tv_first = mView.findViewById(R.id.tv_first);
            
            tv_first.setText("我是首页页面");
            
            return mView;
        }
    
    }

![260647ead37ca7e96637ebc1c6f7aa2d.png][]

package com.example.myapplication.fragment;
    
    import android.content.Context;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.TextView;
    import androidx.fragment.app.Fragment;
    import com.example.myapplication.R;
    
    public class TabSecondFragment extends Fragment {
        private static final String TAG = "TabSecondFragment";
        protected View mView; // 声明一个视图对象
        protected Context mContext; // 声明一个上下文对象
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            mContext = getActivity(); // 获取活动页面的上下文
            // 根据布局文件fragment_tab_second.xml生成视图对象
            mView = inflater.inflate(R.layout.fragment_tab_second, container, false);
            TextView tv_second = mView.findViewById(R.id.tv_second);
            tv_second.setText("我是分类页面");
            return mView;
        }
    
    }

![13574b68a94dfd3208e5591314732252.png][]

![c32d1a6faba29e9ad526909d1c0e1748.png][]

![04f73dcc00fe3d5668ea3b31a4424a95.png][]

package com.example.myapplication.fragment;
    
    import android.content.Context;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.TextView;
    
    import androidx.fragment.app.Fragment;
    
    import com.example.myapplication.R;
    
    public class TabThirdFragment extends Fragment {
        private static final String TAG = "TabThirdFragment";
        protected View mView; // 声明一个视图对象
        protected Context mContext; // 声明一个上下文对象
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
            mContext = getActivity(); // 获取活动页面的上下文
            // 根据布局文件fragment_tab_third.xml生成视图对象
            mView = inflater.inflate(R.layout.fragment_tab_third, container, false);
            TextView tv_third = mView.findViewById(R.id.tv_third);
            tv_third.setText("我是购物车页面");
    
            return mView;
        }
    
    }

![619601f5b7da82b115178469b12af6ba.png][]

主代码：

package com.example.myapplication;
    import android.os.Bundle;
    import android.widget.RadioButton;
    import android.widget.RadioGroup;
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.viewpager.widget.ViewPager;
    import com.example.myapplication.adapter.TabPagerAdapter;
    
    public class MainActivity extends AppCompatActivity
    {
    
        private ViewPager vp_content; // 声明一个翻页视图对象
        private RadioGroup rg_tabbar; // 声明一个单选组对象
    
        @Override
        protected void onCreate(Bundle savedInstanceState) 
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
    
            vp_content = findViewById(R.id.vp_content); // 从布局文件获取翻页视图
            
            // 构建一个翻页适配器
            TabPagerAdapter adapter = new TabPagerAdapter(getSupportFragmentManager());
            
            vp_content.setAdapter(adapter); // 设置翻页视图的适配器
            
            // 给翻页视图添加页面变更监听器
            vp_content.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                    // 选中指定位置的单选按钮
                    rg_tabbar.check(rg_tabbar.getChildAt(position).getId());
                }
            });
            
            rg_tabbar = findViewById(R.id.rg_tabbar); // 从布局文件获取单选组
            
            // 设置单选组的选中监听器
            rg_tabbar.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
                @Override
                public void onCheckedChanged(RadioGroup group, int checkedId) {
                    for (int pos=0; pos<rg_tabbar.getChildCount(); pos++) {
                        // 获得指定位置的单选按钮
                        RadioButton tab = (RadioButton) rg_tabbar.getChildAt(pos);
                        if (tab.getId() == checkedId) { // 正是当前选中的按钮
                            vp_content.setCurrentItem(pos); // 设置翻页视图显示第几页
                        }
                    }
                }
            });
        }
    
    }

![9e12030b9146570324ad5b969689c987.png][]

![0adbf47ebba4928301fc7357c79638fd.png][]

![9c9593e7907150864a84c3368a139f1c.png][]

![fbcb6e9bb361b11e20707686ac313086.png][]

![e7eb9fc32fff4fea1a60d48d77467a5c.png][]

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

![3191f3b8ebae3b0ff3a04dde932f2dd7.png][]

![255e16719a223c08dffdad6a01b28c77.png][]

![f39cc5246797e3df2ef0cbfc56785d53.png][]

![c8018177e28baa5725a6a7cf610c09ad.png][]

![534e303c317d2721fa9c9d5737ae3c55.png][]

![a8d88368fb563da4dddb5f456311b7cc.png][]

[cbe318a757396171f0bc6f1397781c04.png]: https://img-blog.csdnimg.cn/img_convert/cbe318a757396171f0bc6f1397781c04.png
[88713322cc7d93b79194efc91e1b5d5f.png]: https://img-blog.csdnimg.cn/img_convert/88713322cc7d93b79194efc91e1b5d5f.png
[b87cfb582a7b75c1048b1cd26c5bec80.png]: https://img-blog.csdnimg.cn/img_convert/b87cfb582a7b75c1048b1cd26c5bec80.png
[b664f76952012c6404d97b68d05ad43d.png]: https://img-blog.csdnimg.cn/img_convert/b664f76952012c6404d97b68d05ad43d.png
[321c907d737274d0386e05299f695ecc.png]: https://img-blog.csdnimg.cn/img_convert/321c907d737274d0386e05299f695ecc.png
[f86f4b26d6f28a7e9310b894208de137.png]: https://img-blog.csdnimg.cn/img_convert/f86f4b26d6f28a7e9310b894208de137.png
[148c160017c1580e48ac90e1fa04eb13.png]: https://img-blog.csdnimg.cn/img_convert/148c160017c1580e48ac90e1fa04eb13.png
[64a0f8b17156de8a53ebbb22f3b14aab.png]: https://img-blog.csdnimg.cn/img_convert/64a0f8b17156de8a53ebbb22f3b14aab.png
[387caf97b1c277cb722e71a68f270ab5.png]: https://img-blog.csdnimg.cn/img_convert/387caf97b1c277cb722e71a68f270ab5.png
[0141c453e07eabea28bb69bfee134183.png]: https://img-blog.csdnimg.cn/img_convert/0141c453e07eabea28bb69bfee134183.png
[bc94f17412b58de38d95daabd03add95.png]: https://img-blog.csdnimg.cn/img_convert/bc94f17412b58de38d95daabd03add95.png
[260647ead37ca7e96637ebc1c6f7aa2d.png]: https://img-blog.csdnimg.cn/img_convert/260647ead37ca7e96637ebc1c6f7aa2d.png
[13574b68a94dfd3208e5591314732252.png]: https://img-blog.csdnimg.cn/img_convert/13574b68a94dfd3208e5591314732252.png
[c32d1a6faba29e9ad526909d1c0e1748.png]: https://img-blog.csdnimg.cn/img_convert/c32d1a6faba29e9ad526909d1c0e1748.png
[04f73dcc00fe3d5668ea3b31a4424a95.png]: https://img-blog.csdnimg.cn/img_convert/04f73dcc00fe3d5668ea3b31a4424a95.png
[619601f5b7da82b115178469b12af6ba.png]: https://img-blog.csdnimg.cn/img_convert/619601f5b7da82b115178469b12af6ba.png
[9e12030b9146570324ad5b969689c987.png]: https://img-blog.csdnimg.cn/img_convert/9e12030b9146570324ad5b969689c987.png
[0adbf47ebba4928301fc7357c79638fd.png]: https://img-blog.csdnimg.cn/img_convert/0adbf47ebba4928301fc7357c79638fd.png
[9c9593e7907150864a84c3368a139f1c.png]: https://img-blog.csdnimg.cn/img_convert/9c9593e7907150864a84c3368a139f1c.png
[fbcb6e9bb361b11e20707686ac313086.png]: https://img-blog.csdnimg.cn/img_convert/fbcb6e9bb361b11e20707686ac313086.png
[e7eb9fc32fff4fea1a60d48d77467a5c.png]: https://img-blog.csdnimg.cn/img_convert/e7eb9fc32fff4fea1a60d48d77467a5c.png
[3191f3b8ebae3b0ff3a04dde932f2dd7.png]: https://img-blog.csdnimg.cn/img_convert/3191f3b8ebae3b0ff3a04dde932f2dd7.png
[255e16719a223c08dffdad6a01b28c77.png]: https://img-blog.csdnimg.cn/img_convert/255e16719a223c08dffdad6a01b28c77.png
[f39cc5246797e3df2ef0cbfc56785d53.png]: https://img-blog.csdnimg.cn/img_convert/f39cc5246797e3df2ef0cbfc56785d53.png
[c8018177e28baa5725a6a7cf610c09ad.png]: https://img-blog.csdnimg.cn/img_convert/c8018177e28baa5725a6a7cf610c09ad.png
[534e303c317d2721fa9c9d5737ae3c55.png]: https://img-blog.csdnimg.cn/img_convert/534e303c317d2721fa9c9d5737ae3c55.png
[a8d88368fb563da4dddb5f456311b7cc.png]: https://img-blog.csdnimg.cn/img_convert/a8d88368fb563da4dddb5f456311b7cc.png