三種實現Android主界面Tab的方式

時間 2019-12-07

原文原文鏈接

在平時的Android開發中，咱們常常會使用Tab來進行主界面的佈局。因爲手機屏幕尺寸的限制，合理使用Tab能夠極大的利用屏幕資源，給用戶帶來良好的體驗。學會Tab的使用方法已經成爲學習Android開發必不可少的技能了。咱們常常使用的微信、QQ就是使用Tab的方式進行主界面的佈局的。html

下面咱們經過三種方式實現舊版的微信主界面以演示Tab的使用方式。java

最終效果：android

第一種：單純使用ViewPager微信

MainActivity.javaide

public class MainActivity extends Activity implements OnClickListener { //聲明ViewPager
    private ViewPager mViewpager; //聲明四個Tab
    private LinearLayout mTabWeixin; private LinearLayout mTabFrd; private LinearLayout mTabAddress; private LinearLayout mTabSetting; //聲明四個ImageButton
    private ImageButton mWeixinImg; private ImageButton mFrdImg; private ImageButton mAddressImg; private ImageButton mSettingImg; //聲明ViewPager的適配器
    private PagerAdapter mAdpater; //用於裝載四個Tab的List
    private List<View> mTabs = new ArrayList<View>(); @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //去掉TitleBar
 requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); initViews();//初始化控件
        initDatas();//初始化數據
        initEvents();//初始化事件
 } private void initEvents() { //設置四個Tab的點擊事件
        mTabWeixin.setOnClickListener(this); mTabFrd.setOnClickListener(this); mTabAddress.setOnClickListener(this); mTabSetting.setOnClickListener(this); //添加ViewPager的切換Tab的監聽事件
        mViewpager.addOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { //獲取ViewPager的當前Tab
                int currentItem = mViewpager.getCurrentItem(); //將因此的ImageButton設置成灰色
 resetImgs(); //將當前Tab對應的ImageButton設置成綠色
                switch (currentItem) { case 0: mWeixinImg.setImageResource(R.mipmap.tab_weixin_pressed); break; case 1: mFrdImg.setImageResource(R.mipmap.tab_find_frd_pressed); break; case 2: mAddressImg.setImageResource(R.mipmap.tab_address_pressed); break; case 3: mSettingImg.setImageResource(R.mipmap.tab_settings_pressed); break; } } @Override public void onPageScrollStateChanged(int state) { } }); } private void initDatas() { //初始化ViewPager的適配器
        mAdpater = new PagerAdapter() { @Override public int getCount() { return mTabs.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { View view = mTabs.get(position); container.addView(view); return view; } @Override public void destroyItem(ViewGroup container, int position, Object object) {
 container.removeView(mTabs.get(position)); } }; //設置ViewPager的適配器
 mViewpager.setAdapter(mAdpater); } //初始化控件
    private void initViews() { mViewpager = (ViewPager) findViewById(R.id.id_viewpager); mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin); mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd); mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address); mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting); mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img); mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img); mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img); mSettingImg = (ImageButton) findViewById(R.id.id_tab_setting_img); //獲取到四個Tab
        LayoutInflater inflater = LayoutInflater.from(this); View tab1 = inflater.inflate(R.layout.tab1, null); View tab2 = inflater.inflate(R.layout.tab2, null); View tab3 = inflater.inflate(R.layout.tab3, null); View tab4 = inflater.inflate(R.layout.tab4, null); //將四個Tab添加到集合中
 mTabs.add(tab1); mTabs.add(tab2); mTabs.add(tab3); mTabs.add(tab4); } @Override public void onClick(View v) { //先將四個ImageButton都設置成灰色
 resetImgs(); switch (v.getId()) { case R.id.id_tab_weixin: //設置viewPager的當前Tab
                mViewpager.setCurrentItem(0); //將當前Tab對應的ImageButton設置成綠色
 mWeixinImg.setImageResource(R.mipmap.tab_weixin_pressed); break; case R.id.id_tab_frd: mViewpager.setCurrentItem(1); mFrdImg.setImageResource(R.mipmap.tab_find_frd_pressed); break; case R.id.id_tab_address: mViewpager.setCurrentItem(2); mAddressImg.setImageResource(R.mipmap.tab_address_pressed); break; case R.id.id_tab_setting: mViewpager.setCurrentItem(3); mSettingImg.setImageResource(R.mipmap.tab_settings_pressed); break; } } //將四個ImageButton設置成灰色
    private void resetImgs () { mWeixinImg.setImageResource(R.mipmap.tab_weixin_normal); mFrdImg.setImageResource(R.mipmap.tab_find_frd_normal); mAddressImg.setImageResource(R.mipmap.tab_address_normal); mSettingImg.setImageResource(R.mipmap.tab_settings_normal); } }

