先上效果图！
这种效果是市面上主流的导航栏效果，所以还是有必要去学习一下的
底部导航栏制作
首先我们制作底部的导航栏，这里我选择的是RadioButton来实现这种点击更换字体颜色，图片颜色的效果。
<RadioGroup
android:id="@+id/rb_01"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="@drawable/layer_top"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_main"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/tab_main_selector"
android:gravity="center"
android:paddingTop="5dp"
android:text="主页"
android:textSize="11sp"
android:textColor="@drawable/tab_color"
android:checked="true"/>
<RadioButton
android:id="@+id/rb_find"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/tab_find_selector"
android:gravity="center"
android:paddingTop="5dp"
android:text="探索"
android:textSize="11sp"
android:textColor="@drawable/tab_color" />
<RadioButton
android:id="@+id/rb_user"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/tab_user_selector"
android:gravity="center"
android:paddingTop="5dp"
android:text="我的"
android:textSize="11sp"
android:textColor="@drawable/tab_color" />
</RadioGroup>这是选中改变图标的drawable
这是选中改变字体颜色的drawable
好了导航栏制作完成
ViewPager制作
准备工作：
先在布局中加入控件
<androidx.viewpager.widget.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:layout_above="@id/rb_01" />然后创建三个layout，三个fragment，在fragment中将layout注册成为view
layout布局代码：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff6633"
android:gravity="center">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Main"
android:textColor="#FFFFFF"
android:textSize="50sp"
android:gravity="center" />
</LinearLayout>public class MainFragment extends Fragment {
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_main,null);
}
}在Activity中将三个fragment通过适配器加入到ViewPager中
public class FragmentActivity extends AppCompatActivity {
private RadioGroup radioGroup;
private ViewPager viewPager;
private List<Fragment> fragments;
private FragmentPagerAdapter pagerAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_fragment);
initView();
}
private void initView() {
viewPager = findViewById(R.id.viewPager);
radioGroup = findViewById(R.id.rb_01);
// init fragment
fragments = new ArrayList<>(4);
fragments.add(new MainFragment());
fragments.add(new FindFragment());
fragments.add(new UserFragment());
// init view pager
pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragments);
viewPager.setAdapter(pagerAdapter);
// register listener
viewPager.addOnPageChangeListener(mPageChangeListener);
radioGroup.setOnCheckedChangeListener(mOnCheckedChangeListener);
}
@Override
protected void onDestroy() {
super.onDestroy();
viewPager.removeOnPageChangeListener(mPageChangeListener);
}
private final ViewPager.OnPageChangeListener mPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
RadioButton radioButton = (RadioButton) radioGroup.getChildAt(position);
radioButton.setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
private RadioGroup.OnCheckedChangeListener mOnCheckedChangeListener = new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId){
case R.id.rb_main:
viewPager.setCurrentItem(0);
break;
case R.id.rb_find:
viewPager.setCurrentItem(1);
break;
case R.id.rb_user:
viewPager.setCurrentItem(2);
break;
}
}
};
private class MyFragmentPagerAdapter extends FragmentPagerAdapter {
private List<Fragment> list;
public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> l) {
super(fm);
list = l;
}
@NonNull
@Override
public androidx.fragment.app.Fragment getItem(int position) {
return this.list == null ? null : this.list.get(position);
}
@Override
public int getCount() {
return this.list == null ? 0 : this.list.size();
}
}
}将页面切换和RadioGroup绑定起来
直接把所有的代码放到上面了，说一下基本思想就是监听两个控件的改变事件，通过checkedId将ViewPager的当前页面id和RadioGroup的选中id对应起来即可
这样就可以实现类似于微信的页面切换效果了