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 ...
随机推荐
- null引用,有时候是实现了父类的方法,方法体没写任何实现
null引用,有时候是实现了父类的方法,方法体没写任何实现 /* @Override public void attachView(MonthListContract.View view) { } * ...
- jdbc封装模拟用户登录
dao层 接口 package com.qu.dao; public interface ILoginDAO { /** * 模拟用户登录 * 验证用户名 密码是否正确 * select * from ...
- python中的三元运算
一.三元运算符 三元运算符就是在赋值变量的时候,可以直接加判断,然后赋值 格式:[on_true] if [expression] else [on_false] res = 值1 if 条件 els ...
- dom4j,json,pattern性能对比【原】
报文大概2000字节,对比时为只取其中某个节点的值即可. 以下对比可知取少量节点时pattern性能是远大于dom4j,和json的, 但取大量的时候就不能这么以偏概全了. dom4j和pattern ...
- SpringBoot系列: RestTemplate 快速入门
====================================相关的文章====================================SpringBoot系列: 与Spring R ...
- js中的简单数据类型和复杂数据类型的存储
基本类型存储的是值而复杂数据类型也叫引用类型存储的是对象的地址如0x00001而在栈中存的是变量数值和函数参数 堆中存的是对象和数组 堆栈空间分配 栈(操作系统):由操作系统自动分配释放 ,存放函数的 ...
- iTOP-iMX6UL全能板-linux-usb-wifi的使用
本文档介绍的是在本文档介绍的是在 Linux 系统环境下iTOP-imx6ul全能版 usb wifi 连接路由器上网 实验调试步骤.我们使用的是 imx6ul 全功能底板. 1 硬件 本文档测试使用 ...
- (一)Java工程化--Maven基础
Maven 读作['mevən] 翻译成中文是"内行,专家" Maven是什么 包依赖的前世今生: 原始的jar包引用--> ant --> maven. 是一种项目管 ...
- Synchronized 和 Volatile
Synchronized : 称为重量级锁,经过优化后,也没那么重了 一.CAS 1.CAS:Compare and Swap, 翻译成比较并交换. 2.java.util.concurrent包中借 ...
- GPS车辆监控系统的启动方式
我们通常用到的GPS车辆监控系统都有哪些启动方式,又有什么区别呢?通常GPS车辆监控系统都有热启.冷启.温启的技术指标,现参考如下:GPS开机定位分为冷启动.温启动和热启动三种:一.冷启动:以下几种情 ...