TabLayout实现导航栏

之前，实现导航栏的效果有很多方法，使用第三方库，比如ViewPagerIndicator中的TabPagerIndicator，谷歌可能发现，导航栏使用的挺普遍的，so，也搞了一个属于自己的导航栏！就像侧滑菜单一样，也搞了一个属于自己的侧滑菜单DrawerLayout！

效果图是这样的：

是不是跟ViewPagerIndicator实现的效果一样呢？是一样的！

接下来看代码：

首先呢！需要compile一下：

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

然后TabLayout就跟普通控件使用一样了！直接在xml里设置即可，代码如下：

<android.support.design.widget.TabLayout            android:id="@+id/title"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@android:color/white"            app:tabIndicatorColor="#ff0000"            app:tabSelectedTextColor="#ff0000"            app:tabTextColor="#cccccc"            app:tabMode="scrollable">        </android.support.design.widget.TabLayout>

属性说明：

app:tabIndicatorColor：指示器那条下划线的颜色app:tabTextColor：上面文本颜色app:tabSelectedTextColor：文本被选中后的颜色app:tabMode="scrollable" 适用于多文本的滑动

当然，还有一些别的属性，比如设置指示器下划线的粗细等等。

接下来就是HomeActivity的代码：

package com.bihu.bihunews.activity;import android.os.Bundle;import android.support.design.widget.TabLayout;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.view.GravityCompat;import android.support.v4.view.ViewPager;import android.support.v4.widget.DrawerLayout;import android.view.View;import android.widget.ImageView;import com.bihu.bihunews.R;import com.bihu.bihunews.adapter.PagerAdapter;import com.bihu.bihunews.fragment.BeautyFragment;import com.bihu.bihunews.fragment.CarFragment;import com.bihu.bihunews.fragment.JunShiFragment;import com.bihu.bihunews.fragment.ReDianFragment;import com.bihu.bihunews.fragment.ShuMaFragment;import com.bihu.bihunews.fragment.TuiJianFragment;import com.bihu.bihunews.fragment.SportFragment;import java.util.ArrayList;import java.util.List;/** * Created by shan on 2016/8/31. **/public class HomeActivity extends FragmentActivity implements View.OnClickListener{    private ViewPager viewpager;    private TabLayout layout;    private DrawerLayout leftMenu;    private ImageView touxiang;    private List<String> titles = new ArrayList<>();    private List<Fragment> fragments = new ArrayList<>();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_home);        initView();        initData();        viewpager.setAdapter(new PagerAdapter(getSupportFragmentManager(),titles,fragments));        layout.setupWithViewPager(viewpager);//将导航栏和viewpager进行关联        layout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {            @Override            public void onTabSelected(TabLayout.Tab tab) {                viewpager.setCurrentItem(tab.getPosition());//联动            }            @Override            public void onTabUnselected(TabLayout.Tab tab) {            }            @Override            public void onTabReselected(TabLayout.Tab tab) {            }        });    }    private void initData() {        titles.add("推荐");        titles.add("热点");        titles.add("美女");        titles.add("军事");        titles.add("数码");        titles.add("体育");        titles.add("汽车");        fragments.add(new TuiJianFragment());        fragments.add(new ReDianFragment());        fragments.add(new BeautyFragment());        fragments.add(new JunShiFragment());        fragments.add(new ShuMaFragment());        fragments.add(new SportFragment());        fragments.add(new CarFragment());    }    private void initView() {        viewpager = (ViewPager) findViewById(R.id.viewpager);        touxiang = (ImageView) findViewById(R.id.touxiang);        layout = (TabLayout) findViewById(R.id.title);        leftMenu = (DrawerLayout) findViewById(R.id.left_menu);        touxiang.setOnClickListener(this);    }    @Override    public void onClick(View v) {        leftMenu.openDrawer(GravityCompat.START);//打开侧滑菜单    }}

适配器的代码：

package com.bihu.bihunews.adapter;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import java.util.List;/** * Created by shan on 2016/8/31. **/public class PagerAdapter extends FragmentPagerAdapter {    private List<String> titles;    private List<Fragment> fragments;    public PagerAdapter(FragmentManager fm, List<String> titles,List<Fragment> fragments) {        super(fm);        this.titles = titles;        this.fragments = fragments;    }    @Override    public Fragment getItem(int position) {        return fragments.get(position);    }    @Override    public int getCount() {        return fragments.size();    }    @Override    public CharSequence getPageTitle(int position) {        return titles.get(position);    }}

搞定！使用起来是不是也不难呢！
————————————————————————————————————————————————————————————————
更多属性详解：

app:tabBackground="color"//整个TabLayout的颜色,这里不能直接写RGB，需要@color/xxapp:tabTextAppearance="@android:style/TextAppearance.Holo.Large"//设置文字的外貌大小app:tabIndicatorHeight="2dp"//设置指示器下划线粗细,如果设置成0dp，则不显示指示器app:tabMode="scrollable"//默认是fixed：固定的，标签很多时候会被挤压，不能滑动。app:tabGravity="center"//居中，如果是fill，则是充满设置Tab内部的子控件的Paddingapp:tabPadding="xxdp"app:tabPaddingTop="xxdp"app:tabPaddingStart="xxdp"app:tabPaddingEnd="xxdp"app:tabPaddingBottom="xxdp"设置TabLayout的Paddingapp:paddingEnd="xxdp"app:paddingStart="xxdp"

默认选中某项这样设置：

tablayout.getTabAt(position).select();