web-dev-qa-db-ja.com

新しいマテリアルデザインを使用してAppBarLayoutの上にコンテンツをオーバーレイする

そのようなことを達成したいです。 （FABまたはスナックバーではありません）。 AppBarLayoutをオーバーレイしてレイアウトを作成するにはどうすればよいですか？このような！ （例えば）

AppBarLayout with overlaying content

Playストアのように：

Just like on the Play Store

コンテンツとしてCoordinatorLayoutを使用したAppBarLayoutとRelativeLayoutを使用したNestedScrollViewは次のようになります。

<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/rootLayout"
Android:layout_width="match_parent"
Android:layout_height="match_parent">

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

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsingToolbarLayout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:contentScrim="@color/mpc_pink"
        app:expandedTitleMarginStart="@dimen/_40sdp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <de.mypostcardstore.widgets.ItemImageView
            Android:id="@+id/header"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:scaleType="centerCrop"
            Android:src="@color/mpc_pink"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/article_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:minHeight="?attr/actionBarSize"
            app:contentScrim="@color/mpc_pink"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />


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

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

<Android.support.v4.widget.NestedScrollView
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="?android:colorBackground"
    Android:fillViewport="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

誰かが私を助けてくれたら素晴らしいでしょう。インターネットで何も見つかりません...

前もって感謝します！

androidandroid-layoutmaterial-designandroid-toolbarandroid-coordinatorlayout
28
X7S

次のようなものを追加するだけです

app:behavior_overlapTop="64dp"

NestedScrollViewに追加すると、展開されたツールバーの上に配置されます。

さらに、次のようなものを追加する必要があります

app:expandedTitleMarginBottom="70dp"

CollapsingToolbarLayoutにすると、タイトルがオーバーレイされたスクロールコンテンツの下に表示されません。

45
Ander Webbs

本当に簡単です。 ToolBar、FrameLayout、およびコンテンツビュー（最初の例のようなListViewなど）の組み合わせを使用して、これを実現できます。

FrameLayoutをToolBarと同じ色にすることで、ToolBarがそれよりもはるかに大きいという錯覚を与えます。次に、コンテンツビューを最後にする（またはAPI 21以降：最高のelevation属性を持つ）だけで、前述のFrameLayout。

以下の私の図を参照してください。

enter image description here

大きなアイデアを得たので、そのようなことを行うための実際のライブXMLスニペットを以下に示します。 （私は実際に私のレイアウトの1つでこのレイアウトを使用しています）：

_<!-- Somewhere in your layout.xml -->

....

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/tb_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="@dimen/abc_action_bar_default_height_material"
        Android:background="?attr/colorPrimary"
        Android:minHeight="?attr/actionBarSize"
        app:contentInsetStart="72dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <!-- This is the 'faux' ToolBar I've been telling you about. This is the part that will be overlaid by the content view below. -->
    <FrameLayout
        Android:id="@+id/v_toolbar_extension"
        Android:layout_width="match_parent"
        Android:layout_height="64dp"
        Android:layout_below="@+id/tb_toolbar"
        Android:background="?attr/colorPrimary"
        Android:elevation="2dp"/>

    <!-- Normally, I use this FrameLayout as a base for inflating my fragments. You could just use put your content view here. -->
    <FrameLayout
        Android:id="@+id/ly_content"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_below="@+id/tb_toolbar"
        Android:elevation="3dp"/>

....
_

_ly_content_の標高値は_v_toolbar_extension_の標高値よりも高いことに注意してください。これが、希望する「オーバーレイツールバー」効果を提供するものです。

最後になりましたが、この行をアクティビティのonCreate()のどこかに追加することをお勧めします。

_/* Assuming mToolbar exists as a reference to your ToolBar in XML. */
setSupportActionBar(mTbToolbar);
getSupportActionBar().setElevation(0);
_

このコードが行うことは、ToolBarの標高をゼロに設定することです。ツールバーのデフォルトとして与えられたプリセットの影を削除します。これを行わないと、上記の影がToolBarとFrameLayoutの間に「縫い目」を作成するため、これら2つが同じであるという幻想を破ります。

ps、コンテンツビューの両側にパディングを付けることも重要です。そうすると、コンテンツビューは画面の幅全体をカバーしなくなります（この効果は役に立たなくなります）。

注：ここには、FrameLayoutがなく、代わりにToolBarを高くするという良い答えがあります。理論的には私の提案した解決策と同じように機能するかもしれませんが、スクロールを操作しようとすると問題が発生する可能性があります。そうすることで、ToolBarとその拡張子を分離できなくなります。 Toolbarを静的にするか、すべてのToolBarをすべてスクロールする必要があります（スクロールが少し奇妙になります）。

さらに、カスタムDrawableをToolbarに簡単に割り当てることはできません。したがって、上記のGoogle Playの例に従うことは困難です。私のソリューションを使用している場合、あなたがする必要があるのは、単にToolbarを透明にし、代わりにFrameLayoutにドロアブルを割り当てることだけです。

14
ridsatrio

同様の要件があり、以下のように達成しました。

アクティビティテーマは、Theme.AppCompat.Light.NoActionBarを拡張する必要があります。次のようにレイアウトXMLファイルを作成しました。

<Android.support.v7.widget.Toolbar
    Android:id="@+id/toolbar_main"
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/action_bar_size_x2"
    Android:background="@color/colorPrimary"
    Android:minHeight="?attr/actionBarSize" />

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_marginLeft="15dp"
    Android:layout_marginRight="15dp"
    Android:layout_marginTop="@dimen/action_bar_size"
    Android:orientation="vertical" >

    <Android.support.v7.widget.CardView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent" >

        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical" >

            <TextView
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_margin="10dp"
                Android:text="@string/app_name"
                Android:textSize="24sp" />
        </LinearLayout>
    </Android.support.v7.widget.CardView>
</LinearLayout>

そして、アクティビティは次のようになります。

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
        setSupportActionBar(maintoolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
}

私はこのようなビューを得ました： enter image description here

1
Akanksha Hegde

あなたが参照したようなCard Toolbar in Androidと呼ばれるエフェクトを実装しようとしましたが、期待通りに動作しました。ここに私のレイアウトがあります、それを見てみましょう：

<FrameLayout 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:background="@color/background_material_light" >
<Android.support.v7.widget.Toolbar
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/toolbar_double_height"
    Android:background="?attr/colorPrimary" />
<Android.support.v7.widget.CardView
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_marginLeft="@dimen/cardview_toolbar_spacer"
    Android:layout_marginRight="@dimen/cardview_toolbar_spacer"
    Android:layout_marginTop="?attr/actionBarSize"
    app:cardBackgroundColor="@Android:color/white">
    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">
        <Android.support.v7.widget.Toolbar
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize" />
        <View
            Android:layout_width="match_parent"
            Android:layout_height="1dp"
            Android:alpha="0.12"
            Android:background="@Android:color/black" />
    </LinearLayout>
</Android.support.v7.widget.CardView>
</FrameLayout>

あなたがインスピレーションを受けることを願っています。

0
SilentKnight