android小项目-菜谱APP-底部导航栏（ViewPager结合Fragment）
作者：互联网
任务描述：
实现三个子页面的滑屏菜单，同时在页面底部添加一个导航栏。如下图所示：
以上的效果有：
1.点击导航栏时图标会变黑
2.可以点击下方导航栏切换
3.可以左右滑动切换
设计思路：滑屏页面有两个部分组成：用来装载Fragment的ViewPager和底部导航栏。
底部导航栏由RadioGroup和RadioButton组成，就可以实现了。
首先，准备好导航栏所需的图标。（我是在阿里矢量图标库下载的：https://www.iconfont.cn/）
这里准备的图标，需要两种不同状态的，按下的和未按下的。
如：这是未按下的===>
这是按下的状态===>
图片下载后，放进drawable目录下。如图：
准备工作做好后，就可以开始实战了。
1.设计布局页面：
设计思路：需要ViewPager控件，设置权重为1；需要横向排列的线性布局，用于放置底部导航栏，底部导航栏使用RadioGroup和RadioButton控件。
代码如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<androidx.viewpager.widget.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<View
android:layout_width="match_parent"
android:layout_height="10dp"
android:background="@color/white"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:orientation="horizontal"
android:background="@color/white">
<RadioGroup
android:id="@+id/radio_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="3">
<RadioButton
android:id="@+id/radio_homePage"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@null"
android:drawableTop="@drawable/one"
android:layout_weight="1"/>
<RadioButton
android:id="@+id/radio_classify"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@null"
android:drawableTop="@drawable/two"
android:layout_weight="1"/>
<RadioButton
android:id="@+id/radio_personal_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:button="@null"
android:drawableTop="@drawable/three"
android:layout_weight="1"/>
</RadioGroup>
</LinearLayout>
</LinearLayout>
如上代码所示，每个RadioButton都有对应的drawableTop.这个属性就是用来实现点击图标后变化的，
来看一看里面的内容：
首先是one.xml中的内容：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/homepage" android:state_checked="false"/>
<item android:drawable="@drawable/homepage_checked" android:state_checked="true"/>
</selector>
android:state_checked 表示选择选中的状态。false为：未选中的状态。true为选中时的状态。
two.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/classify" android:state_checked="false"/>
<item android:drawable="@drawable/classify_checked" android:state_checked="true"/>
</selector>
three.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/personal_center" android:state_checked="false"/>
<item android:drawable="@drawable/personal_center_checked" android:state_checked="true"/>
</selector>
现在运行代码，就可以实现选中图标时变化了。
逻辑代码的实现：ViewPager结合Fragment使用
1.控件的绑定：
private ViewPager view_pager; //ViewPager控件
private RadioGroup radio_group; //单选按钮纽组
private RadioButton radio_homepage,radio_classify,radio_personal_center; //按钮首页，分类，个人中心
//绑定控件
private void initView(){
view_pager =(ViewPager) findViewById(R.id.view_pager);
radio_group = (RadioGroup) findViewById(R.id.radio_group);
radio_homepage = (RadioButton) findViewById(R.id.radio_homePage);
radio_classify = (RadioButton) findViewById(R.id.radio_classify);
radio_personal_center = (RadioButton) findViewById(R.id.radio_personal_center);
}
2.创建碎片类Fragment
主页Fragment:
public class HomepageFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
TextView textView = new TextView(container.getContext());
textView.setText("主页");
textView.setTextSize(30);
return textView;
}
}
分类Fragment:
public class ClassifyFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
TextView textView = new TextView(container.getContext());
textView.setText("分类");
textView.setTextSize(30);
return textView;
}
}
个人中心Fragment:
public class PersonalCenterFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
TextView textView = new TextView(container.getContext());
textView.setText("个人中心");
textView.setTextSize(30);
return textView;
}
}
3.定义适配器
public class MyFragmentAdapter extends FragmentPagerAdapter {
private List<Fragment> fragmentList; //用于存放碎片列表
public MyFragmentAdapter(FragmentManager fm, List<Fragment> fragmentList) { //构造器，每一个Fragment页面都会被一直保存在FragmentManager中，以便用户可以随时取用
super(fm);
this.fragmentList = fragmentList;
}
//根据位置返回当前碎片
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
//碎片的总数
@Override
public int getCount() {
return fragmentList.size();
}
}
4.创建各个Fragment的实例并通过适配器添加到ViewPager控件
private Fragment homepageFragment,classifyFragment,personalCenterFragment;
private List<Fragment> fragmentList = new ArrayList<>(); //用于存放碎片列表
private int positon = 0; //用于记录当前所在的页面，默认值为0表示选中第一页
private void initData(){
//将碎片实例化，存放到动态数组
homepageFragment = new HomepageFragment();
classifyFragment = new ClassifyFragment();
personalCenterFragment = new PersonalCenterFragment();
fragmentList.add(homepageFragment);
fragmentList.add(classifyFragment);
fragmentList.add(personalCenterFragment);
//创建自定义适配器的实例
MyFragmentAdapter adapter = new MyFragmentAdapter(this.getSupportFragmentManager(),fragmentList);
//为ViewPager绑定适配器
view_pager.setAdapter(adapter);
}
5.ViewPager滑屏时使得底部导航栏选中对应的按钮
private void initMove(){
view_pager.addOnPageChangeListener(new ViewPager.OnPageChangeListener(){ //ViewPager滑屏监听事件
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
((RadioButton)radio_group.getChildAt(position)).setChecked(true);//滑屏时pisition改变了，导航栏按钮也会改变
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
radio_group.getChildAt(position))：根据索引获取当前索引对应的radioButton
setchecked(true):设置为选中状态
ViewPager监听事件的三个方法指路：https://blog.csdn.net/xieluoxixi/article/details/54983525
6.底部导航栏被单击时，ViewPager切换到对应的页面
private void initOnclick(){
radio_group.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { //RadioGroup单击监听事件
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId){
case R.id.radio_homePage:
positon = 0;
view_pager.setCurrentItem(positon);
break;
case R.id.radio_classify:
positon = 1;
view_pager.setCurrentItem(positon);
break;
case R.id.radio_personal_center:
positon = 2;
view_pager.setCurrentItem(positon);
break;
default:
positon = 0;
view_pager.setCurrentItem(positon);
break;
}
}
});
}
}
7.将以上方法在onCreate()方法中调用：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView(); //绑定控件
initData(); //将碎片类添加到ViewPager容器中
initMove(); //滑屏时按钮随着变化
initOnclick(); //单击按钮，碎片随着变化
}
现在运行程序，就可以得到一开始想要的效果了。
标签：fragmentList,Fragment,ViewPager,APP,radio,public,textView 来源： https://www.cnblogs.com/Xiang-MY/p/16608659.html