Android - 將4張圖片放在2x2的網格中

我在XML中有4張圖片，我想在我的RelativeLayout中以2×2的網格顯示它們，我希望同一行中的圖片能夠平均佔用寬度。我試圖使用wrap_content，但它沒有工作，圖像沒有顯示，我想避免設置一個固定的寬度/高度（如下面的代碼），因爲屏幕尺寸的差異。Android - 將4張圖片放在2x2的網格中

<RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:focusable="false" 
      android:orientation="vertical"> 
      <com.facebook.drawee.view.SimpleDraweeView 
       android:id="@+id/picture" 
       android:layout_height="140dp" 
       android:layout_width="140dp" 
       fresco:viewAspectRatio="1" 
       fresco:fadeDuration="300" 
       fresco:actualImageScaleType="focusCrop" 
       fresco:failureImage="@android:color/transparent" 
       fresco:placeholderImage="@android:color/transparent" 
       fresco:progressBarAutoRotateInterval="1000" 
       fresco:progressBarImage="@drawable/loading_circle" 
       fresco:progressBarImageScaleType="centerInside"/> 
      <com.facebook.drawee.view.SimpleDraweeView 
       android:id="@+id/picture2" 
       android:layout_height="140dp" 
       android:layout_width="140dp" 
       android:layout_toRightOf="@id/picture" 
       fresco:viewAspectRatio="1" 
       fresco:fadeDuration="300" 
       fresco:actualImageScaleType="focusCrop" 
       fresco:failureImage="@android:color/transparent" 
       fresco:placeholderImage="@android:color/transparent" 
       fresco:progressBarAutoRotateInterval="1000" 
       fresco:progressBarImage="@drawable/loading_circle" 
       fresco:progressBarImageScaleType="centerInside"/> 
      <com.facebook.drawee.view.SimpleDraweeView 
       android:id="@+id/picture3" 
       android:layout_height="140dp" 
       android:layout_width="140dp" 
       android:layout_below="@id/picture" 
       fresco:viewAspectRatio="1" 
       fresco:fadeDuration="300" 
       fresco:actualImageScaleType="focusCrop" 
       fresco:failureImage="@android:color/transparent" 
       fresco:placeholderImage="@android:color/transparent" 
       fresco:progressBarAutoRotateInterval="1000" 
       fresco:progressBarImage="@drawable/loading_circle" 
       fresco:progressBarImageScaleType="centerInside"/> 
      <com.facebook.drawee.view.SimpleDraweeView 
       android:id="@+id/picture4" 
       android:layout_height="140dp" 
       android:layout_width="140dp" 
       android:layout_toRightOf="@id/picture3" 
       android:layout_below="@id/picture2" 
       fresco:viewAspectRatio="1" 
       fresco:fadeDuration="300" 
       fresco:actualImageScaleType="focusCrop" 
       fresco:failureImage="@android:color/transparent" 
       fresco:placeholderImage="@android:color/transparent" 
       fresco:progressBarAutoRotateInterval="1000" 
       fresco:progressBarImage="@drawable/loading_circle" 
       fresco:progressBarImageScaleType="centerInside"/> 
</RelativeLayout>

來源

2017-10-17 Marcos Guimaraes

我設法通過使用兩個LinearLayouts做到這一點：

<RelativeLayout 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:focusable="false"> 
      <LinearLayout 
       android:id="@+id/btnLL" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content"> 
      <com.facebook.drawee.view.SimpleDraweeView 
       android:id="@+id/picture" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       fresco:viewAspectRatio="1" 
       fresco:fadeDuration="300" 
       fresco:actualImageScaleType="focusCrop" 
       fresco:failureImage="@android:color/transparent" 
       fresco:placeholderImage="@android:color/transparent" 
       fresco:progressBarAutoRotateInterval="1000" 
       fresco:progressBarImage="@drawable/loading_circle" 
       fresco:progressBarImageScaleType="centerInside"/> 
      <com.facebook.drawee.view.SimpleDraweeView 
       android:id="@+id/picture2" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:layout_toRightOf="@id/picture" 
       fresco:viewAspectRatio="1" 
       fresco:fadeDuration="300" 
       fresco:actualImageScaleType="focusCrop" 
       fresco:failureImage="@android:color/transparent" 
       fresco:placeholderImage="@android:color/transparent" 
       fresco:progressBarAutoRotateInterval="1000" 
       fresco:progressBarImage="@drawable/loading_circle" 
       fresco:progressBarImageScaleType="centerInside"/> 
      </LinearLayout> 
      <LinearLayout 
       android:id="@+id/btnLL1" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_below="@id/btnLL"> 
      <com.facebook.drawee.view.SimpleDraweeView 
       android:id="@+id/picture3" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:layout_below="@id/picture" 
       fresco:viewAspectRatio="1" 
       fresco:fadeDuration="300" 
       fresco:actualImageScaleType="focusCrop" 
       fresco:failureImage="@android:color/transparent" 
       fresco:placeholderImage="@android:color/transparent" 
       fresco:progressBarAutoRotateInterval="1000" 
       fresco:progressBarImage="@drawable/loading_circle" 
       fresco:progressBarImageScaleType="centerInside"/> 
      <com.facebook.drawee.view.SimpleDraweeView 
       android:id="@+id/picture4" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_weight="1" 
       android:layout_toRightOf="@id/picture3" 
       android:layout_below="@id/picture2" 
       fresco:viewAspectRatio="1" 
       fresco:fadeDuration="300" 
       fresco:actualImageScaleType="focusCrop" 
       fresco:failureImage="@android:color/transparent" 
       fresco:placeholderImage="@android:color/transparent" 
       fresco:progressBarAutoRotateInterval="1000" 
       fresco:progressBarImage="@drawable/loading_circle" 
       fresco:progressBarImageScaleType="centerInside"/> 
      </LinearLayout> 
      </RelativeLayout>

來源

2017-10-17 23:31:22

的RelativeLayout的本身成爲這種不必要的，雖然，你可以只用唯一linearlayouts做到這一點。如果你想使用relativelayout，那麼你可以在relativelayout（居中）的中間添加一個空視圖，並將其他視圖與其相關。另一種方法是使用PercentRelativeLayout，但它僅在23中添加，並在26中棄用！ https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html –

Android - 將4張圖片放在2x2的網格中

回答

相關問題