安卓：ViewPager+Fragment+RadioButton实现底部菜单栏滑动切换

1.ViewPager简单介绍

ViewPager就是一个简单的页面切换组件，我们可以往里面填充多个View，然后我们可以左右滑动，从而切换不同的View，我们可以通过setPageTransformer()方法为我们的ViewPager> 设置切换时的动画效果。和ListView，GridView一样，我们也需要一个Adapter> (适配器)将我们的View和ViewPager进行绑定，而ViewPager则有一个特定的Adapter——> PagerAdapter！另外，Google官方是建议我们使用Fragment来填充ViewPager的，这样> 可以更加方便的生成每个Page，以及管理每个Page的生命周期！Google给我们提供了两个Fragment> 专用的Adapter：FragmentPageAdapter和FragmentStatePagerAdapter。

2.实现效果图以及工程目录结构：

3.代码实现：

1)、相关资源文件

项目完整代码

2)、主界面布局文件：

<RelativeLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><RadioGroupandroid:id="@+id/rg_tab_bar"android:layout_width="match_parent"android:layout_height="50dp"android:layout_alignParentBottom="true"android:background="@color/bg_white"android:orientation="horizontal"><RadioButtonandroid:id="@+id/rb_main"style="@style/tab_menu_item"android:drawableTop="@drawable/tab_menu_channel"android:text="主页"android:textSize="14sp"/><RadioButtonandroid:id="@+id/rb_query"style="@style/tab_menu_item"android:drawableTop="@drawable/tab_menu_message"android:text="查询"android:textSize="14sp"/><RadioButtonandroid:id="@+id/rb_predict"style="@style/tab_menu_item"android:drawableTop="@drawable/tab_menu_better"android:text="预测"android:textSize="14sp"/><RadioButtonandroid:id="@+id/rb_user"style="@style/tab_menu_item"android:drawableTop="@drawable/tab_menu_setting"android:text="个人中心"android:textSize="14sp"/></RadioGroup><Viewandroid:id="@+id/div_tab_bar"android:layout_width="match_parent"android:layout_height="2px"android:layout_above="@id/rg_tab_bar"android:background="@color/div_white" /><androidx.viewpager.widget.ViewPagerandroid:id="@+id/vpager"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_above="@id/div_tab_bar"/></RelativeLayout>

3）、四个fragment及其布局文件

HomeFragment:

package com.example.buttommenubar;import android.os.Bundle;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.TextView;import androidx.annotation.NonNull;import androidx.annotation.Nullable;import androidx.fragment.app.Fragment;public class HomeFragment extends Fragment {private TextView textView;@Nullable@Override//类似于Activity里面的setContentView();public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {View view=inflater.inflate(R.layout.fragment_home,container,false);return view;}@Overridepublic void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {super.onViewCreated(view, savedInstanceState);textView=view.findViewById(R.id.home);}}

布局文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/home"android:layout_width="match_parent"android:layout_height="match_parent"android:text="这里是主界面"android:textAlignment="center"android:textSize="25sp"></TextView></LinearLayout>

剩余三个改下名字就好了，这里就不列上代码了。

4)、极为关键的一步，自定义FragmentPagerAdapter

代码如下：

package com.example.buttommenubar;import android.view.ViewGroup;import androidx.annotation.NonNull;import androidx.fragment.app.Fragment;import androidx.fragment.app.FragmentManager;import androidx.fragment.app.FragmentPagerAdapter;public class MyFragmentPagerAdapter extends FragmentPagerAdapter {private final int PAGER_COUNT = 4;private HomeFragment homeFragment;private PredictFragment predictFragment;private QueryFragment queryFragment;private UserFragment userFragment;public MyFragmentPagerAdapter(FragmentManager fm) {super(fm);homeFragment=new HomeFragment();predictFragment=new PredictFragment();queryFragment=new QueryFragment();userFragment=new UserFragment();}@Overridepublic Fragment getItem(int position) {Fragment fragment = null;switch (position) {case MainActivity.PAGE_ONE:fragment = homeFragment;break;case MainActivity.PAGE_TWO:fragment = queryFragment;break;case MainActivity.PAGE_THREE:fragment = predictFragment;break;case MainActivity.PAGE_FOUR:fragment = userFragment;break;}return fragment;}@Overridepublic int getCount() {return PAGER_COUNT;}@Overridepublic Object instantiateItem(@NonNull ViewGroup container, int position) {return super.instantiateItem(container, position);}@Overridepublic void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {super.destroyItem(container, position, object);}}

5）、MainActivity.java

package com.example.buttommenubar;import androidx.appcompat.app.AppCompatActivity;import androidx.viewpager.widget.ViewPager;import android.os.Bundle;import android.widget.RadioButton;import android.widget.RadioGroup;public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener,ViewPager.OnPageChangeListener {private RadioGroup rg_tab_bar;private RadioButton rb_main;private RadioButton rb_query;private RadioButton rb_predict;private RadioButton rb_user;private ViewPager vpager;private MyFragmentPagerAdapter mAdapter;//代表页面的常量public static final int PAGE_ONE = 0;public static final int PAGE_TWO = 1;public static final int PAGE_THREE = 2;public static final int PAGE_FOUR = 3;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);getSupportActionBar().hide();setContentView(R.layout.activity_main);mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager());initViews();rb_main.setChecked(true);}private void initViews() {rg_tab_bar = findViewById(R.id.rg_tab_bar);rb_main = findViewById(R.id.rb_main);rb_query = findViewById(R.id.rb_query);rb_predict = findViewById(R.id.rb_predict);rb_user = findViewById(R.id.rb_user);rg_tab_bar.setOnCheckedChangeListener(this);vpager = findViewById(R.id.vpager);vpager.setAdapter(mAdapter);vpager.setCurrentItem(0);vpager.addOnPageChangeListener(this);}@Overridepublic void onCheckedChanged(RadioGroup group, int checkedId) {switch (checkedId) {case R.id.rb_main:vpager.setCurrentItem(PAGE_ONE);break;case R.id.rb_query:vpager.setCurrentItem(PAGE_TWO);break;case R.id.rb_predict:vpager.setCurrentItem(PAGE_THREE);break;case R.id.rb_user:vpager.setCurrentItem(PAGE_FOUR);break;}}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {}@Overridepublic void onPageScrollStateChanged(int state) {if (state == 2) {switch (vpager.getCurrentItem()) {case PAGE_ONE:rb_main.setChecked(true);break;case PAGE_TWO:rb_query.setChecked(true);break;case PAGE_THREE:rb_predict.setChecked(true);break;case PAGE_FOUR:rb_user.setChecked(true);break;}}}@Overridepublic void onPointerCaptureChanged(boolean hasCapture) {}}