頂部佈局文件佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:background="@android:drawable/title_bar"
              android:gravity="center"
              android:layout_width="match_parent"
              android:layout_height="45dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold"/>

</LinearLayout>

top.xml

四個Tab對應頁面的佈局文件學習

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Weixin Tab!"/>
</LinearLayout>

tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Friend Tab!"/>
</LinearLayout>

tab2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Address Tab!"/>
</LinearLayout>

tab3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Setting Tab!"/>
</LinearLayout>

tab4.xml

底部佈局文件this

<?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="55dp"
              android:gravity="center"
              android:background="@color/material_blue_grey_800"
              android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/id_tab_weixin"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_weixin_pressed"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="微信"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_find_frd_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="朋友"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_address"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_address_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="通信錄"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_setting"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_setting_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_settings_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="設置"/>
    </LinearLayout>

</LinearLayout>

bottom.xml

主佈局文件url

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include layout="@layout/top"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom"/>
</LinearLayout>

activity_main.xml

完整源碼 : 點擊下載spa

單純使用ViewPager的方式能夠實現左右滑動切換頁面和點擊Tab切換頁面的效果。可是你們發現，這種方式須要在Activity完成全部的代碼實現，包括初始化Tab及其對應頁面的初始化控件、數據、事件及業務邏輯的處理。這樣會使得Activity看起來很是臃腫，進而形成代碼的可讀性和可維護性變得極差。

谷歌在Android 3.0時推出了Fragment。能夠分別使用Fragment來管理每一個Tab對應的頁面的佈局及功能的實現。而後將Fragment與Android關聯，這樣Android只須要管理Fragment就好了，起到了調度器的做用，再也不關心每一個Fragment裏的內容及功能實現是什麼。這樣就極大的解放了Activity，使代碼變得簡單、易讀。

下面咱們經過使用Fragment的方式來實現Tab。

第二種：單純使用Fragment

MainActivity.java

public class MainActivity extends FragmentActivity implements OnClickListener { //聲明四個Tab的佈局文件
    private LinearLayout mTabWeixin; private LinearLayout mTabFrd; private LinearLayout mTabAddress; private LinearLayout mTabSetting; //聲明四個Tab的ImageButton
    private ImageButton mWeixinImg; private ImageButton mFrdImg; private ImageButton mAddressImg; private ImageButton mSettingImg; //聲明四個Tab分別對應的Fragment
    private Fragment mFragWeinxin; private Fragment mFragFrd; private Fragment mFragAddress; private Fragment mFragSetting; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); initViews();//初始化控件
        initEvents();//初始化事件
        selectTab(0);//默認選中第一個Tab
 } private void initEvents() { //初始化四個Tab的點擊事件
        mTabWeixin.setOnClickListener(this); mTabFrd.setOnClickListener(this); mTabAddress.setOnClickListener(this); mTabSetting.setOnClickListener(this); } private void initViews() { //初始化四個Tab的佈局文件
        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin); mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd); mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address); mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting); //初始化四個ImageButton
        mWeixinImg = (ImageButton) findViewById(R.id.id_tab_weixin_img); mFrdImg = (ImageButton) findViewById(R.id.id_tab_frd_img); mAddressImg = (ImageButton) findViewById(R.id.id_tab_address_img); mSettingImg = (ImageButton) findViewById(R.id.id_tab_setting_img); } //處理Tab的點擊事件
 @Override public void onClick(View v) { //先將四個ImageButton置爲灰色
 resetImgs(); switch (v.getId()) { case R.id.id_tab_weixin: selectTab(0);//當點擊的是微信的Tab就選中微信的Tab
                break; case R.id.id_tab_frd: selectTab(1); break; case R.id.id_tab_address: selectTab(2); break; case R.id.id_tab_setting: selectTab(3); break; } } //進行選中Tab的處理
    private void selectTab(int i) { //獲取FragmentManager對象
        FragmentManager manager = getSupportFragmentManager(); //獲取FragmentTransaction對象
        FragmentTransaction transaction = manager.beginTransaction(); //先隱藏全部的Fragment
 hideFragments(transaction); switch (i) { //當選中點擊的是微信的Tab時
            case 0: //設置微信的ImageButton爲綠色
 mWeixinImg.setImageResource(R.mipmap.tab_weixin_pressed); //若是微信對應的Fragment沒有實例化，則進行實例化，並顯示出來
                if (mFragWeinxin == null) { mFragWeinxin = new WeixinFragment(); transaction.add(R.id.id_content, mFragWeinxin); } else { //若是微信對應的Fragment已經實例化，則直接顯示出來
 transaction.show(mFragWeinxin); } break; case 1: mFrdImg.setImageResource(R.mipmap.tab_find_frd_pressed); if (mFragFrd == null) { mFragFrd = new FrdFragment(); transaction.add(R.id.id_content, mFragFrd); } else { transaction.show(mFragFrd); } break; case 2: mAddressImg.setImageResource(R.mipmap.tab_address_pressed); if (mFragAddress == null) { mFragAddress = new AddressFragment(); transaction.add(R.id.id_content, mFragAddress); } else { transaction.show(mFragAddress); } break; case 3: mSettingImg.setImageResource(R.mipmap.tab_settings_pressed); if (mFragSetting == null) { mFragSetting = new SettingFragment(); transaction.add(R.id.id_content, mFragSetting); } else { transaction.show(mFragSetting); } break; } //不要忘記提交事務
 transaction.commit(); } //將四個的Fragment隱藏
    private void hideFragments(FragmentTransaction transaction) { if (mFragWeinxin != null) { transaction.hide(mFragWeinxin); } if (mFragFrd != null) { transaction.hide(mFragFrd); } if (mFragAddress != null) { transaction.hide(mFragAddress); } if (mFragSetting != null) { transaction.hide(mFragSetting); } } //將四個ImageButton置爲灰色
    private void resetImgs() { mWeixinImg.setImageResource(R.mipmap.tab_weixin_normal); mFrdImg.setImageResource(R.mipmap.tab_find_frd_normal); mAddressImg.setImageResource(R.mipmap.tab_address_normal); mSettingImg.setImageResource(R.mipmap.tab_settings_normal); } }

