我如何在android中執行此佈局

Question

任何人都有想法，我該如何做這個GridView？

我認爲它的ImageView與頂部圓潤的背景下，但圖像的底部？我沒有想法。

這是我的代碼：

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:bootstrapbutton="http://schemas.android.com/apk/res-auto" 
    android:orientation="horizontal" 
    android:id="@+id/panel_content" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:descendantFocusability="blocksDescendants" 
    android:background="#686868"> 

    <RelativeLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:background="#686868"> 

     <com.etsy.android.grid.util.DynamicHeightImageView 
      android:id="@+id/grid_item_image" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_alignParentStart="true" 
      android:focusableInTouchMode="false" 
      android:layout_above="@+id/linearLayout" 
      android:layout_marginBottom="8dp" 
      android:scaleType="fitCenter" 
      android:background="@drawable/shadow" /> 

     <com.beardedhen.androidbootstrap.BootstrapButton 
      android:id="@+id/btnDeletePhoto" 
      bootstrapbutton:bb_size="small" 
      android:layout_width="wrap_content" 
      bootstrapbutton:bb_icon_right="fa-trash-o" 
      bootstrapbutton:bb_type="danger" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center|right" 
      android:layout_margin="4dp" 
      android:layout_alignParentTop="true" 
      android:layout_alignParentRight="true" /> 

     <LinearLayout 
      android:orientation="horizontal" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="right|bottom" 
      android:layout_toEndOf="@id/grid_item_image" 
      android:layout_alignParentEnd="false" 
      android:layout_alignParentRight="true" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentBottom="true" 
      android:layout_centerHorizontal="true" 
      android:background="@drawable/bg_card" 
      android:id="@+id/linearLayout" 
      android:gravity="end" 
      android:weightSum="1"> 

      <com.etsy.android.grid.util.DynamicHeightTextView 
       android:id="@+id/photoDesc" 
       android:layout_width="wrap_content" 
       android:layout_height="match_parent" 
       android:text="Descrpciooon blablabla" 
       android:textColor="#9A9A9A" 
       android:maxLength="15" 
       android:padding="4dp" 
       android:singleLine="true" 
       android:textStyle="bold" 
       android:layout_alignParentBottom="true" 
       android:layout_centerHorizontal="true" 
       android:layout_marginTop="1dp" 
       android:layout_weight="1" /> 

     </LinearLayout> 

    </RelativeLayout> 

</FrameLayout> 

這是我的結果：

我需要的東西XML做我的例子中的類似底部。 任何人都有這樣的例子嗎？我嘗試使用card-ui xml佈局，但它不是這樣。 謝謝。

Answer 1

您需要創建兩個圓角背景的Layout。頂部佈局僅在頂部和底部佈局中僅在底部角落具有圓角。在頂部佈局內添加所有內部視圖（圖片和文字）。 bottom layout背景color應該匹配主要GridView layout，這樣你纔會得到陰影的感覺。

<LinearLayout 
xmlns:android="http://schemas.android.com/apk/res/android" 
android:orientation="vertical" 
android:layout_width="fill_parent" 
android:layout_height="wrap_content"> 
<LinearLayout 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent" 
    android:layout_marginLeft="10dp" 
    android:layout_marginRight="10dp" 
    android:background="@drawable/grid_item_bg"> 
</LinearLayout> 
<LinearLayout 
    android:layout_height="2dp" 
    android:layout_width="fill_parent" 
    android:layout_marginLeft="10dp" 
    android:layout_marginRight="10dp" 
    android:background="@drawable/bottom_border"></LinearLayout> 
</LinearLayout> 

創建grid_item_bg可繪製爲

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle"> 
    <solid android:color="@color/White"></solid> 
    <corners android:topRightRadius="2dp" android:topLeftRadius="2dp"></corners> 
</shape> 

和底部可繪製爲

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle"> 
<corners android:bottomLeftRadius="2dp" android:bottomRightRadius="2dp"></corners> 
<gradient android:startColor="@color/DimGray" android:endColor="@color/DimGray"></gradient> 
</shape> 

Answer 2

創建活動佈局文件作爲GridView與所需的填充和間距和android:numColumns="2"

<GridView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:horizontalSpacing="10dp" 
    android:verticalSpacing="10dp" 
    android:padding="10dp" 
    android:numColumns="2"> 
</GridView> 

創建一個shape爲圓角。

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <corners android:radius="10dp" /> 
</shape> 

與android:orientation="vertical"和android:background="@drawable/shape"

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:background="@drawable/shape"> 
    <ImageView 
     android:id="@+id/grid_item_image" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 
    </ImageView> 
    <TextView 
     android:id="@+id/grid_item_label" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 
    </TextView> 
</LinearLayout> 

Answer 3

創建圖像和標題佈局LinearLayout你可以試試這個例子中，它會解決你的問題。

http://www.androidviews.net/2013/01/pinterest-like-adapterview/