ViewPager + Fragment实现滑动标签页

ViewPager 结合Fragment实现一个Activity里包含多个可滑动的标签页，每个标签页可以有独立的布局及响应。

activity_main.xml

 

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:tools="http://schemas.android.com/tools"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent"  
  6.     android:orientation="vertical">  
  7.   
  8.     <LinearLayout   
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="wrap_content"  
  11.         android:orientation="horizontal">  
  12.           
  13.           
  14.         <TextView   
  15.             android:id="@+id/tv_guid1"  
  16.             android:layout_width="wrap_content"  
  17.             android:layout_height="wrap_content"  
  18.             android:layout_weight="1.0"  
  19.             android:gravity="center"  
  20.             android:text="特性1"  
  21.             android:textSize="18sp"/>  
  22.         <TextView    
  23.             android:id="@+id/tv_guid2"    
  24.             android:layout_width="wrap_content"    
  25.             android:layout_height="wrap_content"    
  26.             android:layout_weight="1.0"    
  27.             android:gravity="center"    
  28.             android:text="特性2"     
  29.             android:textSize="18sp"/>    
  30.     
  31.         <TextView    
  32.             android:id="@+id/tv_guid3"    
  33.             android:layout_width="wrap_content"    
  34.             android:layout_height="wrap_content"    
  35.             android:layout_weight="1.0"    
  36.             android:gravity="center"    
  37.             android:text="特性3 "     
  38.             android:textSize="18sp"/>    
  39.     
  40.         <TextView    
  41.             android:id="@+id/tv_guid4"    
  42.             android:layout_width="wrap_content"    
  43.             android:layout_height="wrap_content"    
  44.             android:layout_weight="1.0"    
  45.             android:gravity="center"    
  46.             android:text="特性4"     
  47.             android:textSize="18sp"/>  
  48.     </LinearLayout>  
  49.   
  50.     <ImageView   
  51.         android:id="@+id/cursor"  
  52.         android:layout_width="wrap_content"  
  53.         android:layout_height="wrap_content"  
  54.         android:scaleType="matrix"  
  55.         android:src="@drawable/cursor"/>  
  56.       
  57.     <android.support.v4.view.ViewPager  
  58.         android:id="@+id/viewpager"  
  59.         android:layout_width="fill_parent"  
  60.         android:layout_height="fill_parent"  
  61.         android:flipInterval="30"  
  62.         android:persistentDrawingCache="animation"/>  
  63. </LinearLayout>  


 

MainActivity.java

 

[java] view plaincopy
 
  1. package com.example.viewpagernfragment;  
  2.   
  3. import java.util.ArrayList;  
  4.   
  5. import android.graphics.BitmapFactory;  
  6. import android.graphics.Matrix;  
  7. import android.os.Bundle;  
  8. import android.support.v4.app.Fragment;  
  9. import android.support.v4.app.FragmentActivity;  
  10. import android.support.v4.view.ViewPager;  
  11. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  12. import android.util.DisplayMetrics;  
  13. import android.view.Menu;  
  14. import android.view.View;  
  15. import android.view.animation.Animation;  
  16. import android.view.animation.TranslateAnimation;  
  17. import android.widget.ImageView;  
  18. import android.widget.TextView;  
  19. import android.widget.Toast;  
  20.   
  21. public class MainActivity extends FragmentActivity {  
  22.     private ViewPager mPager;  
  23.     private ArrayList<Fragment> fragmentList;  
  24.     private ImageView image;  
  25.     private TextView view1, view2, view3, view4;  
  26.     private int currIndex;//当前页卡编号  
  27.     private int bmpW;//横线图片宽度  
  28.     private int offset;//图片移动的偏移量  
  29.   
  30.       
  31.       
  32.     @Override  
  33.     protected void onCreate(Bundle savedInstanceState) {  
  34.         super.onCreate(savedInstanceState);  
  35.         setContentView(R.layout.activity_main);  
  36.           
  37.         InitTextView();  
  38.         InitImage();  
  39.         InitViewPager();  
  40.     }  
  41.       
  42.       
  43.     /* 
  44.      * 初始化标签名 
  45.      */  
  46.     public void InitTextView(){  
  47.         view1 = (TextView)findViewById(R.id.tv_guid1);  
  48.         view2 = (TextView)findViewById(R.id.tv_guid2);  
  49.         view3 = (TextView)findViewById(R.id.tv_guid3);  
  50.         view4 = (TextView)findViewById(R.id.tv_guid4);  
  51.           
  52.         view1.setOnClickListener(new txListener(0));  
  53.         view2.setOnClickListener(new txListener(1));  
  54.         view3.setOnClickListener(new txListener(2));  
  55.         view4.setOnClickListener(new txListener(3));  
  56.     }  
  57.       
  58.       
  59.     public class txListener implements View.OnClickListener{  
  60.         private int index=0;  
  61.           
  62.         public txListener(int i) {  
  63.             index =i;  
  64.         }  
  65.         @Override  
  66.         public void onClick(View v) {  
  67.             // TODO Auto-generated method stub  
  68.             mPager.setCurrentItem(index);  
  69.         }  
  70.     }  
  71.       
  72.       
  73.     /* 
  74.      * 初始化图片的位移像素 
  75.      */  
  76.     public void InitImage(){  
  77.         image = (ImageView)findViewById(R.id.cursor);  
  78.         bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.cursor).getWidth();  
  79.         DisplayMetrics dm = new DisplayMetrics();  
  80.         getWindowManager().getDefaultDisplay().getMetrics(dm);  
  81.         int screenW = dm.widthPixels;  
  82.         offset = (screenW/4 - bmpW)/2;  
  83.           
  84.         //imgageview设置平移，使下划线平移到初始位置（平移一个offset）  
  85.         Matrix matrix = new Matrix();  
  86.         matrix.postTranslate(offset, 0);  
  87.         image.setImageMatrix(matrix);  
  88.     }  
  89.       
  90.     /* 
  91.      * 初始化ViewPager 
  92.      */  
  93.     public void InitViewPager(){  
  94.         mPager = (ViewPager)findViewById(R.id.viewpager);  
  95.         fragmentList = new ArrayList<Fragment>();  
  96.         Fragment btFragment= new ButtonFragment();  
  97.         Fragment secondFragment = TestFragment.newInstance("this is second fragment");  
  98.         Fragment thirdFragment = TestFragment.newInstance("this is third fragment");  
  99.         Fragment fourthFragment = TestFragment.newInstance("this is fourth fragment");  
  100.         fragmentList.add(btFragment);  
  101.         fragmentList.add(secondFragment);  
  102.         fragmentList.add(thirdFragment);  
  103.         fragmentList.add(fourthFragment);  
  104.           
  105.         //给ViewPager设置适配器  
  106.         mPager.setAdapter(new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList));  
  107.         mPager.setCurrentItem(0);//设置当前显示标签页为第一页  
  108.         mPager.setOnPageChangeListener(new MyOnPageChangeListener());//页面变化时的监听器  
  109.     }  
  110.   
  111.       
  112.     public class MyOnPageChangeListener implements OnPageChangeListener{  
  113.         private int one = offset *2 +bmpW;//两个相邻页面的偏移量  
  114.           
  115.         @Override  
  116.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
  117.             // TODO Auto-generated method stub  
  118.               
  119.         }  
  120.           
  121.         @Override  
  122.         public void onPageScrollStateChanged(int arg0) {  
  123.             // TODO Auto-generated method stub  
  124.               
  125.         }  
  126.           
  127.         @Override  
  128.         public void onPageSelected(int arg0) {  
  129.             // TODO Auto-generated method stub  
  130.             Animation animation = new TranslateAnimation(currIndex*one,arg0*one,0,0);//平移动画  
  131.             currIndex = arg0;  
  132.             animation.setFillAfter(true);//动画终止时停留在最后一帧，不然会回到没有执行前的状态  
  133.             animation.setDuration(200);//动画持续时间0.2秒  
  134.             image.startAnimation(animation);//是用ImageView来显示动画的  
  135.             int i = currIndex + 1;  
  136.             Toast.makeText(MainActivity.this, "您选择了第"+i+"个页卡", Toast.LENGTH_SHORT).show();  
  137.         }  
  138.     }  
  139.       
  140.       
  141.     @Override  
  142.     public boolean onCreateOptionsMenu(Menu menu) {  
  143.         // Inflate the menu; this adds items to the action bar if it is present.  
  144.         getMenuInflater().inflate(R.menu.main, menu);  
  145.         return true;  
  146.     }  
  147.   
  148. }  

 

 

 

 

 

谷歌官方认为，ViewPager应该和Fragment一起使用时，此时ViewPager的适配器是FragmentPagerAdapter，当你实现一个FragmentPagerAdapter,你必须至少覆盖以下方法:

getCount()

getItem()

