如何在Android中實現此特定設計（展開/加權子視圖）？

不過，我不知道我怎麼能告訴左側視圖將增長到至少一個最小高度，但也可以作爲正確的看法。這是我所得到的，當我設置高度爲「match_parent」和「了minHeight」：

正如你所看到的圖像查看被修剪的第一個項目。當我使用「WRAP_CONTENT」，一切都來自左，右視圖中顯示，但我不能得到我想要的設計（圖表底部放，與圖像之間的空白空間）：

我錯過了什麼？這是用於列表項目的XML佈局：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:orientation="vertical"> 

    <LinearLayout 
     android:id="@+id/list_item_main" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     android:padding="4dp"> 

     <LinearLayout 
      android:id="@+id/list_item_left_layout" 
      android:layout_width="wrap_content" 
      android:layout_height="match_parent" 
      android:minHeight="98dp" 
      android:orientation="vertical"> 

      <ImageView 
       android:id="@+id/avatar" 
       android:layout_width="40dp" 
       android:layout_height="40dp" 
       android:src="@drawable/avatar"/> 

      <LinearLayout 
       android:id="@+id/list_item_overlay_layout" 
       android:layout_width="wrap_content" 
       android:layout_height="0dp" 
       android:layout_weight="1" 
       android:gravity="bottom" 
       android:orientation="vertical"> 

       <ImageView 
        android:id="@+id/chart" 
        android:layout_width="40dp" 
        android:layout_height="58dp" 
        android:src="@drawable/chart"/> 

      </LinearLayout> 

     </LinearLayout> 

     <TextView 
      android:id="@+id/item_text" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
      android:maxLines="8" 
      android:paddingLeft="8dp" 
      android:paddingRight="8dp"/> 

    </LinearLayout> 

</LinearLayout>

來源

2015-12-02 n0rm1e

對於加入「空的空間」，在'LinearLayout' ，我會建議添加一個簡單的「空」View「對象與所需的間距屬性。否則，你可以嘗試使用新的[PercentRelativeLayout]（http://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html）（如果你想有特定的寬度）或者使用RelativeLayout來提高性能並避免嵌套佈局。 – yennsarah

看看這個：http://stackoverflow.com/questions/29956014/why-should-we-use-xml-layouts – Nanoc

您可以在設計中使用以下代碼。

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:background="#FFF" 
android:orientation="vertical"> 

<RelativeLayout 
    android:id="@+id/list_item_main" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 

    android:orientation="horizontal" 
    android:padding="4dp"> 

    <RelativeLayout 

     android:id="@+id/relativeLayout" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_toEndOf="@+id/list_item_left_layout" 
     android:layout_toRightOf="@+id/list_item_left_layout" 
     android:minHeight="98dp" 
     android:orientation="vertical"> 

     <TextView 
      android:id="@+id/item_text" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_alignParentTop="true" 
      android:maxLines="8" 
      android:paddingLeft="8dp" 
      android:paddingRight="8dp" 
      android:text="111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111" 
      android:textColor="@android:color/darker_gray" /> 


    </RelativeLayout> 

    <RelativeLayout 
     android:id="@+id/list_item_left_layout" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 

     android:layout_alignBottom="@+id/relativeLayout" 
     android:orientation="vertical"> 

     <ImageView 
      android:id="@+id/avatar" 
      android:layout_width="40dp" 
      android:layout_height="40dp" 
      android:layout_alignParentTop="true" 
      android:src="@drawable/avatar" /> 


     <ImageView 
      android:id="@+id/chart" 
      android:layout_width="40dp" 
      android:layout_height="58dp" 
      android:layout_alignParentBottom="true" 
      android:src="@drawable/common_signin_btn_icon_pressed_dark" /> 

    </RelativeLayout> 


</RelativeLayout> 


</LinearLayout>

來源

2015-12-02 08:53:30

不幸的是，這也沒有工作。左側的佈局不會展開到完整的可用空間（對於兩個圖像視圖我都使用了相同的圖像，而對於更多可見性，我使用了黃色背景）：http://tinypic.com/r/dfca3m/9 – n0rm1e

不過，感謝提示。在我找到解決方案之前，在右視圖上設置最小高度可能是解決方法。 – n0rm1e

You can use Imageview.setTranslationX() or ImageView.setTranslationY() to move chart Imageview to new position. 

Making a layout expandable is explained in this article from the blog. here[enter link description here][1] 


    [1]: http://gmariotti.blogspot.in/2013/09/expand-and-collapse-animation.html 

Hope it helps ..

來源

2015-12-02 18:02:22 HourGlass

謝謝，但我沒有尋找代碼解決方案。它必須足夠簡單，以處理純XML。 – n0rm1e

我發現了一個訣竅，這要歸功於MAYUR的答案。這不是解決方案，但我可以將其用作解決方法，直到找到正確的方式。

計算左視圖的最小高度，並設置右視圖到它的 minHeight。因此，如果右側的文字太小，它仍然會使用最小數量的高度高度。
將左側佈局的高度設置爲match_parent。現在這個視圖將擴大以填充所有可用空間，如果正確的視圖增長爲更大的文本提供空間。

這是怎麼看起來像：

這裏是代碼的變化，我不得不做出：

$ diff -U 5 list_item_layout_original.xml list_item_layout.xml 
--- list_item_layout_original.xml 2015-12-03 09:13:35.000000000 +1100 
+++ list_item_layout.xml 2015-12-03 09:11:42.000000000 +1100 
@@ -45,10 +45,11 @@ 
     <TextView 
      android:id="@+id/item_text" 
      android:layout_width="0dp" 
      android:layout_height="wrap_content" 
      android:layout_weight="1" 
+   android:minHeight="98dp" 
      android:maxLines="8" 
      android:paddingLeft="8dp" 
      android:paddingRight="8dp"/> 

    </LinearLayout>

來源

2015-12-02 22:15:12 n0rm1e

如何在Android中實現此特定設計（展開/加權子視圖）？

回答

相關問題