关闭

TabLayout用法,android顶部导航栏,android底部导航栏

标签: TabLayoutandroid顶部导航android底部导航TabLayout与viewpager结TabLayout用法
14178人阅读 评论(2) 收藏 举报
分类:

TabLayout是android.support.design里的一个控件,使用它可以很方便的做出顶部导航和底部导航。类似于这样的,能设置选中时字体的颜色和选中时的图片。



首先我们引入compile 'com.android.support:design:23.1.1'

它的用法是:

第一种比较简单,就是文本和一个指示器。

布局文件是

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#32CD32"
        app:tabIndicatorColor="#f00"
        app:tabSelectedTextColor="#444"
        app:tabMode="fixed"
        app:tabTextColor="#fff" />


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

</LinearLayout> 
    顶部是一个TabLayout,可以设置background。app:tabIndicatorColor是设置指示器的背景颜色,app:tabIndicatorHeight设置指示器的高度,app:tabSelectedTextColor是选中时文本的颜色,app:tabTextColor是普通状态的文本颜色,app:tabMode是是否可滑动,有两个fixed和scrollable,fixed是固定的,scrollable是类似于今日头条那种可以滑动的。

    java代码

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

import com.tianyalei.wolf.mddesignlib.view.titlelayout.TitleFragmentPagerAdapter;
import com.tianyalei.wolf.sample.R;

import java.util.ArrayList;
import java.util.List;

import butterknife.Bind;
import butterknife.ButterKnife;

public class TabActivity extends AppCompatActivity {

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

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab);
        ButterKnife.bind(this);

//        tabLayout.setTabTextColors(Color.WHITE, Color.GRAY);//设置文本在选中和为选中时候的颜色
//        tabLayout.setSelectedTabIndicatorColor(Color.WHITE);//设置选中时的指示器的颜色
//        tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//可滑动,默认是FIXED


        List<Fragment> fragments = new ArrayList<>();
        fragments.add(new BlankFragment());
        fragments.add(new BlankFragment());
        fragments.add(new BlankFragment());

        TitleFragmentPagerAdapter adapter = new TitleFragmentPagerAdapter(getFragmentManager(), fragments, new String[]{"第一栏", "第二栏", "第三栏"});
        viewpager.setAdapter(adapter);

        tabLayout.setupWithViewPager(viewpager);
    }

}
TitleFragmentPagerAdapter是viewpager的适配器,
/*
 * Copyright (C) 2012 www.amsoft.cn
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
package com.tianyalei.wolf.mddesignlib.view.titlelayout;

import android.app.Fragment;
import android.app.FragmentManager;
import android.support.v13.app.FragmentPagerAdapter;

import java.util.ArrayList;
import java.util.List;

/**
 * © 2012 amsoft.cn 名称:TitleFragmentPagerAdapter.java 描述:一个通用的Fragment适配器
 *
 * @author wolf
 * @version v1.0
 * @date:2016-3-7 上午10:57:53
 */
public class TitleFragmentPagerAdapter extends FragmentPagerAdapter {

    /**
     * The m fragment list.
     */
    private List<Fragment> mFragmentList = null;

    private String[] titles;

    /**
     * Instantiates a new ab fragment pager adapter.
     *
     * @param mFragmentManager the m fragment manager
     * @param fragmentList     the fragment list
     */
    public TitleFragmentPagerAdapter(FragmentManager mFragmentManager,
                                     ArrayList<Fragment> fragmentList) {
        super(mFragmentManager);
        mFragmentList = fragmentList;
    }

    /**
     * titles是给TabLayout设置title用的
     *
     * @param mFragmentManager
     * @param fragmentList
     * @param titles
     */
    public TitleFragmentPagerAdapter(FragmentManager mFragmentManager,
                                     List<Fragment> fragmentList, String[] titles) {
        super(mFragmentManager);
        mFragmentList = fragmentList;
        this.titles = titles;
    }

    /**
     * 描述:获取数量.
     *
     * @return the count
     * @see android.support.v4.view.PagerAdapter#getCount()
     */
    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    /**
     * 描述:获取索引位置的Fragment.
     *
     * @param position the position
     * @return the item
     * @see android.support.v4.app.FragmentPagerAdapter#getItem(int)
     */
    @Override
    public Fragment getItem(int position) {

        Fragment fragment = null;
        if (position < mFragmentList.size()) {
            fragment = mFragmentList.get(position);
        } else {
            fragment = mFragmentList.get(0);
        }
        return fragment;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        if (titles != null && titles.length > 0)
            return titles[position];
        return null;
    }
}
需要注意的是getPageTitle方法,返回viewpager对应的title。

以上就是TabLayout和viewpager结合的简单例子。

下面说第二种带图片的底部导航,

其实也很简单,就是把TabLayout放到底部,上面是viewpager,然后给text设置个图片就行了。布局如下

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@drawable/selector_bg"
        style="@style/MyCustomTabLayout"/>

</LinearLayout> 
style里面设置了一些属性
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabIndicatorColor">?attr/colorAccent</item>
        <item name="tabIndicatorHeight">0dp</item>
        <item name="tabPaddingStart">12dp</item>
        <item name="tabTextColor">#aaa</item>
        <item name="tabPaddingEnd">12dp</item>
        <item name="tabSelectedTextColor">#f00</item>
    </style>
tabIndicatorHeight是设置导航那个指示器高度为0,因为不需要那个指示器了。然后app:tabBackground这个属性待会再说。

代码如下

package com.tianyalei.wolf.sample.activity;

