TextView 和 EditText android

TextView and EditText android

我想在 android.

的同一行中设置文本视图和编辑文本

正如我在这里写的那样,我应该用这样的线性布局来做到这一点:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="200px"
    android:orientation="horizontal"
    android:layout_alignParentLeft="true"
    android:background="@android:color/background_light"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/loginTitle"
    android:layout_marginTop="5dp">
    <TextView
        android:layout_width="wrap_content"
        android:text="Phone"
        android:layout_height="200px"
        android:gravity="center"
        android:id="@+id/phoneTV"
        android:textColor="#f7941e"
        android:textSize="20sp">
    </TextView>
    <EditText android:layout_width="wrap_content"
        android:id="@+id/phoneNumber"
        android:layout_height="200px"
        android:gravity="center"
        android:background="@android:color/background_light"
        android:text="0.00"
        android:textSize="20sp"
        android:inputType="number|numberDecimal"
        android:layout_marginLeft="10dp">
    </EditText>
</LinearLayout>

但它看起来完全不像我想要的那样。

我的目标是达到这个组件

你能帮我怎么做这样的事情吗?

提前致谢!

伊甸本西蒙

修改LinearLayout中的属性为android:orientation="vertical"

将方向更改为垂直,并为您的两个视图使用 layout_weight。 调整值以获得所需的效果。更多信息在这里:Linear Layout

您可以使用 drawable left 属性

android:drawableLeft="@drawable/name_icon_edittext" 

使用文本制作单独的图像 'phone' 并为 Edittext 背景创建一个 9 补丁图像。我希望它能奏效!

为您的 TextView 创建背景

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- This is the line -->
    <item android:right="-1dp">
        <shape>
            <solid android:color="#FFFFFF"/>
            <stroke
                android:width="1dp"
                android:color="#BDBFC1"/>
            <corners
                android:bottomLeftRadius="7dp"
                android:bottomRightRadius="0dp"
                android:radius="1px"
                android:topLeftRadius="7dp"
                android:topRightRadius="0dp"/>
        </shape>
    </item>

</layer-list>

还有你的 EditText

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- This is the line -->
    <item android:left="-1dp">
        <shape>
            <solid android:color="#F1F1F2"/>
            <stroke
                android:width="1dp"
                android:color="#BDBFC1"/>
            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="7dp"
                android:radius="1px"
                android:topLeftRadius="0dp"
                android:topRightRadius="7dp"/>
        </shape>
    </item>

</layer-list>

将此放入您的 activity

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="15dp"
        >

        <TextView
            android:id="@+id/tvPhone"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:background="@drawable/text_view_background"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:text="Phone"
            android:textColor="#F7941E"
            android:textSize="20sp"/>

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/tvPhone"
            android:layout_alignTop="@id/tvPhone"
            android:layout_toRightOf="@id/tvPhone"
            android:background="@drawable/edit_text_background"
            android:paddingLeft="20dp"
            android:paddingRight="20dp"
            android:textColor="#F7941E"/>

    </RelativeLayout>

看起来是这样的,你只需要微调一下即可;)

我把它放在一起是因为我喜欢它简单的外观。

这是它的最终外观。

布局

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#2c2d2d"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginTop="5dp"
        android:background="@drawable/item_holder"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/phoneTV"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/item"
            android:gravity="center"
            android:paddingBottom="8dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="8dp"
            android:text="Phone"
            android:textColor="#f7941e"
            android:textSize="16sp">
        </TextView>

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:background="#bdbfc1"/>

        <EditText
            android:id="@+id/phoneNumber"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/item_info"
            android:gravity="left"
            android:inputType="number|numberDecimal"
            android:paddingBottom="8dp"
            android:paddingLeft="16dp"
            android:paddingRight="16dp"
            android:paddingTop="8dp"
            android:text="516-678-7325"
            android:textColor="#6d6e71"
            android:textSize="16sp">
        </EditText>
    </LinearLayout>
</RelativeLayout>

可绘制文件 在可绘制文件夹中创建三个可绘制文件。用于创建圆角。

item_holder.xml

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF"/>
    <stroke
        android:width="1dp"
        android:color="#b9bbbe"/>
    <padding
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp"/>
    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:radius="0dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp"/>
</shape>

item.xml

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#FFFFFF"/>
    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="0dp"
        android:radius="0dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="0dp"/>
</shape>

item_info.xml

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#f1f1f2"/>
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="5dp"
        android:radius="0dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="5dp"/>
</shape>

使用 dp 而不是 px。 这似乎是一个完美的地方,只使用带有权重的水平方向的 LinearLayout。 不用每次都写200px,用Match parent就可以了

所以使用方向为水平的 LinearLayout:水平 除非我在这里遗漏了什么

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@drawable/bgmainactivity"
android:orientation="horizontal">

<TextView
    android:id="@+id/phoneTV"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_marginRight="0.5dp"
    android:layout_weight="0.3"
    android:background="@android:color/background_light"
    android:gravity="center_vertical|center_horizontal"
    android:padding="5dp"
    android:text="Phone"
    android:textColor="#f7941e"
    android:textSize="20sp"
    android:textStyle="bold"></TextView>
<!--U can use some like this to add divider -->
    <!--<TextView-->
<!--android:layout_width="1dp"-->
<!--android:layout_height="match_parent"-->
<!--android:background="@android:color/background_dark"></TextView>-->


<EditText
    android:id="@+id/phoneNumber"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_marginLeft="0.5dp"
    android:layout_weight="0.8"

    android:background="#EBEBEB"
    android:gravity="center_vertical|center_horizontal"
    android:inputType="number|numberDecimal"
    android:padding="5dp"
    android:text="0.00"
    android:textSize="20sp"></EditText>

**bgmainactivity.Xml**

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#565656" />
<stroke
    android:width="1dp"
    android:color="#565656" />
<padding
    android:bottom="5dp"
    android:left="5dp"
    android:right="5dp"
    android:top="5dp" />
<corners
    android:bottomLeftRadius="7dp"
    android:bottomRightRadius="7dp"
    android:topLeftRadius="7dp"
    android:topRightRadius="7dp" />

只希望剩下的凹陷气喘吁吁由你自己来完成。 快乐编码