用TabLayout实现文件夹导航条

作者: JulianAndroid | 来源:发表于2017-08-29 16:38 被阅读669次

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

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

做这个功能其实是为调研应用到我司产品做的准备工作。很多文件管理类产品，都有这个控件（我们这里叫它文件夹导航条）。实现👆的效果，使用 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。如果你问我为什么，源码告诉我的。

文件夹导航条的功能点：

能够水平滑动
能够动态添加 Tabs
能够动态删除 Tabs
能够选择 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不一定是必须的，当然了大部分情况下还是需要重写的。

以上内容来自Android 自定义View (一)

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

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

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

以上问题都已得到解决，并已经应用到我的 AppChooser 的sample当中。文章都读到这里了，下载安装看看效果的功夫应该还是有的吧。如果你发现问题，可以给我提Issues。

用TabLayout实现文件夹导航条

读文档实现阶段

读源码实现阶段

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

爱上Android