viewPager+fragment实现滑页效果

来源:互联网 时间:1970-01-01

先上图,手指在手机向左或者向右滑就可以实现相应的页面切换。

先看activity_main.xml文件,非常简单,主要是三个标题TextView和viewpager

1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="fill_parent" 5 android:layout_centerVertical="true" 6 android:orientation="vertical" 7 android:paddingTop="2dp"> 8 9 <LinearLayout10 android:layout_width="match_parent"11 android:layout_height="30dp"12 android:layout_marginTop="5dp"13 android:orientation="horizontal"14 android:paddingLeft="20dp"15 android:paddingRight="20dp">16 17 <TextView18 android:id="@+id/tv_layout_one"19 android:layout_width="0dp"20 android:layout_height="fill_parent"21 android:layout_weight="0.5"22 android:gravity="center"23 android:text="one" />24 25 <TextView26 android:id="@+id/tv_layout_two"27 android:layout_width="0dp"28 android:layout_height="fill_parent"29 android:layout_weight="0.5"30 android:gravity="center"31 android:text="two" />32 33 <TextView34 android:id="@+id/tv_layout_three"35 android:layout_width="0dp"36 android:layout_height="fill_parent"37 android:layout_weight="0.5"38 android:gravity="center"39 android:text="three" />40 </LinearLayout>41 42 <android.support.v4.view.ViewPager43 android:id="@+id/vp"44 android:layout_marginTop="5dp"45 android:layout_width="fill_parent"46 android:layout_height="fill_parent" />47 </LinearLayout>

我们再看看相应的MainActivity需要准备些什么

