RadioGroup+ViewPager +Fragment 制作APP主界面底部导航和左右滑动
实现效果图如下:
PS:下面那个红色的我也不知道是怎么回事,看到上面的两层水印了,它们的存在证明了我的穷。
在日常开发中我们常常会用到类似微信或者QQ的底部导航。实现这样的效果有多种,今天就为大家介绍一种实现简单,可控性好的底部导航的实现方法。 1.创建布局 首先创建一个项目 ,然后再MainActivity的布局文件中放两个控件 ViewPager和RadioGroup。代码如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:background="@color/white"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
<RadioGroup
android:layout_alignParentBottom="true"
android:id="@+id/rg"
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:gravity="center"
android:background="#FDFDFD"
>
<RadioButton
android:drawableTop="@drawable/selector_wallet_rb_img"
android:text="one"
style="@style/main_rb_style"
android:id="@+id/rb_wallet"
/>
<RadioButton
android:drawableTop="@drawable/selector_treasure_rb_img"
android:text="two"
style="@style/main_rb_style"
android:id="@+id/rb_treasure"
/>
<RadioButton
android:drawableTop="@drawable/selector_home_rb_img"
android:text="three"
style="@style/main_rb_style"
android:id="@+id/rb_home"
/>
<RadioButton
android:drawableTop="@drawable/selector_otc_rb_img"
android:text="four"
style="@style/main_rb_style"
android:id="@+id/rb_otc"
/>
<RadioButton
android:drawableTop="@drawable/selector_my_rb_img"
android:text="five"
style="@style/main_rb_style"
android:id="@+id/rb_my"
/>
</RadioGroup>
</LinearLayout>
其中我在RadioButton里面加入了样式文件,是底部导航按钮点击前后的效果图包括文字的切换, 样式文件代码如下 selector_wallet_rb_img.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/icon_checked_wallet" android:state_checked="true" />
<item android:drawable="@mipmap/icon_normal_wallet" android:state_checked="false" />
</selector>
selector_treasure_rb_img.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/icon_checked_treasure" android:state_checked="true" />
<item android:drawable="@mipmap/icon_normal_treasure" android:state_checked="false" />
</selector>
selector_home_rb_img.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/icon_checked_home" android:state_checked="true"/>
<item android:drawable="@mipmap/icon_normal_home" android:state_checked="false"/>
</selector>
selector_otc_rb_img.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/icon_checked_otc" android:state_checked="true" />
<item android:drawable="@mipmap/icon_normal_otc" android:state_checked="false" />
</selector>
selector_my_rb_img.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/icon_checked_my" android:state_checked="true" />
<item android:drawable="@mipmap/icon_normal_my" android:state_checked="false" />
</selector>
大体图片命名如下:
所有图片都已经放在这里了,另存为 添加到自己的文件夹再命名即可。
选中按钮相应的文字颜色变化样式如下
selector_main_rb_text_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/blue" android:state_checked="true"/>
<item android:color="@color/ed_gray" android:state_checked="false"/>
</selector>
做完这些你就可以看到这样的效果图
到这一步,点击效果就可以了,然后就是在ViewPager中添加碎片Fragment,添加五个碎片,因为涉及到项目的机密,所以我这里命名就不那么规范了,就用英文的1~5来命名了 。(实际开发中一定不要这样,因为这样的命名没有意义,还会增加后期代码维护的难度,如果是一个接手你项目的人看到这种命名方式,估计你要被叼的。)
2 创建碎片
然后创建一个OneFragment 和fragment.xml
代码如下:
OneFragment
public class OneFragment extends Fragment {
@Override
public View onCreateView(final LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
final View view = inflater.inflate(R.layout.fragment_one,
container, false);
return view;
}
}
fragment_one.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:gravity="center"
tools:context=".fragment.OneFragment">
<TextView
android:textSize="@dimen/sp_40"
android:textColor="@color/blue"
android:text="ONE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>
后面四个我就不一一列出来了,代码都差不多,改个名字就可以了。
3.创建适配器
然后创建一个适配器 MainFragmentPagerAdapter 用于加载碎片 代码如下
public class MainFragmentPagerAdapter extends FragmentPagerAdapter {
List<Fragment> mFragmentList;
public MainFragmentPagerAdapter(FragmentManager fm, List<Fragment> list) {
super(fm);
mFragmentList=list;
}
@Override
public Fragment getItem(int i) {
return mFragmentList.get(i);
}
@Override
public int getCount() {
return mFragmentList!=null?mFragmentList.size():0;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
// super.destroyItem(container, position, object);
}
}
4.绑定数据 最后再MainActivity中 初始化控件以及绑定RadioGroup即可实现效果
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
List<Fragment> fragmentList = new ArrayList<>();
MainFragmentPagerAdapter adapter;
ViewPager viewPager;
RadioGroup rg;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化控件
initView();
//绑定RadioButton
initViewPager();
}
private void initView() {
viewPager = findViewById(R.id.viewPager);
rg = findViewById(R.id.rg);
rg.setOnCheckedChangeListener(this);
rg.getChildAt(0).performClick();
}
private void initViewPager() {
//添加碎片
fragmentList.add(new OneFragment());
fragmentList.add(new TwoFragment());
fragmentList.add(new ThreeFragment());
fragmentList.add(new FourFragment());
fragmentList.add(new FiveFragment());
adapter = new MainFragmentPagerAdapter(getSupportFragmentManager(), fragmentList);
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int i, float v, int i1) {
}
@Override
public void onPageSelected(int i) {
switch (i) {
case 0:
rg.check(R.id.rb_wallet);
break;
case 1:
rg.check(R.id.rb_treasure);
break;
case 2:
rg.check(R.id.rb_home);
break;
case 3:
rg.check(R.id.rb_otc);
break;
case 4:
rg.check(R.id.rb_my);
break;
}
}
@Override
public void onPageScrollStateChanged(int i) {
}
});
}
@Override
public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
switch (checkedId) {
case R.id.rb_wallet:
viewPager.setCurrentItem(0);
break;
case R.id.rb_treasure:
viewPager.setCurrentItem(1);
break;
case R.id.rb_home:
viewPager.setCurrentItem(2);
break;
case R.id.rb_otc:
viewPager.setCurrentItem(3);
break;
case R.id.rb_my:
viewPager.setCurrentItem(4);
break;
}
}
}
- Python的机器学习实战:AadBoost
- 通过shell检查分区表中是否含有默认分区(r2笔记87天)
- 利用python爬取人人贷网的数据
- 通过shell脚本查看package的信息(r2笔记86天)
- 通过shell脚本查看procedure的信息(r2笔记85天)
- 支持中文文本数据挖掘的开源项目PyMining
- 通过分区键值发现性能问题(r2笔记84天)
- linux乱码和数据库乱码的问题简单排查(r2笔记83天)
- 一条运行了3天的"简单"的sql(r2笔记82天)
- 海量数据迁移之使用shell启用多个动态并行(r2笔记81天)
- 使用shell测试历史数据样本(r2笔记80天)
- 【专业技术】编译器的工作原理
- ORA-17500 ODM err的问题排查(r2笔记78天)
- 【专业技术】linux启动流程剖析
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 威胁事件告警分析技巧及处置(一)
- docker数据卷备份恢复以及配置桥接网络
- ES对磁盘的要求都有哪些,大部分你可能不知道
- docker通过模板创建镜像以及容器、仓库和数据管理
- Form表单类组件与Map地图组件
- 转录组分析 | 使用Hisat2进行序列比对
- 最后一个页面:构建电影详情页面
- 安装docker以及通过容器创建镜像
- 转录组分析 | 使用trim-galore去除低质量的reads和adaptor
- 设计模式之工厂方法模式
- Ubuntu上安装TensorFlow(python2.7版)
- 转录组分析 | fastqc进行质控与结果解读
- playbook管理配置文件
- 使用playbook安装nginx
- 第五个页面:更多电影页面