(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); // 设置翻页视图显示第几页
}
}
}
});
}
}
====================================================================================================