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

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

实现效果：

实现环境

linux下Android Studio

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 drawe
a9d2
rLayout;
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绑定。

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