使用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=
9f1b
"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