如何在Android中实现此UI？

Question

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

我不想有一个图像并将其设置为背景。 因为那样，我需要为不同的设备创建各种大小的图像。

如果我使用线性布局创建布局，并使用绝对定位放置文本视图，则它在不同设备中的外观可能不理想。

那么，实现此UI的最佳方法是什么？

Answer 1

尝试这个

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>

在Drawable Layout_selector.xml中

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

输出为：

Answer 2

使用RelativeLayout 。 首先创建一个带有边界的EditText框。 然后使用RelativeLayout放置TextView -调整margin和padding上TextView以实现期望的效果。

Answer 3

现在，我知道您说过，您要避免只将该图像设置为背景，以便避免必须创建多个图像，但是您听说过Android Asset Studio 。 在听到这个很棒的网站之前，我常常讨厌处理资源（尤其是九个补丁）。

只需使用此站点并上传该图像并为您的图像创建一个9补丁文件即可。 我建议将可拉伸区域设置为图像中间的一个小正方形，然后由Android Asset Studio进行其余操作。

完成所有这些操作后，您只需将其作为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"
     />