如何在Android中实现这个UI?

如何在Android中实现这个UI?,android,android-layout,user-interface,Android,Android Layout,User Interface,在我的一个应用程序中,我需要为线性布局创建一个边框,如下所示 我不想有一个图像,并设置为背景。因为那时我需要为不同的设备创建不同大小的图像 如果我使用线性布局创建布局,并使用绝对定位放置textview,那么在不同的设备中,它可能看起来不像预期的那样 那么,实现这个UI的最佳方式是什么 使用RelativeLayout。首先创建一个带有边界的编辑文本框。然后使用RelativeLayout放置TextView-调整TextView上的边距和填充,以达到所需效果。现在我知道你说过,为了避免创建多

在我的一个应用程序中,我需要为线性布局创建一个边框,如下所示

我不想有一个图像,并设置为背景。因为那时我需要为不同的设备创建不同大小的图像

如果我使用线性布局创建布局,并使用绝对定位放置textview,那么在不同的设备中,它可能看起来不像预期的那样


那么,实现这个UI的最佳方式是什么

使用
RelativeLayout
。首先创建一个带有边界的编辑文本框。然后使用
RelativeLayout
放置
TextView
-调整
TextView
上的
边距和
填充
,以达到所需效果。

现在我知道你说过,为了避免创建多个图像,你不想仅仅将该图像设置为背景,但是你听说过吗。在我听说这是一个很棒的网站之前,我讨厌处理资源(尤其是九个补丁)

只需使用此站点并上传该图像,然后为您的图像创建一个补丁文件。我建议将可伸缩区域设置为一个小的正方形,在你的图像中间,然后Android资产工作室将完成其余的工作。p> 一旦你完成了所有这些,你只想让它成为你的EditText的背景,而不是RelativeLayout,但这取决于你决定什么在你的UI中看起来最好

如果要将其设置为EditText的背景,xml将如下所示:

<EditText
    android:id="@+id/textView1"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_alignLeft="@+id/relativeLayout1"
    android:background="@android:drawable/imageFile"
     />

试试这个

main_layout.xml

<?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="match_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@drawable/Layout_selector"
            android:orientation="vertical" >
        </LinearLayout>

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MyText"
            android:layout_marginLeft="50dp"
            android:padding="1dp"
            android:background="#fff"
            android:textAppearance="?android:attr/textAppearanceMedium" />

    </FrameLayout>

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

    <item android:state_enabled="true"
            android:state_pressed="true">
        <shape android:padding="5dp" android:shape="rectangle">
            <solid android:color="#FFF" />
            <stroke android:width="0.5dp" android:color="#29166f" />
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:state_enabled="true" android:state_focused="true">
        <shape android:padding="5dp" android:shape="rectangle">
            <solid android:color="#FFF" />
            <stroke android:width="0.5dp" android:color="#29166f" />
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:state_enabled="true">
        <shape android:padding="5dp"
            android:shape="rectangle">
            <solid android:color="#FFF" /> 
            <stroke android:width="0.5dp" android:color="#29166f" />
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" />
        </shape>
    </item>

</selector>

在DrawableLayout_selector.xml中

<?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="match_parent"
    android:orientation="vertical" >

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_margin="10dp"
            android:background="@drawable/Layout_selector"
            android:orientation="vertical" >
        </LinearLayout>

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="MyText"
            android:layout_marginLeft="50dp"
            android:padding="1dp"
            android:background="#fff"
            android:textAppearance="?android:attr/textAppearanceMedium" />

    </FrameLayout>

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

    <item android:state_enabled="true"
            android:state_pressed="true">
        <shape android:padding="5dp" android:shape="rectangle">
            <solid android:color="#FFF" />
            <stroke android:width="0.5dp" android:color="#29166f" />
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:state_enabled="true" android:state_focused="true">
        <shape android:padding="5dp" android:shape="rectangle">
            <solid android:color="#FFF" />
            <stroke android:width="0.5dp" android:color="#29166f" />
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" />
        </shape>
    </item>
    <item android:state_enabled="true">
        <shape android:padding="5dp"
            android:shape="rectangle">
            <solid android:color="#FFF" /> 
            <stroke android:width="0.5dp" android:color="#29166f" />
            <corners android:bottomLeftRadius="10dp" android:bottomRightRadius="10dp" android:topLeftRadius="10dp" android:topRightRadius="10dp" />
        </shape>
    </item>

</selector>

输出为:


为容器使用带圆角的xml形状(矩形)。就这些。好啊并非全部:你仍然需要用与内部相同的不透明背景色来修复标题文本视图,以覆盖边框线。你可以使用
FrameLayout
RelativeLayout
并根据需要定位所需的视图
,因为这样我就需要创建各种大小的图像9-patch?框架布局可能更好