2017-01-01 25 views
-1

我想在片段的頂部添加一個圖像,它應該在滾動查看圖像細節時具有視差效果。如何在一個片段中添加圖像,帶有視差效果?

Something like this

我試圖讓這個使用可摺疊工具欄,但問題是圖像不填充整個工具欄上橫着留下空白,如果圖像是肖像模式。也沒有視差。

這是我到目前爲止所做的xml代碼。

<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/coordinatorlayout" 
    android:layout_width="fill_parent" 
    android:layout_height="match_parent" 
    app:expandedTitleMarginStart="70dp"> 

    <android.support.design.widget.AppBarLayout 
     android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
     android:layout_width="fill_parent" 
     android:id="@+id/actionbarlayout" 
     android:layout_height="207dp"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/CollapsingToolbarLayout1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:contentScrim="@color/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      > 

      <ImageView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:scaleType="centerInside" 
       android:id="@+id/details_Image" 
       app:layout_collapseMode="parallax" 
       /> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar1" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
       app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
       app:layout_collapseMode="pin" 
       android:minHeight="?attr/actionBarSize"/> 

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



     <LinearLayout 
      android:layout_width="fill_parent" 
      android:layout_height="wrap_content" 
      android:orientation="vertical"> 

      <android.support.v7.widget.CardView 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       card_view:cardElevation="3dp" 
       card_view:cardCornerRadius="7dp" 
       android:layout_margin="5dp" 
       android:id="@+id/new_order" 
       card_view:cardBackgroundColor="@color/cardview_shadow_end_color" 
       > 

       <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:orientation="vertical"> 

        <RelativeLayout 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content"> 

         <LinearLayout 
          android:layout_width="match_parent" 
          android:layout_height="wrap_content" 
          android:gravity="center" 
          android:orientation="horizontal" 
          android:layout_marginTop="15dp"> 

          <RelativeLayout 
           android:layout_width="match_parent" 
           android:layout_height="match_parent" 
           android:layout_weight="1"> 

           <ImageButton 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:id="@+id/download" 
            android:background="@null" 
            android:src="@drawable/ic_action_ic_file_download_white_36dp" 
            android:layout_centerInParent="true" 
            /> 

          </RelativeLayout> 
          <RelativeLayout 
           android:layout_width="match_parent" 
           android:layout_height="match_parent" 
           android:layout_weight="1"> 

           <ImageView 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:id="@+id/favourite" 
            android:layout_centerInParent="true" 
            /> 

          </RelativeLayout> 
          <RelativeLayout 
           android:layout_width="match_parent" 
           android:layout_height="match_parent" 
           android:layout_weight="1"> 


           <ImageButton 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:id="@+id/zoom" 
            android:background="@null" 
            android:src="@drawable/ic_action_ic_zoom_out_map_white_36dp" 
            android:layout_centerInParent="true" 
            /> 

          </RelativeLayout> 



         </LinearLayout> 

        </RelativeLayout> 

        <ScrollView 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:layout_margin="20dp"> 

         <TextView 
          android:layout_width="match_parent" 
          android:layout_height="wrap_content" 
          android:id="@+id/imageDescription" 
          android:text="Sample text" 

          /> 



        </ScrollView> 


       </LinearLayout> 

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

     </LinearLayout> 

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

    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="center" 
     android:visibility="gone" 
     android:id="@+id/fullimage"/> 

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

This is what it looks like now.

請建議我什麼樣的變化,我需要,以達到我想要的東西做,非常感謝你在先進。

+0

使用'match_parent'爲ImageView的和'centerCrop'爲規模型。 – AlphaQ

+0

謝謝,但它不是那樣工作。 – User9132

回答

1

使用android:scaleType="centerCrop"ImageView

+0

不,它不工作,是否可以因爲對可摺疊工具欄的最大高度有任何限制? – User9132

+0

當你使用那個UI時,你會得到什麼樣的UI ....我在這裏使用了('CollapsingToolbarLayout'和'android:scaleType =「centerCrop」',它正在工作)。 –

+0

@ User9132將imageView的layout_height設置爲match_parent和scaleType作爲centerCrop –

相關問題