用TabLayout实现面包屑导航条 [复制链接]

2019-7-5 10:02
水刀八木 阅读:254 评论:0 赞:0
Tag:  TabLayout 导航条

考虑到很多小伙伴可能没有耐心看完整篇文章,先看效果:

如果有兴趣的话,请继续往下看。如果没有兴趣,也没关系,下载下来安装看看效果的时间应该还是有的吧。

做这个功能其实是为调研应用到我司产品做的准备工作。很多文件管理类产品,都有这个控件(我们这里叫它文件夹导航条)。实现上面的效果,使用 Android Support Design 库提供的 TabLayout 即可。不过只阅读 TabLayout 官方文档,不看源码,我保证你写不出来。为什么呢?因为 TabLayout 的特性,文档中没有提到。我这里先卖个关子,请跟着我一步一步的实现。

读文档实现阶段

我们首先从TabLayout官方文档中寻找有用信息(自备梯子)。

TabLayout提供了两种模式: Fixed 和 Scrollable。

Fixed模式 :

Fixed tabs display all tabs concurrently.

所有的标签同时显示。

Scrollable模式

Scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs.

可滚动选项卡在任何给定的时刻显示一个标签的子集,并且可以包含更长的标签标签和更多的标签。

翻译由有道提供

TabLayout提供了两种添加 Tab 的方式:

  • 动态添加 Tabs:

    TabLayout tabLayout = ...;
    tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
    tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));
    
  • 静态添加 Tabs:

    <android.support.design.widget.TabLayout
         android:layout_height="wrap_content"
         android:layout_width="match_parent">
    
       <android.support.design.widget.TabItem
               android:text="@string/tab_text"/>
    
       <android.support.design.widget.TabItem
               android:icon="@drawable/ic_android"/>
    
    </android.support.design.widget.TabLayout>
    

添加接听:

mTabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
    /**
     * Tab 进入选中状态时被调用
     */
    @Override
    public void onTabSelected(TabLayout.Tab tab) {
    }
    /**
     * Tab 离开选中状态时回调
     */
    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
    }
    /**
     * Tab 已经被选中又被选中时回调
     */
    @Override
    public void onTabReselected(TabLayout.Tab tab) {
    }
});

集成ViewPager

如果你想要 TabLayout 跟 ViewPager 一起使用,也有两种方式:

  • 动态设置:TabLayout#setWithViewPager(ViewPager)

  • 静态设置:

    <android.support.v4.view.ViewPager
     android:layout_width="match_parent"
     android:layout_height="match_parent">
    
      <android.support.design.widget.TabLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:layout_gravity="top" />
    
    </android.support.v4.view.ViewPager>
    

注意:

如果你集成了 ViewPager,那么你必须重写 PagerAdapter#getPageTitle() ,否则你会看到既没有Text也没有Icon的Tab。如果你问我为什么,源码告诉我的

文件夹导航条的功能点:

  1. 能够水平滑动
  2. 能够动态添加 Tabs
  3. 能够动态删除 Tabs
  4. 能够选择 Tab

阅读文档后你会发现我们需要的效果TabLayout都能满足。那么我们就开始编码吧:

部分布局文件代码: 传送门

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <!--可收缩的Toobar-->   
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
    </android.support.v7.widget.Toolbar>
    <!--今天的主角:可滚动的TabLayout-->
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorHeight="0dp"
        app:tabMode="scrollable"/>
</android.support.design.widget.AppBarLayout>

注意:文件夹导航条不需要为选中的Tab设置指示器,所以将指示器的高度设置为 0dp

动态添加Tabs:

TabLayout tabLayout = ...;
tabLayout.addTab(tabLayout.newTab().setText("0")
        .setIcon(R.drawable.ic_keyboard_arrow_right_white_24dp));
tabLayout.addTab(tabLayout.newTab().setText("Android")
        .setIcon(R.drawable.ic_keyboard_arrow_right_white_24dp));
tabLayout.addTab(tabLayout.newTab().setText("data")
        .setIcon(R.drawable.ic_keyboard_arrow_right_white_24dp));

现在我们把开发者选项的边界选项打开来看看效果:

读 TabLayout.Tab 文档:

读 TabLayout.Tab 文档是你会发现,TabLayout.Tab.setCustomView() 方法。于是我们来尝试使用这个方法,看看是什么效果,代码如下:

定义 customView 布局文件:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:orientation="horizontal">

    <TextView
        android:id="@android:id/text1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <ImageView
        android:id="@android:id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

