ViewPage+Fragment

ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

效果图：

XML代码：

<RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http://schemas.android.com/tools" android:layout_width= "match_parent" android:layout_height= "match_parent" tools:context= ".MainActivity" > <!-- 底部四个导航按钮 --> <LinearLayout android:id= "@+id/ll_tabs" android:layout_width= "match_parent" android:layout_height= "50dp" android:layout_alignParentBottom= "true" android:orientation= "horizontal" > <LinearLayout android:id= "@+id/lin_one" android:layout_width= "0dp" android:layout_height= "match_parent" android:layout_weight= "1" android:orientation= "vertical" android:layout_gravity= "center_horizontal" android:background= "#ffffff" > <ImageView android:layout_width= "30dp" android:src= "@drawable/bird" android:layout_gravity= "center_horizontal" android:layout_height= "30dp" /> <TextView android:id= "@+id/tv_weixin" android:layout_width= "match_parent" android:text= "微信" android:gravity= "center_horizontal" android:layout_height= "wrap_content" /> </LinearLayout> <LinearLayout android:id= "@+id/lin_two" android:layout_width= "0dp" android:orientation= "vertical" android:layout_height= "match_parent" android:layout_weight= "1" android:background= "#ffffff" > <ImageView android:layout_width= "30dp" android:src= "@drawable/cat" android:layout_gravity= "center_horizontal" android:layout_height= "30dp" /> <TextView android:id= "@+id/tv_contact" android:layout_width= "match_parent" android:text= "好友" android:gravity= "center_horizontal" android:layout_height= "wrap_content" /> </LinearLayout> <LinearLayout android:id= "@+id/lin_three" android:layout_width= "0dp" android:orientation= "vertical" android:layout_height= "match_parent" android:layout_weight= "1" android:background= "#ffffff" > <ImageView android:layout_width= "30dp" android:src= "@drawable/chicken" android:layout_gravity= "center_horizontal" android:layout_height= "30dp" /> <TextView android:id= "@+id/tv_find" android:layout_width= "match_parent" android:text= "发现" android:gravity= "center_horizontal" android:layout_height= "wrap_content" /> </LinearLayout> <LinearLayout android:id= "@+id/lin_four" android:layout_width= "0dp" android:layout_height= "match_parent" android:layout_weight= "1" android:orientation= "vertical" android:background= "#ffffff" > <ImageView android:layout_width= "30dp" android:src= "@drawable/cow" android:layout_gravity= "center_horizontal" android:layout_height= "30dp" /> <TextView android:id= "@+id/tv_my" android:layout_width= "match_parent" android:text= "我的" android:gravity= "center_horizontal" android:layout_height= "wrap_content" /> </LinearLayout> </LinearLayout> <!-- 导航和视图的分割线 --> <View android:layout_width= "match_parent" android:layout_height= "2dp" android:background= "#0eefff" android:layout_above= "@id/ll_tabs" /> <!-- <RelativeLayout android:id="@+id/fragment_content_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_above="@id/ll_tabs" android:layout_marginBottom="2dp" android:background="#fff" /> --> <!-- VIewPager 主要是加载内容的 --> <android.support.v4.view.ViewPager android:id= "@+id/viewpager" android:layout_above= "@id/ll_tabs" android:layout_marginBottom= "2dp" android:layout_width= "match_parent" android:layout_height= "match_parent" /> </RelativeLayout>

 来自CODE的代码片

activity_main.xml

然后写四个碎片(Fragment)，代码比较简单，这里博主就不贴代码了。

接着写四个碎片的实现类，绑定四个碎片。

最后再写最主要的一个class

Java代码：

