3

多かれ少なかれ拡張がどのように機能し、さまざまな を追加する方法について、インターネット上にいくつかの情報がありますが、私と拡張を実装したい他のすべての人のためのステップバイステップのガイドを用意したいと思います。アプリに拡張されました(具体的には、 にビューを追加する方法、異なる との間のマージンに使用する測定値など.ToolbarView ToolbarToolbarViewToolbar

可能であれば、フローティング アクション ボタンといくつかのマテリアル デザイン アニメーションも実装したいと考えています。これは、Android でクラスや組み込みメソッドが表示されないためです。

4

2 に答える 2

4

アップデート：

Google I/O 2015 以降、デザイン サポート ライブラリを使用して、フローティング アクション ボタン (FAB) などのマテリアル デザイン ビューを実現できます。以下Toolbarに示すように、v7 サポート ライブラリを使用して作成されます。

の設計Toolbar:

Google のこれらの仕様とガイドラインを見Toolbarて、正しい仕様と測定値を使用して、自分が望む方法で拡張を設定することができました。

私の場合、Fragments を使用してメイン コンテンツを変更していたので (Views内部の拡張Toolbarも異なります)、アクティビティ用のレイアウト ファイルと、他のフラグメント用の別のレイアウト ファイルがありました。私の主な活動のレイアウトは次のとおりです。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <FrameLayout
        android:id="@+id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/main_toolbar" />
</RelativeLayout>

は@layout/toolbar単に次のレイアウトを参照しています (標準のツールバーに使用していたレイアウト(つまり、通常の高さ、 のようにActionBar)):

<?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:id="@+id/toolbar"
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    android:minHeight="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

FrameLayoutまた、 (メイン アクティビティのレイアウトの)コンテンツはJava で変更されます。私のフラグメントの 1 つは 2 つSpinnerの を必要とし、これらを拡張された に埋め込みたいと思いましたToolbar。はToolbarとして便利に使用できるため、フラグメントの 1 つに次のレイアウトViewGroupを作成して使用しました。

<RelativeLayout 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" >

    <android.support.v7.widget.Toolbar
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/extended_toolbar"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:contentInsetStart="72dp"
        app:contentInsetEnd="16dp"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="bottom|center_horizontal"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" >

            <include layout="@layout/toolbar_space_margin" />

            <Spinner
                android:id="@+id/spinner_one"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>

            <Spinner
                android:id="@+id/spinner_two
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"/>

            <include layout="@layout/toolbar_space_margin" />
        </LinearLayout>
    </android.support.v7.widget.Toolbar>

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/extended_toolbar" >

        <!-- The main content of that activity layout -->

    </ScrollView>
</RelativeLayout>

は、 で定義した?attr/colorPrimary原色 ( ) を指します。との 2 つの属性は、 のパディングのようなものだと思います。これは、がの左端から、右端からもあることを意味します。また、上下の余白に使用した基本的に空のビューを 2 回参照しました。colorPrimarystyles.xmlcontentInsetStartcontentInsetEndToolbarLinearLayout72dpToolbar16dp@layout/toolbar_space_margin

<?xml version="1.0" encoding="utf-8"?>
<Space
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="16dp" />

フローティング アクション ボタンの使用:

フローティングアクションボタンの使い方については、いろいろなチュートリアルやスタックオーバーフローの投稿を見つけたので、そちらを利用しました。質問のその部分をもう少しよく調べるべきだった...

デザインでこの問題に遭遇した他の人が、この回答が役立つことを願っています.

于 2015-05-17T15:13:17.393 に答える
1

Hereeは、真新しいツールバーの操作方法に関する優れたチュートリアルです。

ツールバーをアクティビティに統合すると、通常どおりメニュー項目を追加できるようになります (onCreateOptionMenu() および xxx_menu.xml を使用)。

および... FAB aka Floating-Action-Button に関するチュートリアルを次に示します。

于 2015-05-10T16:44:04.910 に答える