web-dev-qa-db-ja.com

画面の下部にAndroid TabLayoutを設定するには？

私の質問は、新しいAndroidマテリアルデザインTabLayoutを、Instagramの下部ツールバーのような画面下部に設定する方法です。

InstagramのUIを一度も見たことがなければ、スクリーンショットをご覧ください：

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のタブのこの新しい実装では動作しないようです。このUIデザインはAndroidデザインガイドラインに従っていないので、コメントしないでください。このUIデザインは私のアプリケーションのUXに不可欠であり、回答をいただければ幸いです。ありがとうございます。君は！

androidandroid-layoutandroid-tablayout
25
user562

私は最高の簡単な修正があると信じています。 LinearLayoutを使用し、viewpagerの高さをlayout_weight = "1"で0dpに設定します。 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" />

pdate 11.2.2016：ツールバーを膨らませる方法がわからない人のために、ここに方法があります。 setSupportActionBar（）およびgetSupportActionBar（）を呼び出すことができるように、アクティビティがAppCompatActivityを拡張していることを確認してください。

Toolbar mToolbar = (Toolbar) findViewById(R.id.main_toolbar);
setSupportActionBar(mToolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
69
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>
3
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>
2
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ç