如何在屏幕底部设置android TabLayout? [英] How to set android TabLayout in the bottom of the screen?

问题描述

我的问题是我如何才能将新的android材质设计TabLayout设置在屏幕的底部，有点像Instagram的底部工具栏.

My question is how I can set the new android material design TabLayout to be in the bottom of the screen, kind of like Instagram's bottom toolbar.

如果您从未见过Instagram的用户界面，请参见以下截图:

If you have never seen Instagram's UI here is a screenshot of it :

.如果有更好的方法可以解决此问题，请随时在此处发布(如果可能，请提供代码示例)，我将不胜感激.

. If there is a better way of approaching this, please feel free to post it here (with a code example if possible), I will greatly appreciate it.

这是我的代码:activity_main.xml

Here is my code: activity_main.xml

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"  />

我尝试了Stack Overflow社区建议的许多方法和变通办法，但似乎都无法与android中选项卡的这种新实现一起使用.我知道此UI设计不遵循android设计指南，因此请不要对此发表评论.这种UI设计对于我的应用程序的UX至关重要，我很乐意得到答案.谢谢！

I have tried many methods and workarounds suggested by the Stack Overflow community, but none seems to work with this new implementation of tabs in android. I know this UI design does not follow android design guidelines, so please don't comment on it. This UI design is vital to my application's UX and I would appreciate getting an answer for it. Thank you!

推荐答案

我相信我拥有最好的简单解决方法.使用LinearLayout并将viewpager的高度设置为0dp，其中layout_weight ="1".确保LinearLayout具有垂直方向，并且viewpager位于TabLayout之前.这是我的样子:

I believe I have the best simple fix. Use a LinearLayout and set the height of the viewpager to be 0dp with a layout_weight="1". Make sure the LinearLayout has an orientation of vertical and that the viewpager comes before the TabLayout. Here is what mines looks like:

<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=".MainActivity"
    android:orientation="vertical">

    <include layout="@layout/toolbar" android:id="@+id/main_toolbar"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@color/white"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        />

</LinearLayout>

此外，作为奖励，您应该仅以toolbar.xml创建一次工具栏.这样，您所需要做的就是使用include标记.使您的布局更整洁.享受吧！

And as a bonus, you should create your toolbar only once as toolbar.xml. So that way all you have to do is used the include tag. Makes your layout's more clean. Enjoy!

toolbar.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:minHeight="?attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

更新11.2.2016 :对于那些不知道如何为工具栏充气的人，这里是方法.确保您的活动扩展了AppCompatActivity，以便可以调用setSupportActionBar()和getSupportActionBar().

Update 11.2.2016: For those of you who don't know how to inflate the toolbar, here is how. Make sure that your Activity extends AppCompatActivity so you can call setSupportActionBar() and getSupportActionBar().

Toolbar mToolbar = (Toolbar) findViewById(R.id.main_toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);

这篇关于如何在屏幕底部设置android TabLayout?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！