一行代码实现底部导航栏TabLayout

app中底部导航栏已经是很常见的控件了，比如微信，简书，QQ等都有这类控件，都是点击底部标签切换界面。主要的实现手段有

  • RadioGroup
  • FragmentTabLayout
  • TabLayout
  • Bottom Navigation

其中TabLayout一般作为顶部的导航栏使用，今天我们基于FragmentTabLayout来实现一个底部导航栏。先看下实现的效果：


1.png

2.png

今天这个探索会按照下面这个步骤：

  • FrameTabLayout布局
  • 自定义控件
  • 接口封装
  • 一行代码使用
  • FrameTabLayout源码分析

好了，准备开车～～～

1.FrameTabLayout布局

为什么要提下这个布局，其实这个系统自带的布局比较特殊，要使用系统的id，也就是我们不能自己命名android:id，我们对着具体的布局实现R.layout.myfragment_tab_layout看比较容易明白。
布局其实比较简单，有几个点需要注意下的

id是android:id/tabcontent的FrameLayout明显就是放置内容的，我们的栗子中就是放置Fragment，这个id就是用的系统的不能做更改

id是android:id/tabs的TabWidget顾名思义就是放置底部标签的，就是上图中的Home，Contact等等balabala,对的，你猜到了，这个id也是不能改

为了区分，我故意用了两种高调的颜色作为区分，上图中绿色的区域就是FrameLayout, 橙色的区域就是TabWidget

<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.juexingzhe.testfragmenttablayout.MainActivity">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:background="@android:color/holo_green_dark" />
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            android:background="@android:color/holo_orange_dark" />
    </LinearLayout>
</android.support.v4.app.FragmentTabHost>

具体为什么id不能改，后面我们分析源码的时候就知道了，先按下，客官继续往后看～～～

2.自定义控件MyFragmentTabLayout

这里为了方便我们直接继承自FragmentTabHost，也没有自定义属性(请原谅我偷懒)，上来就是加载上面贴出来的布局, dividerDrawable就是用来设置底部标签栏标签之间分割线用途。

private void init(){
        View view = LayoutInflater.from(getContext()).inflate(R.layout.myfragment_tab_layout, this, true);

        fragmentTabHost = (FragmentTabHost) view.findViewById(android.R.id.tabhost);

        dividerDrawable = null;
}

在继续往下说之前，我们先看下如果不自定义这个控件，我们是怎么使用FragmentTabHost的,我下面贴出的是示意代码，不能直接使用的，不过也可以看出来比较繁琐，也直接证明了封装的必要性。

fragmentTabHost.setup(getContext(), fragmentManager, android.R.id.tabcontent);
TabSpec tabSpec = fragmentTabHost.newTabSpec(……);
fragmentTabHost.addTab(tabSpec, fragment.class, bundle);
fragmentTabHost.getTabWidget().setDividerDrawable(……);

我们对着上面的示意过程来接着看下自定义MyFragmentTabLayout控件剩下的过程。这个方法其实就是调用setup，方法的原型是setup(Context context, FragmentManager manager, int containerId)第一个context没什么好说的，需要外界传入fragmentManager，用来管理fragment，containerId就是用来放置内容的控件id，就是我们上面绿色背景的FrameLayout。

public MyFragmentTabLayout init(FragmentManager fragmentManager) {
        fragmentTabHost.setup(getContext(), fragmentManager, android.R.id.tabcontent);
        return this;
}

经过上面的过程fragmentTabHost的初始化过程就结束了。有些小伙伴就急了，底部标签栏还没见踪影呢？？？别急，听我娓娓道来(逃)，底部标签栏的个数肯定是不能写死的，最好是根据数据的数量来做决定，google就是这么做的，因此标签的初始化是要在fragmentTabHost的数据初始化过程中进行。具体实现代码往下看。

  • fragmentTabHost.newTabSpec这个方法就是用来构造底部标签栏，需要传入一个Tag，和一个tabview，我们这里很简单就是上面图片下面文字的布局
  • fragmentTabHost.addTab就是构造内容区域(fragment)和底部标签栏，有需要传递给fragment的数据可以通过bundle传送
  • setDividerDrawable我们这里传入null，就是不需要分割线,默认是有分割线：
3.png
  • setOnTabChangedListener就是设置标签的点击事件
public MyFragmentTabLayout creat(){
        if (fragmentTabLayoutAdapter == null) return null;
        TabInfo tabInfo;
        for (int i = 0; i < fragmentTabLayoutAdapter.getCount(); i++){
            tabInfo = fragmentTabLayoutAdapter.getTabInfo(i);
            TabSpec tabSpec = fragmentTabHost.newTabSpec(tabInfo.getTabTag()).setIndicator(tabInfo.getTabView());
            fragmentTabHost.addTab(tabSpec, tabInfo.getFragmentClass(), tabInfo.getBundle());
            fragmentTabHost.getTabWidget().setDividerDrawable(dividerDrawable);
            fragmentTabHost.setOnTabChangedListener(new OnTabChangeListener() {
                @Override
                public void onTabChanged(String tabId) {
                    int currentTab = fragmentTabHost.getCurrentTab();
                    fragmentTabLayoutAdapter.onClick(currentTab);
                }
            });
        }
        return this;
}

