it-swarm.com.ru

Как установить Android TabLayout внизу экрана?

Мой вопрос заключается в том, как я могу установить новый дизайн материала Android TabLayout в нижней части экрана, что-то вроде нижней панели инструментов Instagram. 

Если вы никогда не видели пользовательский интерфейс Instagram, вот его скриншот:

If you have never seen Instagram's UI here is a screenshot of it, Если есть лучший способ приблизиться к этому, пожалуйста, не стесняйтесь размещать его здесь (с примером кода, если это возможно), я буду очень признателен.

Вот мой код: 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. Я знаю, что этот дизайн пользовательского интерфейса не соответствует рекомендациям по дизайну Android, поэтому, пожалуйста, не комментируйте его. Этот дизайн пользовательского интерфейса жизненно важен для UX моего приложения, и я был бы признателен за ответ на него. Спасибо!

23
user562

Я считаю, что у меня есть лучшее простое решение. Используйте LinearLayout и установите высоту окна просмотра 0dp с layout_weight = "1". Убедитесь, что LinearLayout имеет ориентацию по вертикали и что просмотрщик идет перед TabLayout. Вот как выглядит мины:

<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. Делает ваш макет более чистым. Наслаждайтесь!

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 (). 

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

Лучше разделить AppBarLayout и tabLayout, как показано в моем коде ниже. Таким образом, вы можете независимо изменять панель вкладок и просматривать свойства пейджера. 

<Android.support.design.widget.CoordinatorLayout 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="match_parent">

        <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.AppBarLayout>

        <RelativeLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent">

            <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"
                Android:layout_above="@+id/tabs"/>

            <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:layout_alignParentBottom="true"/>
        </RelativeLayout>
    </Android.support.design.widget.CoordinatorLayout>
2
Surendra Kumar

У меня была такая же проблема на Android Studio 2.2. Это то, что я сделал,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:orientation="vertical"
    Android:layout_height="match_parent">


    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        Android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:subtitleTextColor="@color/color_white"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:title="@string/call_log"
        app:titleTextColor="@color/color_white"
        />

    <RelativeLayout
        Android:id="@+id/content_frame"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent" >

        <Android.support.v4.view.ViewPager
            Android:id="@+id/viewpager"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_above="@+id/tabLayout" />

        <Android.support.design.widget.TabLayout
            Android:layout_alignParentBottom="true"
            Android:id="@+id/tabLayout"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:minHeight="?attr/actionBarSize"/>
    </RelativeLayout>

</LinearLayout>
1
kakopappa
Android:layout_alignParentBottom="true"

Добавить этот параметр в

Android.support.design.widget.TabLayout
1
ali

В верхней части страницы настройки LinearLayout и установите Android:gravity="bottom". Это оно. Вот код:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:orientation="vertical"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:minWidth="25px"
    Android:minHeight="25px"
    Android:gravity="bottom"> //Thats it.
    <Android.support.design.widget.TabLayout
        Android:layout_width="match_parent"
        Android:layout_height="45dp"
        Android:id="@+id/tabLayout1">
        <Android.support.design.widget.TabItem
        Android:icon="@drawable/home"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:id="@+id/tabItem1" />
        <Android.support.design.widget.TabItem
        Android:icon="@drawable/mypage"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:id="@+id/tabItem2" />
        <Android.support.design.widget.TabItem
        Android:icon="@drawable/friends"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:id="@+id/tabItem3" />
        <Android.support.design.widget.TabItem
        Android:icon="@drawable/messages"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:id="@+id/tabItem4" />
        <Android.support.design.widget.TabItem
        Android:icon="@drawable/settings"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:id="@+id/tabItem5" />
    </Android.support.design.widget.TabLayout>
</LinearLayout>
0
Hasan Tuna Oruç