Question

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

我觉得这是使用标签主机上的imagebutton overlay实现的。但是，我仍然无法正确放置该图像按钮，因此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) {

        }
    });

修改

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

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

1 个答案: