使用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