底部标签布局：

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

    <ImageView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <TextView
        android:gravity="center"
        android:id="@+id/tab_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

上面代码是经过接口封装的，我们接着往下看

3.接口封装

我们也是在控件中留出来一个接口做hook，用户可以通过接口给控件定制数据，定制标签布局，定制点击事件

public interface FragmentTabLayoutAdapter{

        int getCount();

        TabInfo getTabInfo(int pos);

        View createView(int pos);

        void onClick(int pos);

}

我们再回顾下上面自定义的过程，标签的个数通过getCount得到；构造每个标签需要的数据都从getTabInfo获得，参数pos就是标签的位置；每个标签的布局则通过createView获得，参数pos同上；onClick就是标签的点击事件，参数pos同上。

4.一行代码使用

到这里自定义导航栏的工作就差不多了，我们看下具体怎么用，首先就是在布局文件中声明控件,这个布局文件很简单就是引用我们自定义的控件，没什么好解释的。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.juexingzhe.testfragmenttablayout.MainActivity"
    android:orientation="vertical">

    <com.example.juexingzhe.testfragmenttablayout.MyFragmentTabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

接下来在代码中用一行代码实现即可,传入fragmentManager进行初始化，然后就是传入接口FragmentTabLayoutAdapter的实现，我们这里也进行了抽取，提供一个默认的实现，用户只需要实现createView 定制自己需要显示的布局和实现onClick定制每个标签的点击事件，我们这里为了简化只是通过一个Toast进行演示。

fragmentTabHost.init(getSupportFragmentManager())
               .setFragmentTabLayoutAdapter(new DefaultFragmentTabAdapter(Arrays.asList(fragmentClass), Arrays.asList(textViewArray), Arrays.asList(drawables)){
                   @Override
                   public View createView(int pos) {
                       View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.tab_item, null);
                       ImageView imageView = (ImageView) view.findViewById(R.id.img);
                       imageView.setImageResource(drawables[pos]);
                       TextView textView = (TextView) view.findViewById(R.id.tab_text);
                       textView.setText(textViewArray[pos]);
                       return view;
                   }

                   @Override
                   public void onClick(int pos) {
                       Toast.makeText(MainActivity.this, textViewArray[pos] + " be clicked", Toast.LENGTH_SHORT).show();
                   }
               }).creat();

是不是说话算话，一行代码搞定。我们看下DefaultFragmentTabAdapter的实现,默认实现了两个方法getCount和getTabInfo，第一个方法地球人都知道，第二个方法就是构造每个标签需要数据信息。

public class DefaultFragmentTabAdapter implements MyFragmentTabLayout.FragmentTabLayoutAdapter {

    private List<Class> fragmentclass = new ArrayList<>();
    private List<String> fragmentTag = new ArrayList<>();
    private List<Integer> drawables = new ArrayList<>();

    public DefaultFragmentTabAdapter(List<Class> fragmentclass, List<String> fragmentTag, List<Integer> drawables) {
        this.fragmentclass = fragmentclass;
        this.fragmentTag = fragmentTag;
        this.drawables = drawables;
    }

    @Override
    public int getCount() {
        return fragmentTag.size();
    }

    @Override
    public TabInfo getTabInfo(int pos) {
        return new TabInfo.Builder(fragmentTag.get(pos), createView(pos), fragmentclass.get(pos)).build();
    }

    @Override
    public View createView(int pos) {
        return null;
    }

    @Override
    public void onClick(int pos) {

    }
}

稍微提下TabInfo这个数据类，从上面可以看出也是build模式，这里就不多做介绍。几个属性，tabTag就是TabSpec需要传入的Tag；tabView就是底部标签的布局；fragmentClass就是每个标签对应的fragment；bundle是fragment对应的数据；backgroundRes就是每个标签的背景，可以设置点击时的背景变化。

public class TabInfo {

    String tabTag;

    View tabView;

    Class fragmentClass;

    Bundle bundle;

    int backgroundRes;

    ……
}

5.FrameTabLayout源码分析

我们接着简单看下FrameTabLayout的源码，首先就是初始化时见到的setup方法,主要工作在ensureHierarchy方法中，我们接着跟。

public void setup(Context context, FragmentManager manager, int containerId) {
        ensureHierarchy(context);  // Ensure views required by super.setup()
        super.setup();
        mContext = context;
        mFragmentManager = manager;
        mContainerId = containerId;
        ensureContent();
        mRealTabContent.setId(containerId);

        // We must have an ID to be able to save/restore our state.  If
        // the owner hasn't set one at this point, we will set it ourselves.
        if (getId() == View.NO_ID) {
            setId(android.R.id.tabhost);
        }
}

这个方法是跟布局比较密切相关的，也能解释我们前面说的布局id写死的问题。如果没有找到id是android.R.id.tabs的TabWidget，系统会为我们生成一个布局，其中TabWidget就是底部标签栏，id是android.R.id.tabs和我们上面布局代码中一样的；mRealTabContent就是放置内容区域，是一个FrameLayout布局，id是 android.R.id.tabcontent,和我们上面布局代码FrameLayout是一样的。

