Question

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

enter image description here

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

如果我使用线性布局创建布局并使用绝对定位放置文本视图，则在不同设备中可能看起来不像预期。

那么实现此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>

输出是：

Output

Answer 2

使用RelativeLayout。首先创建一个带边界的EditText框。然后使用RelativeLayout发出TextView - 调整margin上的padding和TextView，以达到预期的效果。

Answer 3

现在我知道你说你想避免只是将该图像设置为背景，以便你能够避免创建多个图像，但是你听说过Android Asset Studio。在我听说这个很棒的网站之前，我常常讨厌处理资源（特别是9个补丁）。

只需使用此网站并上传该图片，并为您的图片创建一个九补丁文件。我建议将可伸展区域设置为图像中间的一个小方块，然后Android资产工作室将完成剩下的工作。

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

如何在Android中实现此UI？

3 个答案: