可滑动的顶部导航页ViewPager和Fragment的使用

可滑动的顶部导航页ViewPager和Fragment的使用

通过ViewPager和Fragment实现侧滑切换导航栏的功能，如下图所示。     

一、定义主布局文件main.xml

最上面是一个导航栏，分别有三个textview构成，然后再textview下面设置一个标签卡最下面是使用Android.support.v4.view.viewpager构成

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

<?xml version= "1.0"  encoding= "utf-8" ?> <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"      android:layout_width= "match_parent"      android:layout_height= "match_parent"      android:orientation= "vertical"  >            <LinearLayout            android:layout_width= "match_parent"           android:layout_height= "wrap_content"           android:orientation= "horizontal" >                                   <TextView                android:id= "@+id/tv_guid1"               android:layout_width= "wrap_content"               android:layout_height= "wrap_content"               android:layout_weight= "1.0"               android:gravity= "center"               android:text= "特性1"               android:textSize= "18sp" />           <TextView                 android:id= "@+id/tv_guid2"                 android:layout_width= "wrap_content"                 android:layout_height= "wrap_content"                 android:layout_weight= "1.0"                 android:gravity= "center"                 android:text= "特性2"                  android:textSize= "18sp" />                   <TextView                 android:id= "@+id/tv_guid3"                 android:layout_width= "wrap_content"                 android:layout_height= "wrap_content"                 android:layout_weight= "1.0"                 android:gravity= "center"                 android:text= "特性3 "                  android:textSize= "18sp" />                   <TextView                 android:id= "@+id/tv_guid4"                 android:layout_width= "wrap_content"                 android:layout_height= "wrap_content"                 android:layout_weight= "1.0"                 android:gravity= "center"                 android:text= "特性4"                  android:textSize= "18sp" />       </LinearLayout>           <TextView            android:id= "@+id/cursor"           android:layout_width= "80dp"           android:layout_height= "5dp"          android:background= "#990033"           />               <android.support.v4.view.ViewPager           android:id= "@+id/viewpager"           android:layout_width= "fill_parent"           android:layout_height= "fill_parent"           android:flipInterval= "30"           android:persistentDrawingCache= "animation" /> </LinearLayout>

二、在MainActivity.java中加载主布局文件mian.xml

定义一个ArrayList<Fragment>将初始化后的Fragment添加到集合中。然后设定viewpager的 适配器，同时要自定义FragmentPagerAdapter。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

public  class  MainActivity  extends  FragmentActivity{       private  ViewPager mPager;           private  ArrayList<Fragment> fragmentList;           private  TextView barText;           private  TextView view1, view2, view3, view4;           private  int  currIndex; //当前页卡编号          protected  void  onCreate(Bundle savedInstanceState) {               super .onCreate(savedInstanceState);               setContentView(R.layout.main);                               InitTextView();               InitTextBar();               InitViewPager();           }                       // 初始化标签名          public  void  InitTextView(){               view1 = (TextView)findViewById(R.id.tv_guid1);               view2 = (TextView)findViewById(R.id.tv_guid2);               view3 = (TextView)findViewById(R.id.tv_guid3);               view4 = (TextView)findViewById(R.id.tv_guid4);                               view1.setOnClickListener( new  txListener( 0 ));               view2.setOnClickListener( new  txListener( 1 ));               view3.setOnClickListener( new  txListener( 2 ));               view4.setOnClickListener( new  txListener( 3 ));           }                       public  class  txListener  implements  View.OnClickListener{               private  int  index= 0 ;                               public  txListener( int  i) {                   index =i;               }               @Override               public  void  onClick(View v) {                   mPager.setCurrentItem(index);               }           }                      // 初始化标签卡的位移像素          public  void  InitTextBar(){               barText = (TextView)  super .findViewById(R.id.cursor);              Display display = getWindow().getWindowManager().getDefaultDisplay();                        // 得到屏幕的宽度              DisplayMetrics metrics =  new  DisplayMetrics();              display.getMetrics(metrics);                        // 1/3得到屏幕              int   tabLineLength = metrics.widthPixels /  4 ;               LayoutParams lp = (LayoutParams) barText.getLayoutParams();               lp.width = tabLineLength;               barText.setLayoutParams(lp);          }                    // 初始化ViewPager          public  void  InitViewPager(){               mPager = (ViewPager)findViewById(R.id.viewpager);               fragmentList =  new  ArrayList<Fragment>();               Fragment btFragment=  new  ButtonFragment();               Fragment secondFragment = TestFragment.newInstance( "this is second fragment" );               Fragment thirdFragment = TestFragment.newInstance( "this is third fragment" );               Fragment fourthFragment = TestFragment.newInstance( "this is fourth fragment" );               fragmentList.add(btFragment);               fragmentList.add(secondFragment);               fragmentList.add(thirdFragment);               fragmentList.add(fourthFragment);                 //给ViewPager设置适配器               mPager.setAdapter( new  MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentList));               mPager.setCurrentItem( 0 ); //设置当前显示标签页为第一页              mPager.setOnPageChangeListener( new  MyOnPageChangeListener()); //页面变化时的监听器          }                   public  class  MyOnPageChangeListener  implements  OnPageChangeListener{               public  void  onPageScrolled( int  arg0,  float  arg1,  int  arg2) {                     //取得该控件的实例                  LinearLayout.LayoutParams ll = (android.widget.LinearLayout.LayoutParams) barText                          .getLayoutParams();                                    if (currIndex == arg0){                       ll.leftMargin = ( int ) (currIndex * barText.getWidth() + arg1                               * barText.getWidth());                  } else  if (currIndex > arg0){                       ll.leftMargin = ( int ) (currIndex * barText.getWidth() - ( 1  - arg1)* barText.getWidth());                  }                  barText.setLayoutParams(ll);              }                               public  void  onPageScrollStateChanged( int  arg0) {               }                               public  void  onPageSelected( int  arg0) {                   currIndex = arg0;                    int  i = currIndex +  1 ;                   Toast.makeText(MainActivity. this ,  "您选择了第" +i+ "个页卡" , Toast.LENGTH_SHORT).show();               }           }  }

三、自定义FragmentPagerAdapter

自定义的FragmentPagerAdapter要继承FragmentPagerAdapter

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

public  class  MyFragmentPagerAdapter  extends  FragmentPagerAdapter {        ArrayList<Fragment> list;      public  MyFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> list) {          super (fm);          this .list = list;        }        public  int  getCount() {          return  list.size();      }        public  Fragment getItem( int  arg0) {          return  list.get(arg0);      } }

四、Fragment的布局加载。

Fragment加载布局文件实现viewpager中单个页面的内容。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

public  class  ButtonFragment  extends  Fragment {      Button myButton;        public  View onCreateView(LayoutInflater inflater, ViewGroup container,              Bundle savedInstanceState) {          View rootView = inflater.inflate(R.layout.guide_1, container,  false ); // 关联布局文件          myButton = (Button) rootView.findViewById(R.id.mybutton); // 根据rootView找到button                    myButton.setOnClickListener( new  View.OnClickListener() {              public  void  onClick(View v) {                  Toast.makeText(ButtonFragment. this .getActivity(),                          "button is click!" , Toast.LENGTH_SHORT).show();              }          });            return  rootView;      } }