android 快速开发四、ViewPager+Fragment 组合使用

  viewPager+fragment的组合使用，可以达到一个非常不错的效果。下面这个功能是模仿微信的，先上页面布局。

<?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=".activity.MainActivity">

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

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


    <View
        android:layout_width="match_parent"
        android:layout_height="0.1dp"
        android:background="@color/material_blue_grey_800" />

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

</LinearLayout>

主界面主要有一个viewpager和include一个底部控件。

base_bottom_layout.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:orientation="horizontal">

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

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

        <TextView
            android:id="@+id/txt_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="首页"
            android:textColor="@color/material_blue_grey_800" />
    </LinearLayout>

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

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

        <TextView
            android:id="@+id/txt_type"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="商品分类"
            android:textColor="@color/material_blue_grey_800" />
    </LinearLayout>

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

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

        <TextView
            android:id="@+id/txt_car"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="购物车"
            android:textColor="@color/material_blue_grey_800" />
    </LinearLayout>

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

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

        <TextView
            android:id="@+id/txt_mine"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="个人中心"
            android:textColor="@color/material_blue_grey_800" />
    </LinearLayout>

</LinearLayout>

主界面嵌套了4个页面，分别对应首页，商品分类，购物车和个人中心的四个页面。主界面代码如下：

package com.example.wmk.activity;

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.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.wmk.R;
import com.example.wmk.fragment.CarFragment;
import com.example.wmk.fragment.HomeFragment;
import com.example.wmk.fragment.MineFragment;
import com.example.wmk.fragment.TypeFragment;

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

public class MainActivity extends FragmentActivity implements View.OnClickListener {

    //LinearLayout
    /**
     * 首页
     */
    private LinearLayout linLayoutTabHome = null;
    /**
     * 商品分类
     */
    private LinearLayout linLayoutTabType = null;
    /**
     * 购物车
     */
    private LinearLayout linLayoutTabCar = null;
    /**
     * 个人中心
     */
    private LinearLayout linLayoutTabMine = null;

    //ImageButton
    /**
     * 首页
     */
    private ImageButton imgBtnTabHome = null;
    /**
     * 商品分类
     */
    private ImageButton imgBtnTabType = null;
    /**
     * 购物车
     */
    private ImageButton imgBtnTabCar = null;
    /**
     * 个人中心
     */
    private ImageButton imgBtnTabMine = null;

    //TextView
    /**
     * 首页
     */
    private TextView txtHome = null;
    /**
     * 商品分类
     */
    private TextView txtType = null;
    /**
     * 购物车
     */
    private TextView txtCar = null;
    /**
     * 个人中心
     */
    private TextView txtMine = null;

    /**
     * ViewPager
     */
    private ViewPager mviewPager = null;

    //装载Fragment的集合
    private List<Fragment> mFragments;
    //适配器
    private FragmentPagerAdapter mAdapter;

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

        //初始化控件
        initViews();
        //初始化事件
        initEvents();
        //初始化数据
        initDatas();

        //默认
        selectTab(0);
    }

    private void initViews() {
        linLayoutTabHome = (LinearLayout) findViewById(R.id.linLayout_tab_home);
        linLayoutTabType = (LinearLayout) findViewById(R.id.linLayout_tab_type);
        linLayoutTabCar = (LinearLayout) findViewById(R.id.linLayout_tab_car);
        linLayoutTabMine = (LinearLayout) findViewById(R.id.linLayout_tab_mine);

        imgBtnTabHome = (ImageButton) findViewById(R.id.imgBtn_tab_home);
        imgBtnTabType = (ImageButton) findViewById(R.id.imgBtn_tab_type);
        imgBtnTabCar = (ImageButton) findViewById(R.id.imgBtn_tab_car);
        imgBtnTabMine = (ImageButton) findViewById(R.id.imgBtn_tab_mine);

        txtHome = (TextView) findViewById(R.id.txt_home);
        txtType = (TextView) findViewById(R.id.txt_type);
        txtCar = (TextView) findViewById(R.id.txt_car);
        txtMine = (TextView) findViewById(R.id.txt_mine);

        mviewPager = (ViewPager) findViewById(R.id.view_pager);
    }


    private void initEvents() {
        linLayoutTabHome.setOnClickListener(this);
        linLayoutTabType.setOnClickListener(this);
        linLayoutTabCar.setOnClickListener(this);
        linLayoutTabMine.setOnClickListener(this);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.linLayout_tab_home:
                selectTab(0);
                break;
            case R.id.linLayout_tab_type:
                selectTab(1);
                break;
            case R.id.linLayout_tab_car:
                selectTab(2);
                break;
            case R.id.linLayout_tab_mine:
                selectTab(3);
                break;
        }
    }

    private void selectTab(int i) {
        //清空上次选中状态
        reset();
        //根据点击的Tab设置对应的ImageButton为橘黄色
        switch (i) {
            case 0:
                imgBtnTabHome.setImageResource(R.mipmap.base_bottombar_home_select);
                txtHome.setTextColor(Color.parseColor("#f6694a"));
                break;
            case 1:
                imgBtnTabType.setImageResource(R.mipmap.base_bottombar_type_select);
                txtType.setTextColor(Color.parseColor("#f6694a"));
                break;
            case 2:
                imgBtnTabCar.setImageResource(R.mipmap.base_bottombar_car_select);
                txtCar.setTextColor(Color.parseColor("#f6694a"));
                break;
            case 3:
                imgBtnTabMine.setImageResource(R.mipmap.base_bottombar_mine_select);
                txtMine.setTextColor(Color.parseColor("#f6694a"));
                break;
        }
        //设置当前点击的Tab所对应的页面
        mviewPager.setCurrentItem(i);
    }

    private void reset() {
        imgBtnTabHome.setImageResource(R.mipmap.base_bottombar_home_unselect);
        imgBtnTabType.setImageResource(R.mipmap.base_bottombar_type_unselect);
        imgBtnTabCar.setImageResource(R.mipmap.base_bottombar_car_unselect);
        imgBtnTabMine.setImageResource(R.mipmap.base_bottombar_mine_unselect);

        txtHome.setTextColor(Color.parseColor("#ff37474f"));
        txtType.setTextColor(Color.parseColor("#ff37474f"));
        txtCar.setTextColor(Color.parseColor("#ff37474f"));
        txtMine.setTextColor(Color.parseColor("#ff37474f"));
    }

    private void initDatas() {
        mFragments = new ArrayList<Fragment>();
        mFragments.add(new HomeFragment());
        mFragments.add(new TypeFragment());
        mFragments.add(new CarFragment());
        mFragments.add(new MineFragment());

        //初始化适配器
        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);
                reset();
                selectTab(position);
            }

            @Override
            //页面滚动状态改变事件
            public void onPageScrollStateChanged(int state) {

            }
        });
    }
}

这样就实现了，微信侧滑和底部点击的效果。