其他分享
首页 > 其他分享> > android小项目-菜谱APP-底部导航栏(ViewPager结合Fragment)

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