import android.annotation.TargetApi;
import android.app.Fragment;
import android.graphics.drawable.Drawable;
import android.os.Build;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

import com.tianyalei.wolf.mddesignlib.view.titlelayout.TitleFragmentPagerAdapter;
import com.tianyalei.wolf.sample.R;

import java.util.ArrayList;
import java.util.List;

import butterknife.Bind;
import butterknife.ButterKnife;

public class TabBottomActivity extends AppCompatActivity {

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

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_tab);
        ButterKnife.bind(this);

        List<Fragment> fragments = new ArrayList<>();
        fragments.add(new BlankFragment());
        fragments.add(new BlankFragment());
        fragments.add(new BlankFragment());
        fragments.add(new BlankFragment());
        TitleFragmentPagerAdapter adapter = new TitleFragmentPagerAdapter(getFragmentManager(), fragments, new String[]{"首页", "流量", "社区", "关于"});
        viewpager.setAdapter(adapter);

        tabLayout.setupWithViewPager(viewpager);

        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
             Drawable d = null;
             switch (i) {
                    case 0:
                        d = getResources().getDrawable(R.drawable.selector_home);
                        break;
                    case 1:
                        d = getResources().getDrawable(R.drawable.selector_mall);
                        break;
                    case 2:
                        d = getResources().getDrawable(R.drawable.selector_socially);
                        break;
                    case 3:
                        d = getResources().getDrawable(R.drawable.selector_more);
                        break;
                }
            tab.setIcon(d);
        }
//        viewpager.setCurrentItem(2);
    }

}
前面的部分没什么好说的。下面的那块是设置图片的,就是在selected的时候把图片换成选中态的图片。遍历tab,给tab设置icon,icon就是selector。

R.drawable.selector_home

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android = "http://schemas.android.com/apk/res/android">
    <item android:drawable = "@drawable/nav_home_pre" android:state_selected = "true" />
    <item android:drawable = "@drawable/nav_home" android:state_selected = "false" />
</selector>
OK,以上做完就可以了,带图片的底部导航栏就做好了。

下面说一下app:tabBackground,这个是设置单项的背景颜色的,见下图


就是如果你需要给单项选中时设置个背景,那就用app:tabBackground,也写一个颜色的selector就行了。不需要改变背景的话就不用设置这个属性了。


以上的代码可以从oschina的git托管http://git.oschina.net/tianyalei/MDDesignLib获取,TabLayout相关的在Sample的TabActivity那里。

5
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Android ActionBar完全解析,使用官方推荐的最佳导航栏(上)

Action Bar是一种新増的导航栏功能,在Android 3.0之后加入到系统的API当中,它标识了用户当前操作界面的位置,并提供了额外的用户动作、界面导航等功能。使用ActionBar的好处是,...
  • sinyu890807
  • sinyu890807
  • 2014-06-05 08:56
  • 193399

android网易顶部导航栏demo

随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候想网易新闻要显示的内容太多,而且又想在主页面全部显示出来,所以有加了顶部...
  • yin767833376
  • yin767833376
  • 2016-04-12 16:49
  • 781

Android开发笔记(二十)顶部导航栏ActionBar

标题栏ActionBar ActionBar是在Android3.0之后引入的,所以Android2.x之前的版本不能直接使用ActionBar。现在ActionBar广泛用做APP的顶部导航栏,它在...
  • aqi00
  • aqi00
  • 2015-12-16 17:12
  • 4606

Android之仿今日头条顶部导航栏效果

随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以...
  • HanTangSongMing
  • HanTangSongMing
  • 2015-01-07 09:11
  • 45596

Android 顶部切换实现(二)

上篇介绍了导航栏下的滑动切换实现,这次要介绍的是导航栏上的切换,在很多应用中经常见到,先看效果图。当点击导航条上的分类的时候,会根据选中的分类显示下面的数据。先看布局文件。<RelativeLayou...
  • cswhale
  • cswhale
  • 2016-11-07 17:12
  • 1389

android网易顶部导航栏demo

  • 2012-07-13 20:27
  • 368KB
  • 下载

使用PagerSlidingTabStrip实现顶部导航栏

在开发中,我们有时会遇到顶部导航栏滑动切换页面的设计,如网易新闻。实现的方式有很多种,今天我们使用PagerSlidingTabStrip配合ViewPager实现顶部导航栏。 效果图如下。 P...
  • ruancoder
  • ruancoder
  • 2016-07-22 10:35
  • 3828

android 自定义组合控件 顶部导航栏

  • 2015-11-26 13:44
  • 666KB
  • 下载

android 自定义状态栏和导航栏分析与实现

效果  android 4.4之后,系统是支持自定义状态栏和导航栏的,举个最典型的例子就是bilibili客户端了(iOS版本和android版本能用两套完全不一样符合各自系统的设计ui,良心啊~),...
  • zhao_zepeng
  • zhao_zepeng
  • 2016-01-26 11:39
  • 10463

自定义顶端顶部导航栏(可配合ViewPager使用)

最近做项目,需要有类似网易新闻顶端的导航栏的ui组件,但是就是有切换动画的那种,于是就自己动手写了一个,看了我的文章,如果有什么问题,欢迎大家交流哦。 实现原理:通过OnPageChangeLis...
  • woshizhushiqiu
  • woshizhushiqiu
  • 2016-10-13 20:47
  • 545
    个人资料
    • 访问:306168次
    • 积分:3941
    • 等级:
    • 排名:第9311名
    • 原创:97篇
    • 转载:34篇
    • 译文:0篇
    • 评论:135条
    博客专栏
    友情链接
    最新评论