注意:其实到了这一步你就不得不看源码了,因为设置控件类型、控件ID,不看源码怎么知道如何设置。

动态添加Tabs:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_custom_view)
        .setText("0")
        .setIcon(R.drawable.ic_keyboard_arrow_right_white_24dp));
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_custom_view)
        .setText("Android")
        .setIcon(R.drawable.ic_keyboard_arrow_right_white_24dp));
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_custom_view)
        .setText("data")
        .setIcon(R.drawable.ic_keyboard_arrow_right_white_24dp));

再来看下效果:

通过打开开发者模式的边界选项,我们知道箭头图标下面的紫色区域表示这个ImageView设置了 marginBottom属性。然而布局文件里我们并没有设置,那么是谁设置的呢,难道是神?还是老老实实读源码吧。

读源码实现阶段

TabLayout.TabView.updateTextAndIcon()给了我们答案:

if (iconView != null) {
    MarginLayoutParams lp = ((MarginLayoutParams) iconView.getLayoutParams());
    int bottomMargin = 0;
    if (hasText && iconView.getVisibility() == VISIBLE) {
        // If we're showing both text and icon, add some margin bottom to the icon
        bottomMargin = dpToPx(DEFAULT_GAP_TEXT_ICON);
    }
    if (bottomMargin != lp.bottomMargin) {
        lp.bottomMargin = bottomMargin;
        iconView.requestLayout();
    }
}

通过上面的代码我们了解到Tab既包含文字又包含图标,那么图标的marginBottom至少会设置 8dp。

那么老铁们会不会感觉很扎心,Android团队的工程师为什么要这么写呢?真实百思不得姐呀!!

后来在 Tabs的设计文档中我们得到了答案:

Tabs with icons and text

Height

  • 72dp

Icon

  • 24 x 24dp

Content alignment

  • Text and icon are centered horizontally in the tab

Padding

  • 10dp between icon and text
  • 16dp under text

再来一张图:

Fixed tabs on mobile, icons and text

由此我得出一个结论,用TabLayout.Tab.setIcon() 为Tab设置箭头图标呈现的效果是没有办法让Text和Icon居中对齐显示的

那么还有什么方法可以实现Text和Icon居中显示呢?

有一定Android开发经验的小伙伴一定知道TextView.setCompoundDrawablesXXX()系列方法,对应的属性是:android:drawableXXX。使用此方法我们就可以在TextView的上下左右方向添加图片了,顺便也解决了Text和Icon居中显示的问题

customView布局代码如下:

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableRight="@drawable/ic_keyboard_arrow_right_white_24dp"
    android:gravity="center"/>

动态添加Tabs代码如下:

TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_custom_view)
        .setText("0"));
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_custom_view)
        .setText("Android"));
tabLayout.addTab(tabLayout.newTab().setCustomView(R.layout.tab_custom_view)
        .setText("data"));

效果如下:

总结

读文档实现阶段读源码实现阶段这两个章节记录了实现文件夹导航条的整个过程。这还只是文件浏览器添加文件夹导航条的第一个阶段。在整个调研的过程中,让我经历的一次Android团队的工程师实现一个自定义控件的过程。大多数自定义View的文章都会这样介绍:

自定义View的步骤:

1、自定义View的属性

2、在View的构造方法中获得我们自定义的属性

[ 3、重写onMesure ]

4、重写onDraw

我把3用[]标出了,所以说3不一定是必须的,当然了大部分情况下还是需要重写的。

如果仅仅从开发者的角度出发,步骤就是如此。然而大多数情况下我们都会忽略到设计这个环节。我在文中解释了Tab中同时包含Text和Icon的时候,为什么Icon的底部总会设置margin?就是因为写这个TabLayout控件的Android工程师是根据Tabs官方文档的要求进行编码的。 写Android原生控件况且如此,难道我比Android团队的工程师还牛吗?有多少小伙伴跟我一样,拿到需求二话不说直接撸代码的?

写到这里,这篇文章已到结尾,在实现文件夹导航条的过程中还遇到了:

  1. 选中Tab后,如何显示对应的文件夹下的子文件列表页面(参考了FragmentTabHost切换Fragment的实现方式)
  2. 点击Back键,返回父目录
  3. 选中文件夹,跳转到子文件夹列表页面
  4. 旋转屏幕,恢复到旋转前的状态


我来说两句
您需要登录后才可以评论 登录 | 立即注册
facelist
所有评论(0)
作者的其他最新博客
领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )