我需要这样的设计,但我面临两个问题

时间:2019-09-10 17:21:03

标签: java android android-layout

我需要一个具有以下项目设计的列表视图模板

enter image description here

我尝试了一些找到的代码,但是没有得到所需的结果。

  <item
    android:bottom="-32dp"
    android:left="-3dp"
    android:right="-2dp"
    android:top="2dp">
    <shape android:shape="rectangle" >
        <corners android:radius="32dp"/>
        <stroke
            android:width="2dp"
            android:color="#fff" />

        <solid android:color="@android:color/transparent" />

        <padding
            android:bottom="10dp"
            android:left="10dp"
            android:right="10dp"
            android:top="0dp" />
    </shape>
</item>

这是我的线性布局背景。

2 个答案:

答案 0 :(得分:0)

您可以使用该形状创建一个9-patch图像,而不用使用xml drawable。

在您喜欢的图像编辑器中创建该形状,然后将其复制到项目的drawable目录中。

  1. 在Android Studio中,右键单击您要用来创建NinePatch图像的PNG图像,然后单击“创建9补丁文件”。
  2. 为您的NinePatch图像键入一个文件名,然后单击“确定”。您的图片将以.9.png文件扩展名创建。
  3. 双击新的NinePatch文件以在Android Studio中将其打开。现在,您的工作区将打开。 左窗格是您的绘图区域,您可以在其中编辑可拉伸补丁和内容区域的线。右侧窗格是预览区域,您可以在拉伸时预览图形。
  4. 在1像素周长内单击以绘制定义可拉伸色块和(可选)内容区域的线。右键单击(或在Mac上按住Shift并单击)以删除先前绘制的线条。
  5. 完成后,单击文件>保存以保存更改。

答案 1 :(得分:0)

尽管我们可以为此或使用png来获取此。 但是,如果您真的要执行此可绘制操作,则在此处编写代码。

我尝试过,结果也差不多。

我使用两个图层列表创建了一个drawable,其中包含两个不同的矩形。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:bottom="10dip">
    <shape
        android:shape="rectangle"
        android:useLevel="false">
        <corners android:radius="12dp" />
        <stroke
            android:width="2dp"
            android:color="#ffffff" />

        <size
            android:width="60dp"
            android:height="60dp" />

        <solid android:color="@android:color/transparent" />

    </shape>
</item>
<item android:top="20dip">
    <shape android:shape="rectangle">
        <solid android:color="#800080" />
    </shape>
</item>

您可以在视图中将此用作背景。我已经在我的系统中使用过此功能,因此我要添加项目视图的代码。 Here how it looks

<?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="wrap_content"
android:background="#800080">

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/text_18"
    android:background="@drawable/sample">

    <TextView
        android:id="@+id/crime_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="16dp"
        android:text="Crime Title"
        android:textColor="@color/colorAccent"
        android:textSize="18sp"
        app:layout_constraintEnd_toStartOf="@+id/crime_solved"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/crime_date"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:paddingBottom="8dp"
        android:text="Crime Date"
        android:textColor="@color/colorAccent"
        app:layout_constraintEnd_toEndOf="@id/crime_title"
        app:layout_constraintStart_toStartOf="@id/crime_title"
        app:layout_constraintTop_toBottomOf="@+id/crime_title" />


    <ImageView
        android:id="@+id/crime_solved"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintBottom_toBottomOf="@+id/crime_date"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/crime_title"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/ic_solved" />
</android.support.constraint.ConstraintLayout>

希望这会有所帮助。