ViewPager+Fragment实现页面的切换
新知识,新摘要:
效果图:framgent导入包都是v4包下,谨慎导入错误!

首先设置viewPager布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager1221"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/bottom">
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="@+id/bottom"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_alignParentBottom="true"
android:background="@color/colorPurple"
android:orientation="horizontal"
>
<TextView
android:id="@+id/you"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="你好"
android:textSize="20sp"
android:gravity="center"
/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#FFFFFF"></View>
<TextView
android:id="@+id/me"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="我好"
android:textSize="20sp"
android:gravity="center"
/>
<View
android:layout_width="1dp"
android:layout_height="match_parent"
android:background="#FFFFFF"></View>
<TextView
android:id="@+id/hei"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:text="大家好"
android:textSize="20sp"
android:gravity="center"
/>
</LinearLayout>
</RelativeLayout>
其次设置子布局framgent:设置三个页面例如页面一
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/first"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="第一个页面"
android:textSize="30sp"
android:gravity="center"
android:background="@color/colorPurple"
/>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/first"
android:src="@mipmap/cute"/>
</RelativeLayout>
然后分别设置三个页面的framgent类继承Fragment类,列如第一页面:
package com.example.administrator.test_1216.framgent;
import com.example.administrator.test_1216.R;
public class OneFramgent1221 extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// 添加布局
View v=inflater.inflate(R.layout.oneframgent1221_item,null);
return v;
}
}
其次设置adapter继承
package com.example.administrator.test_1216.adapter;
public class FramgentPagerAdapter1221 extends FragmentPagerAdapter{
//声明集合
private List<Fragment> list;
public FramgentPagerAdapter1221(FragmentManager fm, List<Fragment> list) {
super(fm);
this.list = list;
}
@Override
public Fragment getItem(int position) {
return list.get(position);
}
@Override
public int getCount() {
return list.size();
}
}
最后设置activity:代码思路:a、声明控件,绑定id,首先实现文字控件的颜色改变和监听;
b、声明viewPager控件,绑定id,声明集合,将framgent类型的页面加入到list集合中
c、初始化适配器,加载适配器;
d、为viewPager设置监听,页面滚动切换页面时候文字发生颜色发生改变;
代码如下:
package com.example.administrator.test_1216;
public class FramgentPagerActivity1221 extends FragmentActivity implements View.OnClickListener, ViewPager.OnPageChangeListener {
//声明控件
private TextView you;
private TextView me;
private TextView hei;
private int currentColor;
private int otherColor;
private ViewPager viewpager1221;
private FramgentPagerAdapter1221 adapter1221;
List<Fragment> list;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.pagerviewframgent1221);
currentColor=getResources().getColor(R.color.currentColor);
otherColor=getResources().getColor(R.color.otherColor);
intiview();
andViewPager();
}
private void andViewPager() {
viewpager1221= (ViewPager) findViewById(R.id.viewpager1221);
//初始化集合
list=new ArrayList<Fragment>();
//添加页面到集合
list.add(new OneFramgent1221());
list.add(new TwoFramgent1221());
list.add(new ThreeFramgent1221());
//初始化适配器
adapter1221=new FramgentPagerAdapter1221(getSupportFragmentManager(),list);
viewpager1221.setAdapter(adapter1221);
//设置每次启动软件时的显示页面
viewpager1221.setCurrentItem(0);
//设置viewpager的监听
viewpager1221.setOnPageChangeListener(this);
}
private void intiview() {
//绑定id
you= (TextView) findViewById(R.id.you);
me= (TextView) findViewById(R.id.me);
hei= (TextView) findViewById(R.id.hei);
//添加初始默认颜色
you.setTextColor(currentColor);
me.setTextColor(otherColor);
hei.setTextColor(otherColor);
//设置监听
you.setOnClickListener(this);
me.setOnClickListener(this);
hei.setOnClickListener(this);
}
@Override
public void onClick(View v) {
//声明下标
int index=0;
switch (v.getId()){
case R.id.you:
you.setTextColor(currentColor);
me.setTextColor(otherColor);
hei.setTextColor(otherColor);
index=0;
break;
case R.id.me:
you.setTextColor(otherColor);
me.setTextColor(currentColor);
hei.setTextColor(otherColor);
index=1;
break;
case R.id.hei:
you.setTextColor(otherColor);
me.setTextColor(otherColor);
hei.setTextColor(currentColor);
index=2;
break;
}
// 为viewpager设置下标
viewpager1221.setCurrentItem(index);
}
//页面切换时候字体的颜色改变
@Override
public void onPageSelected(int position) {
switch (position){
case 0:
you.setTextColor(currentColor);
me.setTextColor(otherColor);
hei.setTextColor(otherColor);
break;
case 1:
you.setTextColor(otherColor);
me.setTextColor(currentColor);
hei.setTextColor(otherColor);
break;
case 2:
you.setTextColor(otherColor);
me.setTextColor(otherColor);
hei.setTextColor(currentColor);
break;
}
}
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
ViewPager+Fragment实现页面的切换的更多相关文章
- ViewPager+PagerTabStrip实现页面的切换
页面切换效果图 首先创建布局: 代码: <?xml version="1.0" encoding="utf-8"?><LinearLayout ...
- Android开发之利用ViewPager实现页面的切换(仿微信、QQ)
这里利用ViewPager实现页面的滑动,下面直接上代码: 1.首先写一个Activity,然后将要滑动的Fragment镶嵌到写好的Activity中. Activity的布局文件:activity ...
- Android中使用ViewPager实现屏幕页面切换和页面切换效果
之前关于如何实现屏幕页面切换,写过一篇博文<Android中使用ViewFlipper实现屏幕切换>,相比ViewFlipper,ViewPager更适用复杂的视图切换,而且Viewpag ...
- ViewPager -- Fragment 切换卡顿 性能优化
当ViewPager切换到当前的Fragment时,Fragment会加载布局并显示内容,如果用户这时快速切换ViewPager,即 Fragment需要加载UI内容,而又频繁地切换Fragment, ...
- 【原创】【ViewPager+Fragment】ViewPager中切换界面Fragment被销毁的问题分析
ViewPager中切换界面Fragment被销毁的问题分析 1.使用场景 ViewPager+Fragment实现界面切换,界面数量>=3 2.Fragment生命周期以及与Activ ...
- 转载【ViewPager+Fragment】ViewPager中切换界面Fragment被销毁的问题分析
ViewPager中切换界面Fragment被销毁的问题分析 原文链接 http://www.cnblogs.com/monodin/p/3866441.html 1.使用场景 ViewPager+ ...
- ViewPager和View组合 实现页面的切换
//--------------主页面------------------------------- package com.bw.test; import java.util.ArrayList;i ...
- Android - FragmentTabHost 与 Fragment 制作页面切换效果
使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了.用 FragmentTabHost 来代替TabHost.实际上 Fragm ...
- Android - TabHost 与 Fragment 制作页面切换效果
Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义 ...
随机推荐
- Linux添加主机路由
Linux添加主机路由:参考:http://zhidao.baidu.com/link?url=50qQ232ZiJqq1iftHvBdPzZh-JlQGi1DZ8wvF-j9dvQYsKiNgc-6 ...
- jquery分页插件
css代码: /*分页*/ .pageList { clear: both; overflow: hidden; } .pageList a, .pageList span { border: 1px ...
- 好久没上cnblogs了
以为登录不上了,原来还是可以登录上的,不错~~~上来标记一下
- Esfog_UnityShader教程_UnityShader语法实例浅析
距离上次首篇前言已经有一段时间了,一直比较忙,今天是周末不可以再拖了,经过我一段时间的考虑,我决定这一系列的教程会避免过于深入细节,一来可以避免一些同学被误导,二来会避免文章过于冗长难读, 三来可以让 ...
- leetcode-【中等题】Divide Two Integers
题目 Divide two integers without using multiplication, division and mod operator. If it is overflow, r ...
- 64位 SQL Server2008链接访问Oracle 过程汇总解决方法记录
64位 SQL Server2008链接访问Oracle 过程汇总解决方法记录 经过几天不停的网上找资料,实验,终于联通了. 环境:系统:win 2008 ,SqlServer2008 R2, 连接O ...
- CSS3 动画实现 animation 和 transition 比较
在 CSS3 中有两种方式实现动画, 分别是 animation 和 transition, 他们都有以下功能 根据特定 CSS 属性进行动画 设定属性变化的 timing function 设定动画 ...
- [转] ACM中国国家集训队论文集目录(1999-2009)
国家集训队1999论文集 陈宏:<数据结构的选择与算法效率——从IOI98试题PICTURE谈起>来煜坤:<把握本质,灵活运用——动态规划的深入探讨>齐鑫:<搜索方法中的 ...
- YCSB测试Mysql,MongoDB,TokuMX,Couchbase性能
测试是由同事完成的,这里只做收藏. 测试说明: 1.数据量为3kw记录,每条记录11个字段,一个为主键,主键为字符类型,类似:user****,后续为数值 其他10字段为字符类型,100字符,记录长度 ...
- nodejs+express+jade配置
安装步骤 一.首先可跟着这个网址安装http://jingyan.baidu.com/article/91f5db1b2bb6941c7f05e33c.html,路径可由自己定. 二.同时参考http ...