使用Tablayout实现安卓导航栏效果

在2015年的google大会上，google发布了新的Android Support Design库,tablayout控件就是其中一个,就是来实现导航栏效果的,它可以兼容到2.2以上版本，包括2.2. 毕竟是官方发布的,至此实现导航栏我们有了新的选择

先看效果图:

使用方法:

添加依赖###

compile 'com.android.support:design:25.3.1'

layout/activity_main.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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.panku.zhengtest.tablayoutdemo.MainActivity">


    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabBackground="@color/beijing"
        app:tabIndicatorColor="@color/colorPrimary"
        app:tabSelectedTextColor="@color/colorPrimary"
        app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Large"
        app:tabTextColor="#000000"></android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"></android.support.v4.view.ViewPager>
</LinearLayout>

values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <color name="beijing">#f9f6e8</color>
</resources>

Activity代码

package com.panku.zhengtest.tablayoutdemo;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;

import butterknife.Bind;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @Bind(R.id.tab_layout)
    TabLayout tabLayout;
    @Bind(R.id.viewpager)
    ViewPager viewpager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        //初始化配置信息
        initConfig();
        //初始化数据
        initData();
        //设置设配器
        viewpager.setAdapter(new MyAdapter());
    }

    private void initConfig() {
        //tablayout和viewpager关联
        tabLayout.setupWithViewPager(viewpager);
    }

    private ArrayList<View> mList;

    private String[] mTitle = new String[]{"首页", "分类", "寻找", "个人"};

    private void initData() {
        View viewpagerA = getLayoutInflater().inflate(R.layout.viewpager_a, null);
        View viewpagerB = getLayoutInflater().inflate(R.layout.viewpager_b, null);
        View viewpagerC = getLayoutInflater().inflate(R.layout.viewpager_c, null);
        View viewpagerD = getLayoutInflater().inflate(R.layout.viewpager_d, null);

        mList = new ArrayList<>();
        mList.add(viewpagerA);
        mList.add(viewpagerB);
        mList.add(viewpagerC);
        mList.add(viewpagerD);

    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        ButterKnife.unbind(this);
    }

    class MyAdapter extends PagerAdapter {

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

        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = mList.get(position);
            container.addView(view);
            return view;
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTitle[position];
        }
    }
}

以上就可以实现简单的导航栏效果了,下面我们介绍一下tablayout的属性详解

app:tabMode="scrollable"     //可滑动
app:tabMode="fixed"          //固定的
app:tabIndicatorHeight="2dp"    //下划线高度
app:tabIndicatorColor="@color/colorPrimary" //下划线颜色
app:tabSelectedTextColor="#3F51B5"  // 选择的Tab的文字颜色
app:tabTextColor="#000000"  // 未选择的Tab文字颜色
app:tabTextAppearance="@style/Base.TextAppearance.AppCompat.Large" // 文字样式
app:tabBackground="@color/colorPrimary" //背景
//标签距离
app:tabPaddingStart="10dp"
app:tabPaddingBottom="10dp"
app:tabPadding="10dp"
app:tabPaddingEnd="10dp"
app:tabPaddingTop="10dp"
//对齐方式
app:tabGravity="center"   //居中
app:tabGravity="fill"     //填充
app:tabContentStart="50dp" //偏移  从左边开始偏移距离, 必须是可滑动的模式 scrollable
//标签宽度限制
app:tabMaxWidth="50dp"   //最大宽度
app:tabMinWidth="100dp"  //最小宽度

最后提供本文github地址,有需要的可自行下载: https://github.com/787060894/TabLayoutDemo