web-dev-qa-db-ja.com

カスタムレイアウトをツールバーに追加する

私はこれに従いました tutorial 私のアプリにいくつかのタブを持つ通常のツールバーを与えました。

ツールバーを次のように変更したいと思います。

enter image description here

ツールバーにテキストと画像を追加します。これどうやってするの？

activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:elevation="0dp">

        <Android.support.v7.widget.Toolbar
            xmlns:Android="http://schemas.Android.com/apk/res/Android"
            xmlns:app="http://schemas.Android.com/apk/res-auto"
            Android:id="@+id/toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="@color/primary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:theme="@style/ToolbarTheme"
            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:tabTextAppearance="@style/TabLayout"
            app:tabSelectedTextColor="@color/white"
            />

    </Android.support.design.widget.AppBarLayout>

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

</Android.support.design.widget.CoordinatorLayout>
androidandroid-layoutandroid-xml
20
user5374735

これを試すことができます：-

<Android.support.design.widget.CoordinatorLayout
    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:id="@+id/main_container"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">


        <!-   Your view --> 


    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:elevation="6dp"
        Android:fitsSystemWindows="true"
        Android:theme="@style/AppTheme">


      <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:id="@+id/toolbar"
         Android:layout_height="?attr/actionBarSize"
         Android:elevation="6dp"
         app:layout_collapseMode="pin"
         app:layout_scrollFlags="scroll|enterAlways"
         app:popupTheme="@style/AppTheme">

           <LinearLayout
               Android:id="@+id/llContainer"
               Android:layout_width="match_parent"
               Android:orientation="vertical"
               Android:background="@Android:color/black"
               Android:gravity="center"
               Android:layout_height="300dp">

                 <!-  Your TextView / ImageView -->

            </LinearLayout>

      </Android.support.v7.widget.Toolbar>

      <Android.support.design.widget.TabLayout
          Android:id="@+id/tabs"
          Android:layout_width="match_parent"
          Android:layout_height="wrap_content"
          app:tabTextAppearance="@style/TabLayout"
          app:tabSelectedTextColor="@color/white"/>

 </Android.support.design.widget.AppBarLayout>

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

</Android.support.design.widget.CoordinatorLayout>
15
Android Team

以下に示すように、制約レイアウトを使用してToolBarカスタムレイアウトを定義できます。詳細については、 http://www.zoftino.com/Android-toolbar-tutorial を参照してください。

<?xml version="1.0" encoding="utf-8"?>
<Android.support.constraint.ConstraintLayout 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:layout_height="match_parent"
    tools:context="zoftino.com.toolbar.MainActivity">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:minHeight="?attr/actionBarSize"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
        <Android.support.constraint.ConstraintLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:layout_marginBottom="8dp">
            <TextView
                Android:id="@+id/title_m"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginEnd="8dp"
                Android:layout_marginStart="8dp"
                Android:layout_marginTop="16dp"
                Android:text="Tennis"
                Android:textAppearance="@Android:style/TextAppearance.Material.Title"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toTopOf="parent"/>
            <TextView
                Android:id="@+id/women_s"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginEnd="8dp"
                Android:layout_marginStart="8dp"
                Android:layout_marginTop="8dp"
                Android:text="W Singles"
                Android:textAppearance="@Android:style/TextAppearance.Material.Medium"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/title_m" />
            <TextView
                Android:id="@+id/wm_name"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_marginEnd="8dp"
                Android:layout_marginStart="8dp"
                Android:layout_marginTop="8dp"
                Android:textAppearance="@Android:style/TextAppearance.Material.Title"
                Android:text="Serena"
                app:layout_constraintLeft_toRightOf="@+id/women_s"
                app:layout_constraintRight_toRightOf="parent"
                app:layout_constraintTop_toBottomOf="@+id/title_m" />

        </Android.support.constraint.ConstraintLayout>
    </Android.support.v7.widget.Toolbar>


</Android.support.constraint.ConstraintLayout>
2
Arnav Rao

Android ActionBarは、以前のActionBar要素がより汎用性の高いツールバーに置き換えられたため、これまで以上に簡単にカスタマイズできます。詳細 詳細参照リンク1 =および 詳細参照リンク2

1
Java coder