創建交錯網格狀的給定圖像

我試圖實現這樣的觀點：創建交錯網格狀的給定圖像

這是局部視圖，我可以有視圖用2個細胞的垂直合併或水平合併2個細胞或單小視圖。

此視圖可以垂直滾動

請幫我搞定。

來源

2017-04-14 Amit Sharma

結帳以下鏈接：http://abhiandroid.com/materialdesign/recyclerview-as-staggered-grid-example.html –

@sapna，我已經檢查這個代碼視圖只被安排垂直但你可以檢查我有垂直同步視圖以及水平 –

希望這有助於：https://inducesmile.com/android/android-staggeredgridlayoutmanager-example-tutorial/ –

您可以使用嵌套LinearLayout以及屬性layout_weight和weightSum來創建此佈局。要使此佈局scrollable，使用ScrollView作爲根佈局。

下面是一個工作示例：

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

    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:layout_margin="8dp" 
     android:orientation="vertical"> 

     <!-- ROW1 --> 
     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="100dp" 
      android:background="#ff0000"> 

     </LinearLayout> 

     <!-- ROW2 --> 
     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="8dp" 
      android:orientation="horizontal" 
      android:weightSum="2"> 

      <!-- ROW2 COL1--> 
      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="200dp" 
       android:layout_marginRight="4dp" 
       android:layout_weight="1" 
       android:background="#00ff00"> 

      </LinearLayout> 

      <!-- ROW2 COL2--> 
      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="4dp" 
       android:orientation="vertical" 
       android:layout_weight="1" 
       android:weightSum="2"> 

       <!-- ROW2 COL2 CHILD1--> 
       <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="96dp" 
        android:layout_marginBottom="4dp" 
        android:layout_weight="1" 
        android:background="#0000ff"> 

       </LinearLayout> 

       <!-- ROW2 COL2 CHILD2--> 
       <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="96dp" 
        android:layout_marginTop="4dp" 
        android:layout_weight="1" 
        android:background="#0000ff"> 

       </LinearLayout> 
      </LinearLayout> 
     </LinearLayout> 

     <!-- ROW3 --> 
     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="8dp" 
      android:orientation="horizontal" 
      android:weightSum="2"> 

      <!-- ROW3 COL1--> 
      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="100dp" 
       android:layout_marginRight="4dp" 
       android:layout_weight="1" 
       android:background="#fff000"> 

      </LinearLayout> 

      <!-- ROW3 COL2--> 
      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="100dp" 
       android:layout_marginLeft="4dp" 
       android:layout_weight="1" 
       android:background="#fff000"> 

      </LinearLayout> 
     </LinearLayout> 

     <!-- ROW4 --> 
     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginTop="8dp" 
      android:orientation="horizontal" 
      android:weightSum="2"> 

      <!-- ROW4 COL1--> 
      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="200dp" 
       android:layout_marginRight="4dp" 
       android:layout_weight="1" 
       android:background="#ff00ff"> 

      </LinearLayout> 

      <!-- ROW4 COL2--> 
      <LinearLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:layout_marginLeft="4dp" 
       android:orientation="vertical" 
       android:layout_weight="1" 
       android:weightSum="2"> 

       <!-- ROW4 COL2 CHILD1--> 
       <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="96dp" 
        android:layout_marginBottom="4dp" 
        android:layout_weight="1" 
        android:background="#00ffff"> 

       </LinearLayout> 

       <!-- ROW4 COL2 CHILD2--> 
       <LinearLayout 
        android:layout_width="match_parent" 
        android:layout_height="96dp" 
        android:layout_marginTop="4dp" 
        android:layout_weight="1" 
        android:background="#00ffff"> 

       </LinearLayout> 
      </LinearLayout> 
     </LinearLayout> 

    </LinearLayout> 
</ScrollView>

OUTPUT：

您還可以使用GridLayout實現了這一觀點。

這是一個很好的tutorial約GridLayout和一些stackOverflow answers。

希望這將有助於〜

來源

2017-04-19 17:09:19 FAT

創建交錯網格狀的給定圖像

回答

相關問題