App主界面Tab实现方法

ViewPager + FragmentPagerAdapter

这里模仿下微信APP界面的实现

国际惯例，先看下效果图：

 

activity_main.xml 布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:orientation="vertical"
    tools:context="com.kevin.viewpager_fragment.MainActivity">

    <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" />

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

</LinearLayout>

top.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="45dp"
    android:background="@mipmap/title_bar"
    android:gravity="center"
    android:orientation="vertical">

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

</LinearLayout>

bottom.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:background="@mipmap/bottom_bar"
    android:orientation="horizontal">

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

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@mipmap/tab_weixin_pressed" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="微信"
            android:textColor="#ffffff" />

    </LinearLayout>

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

        <ImageButton
            android:id="@+id/id_tab_frd_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@mipmap/tab_find_frd_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="朋友"
            android:textColor="#ffffff" />

    </LinearLayout>

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

        <ImageButton
            android:id="@+id/id_tab_address_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@mipmap/tab_address_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="通讯录"
            android:textColor="#ffffff" />

    </LinearLayout>

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

        <ImageButton
            android:id="@+id/id_tab_setting_img"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#00000000"
            android:clickable="false"
            android:src="@mipmap/tab_settings_normal" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="设置"
            android:textColor="#ffffff" />

    </LinearLayout>

</LinearLayout>

tap01.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="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="微信"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

tap02.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="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="微信2"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

tap03.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="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="微信3"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

tap04.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="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="微信4"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

MainActivity.class 主类。 使用的是FragmentPagerAdapter，这个承载的是一个个Fragment，需要注意的是，这里需要继承自 FragmentActivity 。 上源码吧，看了就知道是多么简单了。

 package com.kevin.viewpager_fragment;

 import android.os.Bundle;
 import android.support.v4.app.Fragment;
 import android.support.v4.app.FragmentActivity;
 import android.support.v4.app.FragmentPagerAdapter;
 import android.support.v4.view.ViewPager;
 import android.view.View;
 import android.widget.ImageButton;
 import android.widget.LinearLayout;

 import java.util.ArrayList;
 import java.util.List;

 import fragment.AddressFragment;
 import fragment.FrdFragment;
 import fragment.SettingFragment;
 import fragment.WeiXinFragment;

 public class MainActivity extends FragmentActivity implements View.OnClickListener {

     private ViewPager mViewPager;
     private FragmentPagerAdapter mAdapter;
     private List<Fragment> mFragments;

     private LinearLayout mTabWeixin;
     private LinearLayout mTabFrd;
     private LinearLayout mTabAddress;
     private LinearLayout mTabSetting;

     private ImageButton mImgWeixin;
     private ImageButton mImgFrd;
     private ImageButton mImgAddress;
     private ImageButton mImgSetting;

     @Override
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);

         initView();
         initEvent();
     }

     private void initEvent() {
         mTabWeixin.setOnClickListener(this);
         mTabFrd.setOnClickListener(this);
         mTabAddress.setOnClickListener(this);
         mTabSetting.setOnClickListener(this);
     }

     private void initView() {
         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);

         mFragments = new ArrayList<>();
         Fragment mTab01 = new WeiXinFragment();
         Fragment mTab02 = new FrdFragment();
         Fragment mTab03 = new AddressFragment();
         Fragment mTab04 = new SettingFragment();
         mFragments.add(mTab01);
         mFragments.add(mTab02);
         mFragments.add(mTab03);
         mFragments.add(mTab04);

         mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
             @Override
             public Fragment getItem(int position) {
                 return mFragments.get(position);
             }

             @Override
             public int getCount() {
                 return mFragments.size();
             }
         };

         mViewPager.setAdapter(mAdapter);

         mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
             @Override
             public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

             }

             @Override
             public void onPageSelected(int position) {
                 int currentItem = mViewPager.getCurrentItem();//拿到当前显示的那一个item页面
                 setTab(currentItem);
             }

             @Override
             public void onPageScrollStateChanged(int state) {

             }
         });
     }

     @Override
     public void onClick(View v) {

         switch (v.getId()) {
             case R.id.id_tab_weixin:
                 setSelect(0);
                 break;
             case R.id.id_tab_frd:
                 setSelect(1);
                 break;
             case R.id.id_tab_address:
                 setSelect(2);
                 break;
             case R.id.id_tab_setting:
                 setSelect(3);
                 break;
             default:
                 break;
         }
     }

     /*
     *  切换所有图片为暗色
     * */
     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);
     }

     private void setSelect(int i) {

         setTab(i);

         mViewPager.setCurrentItem(i);

     }

     private void setTab(int i) {

         resetImgs();//调用这个方法，设置所有的tab图片为暗色

         // 设置图片为亮色
         //切换内容区域
         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;
         }
     }
 }

除了主类，接下来是4个Fragment页面。这里没什么内容，只是加载一个布局。

WeiXinFragment.class :

 package fragment;

 import android.os.Bundle;
 import android.support.annotation.Nullable;
 import android.support.v4.app.Fragment;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;

 import com.kevin.viewpager_fragment.R;

 /**
  * Created by ${火龙裸先生} on 2016/11/4.
  * 邮箱：791335000@qq.com
  */
 public class WeiXinFragment extends Fragment {

     @Nullable
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

         View view = inflater.inflate(R.layout.tab01, container, false);

         return view;
     }
 }

FrdFragment.class :

 package fragment;

 import android.os.Bundle;
 import android.support.annotation.Nullable;
 import android.support.v4.app.Fragment;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;

 import com.kevin.viewpager_fragment.R;

 /**
  * Created by ${火龙裸先生} on 2016/11/4.
  * 邮箱：791335000@qq.com
  */
 public class FrdFragment extends Fragment {

     @Nullable
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
         View view = inflater.inflate(R.layout.tab02, container, false);

         return view;
     }
 }

AddressFragment.class :

 package fragment;

 import android.os.Bundle;
 import android.support.annotation.Nullable;
 import android.support.v4.app.Fragment;
 import android.view.LayoutInflater;
 import android.view.View;
 import android.view.ViewGroup;

 import com.kevin.viewpager_fragment.R;

 /**
  * Created by ${火龙裸先生} on 2016/11/4.
  * 邮箱：791335000@qq.com
  */
 public class AddressFragment extends Fragment {

     @Nullable
     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
         View view = inflater.inflate(R.layout.tab03, container, false);

         return view;
     }
 }

SettingFragment.class :

package fragment;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.kevin.viewpager_fragment.R;

/**
 * Created by ${火龙裸先生} on 2016/11/4.
 * 邮箱：791335000@qq.com
 */
public class SettingFragment extends Fragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab04, container, false);

        return view;
    }
}

就是这些代码了。
总结一下：实现这样功能的实现，不止这一种方法，但是，采用ViewPager + FragmentPagerAdapter， 这里的内容区域是Fragment，所以优势就出来了，Fragment管理自己的布局内部所有控件的事件等各种东西，不需要把代码都冗余在MainActivity.class中， 我们的MainActivity只作为一个调度器，调度显示不同的Fragment、隐藏不同的Fragment。 这样的话，便于后期的复用，也便于后期的维护。  然后，我们用的ViewPager，肯定有ViewPager的优势，如果大家希望能够左右拖动，大家就选择 “ViewPager + FragmentPagerAdapter”作为实现，如果大家不需要左右去拖动，比如QQ，一个页面有LitView或者RecyclerView，并且Item需要“侧滑删除”的一个效果，所以这个时候可能就不需要ViewPager的这样一个效果，这就可以选择直接使用Fragment去实现。也建议尽量去使用Fragment。