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实现滑动切换页面的更多相关文章

  1. ViewPager源码分析——滑动切换页面处理过程

    上周客户反馈Contacts快速滑动界面切换tab有明显卡顿,让优化. 自己验证又没发现卡顿现象,但总得给客户一个技术性的回复,于是看了一下ViewPager源码中处理滑动切换tab的过程. View ...

  2. ViewPager取消左右滑动切换功能

    ViewPager取消左右滑动切换功能 最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动 IndexViewPager.java: imp ...

  3. ViewPager撤消左右滑动切换功能

    ViewPager取消左右滑动切换功能 最近做项目要求某种情况下ViewPager不能滑动,那么我们只需要重写这个方法就可以禁止ViewPager滑动 IndexViewPager.java: imp ...

  4. Android:使用ViewPager实现左右滑动切换图片(图上有点点)

    在以下实例的基础上加上点点 Android:使用ViewPager实现左右滑动切换图片 (简单版) 效果预览: 因为要把点点放图片上,所以修改布局为相对布局: <?xml version=&qu ...

  5. Android:使用ViewPager实现左右滑动切换图片 (简单版)

    ViewPager,它是google SDk中自带的一个附加包的一个类, 可以使视图滑动. 步骤: 1.引入android-support-v4.jar包,在主布局里加入 <android.su ...

  6. jquery mobile左右滑动切换页面

    jquery mobile左右滑动切换页面 $(function() {$("body").bind('swiperight', function() {  $.mobile.ch ...

  7. 微信小程序左右滑动切换页面示例代码--转载

    微信小程序——左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X, ...

  8. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

  9. ViewPager+Fragment实现滑动显示,且Fragment里面又放Fragment+viewPager

    思路:新建一个Activity,且这个Activity要继承FragementActivity,在Activity的布局文件中放入了一个viewPager,为了效果好看,还做了个导航,使得ViewPa ...

随机推荐

  1. Java【初识篇】语言概述

    什么是计算机语言 语言:是人与人之间用于沟通的一种方式.例如:中国人与中国人用普通话沟通.而中国人要和英国人交流,就要学习英语.计算机语言(编程语言):人与计算机交流的方式.如果人要与计算机交流,那么 ...

  2. python之路day03--数据类型分析,转换,索引切片,str常用操作方法

    数据类型整体分析 int :用于计算bool:True False 用户判断str:少量数据的存储 list:列表 储存大量数据 上亿数据[1,2,3,'zzy',[aa]] 元组:只读列表(1,23 ...

  3. Linux设备树(三 属性)

    三 属性(property) device_type = "memory"就是一个属性,等号前边是属性,后边是值.节点是一个逻辑上相对独立的实体,属性是用来描述节点特性的,根据需要 ...

  4. bootstrap学习: 折叠插件和面板

    bootstrap提供了面板排版工具和折叠插件,能够用来实现新闻列表.留言板.博客分块等: 1.折叠插件: <a data-toggle="collapse" data-ta ...

  5. Pandas系列(四)-文本数据处理

    内容目录 1. 为什么要用str属性 2. 替换和分割 3. 提取子串 3.1 提取第一个匹配的子串 3.2 匹配所有子串 3.3 测试是否包含子串 3.4 生成哑变量 3.5 方法摘要 一.为什么要 ...

  6. 关于学习Linux的基本命令操作

    常用的Linux 命令 scp root/1.txt root@127.0.0.1:/home rpm  安装软件 systemctl start service 启动服务 systemctl res ...

  7. 怎样以快速样式的方式在word文档中生成以下多级自动编号

    本篇博文简单介绍一下在word中利用快速样式生成多级编号的方法. 一.自定义多级列表格式: 1.点击,开始--段落--多级列表--定义新的多级列表: 2.设置一级编号: (1)在"此级的编号 ...

  8. springMVC中 @RequestParam和@RequestBody的区别

    首先,不可以同时传进@RequestParam和@RequestBody,好像可以传进两个@RequestParam 如果不加@requestparam修饰,相当于 加上@requestparam且各 ...

  9. 程序设计-理解java继承-遁地龙卷风

    (0)写在前面 编程和现实世界是息息相关的,你是如何理解现实世界中的继承呢? 继承在编程中应理解为:对父类资源(本文只讨论方法)的使用,父类方法只提供类基本的功能,父类方法之间不存在调用关系. (1) ...

  10. Java 线程安全LocalTime 和LocaldateTime 新的Date和Time类 -JDK8新时间类的简单使用

    不可变类且线程安全 LocalDate .java.time.LocalTime 和LocaldateTime  新的Date和Time类 DateTimeFormatter ==https://ww ...