「微信」、「朋友」、「通信錄」、「設置」所對應的Fragment

public class WeixinFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab1, container, false);
        return view;
    }
}

WeixinFragment.java

public class FrdFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab2, container, false);
        return view;
    }
}

FrdFragment.java

public class AddressFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab3, container, false);
        return view;
    }
}

AddressFragment.java

public class SettingFragment extends Fragment{
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab4, container, false);
        return view;
    }
}

SettingFragment.java

頂部佈局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:background="@android:drawable/title_bar"
              android:gravity="center"
              android:layout_width="match_parent"
              android:layout_height="45dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold"/>

</LinearLayout>

top.xml

四個Tab對應頁面的佈局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Weixin Tab!"/>
</LinearLayout>

tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Friend Tab!"/>
</LinearLayout>

tab2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Address Tab!"/>
</LinearLayout>

tab3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Setting Tab!"/>
</LinearLayout>

tab4.xml

底部佈局文件

<?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="55dp"
              android:gravity="center"
              android:background="@color/material_blue_grey_800"
              android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/id_tab_weixin"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_weixin_pressed"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="微信"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_find_frd_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="朋友"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_address"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_address_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="通信錄"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_setting"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_setting_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_settings_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="設置"/>
    </LinearLayout>

</LinearLayout>

bottom.xml

主佈局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include layout="@layout/top"/>

    <FrameLayout
        android:id="@+id/id_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>

    <include layout="@layout/bottom"/>
</LinearLayout>

activity_main.xml

完整源碼 : 點擊下載

能夠看出，使用Fragment實現了Activity與Tab對應的頁面分離，特別是當Tab對應的頁面的佈局和邏輯比較複雜時更能體會到使用Fragment的好處。可是單純使用Fragment只能經過點擊Tab來切換頁面，並不能實現左右滑動進行切換。

下面咱們經過使用 ViewPager + Fragment 的方式實現Tab，這也是開發中使用比較普遍的一種方式。

第三種：使用 ViewPager + Fragment

MainActivity.java

