首页 > 代码库 > ViewPager+Fragment实现页面的切换
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="http://www.mamicode.com/@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实现页面的切换