2016-03-15 40 views
1

我試圖把一個ImageView的一處倒塌的工具欄有沒有辦法在CollapsingToolBarLayout中正確地定位imageview?

我試圖取代FloatingActionButton這是有默認與ImageView的和以下是結果的底部

ImageView in place of FloatingActionButton

它看起來不錯,在第一,但是當我滾動出現這種情況

ImageView when scrolling up

的ImageView的不disappea或像FloatingActionButton一樣崩潰。

如何在滾動時使ImageView消失?

這裏是我的佈局

<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.kid.uimockup.UserProfileActivity"> 

<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/AppTheme.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"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_height="?attr/actionBarSize" 
      android:layout_width="match_parent" 
      app:layout_scrollFlags="scroll|enterAlways" 
      app:popupTheme="@style/AppTheme.PopupOverlay"/> 

     <ImageView 
      android:src="@drawable/white" 
      android:scaleType="centerCrop" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" 
      app:layout_collapseMode="parallax" 
      android:minHeight="100dp"/> 

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

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

    //I want to anchor this 
    <de.hdodenhof.circleimageview.CircleImageView 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:layout_margin="7dp" 
     android:src="@drawable/breaking_bad" 
     app:layout_anchor="@id/app_bar" 
     app:layout_anchorGravity="bottom|end"/> 

</android.support.design.widget.CoordinatorLayout> 
+0

你可以分享你的代碼? – Zaki

+0

@Zaki剛剛在佈局代碼中編輯 – kidustiliksew

回答

0

你需要的是一個CoordinatorLayout.Behavior的自定義實現。

我基於FloatingActionButton實現基於FloatingActionButton實現快速實現,以便在錨定到AppBarLayout時顯示/隱藏。您可以看到該代碼爲here。請注意軟件包名稱 - 您需要在該軟件包中使用該軟件,以使用Behavior中的某些util方法。

要將Behavior添加到您的CircleImageView您執行以下操作:

// your image view here 
CircleImageView imageView = (CircleImageView) findViewById(R.id.circle_image_view); 

CoordinatorLayout.LayoutParams params = 
    (CoordinatorLayout.LayoutParams) imageView.getLayoutParams(); 
params.setBehavior(new CircleImageViewBehavior()); 

現在,當您滾動足夠遠向上/向下CircleImageView應顯示或隱藏。如果您希望使用FloatingActionButton這樣的動畫,則可以查看該實現來創建類似的動畫。

希望這會有所幫助。

+0

不確定這是一個愚蠢的問題,但android.support.design.widget包的確切位置? – kidustiliksew

+0

您可以從項目的src/main/java'文件夾中自行創建包和文件。所以它的路徑是'src/main/java/android/support/design/widget/CircleImageViewBehavior.java'。 –

0

變化

app:layout_scrollFlags="scroll|exitUntilCollapsed" 
Coordinatorlayout

app:layout_scrollFlags="scroll|enterAlwaysCollapsed" 
相關問題