public class MainActivity extends FragmentActivity implements OnClickListener { //聲明ViewPager
    private ViewPager mViewPager; //適配器
    private FragmentPagerAdapter mAdapter; //裝載Fragment的集合
    private List<Fragment> mFragments; //四個Tab對應的佈局
    private LinearLayout mTabWeixin; private LinearLayout mTabFrd; private LinearLayout mTabAddress; private LinearLayout mTabSetting; //四個Tab對應的ImageButton
    private ImageButton mImgWeixin; private ImageButton mImgFrd; private ImageButton mImgAddress; private ImageButton mImgSetting; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); initViews();//初始化控件
        initEvents();//初始化事件
        initDatas();//初始化數據
 } private void initDatas() { mFragments = new ArrayList<>(); //將四個Fragment加入集合中
        mFragments.add(new WeixinFragment()); mFragments.add(new FrdFragment()); mFragments.add(new AddressFragment()); mFragments.add(new SettingFragment()); //初始化適配器
        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public Fragment getItem(int position) {//從集合中獲取對應位置的Fragment
                return mFragments.get(position); } @Override public int getCount() {//獲取集合中Fragment的總數
                return mFragments.size(); } }; //不要忘記設置ViewPager的適配器
 mViewPager.setAdapter(mAdapter); //設置ViewPager的切換監聽
        mViewPager.addOnPageChangeListener(new OnPageChangeListener() { @Override //頁面滾動事件
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } //頁面選中事件
 @Override public void onPageSelected(int position) { //設置position對應的集合中的Fragment
 mViewPager.setCurrentItem(position); resetImgs(); selectTab(position); } @Override //頁面滾動狀態改變事件
            public void onPageScrollStateChanged(int state) { } }); } private void initEvents() { //設置四個Tab的點擊事件
        mTabWeixin.setOnClickListener(this); mTabFrd.setOnClickListener(this); mTabAddress.setOnClickListener(this); mTabSetting.setOnClickListener(this); } //初始化控件
    private void initViews() { mViewPager = (ViewPager) findViewById(R.id.id_viewpager); mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin); mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd); mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address); mTabSetting = (LinearLayout) findViewById(R.id.id_tab_setting); mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img); mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img); mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img); mImgSetting = (ImageButton) findViewById(R.id.id_tab_setting_img); } @Override public void onClick(View v) { //先將四個ImageButton置爲灰色
 resetImgs(); //根據點擊的Tab切換不一樣的頁面及設置對應的ImageButton爲綠色
        switch (v.getId()) { case R.id.id_tab_weixin: selectTab(0); break; case R.id.id_tab_frd: selectTab(1); break; case R.id.id_tab_address: selectTab(2); break; case R.id.id_tab_setting: selectTab(3); break; } } private void selectTab(int i) { //根據點擊的Tab設置對應的ImageButton爲綠色
        switch (i) { case 0: mImgWeixin.setImageResource(R.mipmap.tab_weixin_pressed); break; case 1: mImgFrd.setImageResource(R.mipmap.tab_find_frd_pressed); break; case 2: mImgAddress.setImageResource(R.mipmap.tab_address_pressed); break; case 3: mImgSetting.setImageResource(R.mipmap.tab_settings_pressed); break; } //設置當前點擊的Tab所對應的頁面
 mViewPager.setCurrentItem(i); } //將四個ImageButton設置爲灰色
    private void resetImgs() { mImgWeixin.setImageResource(R.mipmap.tab_weixin_normal); mImgFrd.setImageResource(R.mipmap.tab_find_frd_normal); mImgAddress.setImageResource(R.mipmap.tab_address_normal); mImgSetting.setImageResource(R.mipmap.tab_settings_normal); } }

「微信」、「朋友」、「通信錄」、「設置」所對應的Fragment

public class WeixinFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab1, container, false);
        return view;
    }
}

WeixinFragment.java

public class FrdFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab2, container, false);
        return view;
    }
}

FrdFragment.java

public class AddressFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab3, container, false);
        return view;
    }
}

AddressFragment.java

public class SettingFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab4, container, false);
        return view;
    }
}

SettingFragment.java

頂部佈局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:background="@android:drawable/title_bar"
              android:gravity="center"
              android:layout_width="match_parent"
              android:layout_height="45dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="微信"
        android:textColor="#ffffff"
        android:textSize="20sp"
        android:textStyle="bold"/>

</LinearLayout>

top.xml

四個Tab對應頁面的佈局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Weixin Tab!"/>
</LinearLayout>

tab1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Friend Tab!"/>
</LinearLayout>

tab2.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Address Tab!"/>
</LinearLayout>

tab3.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="30sp"
        android:text="The Setting Tab!"/>
</LinearLayout>

tab4.xml

底部佈局文件

<?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="55dp"
              android:gravity="center"
              android:background="@color/material_blue_grey_800"
              android:orientation="horizontal">

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/id_tab_weixin"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_weixin_pressed"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="微信"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_frd"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_find_frd_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="朋友"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_address"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_address_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="通信錄"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/id_tab_setting"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_setting_img"
            android:clickable="false"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@mipmap/tab_settings_normal"
            android:background="#00000000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="設置"/>
    </LinearLayout>

</LinearLayout>

bottom.xml

主佈局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <include layout="@layout/top"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/id_viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom"/>
</LinearLayout>

activity_main.xml

完整源碼 : 點擊下載

使用 ViewPager + Fragment 的方式綜合了使用ViewPager和使用Fragment的優點，即：既能使用Fragment管理Tab對應頁面的佈局及業務邏輯的實現，使得Activity與Tab對應的頁面分離，又能使用ViewPager實現左右滑動切換頁面的效果。這種方式須要爲ViewPager設置FragmentPagerAdapter適配器，關於適配器的知識可參考我以前寫的一篇文章：Android必學之數據適配器BaseAdapter

做者： caobotao

出處： http://www.cnblogs.com/caobotao/p/5103673.html

本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文連接，不然保留追究法律責任的權利。