TextView和EditText android

Question

我想在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>

但它并没有像我想的那样全神贯注。

我的目标是达到这个组件

你能帮我怎样做这件事吗？

提前致谢！

Eden Ben simon

Answer 1

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

将此放入您的活动

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

看起来像这样，你只需稍微调整一下;）

Answer 2

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

这是它的最终外观

<强>布局

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

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

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>

Answer 3

将LinearLayout中的属性更改为android：orientation =＆＃34; vertical＆＃34;

Answer 4

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

Answer 5

您可以使用drawable left属性

var fs = global["require"]("fs")

使用文字制作单独的图像＆＃39;手机＆＃39;并为Edittext背景创建一个9补丁图像。我希望它能奏效！

Answer 6

使用dp代替px。这似乎是一个完美的地方，只需使用一个水平方向与权重的LinearLayout。 每次使用匹配父级时都不需要写200px。

所以请使用方向为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" />

我只是希望你的自己能够完成持续的凹陷。  快乐编码