标签：fragmentList Fragment ViewPager APP radio public textView
任务描述：
实现三个子页面的滑屏菜单，同时在页面底部添加一个导航栏。如下图所示：
以上的效果有：
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。