android主界面tab切换方式

原文（很不错的三种tab界面切换）：https://www.cnblogs.com/caobotao/p/5103673.html

我用的是第三种方式：使用 ViewPager + Fragment

BaseActivity

package com.dream;

import android.support.v7.app.AppCompatActivity;
import android.view.KeyEvent;
import android.widget.Toast;

public class BaseActivity extends AppCompatActivity {
    private long exitTime = 0;

    /**
     * 拦截返回键
     * @param keyCode
     * @param event
     * @return
     */
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {

        if(keyCode == KeyEvent.KEYCODE_BACK && event.getAction() == KeyEvent.ACTION_DOWN){

            if((System.currentTimeMillis()-exitTime) > 2000){
                Toast.makeText(getApplicationContext(), "再按一次退出程序", Toast.LENGTH_SHORT).show();
                exitTime = System.currentTimeMillis();
            } else {
                finish();
//                JActivityManager.getInstance().closeAllActivity();
                System.exit(0);
            }
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
}

HomeActivity

package com.dream;

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.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.dream.home.Tab1Fragment;
import com.dream.home.Tab2Fragment;
import com.dream.home.Tab3Fragment;

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

public class HomeActivity extends BaseActivity implements View.OnClickListener {
    //声明ViewPager
    private ViewPager mViewPager;
    //适配器
    private FragmentPagerAdapter mAdapter;
    //装载Fragment的集合
    private List<Fragment> mFragments;

    //3个Tab对应的布局
    private LinearLayout mTab1;
    private LinearLayout mTab2;
    private LinearLayout mTab3;

    //3个Tab对应的ImageButton
    private TextView mImg1;
    private TextView mImg2;
    private TextView mImg3;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        // 指定布局界面
        setContentView(R.layout.activity_home);
        // 隐藏操作栏
        getSupportActionBar().hide();
        initViews();//初始化控件
        initEvents();//初始化事件
        initDatas();//初始化数据
    }

    private void initDatas() {
        mFragments = new ArrayList<>();
        //将3个Fragment加入集合中
        mFragments.add(new Tab1Fragment());
        mFragments.add(new Tab2Fragment());
        mFragments.add(new Tab3Fragment());

        //初始化适配器
        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 ViewPager.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的点击事件
        mTab1.setOnClickListener(this);
        mTab2.setOnClickListener(this);
        mTab3.setOnClickListener(this);
    }

    //初始化控件
    private void initViews() {
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

        mTab1 = (LinearLayout) findViewById(R.id.linear_tab1);
        mTab2 = (LinearLayout) findViewById(R.id.linear_tab2);
        mTab3 = (LinearLayout) findViewById(R.id.linear_tab3);

        mImg1 = (TextView) findViewById(R.id.tab_1);
        mImg2 = (TextView) findViewById(R.id.tab_2);
        mImg3 = (TextView) findViewById(R.id.tab_3);
    }

    @Override
    public void onClick(View v) {
        //先将四个ImageButton置为灰色
        resetImgs();

        //根据点击的Tab切换不同的页面及设置对应的ImageButton为绿色
        switch (v.getId()) {
            case R.id.linear_tab1:
                selectTab(0);
                break;
            case R.id.linear_tab2:
                selectTab(1);
                break;
            case R.id.linear_tab3:
                selectTab(2);
                break;
        }
    }

    private void selectTab(int i) {
        //根据点击的Tab设置对应的ImageButton为绿色
        TextView title = (TextView)findViewById(R.id.top_title);
        switch (i) {
            case 0:
                title.setText("tab1");
                mImg1.setTextColor(this.getResources().getColor(R.color.green));
                break;
            case 1:
                title.setText("tab2");
                mImg2.setTextColor(this.getResources().getColor(R.color.green));
                break;
            case 2:
                title.setText("tab3");
                mImg3.setTextColor(this.getResources().getColor(R.color.green));
                break;
        }
        //设置当前点击的Tab所对应的页面
        mViewPager.setCurrentItem(i);
    }

    //将四个ImageButton设置为灰色
    private void resetImgs() {
        mImg1.setTextColor(this.getResources().getColor(R.color.gray));
        mImg2.setTextColor(this.getResources().getColor(R.color.gray));
        mImg3.setTextColor(this.getResources().getColor(R.color.gray));
    }
}

各个tab对应的Fragment

Tab1Fragment 

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

Tab2Fragment 

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

Tab3Fragment

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

界面布局文件 activity_home.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".HomeActivity">

    <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/home_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/home_bottom"/>
    </LinearLayout>
</android.support.constraint.ConstraintLayout>

 

顶部布局文件 home_top.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:gravity="center"
    android:layout_width="match_parent"
    android:layout_height="45dp"
    android:background="@color/black">

    <Button
        android:id="@+id/top_setting"
        android:layout_width="70dp"
        android:layout_height="match_parent"
        android:drawablePadding="6dp"
        android:background="@color/transparency"
        android:ellipsize="end"
        android:gravity="center"
        android:onClick="onClick"
        android:paddingLeft="5dp"
        android:singleLine="true"
        android:text="设置"
        android:textColor="#ffffffff"
        android:textSize="18dp"
        android:visibility="visible"
        android:layout_alignParentLeft="true"/>

    <TextView
        android:id="@+id/top_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="标题"
        android:textColor="@color/white"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_centerInParent="true"/>

    <Button
        android:id="@+id/top_scan"
        android:layout_width="70dp"
        android:layout_height="match_parent"
        android:drawablePadding="6dp"
        android:background="@color/transparency"
        android:ellipsize="end"
        android:gravity="center"
        android:onClick="onClick"
        android:paddingLeft="5dp"
        android:singleLine="true"
        android:text="扫描"
        android:textColor="@color/white"
        android:textSize="18dp"
        android:visibility="visible"
        android:layout_alignParentRight="true"/>

</RelativeLayout >

底部布局文件 home_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:gravity="center"
    android:background="@color/material_blue_grey_800"
    android:orientation="horizontal">

    <LinearLayout
        android:id="@+id/linear_tab1"
        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_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:id="@+id/tab_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="tab1"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/linear_tab2"
        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:id="@+id/tab_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="tab2"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/linear_tab3"
        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:id="@+id/tab_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#ffffff"
            android:text="tab3"/>
    </LinearLayout>

</LinearLayout>

三个tab对应的布局文件

home_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="tab1"/>
</LinearLayout>

home_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="tab2"/>
</LinearLayout>

home_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="tab3"/>
</LinearLayout>