如何在 Instagram 等 Android 中实现自定义标签

Question

我正在尝试像 Instagram 那样在底部实现自定义标签 UI（已附上屏幕截图）。我希望中间选项卡打开另一个活动，而不是在同一个视图中打开一个片段。

我觉得这是使用选项卡主机上的图像按钮覆盖来实现的。但是，我仍然无法正确放置该图像按钮，以便 UI 看起来正确。下面是我在底部标签的代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
    android:id="@+id/realtabcontent"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />
<android.support.v4.app.FragmentTabHost
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >
    <FrameLayout
        android:id="@android:id/tabcontent"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="0" />
</android.support.v4.app.FragmentTabHost>
</LinearLayout>

请帮忙。

谢谢，

Answer 1

使用TabLayout 来做到这一点。

xml:

<android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:minHeight="100dp"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

代码：

tabLayout.addTab(tabLayout.newTab().setText("Tab 1"));
tabLayout.addTab(tabLayout.newTab().setText("Tab 2"));
tabLayout.addTab(tabLayout.newTab());

View custom = LayoutInflater.from(this).inflate(R.layout.custom_tab, null);
((TextView) custom.findViewById(R.id.tabTitle)).setText("Tab 3");
(custom.findViewById(R.id.tabIcon)).setBackgroundResource(R.drawable.ic_place_white_18dp);
TabLayout.Tab customTab = tabLayout.getTabAt(2);
customTab.setCustomView(custom);


tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
        @Override
        public void onTabSelected(TabLayout.Tab tab) {

            switch (tabLayout.getSelectedTabPosition()) {
                case 0:
                    //do what you want when tab 0 is selected
                    break;
                case 1:
                    //do what you want when tab 1 is selected
                    break;
                case 2:
                    //do what you want when tab 2 is selected
                    break;
                default:
                    break;
            }

        }

        @Override
        public void onTabUnselected(TabLayout.Tab tab) {

        }

        @Override
        public void onTabReselected(TabLayout.Tab tab) {

        }
    });

编辑：

第三个标签使用自定义布局。