右侧有不同背景颜色的圆形列表项

时间:2015-07-27 08:27:22

标签: android-layout

这是我尝试实现的目标: enter image description here

文本量将决定列表项的大部分应该具有蓝色背景颜色。

我尝试使用选择器实现此目的但最后我得到一个蓝色方块,其中最大部分为灰色。像这样:

enter image description here

任何想法如何以简单的方式完成?即最好只使用XML。

这是我的方法(产生第二张图片):

<selector xmlns:android="http://schemas.android.com/apk/res/android"
      android:constantSize="true"
      android:variablePadding="false">

<item android:drawable="@drawable/btn_round_grey"/>

</selector>

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/activity_vertical_margin"
    android:layout_marginEnd="@dimen/activity_horizontal_margin"
    android:layout_marginStart="@dimen/activity_horizontal_margin"
    android:layout_marginTop="@dimen/activity_vertical_margin"
    android:background="@android:color/transparent"
    android:clickable="true"
    android:descendantFocusability="blocksDescendants"
    tools:background="@drawable/btn_round_grey"
    >

<RelativeLayout
        android:id="@+id/grey"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />

    <FrameLayout
            android:id="@+id/text_container"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_alignBottom="@id/grey"
            android:layout_alignParentEnd="true"
            android:layout_alignParentStart="false"
            android:layout_alignParentTop="true"
            android:padding="@dimen/list_item_padding"
            >

        <TextView
                android:id="@+id/text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="@dimen/list_item_padding"
                android:background="@android:color/transparent"
                android:text="TEXT"
                />
    </FrameLayout>

</RelativeLayout>

1 个答案:

答案 0 :(得分:2)

您可以通过以下代码

获得所需的输出
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="@dimen/activity_vertical_margin"
    android:layout_marginEnd="@dimen/activity_horizontal_margin"
    android:layout_marginStart="@dimen/activity_horizontal_margin"
    android:layout_marginTop="@dimen/activity_vertical_margin"
    android:background="@drawable/roundcorner_selector"
    android:clickable="true"
    android:descendantFocusability="blocksDescendants" >

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="@drawable/half_roundcorner_selector"
        android:padding="10dp"
        android:text="TEdasdadaXT" />

</RelativeLayout>

roundcorner_selector:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <corners android:radius="10dp" />

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

</shape>

half_roundcorner_selector:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <corners
        android:bottomRightRadius="10dp"
        android:topRightRadius="10dp" />

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

</shape>

您可以根据自己的要求对其进行修改。

在您的代码中,您需要为TextView设置自定义drawable。因为通过将颜色设置为背景,它将采用方形。