21

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

私の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> 
+1

あるリクエスト

を実装しますが、 'scrollTo(0、200)を呼び出そうとしましたか? – Blackbelt

答えて

13

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> 
+6

Cheesesquareサンプルアプリケーションは、OPが要求したものを実装していません。通常のCTLを実装しています。 –

+0

動作しません!しかし、[this](https://stackoverflow.com/a/33153297/2835520)は、期待されることをしています。 – IgniteCoders

18

実は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}); 
} 

一つ言及する - 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); 
    } 
}); 
+0

質問してください:AppBarLayoutの高さを減らすには負のoffsetPxにしてはいけませんか? – GPack

+0

は私のために働いていません – randy

+1

私のために働いていますが、タイトルのサイズが正しく入力されません... – nrofis

-2

だけ追加します。

android:fitsSystemWindows="true" 
app:layout_collapseMode="parallax" 

CollapsingToolbarLayoutでImageViewのに。

詳しくはhereをご覧ください。あなた `NestedScrollView`に`;

+0

ここに答えを広げるためのリンクがあります:http://android-developers.blogspot.com.au/2015/05/android-design-support-library.html - 下にスクロールしたり、「視差」を検索しますページ。 – Tigger

0
 <android.support.design.widget.AppBarLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:fitsSystemWindows="true"> 

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


       <RelativeLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:fitsSystemWindows="true" 
        android:orientation="vertical" 
        android:scaleType="centerCrop" 
        app:layout_collapseMode="parallax"> 

        <ImageView 
         android:id="@+id/ASD_banner_image" 
         android:layout_width="match_parent" 
         android:layout_height="@dimen/_150sdp" 
         android:scaleType="fitXY" 
         android:src="@drawable/banner1" /> 

        <TextView 
         android:id="@+id/ASD_restaurant_status" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_alignParentEnd="true" 
         android:paddingTop="@dimen/_2sdp" 
         android:paddingBottom="@dimen/_2sdp" 
         android:layout_alignParentRight="true" 
         android:layout_marginEnd="@dimen/_20sdp" 
         android:layout_marginRight="@dimen/_20sdp" 
         android:layout_marginTop="@dimen/_5sdp" 
         android:background="@drawable/btn_green_bg" 
         android:gravity="center" 
         android:paddingLeft="@dimen/_5sdp" 
         android:paddingRight="@dimen/_5sdp" 
         android:text="open" 
         android:textColor="@color/clr_white" 
         android:textSize="@dimen/_10sdp" /> 

        <RelativeLayout 
         android:id="@+id/ASD_cardlayout" 
         android:layout_width="match_parent" 
         android:layout_height="@dimen/_100sdp" 
         android:layout_marginLeft="@dimen/_20sdp" 
         android:layout_marginRight="@dimen/_20sdp" 
         android:layout_marginTop="@dimen/_100sdp" 
         android:background="@drawable/btn_bg_white_withour_radius" 
         android:elevation="@dimen/_5sdp" 
         android:orientation="vertical"> 

         <ImageView 
          android:id="@+id/ASD_iconimage" 
          android:layout_width="@dimen/_80sdp" 
          android:layout_height="@dimen/_80sdp" 
          android:layout_marginBottom="@dimen/_10sdp" 
          android:layout_marginLeft="@dimen/_15sdp" 
          android:layout_marginTop="@dimen/_10sdp" 
          android:scaleType="fitXY" 
          android:src="@drawable/ic_splash" /> 

         <TextView 
          android:id="@+id/ASD_shopname" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_marginLeft="@dimen/_20sdp" 
          android:layout_marginTop="@dimen/_10sdp" 
          android:layout_toEndOf="@+id/ASD_iconimage" 
          android:layout_toRightOf="@+id/ASD_iconimage" 
          android:text="Shop name" 
          android:textAllCaps="true" 
          android:textColor="@color/clr_block" 
          android:textSize="@dimen/TextSize_14" /> 


         <TextView 
          android:id="@+id/ASD_category" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_below="@+id/ASD_shopname" 
          android:layout_marginLeft="@dimen/_20sdp" 
          android:layout_toEndOf="@+id/ASD_iconimage" 
          android:layout_toRightOf="@id/ASD_iconimage" 
          android:text="category" 
          android:textColor="@color/clr_gray" 
          android:textSize="@dimen/TextSize_12" /> 

         <TextView 
          android:id="@+id/ASD_minorder" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_below="@+id/ASD_category" 
          android:layout_marginLeft="@dimen/_20sdp" 
          android:layout_toEndOf="@+id/ASD_iconimage" 
          android:layout_toRightOf="@id/ASD_iconimage" 
          android:text="Mins.Order" 
          android:textColor="@color/clr_gray" 
          android:textSize="@dimen/TextSize_12" /> 

         <LinearLayout 
          android:layout_width="match_parent" 
          android:layout_height="match_parent" 
          android:layout_below="@+id/ASD_minorder" 
          android:layout_marginBottom="@dimen/_10sdp" 
          android:layout_marginLeft="@dimen/_20sdp" 
          android:layout_toRightOf="@+id/ASD_iconimage" 
          android:orientation="horizontal"> 

          <ImageView 
           android:layout_width="@dimen/_20sdp" 
           android:layout_height="@dimen/_20sdp" 
           android:layout_marginEnd="@dimen/_5sdp" 
           android:layout_marginRight="@dimen/_5sdp" 
           android:scaleType="fitXY" 
           android:src="@drawable/ic_kd_money" /> 

          <ImageView 
           android:layout_width="@dimen/_20sdp" 
           android:layout_height="@dimen/_20sdp" 
           android:layout_marginEnd="@dimen/_5sdp" 
           android:layout_marginRight="@dimen/_5sdp" 
           android:src="@drawable/ic_knet" /> 

          <ImageView 
           android:layout_width="@dimen/_20sdp" 
           android:layout_height="@dimen/_20sdp" 
           android:layout_marginEnd="@dimen/_5sdp" 
           android:layout_marginRight="@dimen/_5sdp" 
           android:src="@drawable/ic_visa" /> 

          <ImageView 
           android:layout_width="@dimen/_20sdp" 
           android:layout_height="@dimen/_20sdp" 
           android:layout_marginEnd="@dimen/_5sdp" 
           android:layout_marginRight="@dimen/_5sdp" 
           android:src="@drawable/ic_mastercard" /> 
         </LinearLayout> 


        </RelativeLayout> 


        <RatingBar 
         android:id="@+id/AVL_rating" 
         style="?android:attr/ratingBarStyleSmall" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_below="@+id/ASD_cardlayout" 
         android:layout_centerHorizontal="true" 
         android:layout_marginTop="@dimen/_10sdp" 
         android:isIndicator="true" 
         android:numStars="5" 
         android:rating="5.0" 
         android:secondaryProgressTint="@color/clr_red" 
         android:stepSize="1.0" /> 

        <TextView 
         android:id="@+id/ASD_rating_count" 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:layout_alignTop="@+id/AVL_rating" 
         android:layout_marginLeft="@dimen/_10sdp" 
         android:layout_marginStart="@dimen/_10sdp" 
         android:layout_toEndOf="@+id/AVL_rating" 
         android:layout_toRightOf="@+id/AVL_rating" 
         android:text="4000 KD" 
         android:textColor="@color/clr_block" 
         android:textSize="@dimen/TextSize_12" /> 

       </RelativeLayout> 

       <android.support.v7.widget.Toolbar 
        android:id="@+id/toolbar" 
        android:layout_width="match_parent" 
        android:layout_height="1dp" 
        android:background="@android:color/transparent" 
        android:gravity="top" 
        android:minHeight="?attr/actionBarSize" 
        app:layout_collapseMode="pin" /> 


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

     </android.support.design.widget.AppBarLayout> 
+2

質の高い回答を提供するために、この[回答方法​​](http://stackoverflow.com/help/how-to-answer)をお読みください。解決策を説明する回答と比較した場合、あなたのようなコードのみの回答はあまり評価されません。 – thewaywewere

+0

してください!答えを説明してください。コードを削除して答えをコミットしないでください!!! – IgniteCoders

関連する問題