介绍
在前面已经介绍过使用BottomNavigationView实现底部导航栏，但是并不能左右滑动切换页面，当然配合ViewPager也是可以实现的，可以参考这篇博客：
今天的底部导航栏的实现方式是：RadioGroup + ViewPager + Fragment
使用
首先创建三个Fragment备用：FirstFragmnet、SecondFragment、ThirdFragment
然后修改activity_main.xml布局文件
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
tools:context=".MainActivity">
<RadioGroup
android:id="@+id/radioGroup"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<RadioButton
android:id="@+id/radioButton3"
style="@style/RadioButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:drawableTop="@drawable/bottom_nav_bg"
android:text="导航1"
android:textColor="@drawable/bottom_nav_text" />
<RadioButton
android:id="@+id/radioButton2"
style="@style/RadioButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/bottom_nav_bg"
android:text="导航2"
android:textColor="@drawable/bottom_nav_text" />
<RadioButton
android:id="@+id/radioButton"
style="@style/RadioButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@drawable/bottom_nav_bg"
android:text="导航3"
android:textColor="@drawable/bottom_nav_text" />
</RadioGroup>
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/radioGroup"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
这里只要关注RadioButton部分即可
<RadioButton
android:id="@+id/radioButton3"
style="@style/RadioGroupButtonStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:drawableTop="@drawable/bottom_nav_bg"
android:text="导航1"
android:textColor="@drawable/bottom_nav_text" />
首先自定义了一个主题，用于设置一些通用的属性：
<style name="RadioButtonStyle">
<!-- 去掉button 默认样式-->
<item name="android:button">@null</item>
<item name="android:gravity">center</item>
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:layout_weight">1</item>
<item name="android:textSize">12sp</item>
<item name="android:textColor">#000000</item>
<!--去掉默认的点击效果-->
<item name="android:background">@null</item>
<!--设置按钮与RadioGroup的边距-->
<item name="android:layout_margin">10dp</item>
</style>
然后设置了一个背景图，显示在文本上方：android:drawableTop="@drawable/bottom_nav_bg"
这是一个资源文件bottom_nav_bg.xml，设置选中/未选中时显示的图片
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bottom_first_icon"
android:state_checked="false"/>
<item android:drawable="@drawable/bottom_first_icon_pressed"
android:state_checked="true"/>
</selector>
同理，android:textColor="@drawable/bottom_nav_text"用于设置字体颜色，也是一个资源文件bottom_nav_text.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#B68AF7" android:state_checked="false" />
<item android:color="#ffffff" android:state_checked="true" />
</selector>
剩下的代码为了方便全部写到MainActivity中：
package com.wzl.bottomnavigationvpdemo;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import java.util.ArrayList;
import java.util.List;
/**
* RadioGroup + ViewPager
*/
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
private FragmentPagerAdapter mAdapter;
private RadioGroup radioGroup;
private List<Fragment> mFragments;
private final String TAG = "MainActivity";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
viewPager = findViewById(R.id.viewPager);
radioGroup = findViewById(R.id.radioGroup);
mFragments = new ArrayList<>(3);
// 在Fragment中写一个单例模式即可
mFragments.add(FirstFragment.newInstance());
mFragments.add(SecondFragment.newInstance());
mFragments.add(ThirdFragment.newInstance());
mAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mFragments);
viewPager.setAdapter(mAdapter);
viewPager.addOnPageChangeListener(mPageChangeListener);
radioGroup.setOnCheckedChangeListener(mCheckedChangeListener);
}
@Override
protected void onDestroy() {
super.onDestroy();
viewPager.removeOnPageChangeListener(mPageChangeListener);
}
private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> mList;
MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
mList = list;
}
@NonNull
@Override
public Fragment getItem(int position) {
return mList == null ? null : mList.get(position);
}
@Override
public int getCount() {
return mList == null ? 0 : mList.size();
}
}
// ViewPager的页面切换监听事件
private ViewPager.OnPageChangeListener mPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
// ViewPager发生变化的同时，修改RadioButton的选中状态
RadioButton radioButton = (RadioButton) radioGroup.getChildAt(position);
radioButton.setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
// RadioGroup中的RadioButton选中变化监听事件
private RadioGroup.OnCheckedChangeListener mCheckedChangeListener = new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
// 遍历所有元素，匹配后改变ViewPager的显示
for (int i = 0; i < group.getChildCount(); i++) {
if (group.getChildAt(i).getId() == checkedId) {
viewPager.setCurrentItem(i);
return;
}
}
}
};
}
单例模式示例：
private static FirstFragment fragment = null;
...
static synchronized FirstFragment newInstance(String name) {
return fragment == null ? new FirstFragment() : fragment;
}
效果图
GIF.gif
网友评论