Android学习笔记：利用Tablelayout和viewpager实现防qq底部栏切换

tablelayout在新的开发者文档中给出了具体的定义，可以通过tablelayot实现一个导航，一般情况下会和viewpager配合起来使用，达到通过导航切换页面的效果。
实现效果：

实现环境

1. linux下Android Studio
2. Android 5.1 API 21

---

代码部分

我的布局是一层一层嵌套的，最外面是一个DrawerLayout，然后

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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"
    android:fitsSystemWindows="true"
    android:id="@+id/container"
    tools:context="com.example.steam.app_mydemon_qq.MainActivity">

    <!-- 页面内容-->
    <include layout="@layout/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />
    <!-- 侧拉栏-->
    <android.support.design.widget.NavigationView
        android:id="@+id/navigationview"
        android:layout_gravity="start"
        android:layout_width="match_parent"
        app:headerLayout="@layout/navi_header"
        android:layout_height="match_parent"
        app:background="@mipmap/qq"
        app:menu="@menu/navi_menu"
        />
</android.support.v4.widget.DrawerLayout>

里面还有一个NavigationView用于实现抽屉菜单，使用方法见
http://blog.csdn.net/qq_28452311/article/details/50200475。

toolbar_layout.xml：

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        app:title=" "
        app:titleTextColor="@color/colorwhite">

        <TextView
            android:id="@+id/toobat_centertv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="消息"
            android:textColor="@color/colorwhite"
            android:textSize="20dp"
            android:textStyle="bold" />
    </android.support.v7.widget.Toolbar>

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

</LinearLayout>

这个没什么好说的，放入一个TextView显示导航选中对应的文字。

content_layout.xml：

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

    <com.example.steam.app_mydemon_qq.MyViewPager
        android:id="@+id/myviewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.example.steam.app_mydemon_qq.BottomMentTab
        android:id="@+id/mytab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorwhite"
        app:tabIndicatorColor="@color/colorwhite"
        app:tabSelectedTextColor="@color/colorPrimary"
        app:tabTextAppearance="@style/tablayoutIcon"
        app:tabTextColor="@color/colorgray">

    </com.example.steam.app_mydemon_qq.BottomMentTab>

</LinearLayout>

上面是一个主布局，里面myviewpager是一个自定义的viewpager，BottomMentTab是自定义的Tablayout，下面是自定义class文件
BottomMentTab.class：

package com.example.steam.app_mydemon_qq;

import android.content.Context;
import android.support.design.widget.TabLayout;
import android.util.AttributeSet;

/**
 * Created by steam on 15-12-7.
 */
public class BottomMentTab extends TabLayout {

    public static final int[] tabIcon_gray = new int[]{
            R.drawable.message_icon,
            R.drawable.account_icon,
            R.drawable.moment_icon};

    public static final int[] tabIcon_bule = new int[]{
            R.drawable.message_icon_blue,
            R.drawable.account_icon_blue,
            R.drawable.moment_icon_blue};

    public static final String[] tabTitle = new String[]{"消息", "联系人", "动态"};
    private static final int NUM_TAD = 3;

    public BottomMentTab(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }


    public BottomMentTab(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }


    public BottomMentTab(Context context) {
        super(context);
        init();
    }

    @Override
    public void setOnTabSelectedListener(OnTabSelectedListener onTabSelectedListener) {
        super.setOnTabSelectedListener(onTabSelectedListener);
    }

    private void init() {

        for (int i = 0; i < NUM_TAD; i++) {
            if (i == 0) {
                addTab(newTab().setText(tabTitle[i]).setIcon(tabIcon_bule[i]));
            } else {
                addTab(newTab().setText(tabTitle[i]).setIcon(tabIcon_gray[i]));
            }
        }
    }
}

里面没有实现监听的功能，之后再MainActivity中实现。

MyViewPager.class:

package com.example.steam.app_mydemon_qq;


import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;

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

/**
 * Created by steam on 15-12-8.
 */
public class MyViewPager extends ViewPager {

    public List<Fragment> fragmentList = new ArrayList<Fragment>();
    private boolean noScroll = true;

    public MyViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }


    public MyViewPager(Context context) {
        super(context);
        init();
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        if (noScroll)
            return false;
        else
            return super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (noScroll)
            return false;
        else
            return super.onTouchEvent(ev);
    }

    public List<Fragment> getFragmentList() {
        return fragmentList;
    }



    public void setNoScroll(boolean noScroll) {
        this.noScroll = noScroll;
    }

    private void init() {
        fragmentList.add(new MessageFragment());
        fragmentList.add(new AccountFragment());
        fragmentList.add(new MomentFragment());
    }
}

自定义的viewpager中加入了三个Fragment分别实现三个界面，之后会和自定义的TableLayout（BottomMentRab）绑定，达到切换界面的效果。当然和viewpager一样，我们需要自己去实现一个继承自FragmentPagerAdapter的适配器，将fragment加载进viewpager中。
MyFragAdapter.class：

package com.example.steam.app_mydemon_qq;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

/**
 * Created by steam on 15-12-8.
 */
public class MyfragAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragmentList;

    public MyfragAdapter(FragmentManager fm,List<Fragment> fragmentList) {
        super(fm);
        this.fragmentList=fragmentList;
    }

    @Override
    public Fragment getItem(int position) {
        return fragmentList.get(position);
    }

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

之后还需要准备三个Fragment，这里就只列出一个：

<FrameLayout 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="com.example.steam.app_mydemon_qq.MessageFragment">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="message" />

</FrameLayout>

以及每个Fragment对应一个class

package com.example.steam.app_mydemon_qq;


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


/**
 * A simple {@link Fragment} subclass.
 */
public class MessageFragment extends Fragment {


    public MessageFragment() {
        // Required empty public constructor
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_message, container, false);
    }

}

最后就只剩MainActivity了

package com.example.steam.app_mydemon_qq;

import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.design.widget.TabLayout;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.util.Log;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener {

    private Toolbar toolbar;
    private BottomMentTab Mytable;
    private TextView toobat_centertv;
    private NavigationView navigationView;
    private DrawerLayout drawerLayout;
    private MyViewPager myViewPager;



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

        //初始化

        myViewPager = (MyViewPager) findViewById(R.id.myviewpager);
        toobat_centertv = (TextView) findViewById(R.id.toobat_centertv);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);//加载toolbar
        toolbar.setNavigationIcon(R.mipmap.ic_launcher);
        navigationView = (NavigationView) findViewById(R.id.navigationview);
        drawerLayout = (DrawerLayout) findViewById(R.id.container);
        Mytable = (BottomMentTab) findViewById(R.id.mytab);


        //初始化myviewpager的适配器

       MyfragAdapter myfragAdapter = new MyfragAdapter(getSupportFragmentManager(),
               myViewPager.getFragmentList());

        myViewPager.setAdapter(myfragAdapter);
        myViewPager.setOffscreenPageLimit(2);

        Mytable.setOnTabSelectedListener(this);




        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
                this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawerLayout.setDrawerListener(toggle);
        toggle.syncState();
    }

    @Override
    public void onBackPressed() {

        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }

    }

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        Log.i("TAB", "selected" + tab.getPosition());
        tab.setIcon(BottomMentTab.tabIcon_bule[tab.getPosition()]);
        toobat_centertv.setText(BottomMentTab.tabTitle[tab.getPosition()]);
        myViewPager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {        tab.setIcon(BottomMentTab.tabIcon_gray[tab.getPosition()]);
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }
}

这里我是利用监听TableLayout实现切换，可以试试直接用setupwithviewpager（）将TableLayout和viewpager绑定。

---

=。=如果上面有哪里说得不对的，欢迎指出。