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" />
只希望剩下的凹陷气喘吁吁由你自己来完成。
快乐编码
我想在 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" />
只希望剩下的凹陷气喘吁吁由你自己来完成。 快乐编码