Question

我想创建一个这样的UI：

我可以使用以下可绘制代码在textview周围放置彩色边框： orange_back.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"   
android:shape="rectangle" >
  <solid android:color="@color/Orange" />
  <stroke android:width="0dip" android:color="#4fa5d5"/>
</shape>

并将其设置为我的textview的背景图片：

 <TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="16dp"
    android:text="@string/user"
    android:textColor="@color/white"
    android:background="@drawable/orange_back" />

但是这只会在我的textview周围形成橙色边框。我希望textview和edittext具有相同宽度的橙色背景。怎么做到这一点？

Answer 1

取一个LinearLayout并放置TextView＆amp;该布局中的EditText。

将该背景应用于LinearLayout ..

这是示例代码..

 <?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="wrap_content"
        android:orientation="vertical" 
        android:background="@drawable/orange_back"
        android:padding="10dp">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Username"
            android:layout_gravity="center_horizontal"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Please Enter"
            android:drawableLeft="@drawable/ic_launcher"
            android:background="#FFFFFF"
            android:layout_marginTop="10dp" />


    </LinearLayout>

<强>输出：

enter image description here

Answer 2

您可以通过创建嵌套线性布局，以下列方式轻松创建橙色框布局。

<?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"
        android:background="@drawable/orange_back" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Username" />

        <LinearLayout
            android:layout_height="match_parent"
            android:orientation="horizontal" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/ic_launcher" />

            <EditText
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

    </LinearLayout>

Answer 3

您可以从布局

自定义视图

<RelativeLayout
        android:id="@+id/sampleText"
        android:layout_width="280dip"
        android:layout_height="150dip"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="16dp"
        android:background="#F27813" >

        <TextView
            android:id="@+id/headerText"
            android:layout_width="180dip"
            android:layout_height="70dip"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="80dp"
            android:gravity="center_vertical"
            android:textSize="24dip"
            android:textStyle="bold"
            android:hint="UserName"
            android:textColor="@android:color/white" />
        <EditText
            android:id="@+id/sampleText"
            android:layout_width="180dip"
            android:layout_height="70dip"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_marginBottom="18dp"
            android:layout_marginLeft="80dp"
            android:background="@drawable/txt_bg"
            android:gravity="center"
            android:hint="@string/hello_world"
            android:textColor="#111111" />

        <ImageView
            android:id="@+id/sampleImg"
            android:layout_width="60dip"
            android:layout_height="60dip"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="23dp"
            android:layout_alignParentLeft="true"
            android:layout_marginLeft="31dp"
            android:background="@drawable/images" />

    </RelativeLayout>

如果你想使用背景或边框

// border.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke android:width="5dip" android:color="#F27813" />
    <gradient
      android:startColor="#FFFFFF"
      android:endColor="#FFFFFF"
      android:angle="-90" /> 
</shape>

背景仅作为textview和edittext下面的边框

3 个答案: