如何在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"
     />