web-dev-qa-db-ja.com

CollapsingToolbarLayoutの開始高さを設定します

CollapsingToolbarLayout内のImageViewをスクロールできるようにします。それでは、どのようにそれが可能になり、その画像ビューの開始高さを設定する方法ですか？

ImageViewの高さは280pで、アクティビティの開始時に200pを表示します。その後、下にスクロールして残りの画像を表示できます。 WhatsAppアプリケーションで似たようなものを見てきました。

ここに私が欲しいものを見るためのリンクがあります：

enter image description here

私のコード：

<?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"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent" 
    Android:fitsSystemWindows="true"
    tools:context="com.example.yasser.version6.Profile">

<Android.support.design.widget.AppBarLayout 
    Android:id="@+id/app_bar"
    Android:fitsSystemWindows="true"
    Android:layout_height="@dimen/app_bar_height"
    Android:layout_width="match_parent"
    Android:theme="@style/MyMaterialTheme.AppBarOverlay">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/toolbar_layout"
        Android:fitsSystemWindows="true" 
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"         
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary">

        <ImageView
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:scaleType="centerCrop"
            Android:src="@drawable/tof" />

        <Android.support.v7.widget.Toolbar 
            Android:id="@+id/toolbar"
            Android:layout_height="?attr/actionBarSize"
            Android:layout_width="match_parent"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/MyMaterialTheme.PopupOverlay" />

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

<include
    Android:id="@+id/content"
    layout="@layout/content_profile" />


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

コンテンツプロファイルコード：

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v4.widget.NestedScrollView
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    xmlns:card_view="http://schemas.Android.com/apk/res-auto"
    tools:showIn="@layout/activity_profile"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    tools:context="com.example.yasser.version6.Profile">

</Android.support.v4.widget.NestedScrollView>
androidandroid-design-libraryandroid-collapsingtoolbarlayout
24
Stranger B.

cheesesquare リクエストを実装する

これはcheesesquareのレイアウトです

<?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:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="@dimen/detail_backdrop_height"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        Android:fitsSystemWindows="true">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:scaleType="centerCrop"
                Android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

        </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"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

            <Android.support.v7.widget.CardView
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_margin="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content">

                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:text="Info"
                        Android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:text="@string/cheese_ipsum" />

                </LinearLayout>

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

            <Android.support.v7.widget.CardView
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_marginBottom="@dimen/card_margin"
                Android:layout_marginLeft="@dimen/card_margin"
                Android:layout_marginRight="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content">

                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:text="Friends"
                        Android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:text="@string/cheese_ipsum" />

                </LinearLayout>

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

            <Android.support.v7.widget.CardView
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_marginBottom="@dimen/card_margin"
                Android:layout_marginLeft="@dimen/card_margin"
                Android:layout_marginRight="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    Android:layout_width="match_parent"
                    Android:layout_height="wrap_content">

                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:text="Related"
                        Android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        Android:layout_width="match_parent"
                        Android:layout_height="wrap_content"
                        Android:text="@string/cheese_ipsum" />

                </LinearLayout>

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

        </LinearLayout>

    </Android.support.v4.widget.NestedScrollView>

    <Android.support.design.widget.FloatingActionButton
        Android:layout_height="wrap_content"
        Android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        Android:src="@drawable/ic_discuss"
        Android:layout_margin="@dimen/fab_margin"
        Android:clickable="true"/>

</Android.support.design.widget.CoordinatorLayout>
12
Mohammad Hossein Gerami

実際、AppBarLayoutには、このようなオフセットを適用する特別なメソッドがあります。

final int setAppBarTopBottomOffset(CoordinatorLayout coordinatorLayout, AppBarLayout appBarLayout, int newOffset, int minOffset, int maxOffset)

残念ながら、パッケージプライベートアクセスレベルがありますが、次のような中間チェーンを介して呼び出すことができます。

private void setAppBarOffset(int offsetPx){
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
    AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
    behavior.onNestedPreScroll(mCoordinatorLayour, mAppBarLayout, null, 0, offsetPx, new int[]{0, 0});
}

言及すべきことの1つ-このメソッドは、mAppBarLayoutが既に準備および測定された後に呼び出す必要があります。したがって、正しい方法は、ビューのpostメソッドを介して呼び出すことです。

mCoordinatorLayour = (CoordinatorLayout) findViewById(R.id.root_coordinator);
mAppBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout);

mAppBarLayout.post(new Runnable() {
    @Override
    public void run() {
        int heightPx = findViewById(R.id.iv_header).getHeight();
        setAppBarOffset(heightPx/2);
    }
});
22
DmitryArc