CollapsingToolbarLayout

Question

की प्रारंभिक ऊंचाई सेट करें मैं CollapsingToolbarLayout के अंदर ImageView पर स्क्रॉल करने में सक्षम होना चाहता हूं। तो यह कैसे संभव होगा, और उस छवि दृश्य की प्रारंभिक ऊंचाई कैसे सेट करें?

मेरी छवि दृश्य ऊंचाई 280p है, गतिविधि की शुरुआत में मैं 200p दिखाना चाहता हूं और फिर मैं शेष छवि को देखने के लिए नीचे स्क्रॉल कर सकता हूं। मैंने व्हाट्सएप एप्लिकेशन में कुछ ऐसा देखा है।

यहाँ मैं क्या चाहते हैं देखने के लिए एक कड़ी है:

मेरे कोड:

<?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> 

Answer 1

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> 

Answer 2

असल 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 पहले से ही तैयार है और मापा जाता है इस विधि बुलाया जाना चाहिए । तो सही तरीका यह है कि इसे दृश्य की पोस्ट विधि के माध्यम से कॉल करना है।

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

Answer 3

बस जोड़ें:

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

CollapsingToolbarLayout में imageView करने के लिए।

आप अधिक here पा सकते हैं। अपने `NestedScrollView` पर`;

Answer 4

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