如何设计带边框的圆角布局并将其子项固定在边框内

时间:2018-01-16 07:29:34

标签: android xml

我需要在Android中设计此按钮 How to design this in android?

我无法修复' x'父布局边框内的图标。

这是我的roundview的布局(textview_filter_sortby.xml):

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke
        android:width="1dp"
        android:color="#636363" />

    <solid android:color="#ffffff" />


    <corners android:radius="5dp" />
</shape>

这是我尝试过的:

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clipChildren="true"
    android:clipToPadding="true"
    android:padding="1dp"
    android:background="@drawable/textview_filter_sort_by">
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:text="India"
        android:id="@+id/name"/>
    <ImageView
        android:layout_width="20dp"
        android:layout_height="30dp"
        android:layout_toEndOf="@+id/name"
        android:background="#cbcbcb"/>
</RelativeLayout>
</FrameLayout>

我得到了这个结果:
My result

3 个答案:

答案 0 :(得分:0)

在drawable文件夹中创建资源文件,并将此代码粘贴到创建的文件中。它将围绕按钮

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@android:color/transparent" />
<stroke
    android:width="1dip"
    android:color="#FFFFFF" />
</shape>

在按钮标签的xml中使用background =“@ drawable / yourdrawable”

下一步:

像这样使用drawableRight属性到你的按钮。

android:drawableRight="@drawble/your_image"

如果要为drawable提供填充,请使用

android:drawablePadding="10dp"

答案 1 :(得分:0)

您需要检查Shape Drawables

在布局文件中定义TextView并将背景设置为自定义形状

e.g。

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/rounder_rectangle"
    android:text="@string/hello" />

rounder_rectangle.xml 将此内容放入 / drawable 文件夹

<?xml version="1.0" encoding="UTF-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
        android:width="2dp"
        android:color="#FFFFFFFF" />
    <gradient
        android:endColor="#DDBBBBBB"
        android:startColor="#DD777777"
        android:angle="90" />
    <corners
        android:bottomRightRadius="7dp"
        android:bottomLeftRadius="7dp"
        android:topLeftRadius="7dp"
        android:topRightRadius="7dp" />
</shape>

根据您的要求,您需要将代码修改为

<RelativeLayout
    android:padding="5dp"
    android:background="@drawable/rounder_rectangle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="5dp"
        android:text="India"
        android:id="@+id/name"/>
    <ImageView
        android:layout_width="20dp"
        android:layout_height="30dp"
        android:layout_toEndOf="@+id/name"
        android:background="#cbcbcb"/>
</RelativeLayout>

答案 2 :(得分:0)

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


    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="@dimen/dimen_40dp"
        android:background="@drawable/shape_border_rectangle">

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

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:background="@android:color/transparent"
                android:padding="@dimen/dimen_10dp"
                android:text="helloasdasdas" />
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/rl_cancel"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_toRightOf="@+id/rl_text"
            android:background="@drawable/shape_rect"
            android:padding="@dimen/dimen_10dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@mipmap/close" />
        </RelativeLayout>
    </RelativeLayout>


</RelativeLayout>

<强> shapes1

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

    <corners
        android:bottomRightRadius="@dimen/dimen_10dp"
        android:topRightRadius="@dimen/dimen_10dp" />
</shape>

<强>形状英语

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorCardBackGround" />
    <stroke
        android:width="@dimen/dimen_1dp"
        android:color="@color/colorCardBackGround" />
    <corners android:radius="@dimen/dimen_10dp" />
</shape>