RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动

实现效果图如下：

PS：下面那个红色的我也不知道是怎么回事，看到上面的两层水印了，它们的存在证明了我的穷。

在日常开发中我们常常会用到类似微信或者QQ的底部导航。实现这样的效果有多种，今天就为大家介绍一种实现简单，可控性好的底部导航的实现方法。
1.创建布局
首先创建一个项目 ，然后再MainActivity的布局文件中放两个控件 ViewPager和RadioGroup。代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:background="@color/white"android:orientation="vertical"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><android.support.v4.view.ViewPagerandroid:id="@+id/viewPager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"/><RadioGroupandroid:layout_alignParentBottom="true"android:id="@+id/rg"android:layout_width="match_parent"android:layout_height="50dp"android:orientation="horizontal"android:gravity="center"android:background="#FDFDFD"><RadioButtonandroid:drawableTop="@drawable/selector_wallet_rb_img"android:text="one"style="@style/main_rb_style"android:id="@+id/rb_wallet"/><RadioButtonandroid:drawableTop="@drawable/selector_treasure_rb_img"android:text="two"style="@style/main_rb_style"android:id="@+id/rb_treasure"/><RadioButtonandroid:drawableTop="@drawable/selector_home_rb_img"android:text="three"style="@style/main_rb_style"android:id="@+id/rb_home"/><RadioButtonandroid:drawableTop="@drawable/selector_otc_rb_img"android:text="four"style="@style/main_rb_style"android:id="@+id/rb_otc"/><RadioButtonandroid:drawableTop="@drawable/selector_my_rb_img"android:text="five"style="@style/main_rb_style"android:id="@+id/rb_my"/></RadioGroup></LinearLayout>

其中我在RadioButton里面加入了样式文件，是底部导航按钮点击前后的效果图包括文字的切换， 样式文件代码如下
selector_wallet_rb_img.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@mipmap/icon_checked_wallet" android:state_checked="true" /><item android:drawable="@mipmap/icon_normal_wallet" android:state_checked="false" />
</selector>

selector_treasure_rb_img.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@mipmap/icon_checked_treasure" android:state_checked="true" /><item android:drawable="@mipmap/icon_normal_treasure" android:state_checked="false" />
</selector>

selector_home_rb_img.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@mipmap/icon_checked_home" android:state_checked="true"/><item android:drawable="@mipmap/icon_normal_home" android:state_checked="false"/>
</selector>

selector_otc_rb_img.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@mipmap/icon_checked_otc" android:state_checked="true" /><item android:drawable="@mipmap/icon_normal_otc" android:state_checked="false" />
</selector>

selector_my_rb_img.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@mipmap/icon_checked_my" android:state_checked="true" /><item android:drawable="@mipmap/icon_normal_my" android:state_checked="false" />
</selector>

大体图片命名如下：

所有图片都已经放在这里了，另存为 添加到自己的文件夹再命名即可。

main_rb_style样式如下，放在styles.xml中

	<!--底部导航rb设置--><style name="main_rb_style" ><item name="android:layout_weight">1</item><item name="android:layout_width">0dp</item><item name="android:layout_height">wrap_content</item><item name="android:button">@null</item><item name="android:gravity">center</item><item name="android:textSize">12sp</item><item name="android:textColor">@drawable/selector_main_rb_text_color</item></style>

选中按钮相应的文字颜色变化样式如下

selector_main_rb_text_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:color="@color/blue" android:state_checked="true"/><item android:color="@color/ed_gray" android:state_checked="false"/>
</selector>

做完这些你就可以看到这样的效果图

到这一步，点击效果就可以了，然后就是在ViewPager中添加碎片Fragment,添加五个碎片，因为涉及到项目的机密，所以我这里命名就不那么规范了，就用英文的1~5来命名了 。(实际开发中一定不要这样，因为这样的命名没有意义，还会增加后期代码维护的难度，如果是一个接手你项目的人看到这种命名方式，估计你要被叼的。)

2 创建碎片

然后创建一个OneFragment 和fragment.xml

代码如下：

OneFragment

public class OneFragment extends Fragment {
    @Overridepublic View onCreateView(final LayoutInflater inflater,ViewGroup container, Bundle savedInstanceState) {
    final View view = inflater.inflate(R.layout.fragment_one,container, false);return view;}
}

fragment_one.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"tools:context=".fragment.OneFragment"><TextViewandroid:textSize="@dimen/sp_40"android:textColor="@color/blue"android:text="ONE"android:layout_width="wrap_content"android:layout_height="wrap_content"/>
</LinearLayout>

后面四个我就不一一列出来了，代码都差不多，改个名字就可以了。

3.创建适配器

然后创建一个适配器 MainFragmentPagerAdapter 用于加载碎片
代码如下

public class MainFragmentPagerAdapter extends FragmentPagerAdapter {
    List<Fragment> mFragmentList;public MainFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
    super(fm);mFragmentList=list;}@Overridepublic Fragment getItem(int i) {
    return mFragmentList.get(i);}@Overridepublic int getCount() {
    return mFragmentList!=null?mFragmentList.size():0;}@Overridepublic void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
    
// super.destroyItem(container, position, object);}
}

4.绑定数据
最后再MainActivity中 初始化控件以及绑定RadioGroup即可实现效果

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
    List<Fragment> fragmentList = new ArrayList<>();MainFragmentPagerAdapter adapter;ViewPager viewPager;RadioGroup rg;@Overrideprotected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//初始化控件initView();//绑定RadioButtoninitViewPager();}private void initView() {
    viewPager = findViewById(R.id.viewPager);rg = findViewById(R.id.rg);rg.setOnCheckedChangeListener(this);rg.getChildAt(0).performClick();}private void initViewPager() {
    //添加碎片fragmentList.add(new OneFragment());fragmentList.add(new TwoFragment());fragmentList.add(new ThreeFragment());fragmentList.add(new FourFragment());fragmentList.add(new FiveFragment());adapter = new MainFragmentPagerAdapter(getSupportFragmentManager(), fragmentList);viewPager.setAdapter(adapter);viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Overridepublic void onPageScrolled(int i, float v, int i1) {
    }@Overridepublic void onPageSelected(int i) {
    switch (i) {
    case 0:rg.check(R.id.rb_wallet);break;case 1:rg.check(R.id.rb_treasure);break;case 2:rg.check(R.id.rb_home);break;case 3:rg.check(R.id.rb_otc);break;case 4:rg.check(R.id.rb_my);break;}}@Overridepublic void onPageScrollStateChanged(int i) {
    }});}@Overridepublic void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
    switch (checkedId) {
    case R.id.rb_wallet:viewPager.setCurrentItem(0);break;case R.id.rb_treasure:viewPager.setCurrentItem(1);break;case R.id.rb_home:viewPager.setCurrentItem(2);break;case R.id.rb_otc:viewPager.setCurrentItem(3);break;case R.id.rb_my:viewPager.setCurrentItem(4);break;}}
}

就这么愉快地结束了。