1 package com.example.keranbin.view.activity; 2 3 import android.app.Activity; 4 import android.os.Bundle; 5 import android.support.design.widget.FloatingActionButton; 6 import android.support.design.widget.Snackbar; 7 import android.support.v4.app.Fragment; 8 import android.support.v4.app.FragmentActivity; 9 import android.support.v4.app.FragmentPagerAdapter; 10 import android.support.v4.view.ViewPager; 11 import android.support.v7.app.AppCompatActivity; 12 import android.support.v7.widget.Toolbar; 13 import android.view.View; 14 import android.view.Menu; 15 import android.view.MenuItem; 16 import android.widget.TextView; 17 18 import com.example.keranbin.view.R; 19 import com.example.keranbin.view.adapter.MFragmentPagerAdapter; 20 import com.example.keranbin.view.fragment.OneFragment; 21 import com.example.keranbin.view.fragment.ThreeFragment; 22 import com.example.keranbin.view.fragment.TwoFragment; 23 24 import java.util.ArrayList; 25 26 public class MainActivity extends FragmentActivity { 27 private ViewPager viewPager; //页面viewpager 28 private ArrayList<Fragment> fragmentlists; //fragment集合, 29 private MFragmentPagerAdapter mFragmentPagerAdapter; //viewpager适配器 30 private TextView tvOne; 31 private TextView tvTwo; 32 private TextView tvThree; 33 34 35 36 @Override 37 protected void onCreate(Bundle savedInstanceState) { 38 super.onCreate(savedInstanceState); 39 setContentView(R.layout.activity_main); 40 initView(); //初始化页面组件及一些数据 41 setListener(); //对页面一些组件设置一些监听事件 42 43 } 44 45 46 //初始化页面组件及一些数据 47 private void initView() { 48 viewPager= (ViewPager) this.findViewById(R.id.vp); 49 tvOne= (TextView) this.findViewById(R.id.tv_layout_one); 50 tvTwo= (TextView) this.findViewById(R.id.tv_layout_two); 51 tvThree= (TextView) this.findViewById(R.id.tv_layout_three); 52 53 54 //初始化one two three的背景 55 tvOne.setBackgroundResource(R.drawable.solid_half_elipse_blue_left); 56 tvTwo.setBackgroundResource(R.drawable.solid_transparent_rectangle); 57 tvThree.setBackgroundResource(R.drawable.solid_half_elipse_transparent_right); 58 59 //往fragment集合里添加fragment 60 fragmentlists=new ArrayList<Fragment>(); 61 OneFragment oneFragment=new OneFragment(); 62 TwoFragment twoFragment=new TwoFragment(); 63 ThreeFragment threeFragment=new ThreeFragment(); 64 fragmentlists.add(oneFragment); 65 fragmentlists.add(twoFragment); 66 fragmentlists.add(threeFragment); 67 68 69 //初始化viewpager适配器 70 initViewPagerAdapter(); 71 72 } 73 74 75 //初始化viewpager适配器 76 private void initViewPagerAdapter() { 77 mFragmentPagerAdapter=new MFragmentPagerAdapter(getSupportFragmentManager(),fragmentlists); 78 viewPager.setAdapter(mFragmentPagerAdapter); 79 viewPager.setCurrentItem(0); 80 } 81 82 //对页面一些组件设置一些监听事件 83 private void setListener() { 84 //分别对one,two,three三个TextView设置点击监听事件,发生点击事件时改变相应的背景及viewpager的内容 85 tvOne.setOnClickListener(new View.OnClickListener() { 86 @Override 87 public void onClick(View v) { 88 tvOne.setBackgroundResource(R.drawable.solid_half_elipse_blue_left); 89 tvTwo.setBackgroundResource(R.drawable.solid_transparent_rectangle); 90 tvThree.setBackgroundResource(R.drawable.solid_half_elipse_transparent_right); 91 viewPager.setCurrentItem(0); 92 } 93 }); 94 95 tvTwo.setOnClickListener(new View.OnClickListener() { 96 @Override 97 public void onClick(View v) { 98 tvOne.setBackgroundResource(R.drawable.solid_half_elipse_transparent_left); 99 tvTwo.setBackgroundResource(R.drawable.solid_blue_rectangle);100 tvThree.setBackgroundResource(R.drawable.solid_half_elipse_transparent_right);101 viewPager.setCurrentItem(1);102 }103 });104 105 tvThree.setOnClickListener(new View.OnClickListener() {106 @Override107 public void onClick(View v) {108 tvOne.setBackgroundResource(R.drawable.solid_half_elipse_transparent_left);109 tvTwo.setBackgroundResource(R.drawable.solid_transparent_rectangle);110 tvThree.setBackgroundResource(R.drawable.solid_half_elipse_blue_right);111 viewPager.setCurrentItem(2);112 }113 });114 115 116 117 118 //对页面viewpager设置监听事件119 viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {120 @Override121 public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {122 123 }124 125 @Override126 public void onPageSelected(int position) {127 //页面滑动时改变"one","two","three"三个TextView的背景颜色128 if(position==0){129 tvOne.setBackgroundResource(R.drawable.solid_half_elipse_blue_left);130 tvTwo.setBackgroundResource(R.drawable.solid_transparent_rectangle);131 tvThree.setBackgroundResource(R.drawable.solid_half_elipse_transparent_right);132 }else if(position==1){133 tvOne.setBackgroundResource(R.drawable.solid_half_elipse_transparent_left);134 tvTwo.setBackgroundResource(R.drawable.solid_blue_rectangle);135 tvThree.setBackgroundResource(R.drawable.solid_half_elipse_transparent_right);136 }else if(position==2){137 tvOne.setBackgroundResource(R.drawable.solid_half_elipse_transparent_left);138 tvTwo.setBackgroundResource(R.drawable.solid_transparent_rectangle);139 tvThree.setBackgroundResource(R.drawable.solid_half_elipse_blue_right);140 }141 }142 143 @Override144 public void onPageScrollStateChanged(int state) {145 146 }147 });148 149 150 151 }152 153 }

大体思路是,我们先定义一个页面集合ArrayList<Fragment>,接着建立相应的Fragment装载到集合中,然后定义自己的viewPager适配器,最后调用viewpager的setAdapter即可。

自定义的viewpager适配器代码如下

1 package com.example.keranbin.view.adapter; 2 3 import android.support.v4.app.Fragment; 4 import android.support.v4.app.FragmentManager; 5 import android.support.v4.app.FragmentPagerAdapter; 6 7 import java.util.ArrayList; 8 9 /**10 * Created by keranbin on 2015/10/12.11 */12 public class MFragmentPagerAdapter extends FragmentPagerAdapter {13 private ArrayList<Fragment> fragmentlists;14 15 public MFragmentPagerAdapter(FragmentManager fm,ArrayList<Fragment> fragmentlists) {16 super(fm);17 this.fragmentlists=fragmentlists;18 }19 20 @Override21 public int getCount() {22 return fragmentlists.size();23 }24 25 @Override26 public Fragment getItem(int position) {27 return fragmentlists.get(position);28 }29 }

相关阅读:
Top