ViewPager+Fragment实现滑动切换页面
1.实现思路
主界面四个导航按钮使用RadioButton,通过Selector 设置它的drawableTop属性来设置所显示的图片。通过 FragmentPagerAdapter 实现切换。
2.实现
(1)资源文件编写
主界面布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.tiger.a20180115_wechat.MainActivity">
<RadioGroup
android:id="@+id/rg_menu_bar"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_alignParentBottom="true"
android:background="@color/myWhite"
android:orientation="horizontal">
<RadioButton
android:id="@+id/rb_weChat"
style="@style/menu_item"
android:drawableTop="@drawable/menu_chat"
android:text="WeChat"/>
<RadioButton
android:id="@+id/rb_contacts"
style="@style/menu_item"
android:drawableTop="@drawable/menu_contacts"
android:text="Contacts"/>
<RadioButton
android:id="@+id/rb_discovery"
style="@style/menu_item"
android:drawableTop="@drawable/menu_discovery"
android:text="Discovery"/>
<RadioButton
android:id="@+id/rb_me"
style="@style/menu_item"
android:drawableTop="@drawable/menu_me"
android:text="Me"/>
</RadioGroup>
<View
android:id="@+id/div_menu_bar"
android:layout_width="match_parent"
android:layout_height="3px"
android:layout_above="@id/rg_menu_bar"
android:background="@color/divColor"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/div_menu_bar"/>
</RelativeLayout>
(2)因为四个RadioButton 都一样所以抽出一个Style
<style name="menu_item">
<item name="android:layout_width">0dp</item>
<item name="android:layout_weight">1</item>
<item name="android:layout_height">match_parent</item>
<item name="android:background">@android:color/transparent</item>
<item name="android:button">@null</item>
<item name="android:gravity">center</item>
<item name="android:paddingTop">3dp</item>
<item name="android:textColor">@drawable/menu_text</item>
<item name="android:textSize">18sp</item>
</style>
(3)文本颜色设置 Selector
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/txtGreen" android:state_checked="true" />
<item android:color="@color/txtGray" />
</selector>
(4)还有就是四个资源文件 Selector ,就是选中和不选中显示的图片,贴出一个,其他三个类似
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/chat_press" android:state_checked="true" />
<item android:drawable="@mipmap/chat_normal" />
</selector>
(5)接下来就是编写四个Fragment及对应布局
3.FragmentPagerAdapter
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
public class MyFragmentAdapter extends FragmentPagerAdapter{
private FragmentWeChat fgWeChat;
private FragmentContacts fgContacts;
private FragmentDiscovery fgDiscovery;
private FragmentMe fgMe;
public MyFragmentAdapter(FragmentManager fm) {
super(fm);
fgWeChat=new FragmentWeChat();
fgContacts=new FragmentContacts();
fgDiscovery=new FragmentDiscovery();
fgMe=new FragmentMe();
}
@Override
public Fragment getItem(int position) {
Fragment fragment=null;
switch (position){
case 0:
fragment=fgWeChat;
break;
case 1:
fragment=fgContacts;
break;
case 2:
fragment=fgDiscovery;
break;
case 3:
fragment=fgMe;
break;
}
return fragment;
}
@Override
public int getCount() {
return 4;
}
}
4. MainActivity
import android.support.v4.view.ViewPager;
public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener
, ViewPager.OnPageChangeListener {
private RadioGroup radioGroup;
private RadioButton rBtnChat;
private RadioButton rBtnContacts;
private RadioButton rBtnDiscovery;
private RadioButton rBtnMe;
private ViewPager viewPager;
private MyFragmentAdapter fragementAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
void init() {
rBtnChat = (RadioButton) findViewById(R.id.rb_weChat);
rBtnContacts = (RadioButton) findViewById(R.id.rb_contacts);
rBtnDiscovery = (RadioButton) findViewById(R.id.rb_discovery);
rBtnMe = (RadioButton) findViewById(R.id.rb_me);
viewPager = (ViewPager) findViewById(R.id.viewPager);
radioGroup = (RadioGroup) findViewById(R.id.rg_menu_bar);
radioGroup.setOnCheckedChangeListener(this);
fragementAdapter = new MyFragmentAdapter(getSupportFragmentManager());
viewPager.setAdapter(fragementAdapter);
viewPager.setCurrentItem(0);
viewPager.setOnPageChangeListener(this);
rBtnChat.setChecked(true); // set default choose
}
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.rb_weChat:
viewPager.setCurrentItem(0);
break;
case R.id.rb_contacts:
viewPager.setCurrentItem(1);
break;
case R.id.rb_discovery:
viewPager.setCurrentItem(2);
break;
case R.id.rb_me:
viewPager.setCurrentItem(3);
break;
}
}
//重写ViewPager页面切换的处理方法
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
//state的状态有三个,0表示什么都没做,1正在滑动,2滑动完成
if (state == 2) {
//对应值需要与 FragmentPagerAdapter 中的对应
switch (viewPager.getCurrentItem()) {
case 0:
rBtnChat.setChecked(true);
break;
case 1:
rBtnContacts.setChecked(true);
break;
case 2:
rBtnDiscovery.setChecked(true);
break;
case 3:
rBtnMe.setChecked(true);
break;
}
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.menu,menu);
return true;
}
}
主要代码就是以上这些。
参考自:http://www.runoob.com/w3cnote/android-tutorial-fragment-demo4.html
ViewPager+Fragment实现滑动切换页面的更多相关文章
- ViewPager源码分析——滑动切换页面处理过程
上周客户反馈Contacts快速滑动界面切换tab有明显卡顿,让优化. 自己验证又没发现卡顿现象,但总得给客户一个技术性的回复,于是看了一下ViewPager源码中处理滑动切换tab的过程. View ...
- ViewPager取消左右滑动切换功能
ViewPager取消左右滑动切换功能 最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动 IndexViewPager.java: imp ...
- ViewPager撤消左右滑动切换功能
ViewPager取消左右滑动切换功能 最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动 IndexViewPager.java: imp ...
- Android:使用ViewPager实现左右滑动切换图片(图上有点点)
在以下实例的基础上加上点点 Android:使用ViewPager实现左右滑动切换图片 (简单版) 效果预览: 因为要把点点放图片上,所以修改布局为相对布局: <?xml version=&qu ...
- Android:使用ViewPager实现左右滑动切换图片 (简单版)
ViewPager,它是google SDk中自带的一个附加包的一个类, 可以使视图滑动. 步骤: 1.引入android-support-v4.jar包,在主布局里加入 <android.su ...
- jquery mobile左右滑动切换页面
jquery mobile左右滑动切换页面 $(function() {$("body").bind('swiperight', function() { $.mobile.ch ...
- 微信小程序左右滑动切换页面示例代码--转载
微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...
- 使用ViewPager+Fragment实现选项卡切换效果
实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...
- ViewPager+Fragment实现滑动显示,且Fragment里面又放Fragment+viewPager
思路:新建一个Activity,且这个Activity要继承FragementActivity,在Activity的布局文件中放入了一个viewPager,为了效果好看,还做了个导航,使得ViewPa ...
随机推荐
- Java【初识篇】语言概述
什么是计算机语言 语言:是人与人之间用于沟通的一种方式.例如:中国人与中国人用普通话沟通.而中国人要和英国人交流,就要学习英语.计算机语言(编程语言):人与计算机交流的方式.如果人要与计算机交流,那么 ...
- python之路day03--数据类型分析,转换,索引切片,str常用操作方法
数据类型整体分析 int :用于计算bool:True False 用户判断str:少量数据的存储 list:列表 储存大量数据 上亿数据[1,2,3,'zzy',[aa]] 元组:只读列表(1,23 ...
- Linux设备树(三 属性)
三 属性(property) device_type = "memory"就是一个属性,等号前边是属性,后边是值.节点是一个逻辑上相对独立的实体,属性是用来描述节点特性的,根据需要 ...
- bootstrap学习: 折叠插件和面板
bootstrap提供了面板排版工具和折叠插件,能够用来实现新闻列表.留言板.博客分块等: 1.折叠插件: <a data-toggle="collapse" data-ta ...
- Pandas系列(四)-文本数据处理
内容目录 1. 为什么要用str属性 2. 替换和分割 3. 提取子串 3.1 提取第一个匹配的子串 3.2 匹配所有子串 3.3 测试是否包含子串 3.4 生成哑变量 3.5 方法摘要 一.为什么要 ...
- 关于学习Linux的基本命令操作
常用的Linux 命令 scp root/1.txt root@127.0.0.1:/home rpm 安装软件 systemctl start service 启动服务 systemctl res ...
- 怎样以快速样式的方式在word文档中生成以下多级自动编号
本篇博文简单介绍一下在word中利用快速样式生成多级编号的方法. 一.自定义多级列表格式: 1.点击,开始--段落--多级列表--定义新的多级列表: 2.设置一级编号: (1)在"此级的编号 ...
- springMVC中 @RequestParam和@RequestBody的区别
首先,不可以同时传进@RequestParam和@RequestBody,好像可以传进两个@RequestParam 如果不加@requestparam修饰,相当于 加上@requestparam且各 ...
- 程序设计-理解java继承-遁地龙卷风
(0)写在前面 编程和现实世界是息息相关的,你是如何理解现实世界中的继承呢? 继承在编程中应理解为:对父类资源(本文只讨论方法)的使用,父类方法只提供类基本的功能,父类方法之间不存在调用关系. (1) ...
- Java 线程安全LocalTime 和LocaldateTime 新的Date和Time类 -JDK8新时间类的简单使用
不可变类且线程安全 LocalDate .java.time.LocalTime 和LocaldateTime 新的Date和Time类 DateTimeFormatter ==https://ww ...