码迷,mamicode.com
首页 > 其他好文 > 详细

viewPager+fragment实现滑页效果

时间:2015-10-12 22:46:01      阅读:468      评论:0      收藏:0      [点我收藏+]

标签:

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

技术分享技术分享技术分享

先看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     <LinearLayout
10         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         <TextView
18             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         <TextView
26             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         <TextView
34             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.ViewPager
43         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             @Override
107             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             @Override
121             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
122 
123             }
124 
125             @Override
126             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             @Override
144             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     @Override
21     public int getCount() {
22         return fragmentlists.size();
23     }
24 
25     @Override
26     public Fragment getItem(int position) {
27         return fragmentlists.get(position);
28     }
29 }

 

viewPager+fragment实现滑页效果

标签:

原文地址:http://www.cnblogs.com/bdsdkrb/p/4872998.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!