package com . example . g160628_11_02 ; import android.graphics.Color ; import android.os.Bundle ; import android.support.v4.app.Fragment ; import android.support.v4.app.FragmentActivity ; import android.support.v4.app.FragmentManager ; import android.support.v4.app.FragmentStatePagerAdapter ; import android.support.v4.view.ViewPager ; import android.view.View ; import android.view.View.OnClickListener ; import android.view.ViewGroup ; import android.widget.LinearLayout ; import android.widget.TextView ; import java.util.ArrayList ; import java.util.List ; public class MainActivity extends FragmentActivity implements OnClickListener { /** * 四个导航 */ private LinearLayout lintonOne ; private LinearLayout lintonTwo ; private LinearLayout lintonThree ; private LinearLayout lintonFour ; /** * 作为页面容器的ViewPager */ private ViewPager mViewPager ; /** * 页面集合 */ private List < Fragment > fragmentList ; /** * 四个Fragment（页面） */ private WeiXinFragment oneFragment ; private ContactsFragment twoFragment ; private FindFragment threeFragment ; private MyFragment fourFragment ; //当前选中的项 private int currenttab =- 1 ; private TextView tvweixin ; private TextView tvcontact ; private TextView tvfind ; private TextView tvmy ; @Override protected void onCreate ( Bundle savedInstanceState ) { super . onCreate ( savedInstanceState ); setContentView ( R . layout . activity_main ); lintonOne = ( LinearLayout ) findViewById ( R . id . lin_one ); lintonTwo =( LinearLayout ) findViewById ( R . id . lin_two ); lintonThree =( LinearLayout ) findViewById ( R . id . lin_three ); lintonFour =( LinearLayout ) findViewById ( R . id . lin_four ); tvweixin = ( TextView ) findViewById ( R . id . tv_weixin ); tvcontact = ( TextView ) findViewById ( R . id . tv_contact ); tvfind = ( TextView ) findViewById ( R . id . tv_find ); tvmy = ( TextView ) findViewById ( R . id . tv_my ); lintonOne . setOnClickListener ( this ); lintonTwo . setOnClickListener ( this ); lintonThree . setOnClickListener ( this ); lintonFour . setOnClickListener ( this ); mViewPager =( ViewPager ) findViewById ( R . id . viewpager ); fragmentList = new ArrayList < Fragment >(); oneFragment = new WeiXinFragment (); twoFragment = new ContactsFragment (); threeFragment = new FindFragment (); fourFragment = new MyFragment (); fragmentList . add ( oneFragment ); fragmentList . add ( twoFragment ); fragmentList . add ( threeFragment ); fragmentList . add ( fourFragment ); mViewPager . setAdapter ( new MyFrageStatePagerAdapter ( getSupportFragmentManager ())); tvweixin . setTextColor ( Color . RED ); } /** * 定义自己的ViewPager适配器。 * 也可以使用FragmentPagerAdapter。关于这两者之间的区别，可以自己去搜一下。 */ class MyFrageStatePagerAdapter extends FragmentStatePagerAdapter { public MyFrageStatePagerAdapter ( FragmentManager fm ) { super ( fm ); } @Override public Fragment getItem ( int position ) { return fragmentList . get ( position ); } @Override public int getCount () { return fragmentList . size (); } /** * 每次更新完成ViewPager的内容后，调用该接口，此处复写主要是为了让导航按钮上层的覆盖层能够动态的移动 */ @Override public void finishUpdate ( ViewGroup container ) { super . finishUpdate ( container ); //这句话要放在最前面，否则会报错 //获取当前的视图是位于ViewGroup的第几个位置，用来更新对应的覆盖层所在的位置 int currentItem = mViewPager . getCurrentItem (); if ( currentItem == currenttab ) { return ; } // imageMove(mViewPager.getCurrentItem()); currenttab = mViewPager . getCurrentItem (); if ( currenttab == 0 ){ tvweixin . setTextColor ( Color . RED ); } else { tvweixin . setTextColor ( Color . BLACK ); } if ( currenttab == 1 ){ tvcontact . setTextColor ( Color . RED ); } else { tvcontact . setTextColor ( Color . BLACK ); } if ( currenttab == 2 ){ tvfind . setTextColor ( Color . RED ); } else { tvfind . setTextColor ( Color . BLACK ); } if ( currenttab == 3 ){ tvmy . setTextColor ( Color . RED ); } else { tvmy . setTextColor ( Color . BLACK ); } } } @Override public void onClick ( View v ) { switch ( v . getId ()) { case R . id . lin_one : changeView ( 0 ); break ; case R . id . lin_two : changeView ( 1 ); break ; case R . id . lin_three : changeView ( 2 ); break ; case R . id . lin_four : changeView ( 3 ); break ; default : break ; } } //手动设置ViewPager要显示的视图 private void changeView ( int desTab ) { mViewPager . setCurrentItem ( desTab , true ); } }