如果ViewPager没有和Fragment一起，ViewPager的适配器是PagerAdapter，它是基类提供适配器来填充页面ViewPager内部，当你实现一个PagerAdapter,你必须至少覆盖以下方法:


[java] view plaincopy
 
  1. package com.example.viewpagernfragment;  
  2.   
  3. import java.util.ArrayList;  
  4.   
  5. import android.support.v4.app.Fragment;  
  6. import android.support.v4.app.FragmentManager;  
  7. import android.support.v4.app.FragmentPagerAdapter;  
  8.   
  9. public class MyFragmentPagerAdapter extends FragmentPagerAdapter{  
  10.     ArrayList<Fragment> list;  
  11.     public MyFragmentPagerAdapter(FragmentManager fm,ArrayList<Fragment> list) {  
  12.         super(fm);  
  13.         this.list = list;  
  14.           
  15.     }  
  16.       
  17.       
  18.     @Override  
  19.     public int getCount() {  
  20.         return list.size();  
  21.     }  
  22.       
  23.     @Override  
  24.     public Fragment getItem(int arg0) {  
  25.         return list.get(arg0);  
  26.     }  
  27.       
  28.       
  29.       
  30.       
  31. }  

[java] view plaincopy
 
  1. package com.example.viewpagernfragment;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8. import android.widget.Button;  
  9. import android.widget.Toast;  
  10.   
  11. public class ButtonFragment extends Fragment{  
  12.     Button myButton;  
  13.       
  14.     @Override  
  15.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  16.             Bundle savedInstanceState) {  
  17.         View rootView = inflater.inflate(R.layout.guide_1, container, false);//关联布局文件  
  18.           
  19.         myButton = (Button)rootView.findViewById(R.id.mybutton);//根据rootView找到button  
  20.           
  21.         //设置按键监听事件  
  22.         myButton.setOnClickListener(new View.OnClickListener() {  
  23.               
  24.             @Override  
  25.             public void onClick(View v) {  
  26.                 // TODO Auto-generated method stub  
  27.                 Toast.makeText(ButtonFragment.this.getActivity(), "button is click!", Toast.LENGTH_SHORT).show();  
  28.             }  
  29.         });  
  30.           
  31.           
  32.         return rootView;  
  33.     }  
  34. }  

[java] view plaincopy
 
  1. package com.example.viewpagernfragment;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.util.Log;  
  6. import android.view.LayoutInflater;  
  7. import android.view.View;  
  8. import android.view.ViewGroup;  
  9. import android.widget.TextView;  
  10.   
  11. public class TestFragment extends Fragment {  
  12.     private static final String TAG = "TestFragment";  
  13.     private String hello;// = "hello android";  
  14.     private String defaultHello = "default value";  
  15.   
  16.     static TestFragment newInstance(String s) {  
  17.         TestFragment newFragment = new TestFragment();  
  18.         Bundle bundle = new Bundle();  
  19.         bundle.putString("hello", s);  
  20.         newFragment.setArguments(bundle);  
  21.           
  22.         //bundle还可以在每个标签里传送数据  
  23.           
  24.           
  25.         return newFragment;  
  26.   
  27.     }  
  28.   
  29.   
  30.   
  31.     @Override  
  32.     public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {  
  33.         Log.d(TAG, "TestFragment-----onCreateView");  
  34.         Bundle args = getArguments();  
  35.         hello = args != null ? args.getString("hello") : defaultHello;  
  36.         View view = inflater.inflate(R.layout.guide_2, container, false);  
  37.         TextView viewhello = (TextView) view.findViewById(R.id.tv);  
  38.         viewhello.setText(hello);  
  39.         return view;  
  40.   
  41.     }  
  42.   
  43.      
  44.   
  45. }  

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="UTF-8"?>    
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
  3.     android:layout_width="fill_parent"    
  4.     android:layout_height="fill_parent"    
  5.     android:background="#ff0000ff" >    
  6.       
  7.     <Button   
  8.         android:id="@+id/mybutton"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:text="hit me"  
  12.         android:gravity="center"/>  
  13. </RelativeLayout>    

[html] view plaincopy
 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical"  
  6.     android:background="#158684" >  
  7.   
  8.   
  9.     <TextView  
  10.         android:id="@+id/tv"  
  11.         android:layout_width="wrap_content"  
  12.         android:layout_height="wrap_content"  
  13.         android:text="TextView" />  
  14.   
  15. </RelativeLayout>  


 

posted @ 2015-07-03 15:29  新感觉  阅读(421)  评论(0)  编辑  收藏  举报