我怎么能在android中做这个布局

时间:2014-04-26 23:25:20

标签: android android-layout

任何人都知道我该怎么做这个gridview?

我认为它的背景为圆顶的图像视图,但是图像的底部?我不知道。

这是我的代码:

<?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>

这是我的结果:

enter image description here

我需要一些xml来做我的例子中类似的底部。 有没有像这样的例子?我尝试使用card-ui xml布局,但它不是这样的。 感谢。

3 个答案:

答案 0 :(得分: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 drawable as

 <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>

答案 1 :(得分:0)

将活动布局文件创建为 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>

使用LinearLayoutandroid: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>

答案 2 :(得分:0)

你可以试试这个例子,它会解决你的问题。

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