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


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

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

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

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

    布局:

    1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2. android:layout_width="match_parent"
    3. android:layout_height="match_parent"
    4. android:orientation="vertical">
    5. <androidx.viewpager.widget.ViewPager
    6. android:id="@+id/vp_content"
    7. android:layout_width="match_parent"
    8. android:layout_height="0dp"
    9. android:layout_weight="1" />
    10. <RadioGroup
    11. android:id="@+id/rg_tabbar"
    12. android:layout_width="match_parent"
    13. android:layout_height="60dp"
    14. android:orientation="horizontal">
    15. <RadioButton
    16. android:id="@+id/rb_home"
    17. style="@style/TabButton"
    18. android:checked="true"
    19. android:text="首页"
    20. android:drawableTop="@drawable/tab_first_selector" />
    21. <RadioButton
    22. android:id="@+id/rb_class"
    23. style="@style/TabButton"
    24. android:text="分类"
    25. android:drawableTop="@drawable/tab_second_selector" />
    26. <RadioButton
    27. android:id="@+id/rb_cart"
    28. style="@style/TabButton"
    29. android:text="购物车"
    30. android:drawableTop="@drawable/tab_third_selector" />
    31. </RadioGroup>
    32. </LinearLayout>

    1. <resources>
    2. <!-- Base application theme. -->
    3. <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    4. <!-- Customize your theme here. -->
    5. <item name="colorPrimary">@color/colorPrimary</item>
    6. <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    7. <item name="colorAccent">@color/colorAccent</item>
    8. <item name="customButtonStyle">@style/CommonButton</item>
    9. </style>
    10. <style name="CommonButton">
    11. <item name="android:textAllCaps">false</item>
    12. <item name="android:textColor">#000000</item>
    13. <item name="android:textSize">20sp</item>
    14. </style>
    15. <style name="TabButton">
    16. <item name="android:layout_width">0dp</item>
    17. <item name="android:layout_height">match_parent</item>
    18. <item name="android:layout_weight">1</item>
    19. <item name="android:padding">5dp</item>
    20. <item name="android:gravity">center</item>
    21. <item name="android:background">@drawable/tab_bg_selector</item>
    22. <item name="android:textSize">12sp</item>
    23. <item name="android:textColor">@drawable/tab_text_selector</item>
    24. <item name="android:button">@null</item>
    25. </style>
    26. </resources>

    1. <selector xmlns:android="http://schemas.android.com/apk/res/android">
    2. <item android:state_checked="true" android:drawable="@drawable/tab_first_pressed" />
    3. <item android:drawable="@drawable/tab_first_normal" />
    4. </selector>

    1. <selector xmlns:android="http://schemas.android.com/apk/res/android">
    2. <item android:state_checked="true" android:drawable="@drawable/tab_second_pressed" />
    3. <item android:drawable="@drawable/tab_second_normal" />
    4. </selector>

    1. <selector xmlns:android="http://schemas.android.com/apk/res/android">
    2. <item android:state_checked="true" android:drawable="@drawable/tab_third_pressed" />
    3. <item android:drawable="@drawable/tab_third_normal" />
    4. </selector>

    abPagerAdapter
    
    1. package com.example.myapplication.adapter;
    2. import androidx.fragment.app.Fragment;
    3. import androidx.fragment.app.FragmentManager;
    4. import androidx.fragment.app.FragmentPagerAdapter;
    5. import com.example.myapplication.fragment.TabFirstFragment;
    6. import com.example.myapplication.fragment.TabSecondFragment;
    7. import com.example.myapplication.fragment.TabThirdFragment;
    8. public class TabPagerAdapter extends FragmentPagerAdapter
    9. {
    10. // 碎片页适配器的构造方法,传入碎片管理器
    11. public TabPagerAdapter(FragmentManager fm) {
    12. super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
    13. }
    14. // 获取指定位置的碎片Fragment
    15. @Override
    16. public Fragment getItem(int position)
    17. {
    18. if (position == 0)
    19. {
    20. return new TabFirstFragment(); // 返回第一个碎片
    21. }
    22. else if (position == 1)
    23. {
    24. return new TabSecondFragment(); // 返回第二个碎片
    25. }
    26. else if (position == 2)
    27. {
    28. return new TabThirdFragment(); // 返回第三个碎片
    29. }
    30. else
    31. {
    32. return null;
    33. }
    34. }
    35. // 获取碎片Fragment的个数
    36. @Override
    37. public int getCount() {
    38. return 3;
    39. }
    40. }

    1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2. android:layout_width="match_parent"
    3. android:layout_height="match_parent"
    4. android:background="@color/white"
    5. android:orientation="vertical"
    6. android:padding="10dp">
    7. <TextView
    8. android:id="@+id/tv_first"
    9. android:layout_width="match_parent"
    10. android:layout_height="match_parent"
    11. android:gravity="bottom|center"
    12. android:textColor="#000000"
    13. android:textSize="17sp" />
    14. </LinearLayout>

    1. package com.example.myapplication.fragment;
    2. import android.content.Context;
    3. import android.os.Bundle;
    4. import android.view.LayoutInflater;
    5. import android.view.View;
    6. import android.view.ViewGroup;
    7. import android.widget.TextView;
    8. import androidx.fragment.app.Fragment;
    9. import com.example.myapplication.R;
    10. public class TabFirstFragment extends Fragment
    11. {
    12. private static final String TAG = "TabFirstFragment";
    13. protected View mView; // 声明一个视图对象
    14. protected Context mContext; // 声明一个上下文对象
    15. @Override
    16. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    17. {
    18. mContext = getActivity(); // 获取活动页面的上下文
    19. // 根据布局文件fragment_tab_first.xml生成视图对象
    20. mView = inflater.inflate(R.layout.fragment_tab_first, container, false);
    21. TextView tv_first = mView.findViewById(R.id.tv_first);
    22. tv_first.setText("我是首页页面");
    23. return mView;
    24. }
    25. }

    1. package com.example.myapplication.fragment;
    2. import android.content.Context;
    3. import android.os.Bundle;
    4. import android.view.LayoutInflater;
    5. import android.view.View;
    6. import android.view.ViewGroup;
    7. import android.widget.TextView;
    8. import androidx.fragment.app.Fragment;
    9. import com.example.myapplication.R;
    10. public class TabSecondFragment extends Fragment {
    11. private static final String TAG = "TabSecondFragment";
    12. protected View mView; // 声明一个视图对象
    13. protected Context mContext; // 声明一个上下文对象
    14. @Override
    15. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    16. mContext = getActivity(); // 获取活动页面的上下文
    17. // 根据布局文件fragment_tab_second.xml生成视图对象
    18. mView = inflater.inflate(R.layout.fragment_tab_second, container, false);
    19. TextView tv_second = mView.findViewById(R.id.tv_second);
    20. tv_second.setText("我是分类页面");
    21. return mView;
    22. }
    23. }

    1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2. android:layout_width="match_parent"
    3. android:layout_height="match_parent"
    4. android:background="@color/white"
    5. android:orientation="vertical"
    6. android:padding="10dp">
    7. <TextView
    8. android:id="@+id/tv_second"
    9. android:layout_width="match_parent"
    10. android:layout_height="match_parent"
    11. android:gravity="bottom|center"
    12. android:textColor="#000000"
    13. android:textSize="17sp" />
    14. </LinearLayout>

    1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    2. android:layout_width="match_parent"
    3. android:layout_height="match_parent"
    4. android:background="@color/white"
    5. android:orientation="vertical"
    6. android:padding="10dp">
    7. <TextView
    8. android:id="@+id/tv_third"
    9. android:layout_width="match_parent"
    10. android:layout_height="match_parent"
    11. android:gravity="bottom|center"
    12. android:textColor="#000000"
    13. android:textSize="17sp" />
    14. </LinearLayout>

    1. package com.example.myapplication.fragment;
    2. import android.content.Context;
    3. import android.os.Bundle;
    4. import android.view.LayoutInflater;
    5. import android.view.View;
    6. import android.view.ViewGroup;
    7. import android.widget.TextView;
    8. import androidx.fragment.app.Fragment;
    9. import com.example.myapplication.R;
    10. public class TabThirdFragment extends Fragment {
    11. private static final String TAG = "TabThirdFragment";
    12. protected View mView; // 声明一个视图对象
    13. protected Context mContext; // 声明一个上下文对象
    14. @Override
    15. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    16. mContext = getActivity(); // 获取活动页面的上下文
    17. // 根据布局文件fragment_tab_third.xml生成视图对象
    18. mView = inflater.inflate(R.layout.fragment_tab_third, container, false);
    19. TextView tv_third = mView.findViewById(R.id.tv_third);
    20. tv_third.setText("我是购物车页面");
    21. return mView;
    22. }
    23. }

    主代码:

    1. package com.example.myapplication;
    2. import android.os.Bundle;
    3. import android.widget.RadioButton;
    4. import android.widget.RadioGroup;
    5. import androidx.appcompat.app.AppCompatActivity;
    6. import androidx.viewpager.widget.ViewPager;
    7. import com.example.myapplication.adapter.TabPagerAdapter;
    8. public class MainActivity extends AppCompatActivity
    9. {
    10. private ViewPager vp_content; // 声明一个翻页视图对象
    11. private RadioGroup rg_tabbar; // 声明一个单选组对象
    12. @Override
    13. protected void onCreate(Bundle savedInstanceState)
    14. {
    15. super.onCreate(savedInstanceState);
    16. setContentView(R.layout.activity_main);
    17. vp_content = findViewById(R.id.vp_content); // 从布局文件获取翻页视图
    18. // 构建一个翻页适配器
    19. TabPagerAdapter adapter = new TabPagerAdapter(getSupportFragmentManager());
    20. vp_content.setAdapter(adapter); // 设置翻页视图的适配器
    21. // 给翻页视图添加页面变更监听器
    22. vp_content.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
    23. @Override
    24. public void onPageSelected(int position) {
    25. // 选中指定位置的单选按钮
    26. rg_tabbar.check(rg_tabbar.getChildAt(position).getId());
    27. }
    28. });
    29. rg_tabbar = findViewById(R.id.rg_tabbar); // 从布局文件获取单选组
    30. // 设置单选组的选中监听器
    31. rg_tabbar.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
    32. @Override
    33. public void onCheckedChanged(RadioGroup group, int checkedId) {
    34. for (int pos=0; pos<rg_tabbar.getChildCount(); pos++) {
    35. // 获得指定位置的单选按钮
    36. RadioButton tab = (RadioButton) rg_tabbar.getChildAt(pos);
    37. if (tab.getId() == checkedId) { // 正是当前选中的按钮
    38. vp_content.setCurrentItem(pos); // 设置翻页视图显示第几页
    39. }
    40. }
    41. }
    42. });
    43. }
    44. }

     

     

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

     

     

     

     

  • 相关阅读:
    掌握这四步,月收入1万+的自媒体人可能就是你
    2022最新PPT模板,免费下载
    NTL:密码数论库--安装与使用
    MySQL8.0 索引优化-invisible index
    「太阁干货」详细解析MPLS转发原理
    Pytorch 的基本概念和使用场景介绍
    Docker下Redis集群伸缩
    【运维项目经历|031】GitLab自动化运维管理平台项目
    Jetpack:008-Icon与Image
    sentinel docker 基础配置学习
  • 原文地址:https://blog.csdn.net/m0_61442607/article/details/126692368