组合控件——底部标签栏——结合RadioGroup和ViewPager自定义底部标签栏
(1)编写活动页面的XML文件,添加ViewPager和RadioGroup节点,其中ViewPager容纳主体页面,RadioGroup容纳底部的一排标签按钮。
(2)左右滑动翻页视图的时候,每当页面滚动结束,就自动选择对应位置的单选按钮。
(3)点击某个单选按钮的时候,先判断当前选择的是第几个按钮,再将翻页视图翻到第几个页面。
================================================================================================
布局:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <androidx.viewpager.widget.ViewPager android:id="@+id/vp_content" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" /> <RadioGroup android:id="@+id/rg_tabbar" android:layout_width="match_parent" android:layout_height="60dp" android:orientation="horizontal"> <RadioButton android:id="@+id/rb_home" style="@style/TabButton" android:checked="true" android:text="首页" android:drawableTop="@drawable/tab_first_selector" /> <RadioButton android:id="@+id/rb_class" style="@style/TabButton" android:text="分类" android:drawableTop="@drawable/tab_second_selector" /> <RadioButton android:id="@+id/rb_cart" style="@style/TabButton" android:text="购物车" android:drawableTop="@drawable/tab_third_selector" /> </RadioGroup> </LinearLayout>
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <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>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@drawable/tab_first_pressed" /> <item android:drawable="@drawable/tab_first_normal" /> </selector>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@drawable/tab_second_pressed" /> <item android:drawable="@drawable/tab_second_normal" /> </selector>
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" android:drawable="@drawable/tab_third_pressed" /> <item android:drawable="@drawable/tab_third_normal" /> </selector>
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; } }
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:orientation="vertical" android:padding="10dp"> <TextView android:id="@+id/tv_first" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="bottom|center" android:textColor="#000000" android:textSize="17sp" /> </LinearLayout>
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; } }
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; } }
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:orientation="vertical" android:padding="10dp"> <TextView android:id="@+id/tv_second" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="bottom|center" android:textColor="#000000" android:textSize="17sp" /> </LinearLayout>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" android:orientation="vertical" android:padding="10dp"> <TextView android:id="@+id/tv_third" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="bottom|center" android:textColor="#000000" android:textSize="17sp" /> </LinearLayout>
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; } }
主代码:
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); // 设置翻页视图显示第几页 } } } }); } }
====================================================================================================