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中定义 ...
随机推荐
- 恢复CRM plugin
1 使用工具 XrmToolbox http://xrmtoolbox.codeplex.com/releases/view/611881 2 连接:可以使用网络连接,也可以使用本地连接 3 使用 A ...
- datetime
DateTime字段类型对应的时间格式是 yyyy-MM-dd HH:mm:ss.fff ,3个f,精确到1毫秒(ms),示例 2014-12-03 17:06:15.433 . DateTime2字 ...
- (Skill)238. Product of Array Except Self
Given an array of n integers where n > 1, nums, return an array output such that output[i] is equ ...
- JNI支持C++与C的区别
1. C++的代码后缀是".cpp" 2. 在JNI.h 文件中有两套代码.一套是支持c的, 一套是支持JNI的. JNI.h地址:mac ▸ 用户 ▸ douj ▸ Docume ...
- JS获取form表单所有属性值
// 得到一个表单里的全部信息function getFormQueryString() { var frmID=document.forms[0]; var i,queryString=" ...
- mac上启动和停止mysql
因调试需要,在mac上安装了mysql,安装方法网上大把,此处不赘述.启动和停止命令每次要手工敲,因此写个小脚本方便自己: startmysql.sh(/Applications/Develop/my ...
- vtk保存图像
vtkWindowToImageFilter * wif = vtkWindowToImageFilter::New(); vtkBMPWriter *bmpw = vtkBMPWriter::New ...
- 前端开发根据url进行页面跳转控制以及实现菜单栏手风琴效果
html中的元素:<ul id="accordion" class="accordion"> <li class="licss&q ...
- 哆啦A梦 canvas
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- sed命令
sed是一个很好的文件处理工具,本身是一个管道命令,主要是以行为单位进行处理,可以将数据行进行替换.删除.新增.选取等特定工作,下面先了解一下sed的用法sed命令行格式为: sed ...