private void ensureHierarchy(Context context) {
        // If owner hasn't made its own view hierarchy, then as a convenience
        // we will construct a standard one here.
        if (findViewById(android.R.id.tabs) == null) {
            LinearLayout ll = new LinearLayout(context);
            ll.setOrientation(LinearLayout.VERTICAL);
            addView(ll, new FrameLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.MATCH_PARENT));

            TabWidget tw = new TabWidget(context);
            tw.setId(android.R.id.tabs);
            tw.setOrientation(TabWidget.HORIZONTAL);
            ll.addView(tw, new LinearLayout.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT, 0));

            FrameLayout fl = new FrameLayout(context);
            fl.setId(android.R.id.tabcontent);
            ll.addView(fl, new LinearLayout.LayoutParams(0, 0, 0));

            mRealTabContent = fl = new FrameLayout(context);
            mRealTabContent.setId(mContainerId);
            ll.addView(fl, new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.MATCH_PARENT, 0, 1));
        }
 }

我们往下看addTab方法，这个方法就是绑定布局和数据。根据传入的TabSpec构造TabInfo，然后调用TabHost中的addTab(tabSepc) 方法。

public void addTab(@NonNull TabHost.TabSpec tabSpec, @NonNull Class<?> clss,
            @Nullable Bundle args) {
        tabSpec.setContent(new DummyTabFactory(mContext));

        final String tag = tabSpec.getTag();
        final TabInfo info = new TabInfo(tag, clss, args);

        if (mAttached) {
            // If we are already attached to the window, then check to make
            // sure this tab's fragment is inactive if it exists.  This shouldn't
            // normally happen.
            info.fragment = mFragmentManager.findFragmentByTag(tag);
            if (info.fragment != null && !info.fragment.isDetached()) {
                final FragmentTransaction ft = mFragmentManager.beginTransaction();
                ft.detach(info.fragment);
                ft.commit();
            }
        }

        mTabs.add(info);
        addTab(tabSpec);
}

在addTab(tabSepc) 方法中mTabWidget.addView(tabIndicator)就是添加底部标签，那么Fragment呢？猜下应该是在setCurrentTab(0)进行添加，我们往下看。

public void addTab(TabSpec tabSpec) {
        ……

        mTabWidget.addView(tabIndicator);
        mTabSpecs.add(tabSpec);

        if (mCurrentTab == -1) {
            setCurrentTab(0);
        }
    }

在setCurrentTab方法中会调用invokeOnTabChangeListener()方法,最后调用onTabChanged方法，FragmentTabHost是实现了OnTabChangeListener接口，我们再回到FragmentTabHost往下看

private void invokeOnTabChangeListener() {
        if (mOnTabChangeListener != null) {
            mOnTabChangeListener.onTabChanged(getCurrentTabTag());
        }
}

/**
   * Interface definition for a callback to be invoked when tab changed
   */
public interface OnTabChangeListener {
        void onTabChanged(String tabId);
}

先调用doTabChanged，然后会处理我们定义的点击事件，我们往下看doTabChanged方法。如果存在fragment就直接attach，否则先Fragment.instantiate构造Fragment，然后通过add方法进行添加。看到这里整个流程也就清楚了。

public void onTabChanged(String tabId) {
        if (mAttached) {
            final FragmentTransaction ft = doTabChanged(tabId, null);
            if (ft != null) {
                ft.commit();
            }
        }
        if (mOnTabChangeListener != null) {
            mOnTabChangeListener.onTabChanged(tabId);
        }
}

private FragmentTransaction doTabChanged(@Nullable String tag,
            @Nullable FragmentTransaction ft) {
        final TabInfo newTab = getTabInfoForTag(tag);
        if (mLastTab != newTab) {
            if (ft == null) {
                ft = mFragmentManager.beginTransaction();
            }

            if (mLastTab != null) {
                if (mLastTab.fragment != null) {
                    ft.detach(mLastTab.fragment);
                }
            }

            if (newTab != null) {
                if (newTab.fragment == null) {
                    newTab.fragment = Fragment.instantiate(mContext,
                            newTab.clss.getName(), newTab.args);
                    ft.add(mContainerId, newTab.fragment, newTab.tag);
                } else {
                    ft.attach(newTab.fragment);
                }
            }

            mLastTab = newTab;
}

6.总结

如果你能看到这里，说明是真爱。使用FragmentTabHost需要注意的就是布局的时候几个id的问题，更简单的办法就是使用我封装的控件，就没什么需要注意的了:)

代码放到网上，有需要的自行下载，别忘了点赞哦。
GitHub地址

今天的自定义FragmentTabLayout之旅就到这里结束了，大家可以下车了，你们的赞是我最大的动力，谢谢！

欢迎关注公众号：JueCode

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,222评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,455评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,720评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,568评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,696评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,879评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,028评论 3赞 409
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,773评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,220评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,360评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,002评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2赞 350

推荐阅读更多精彩内容