码迷,mamicode.com
首页 > 其他好文 > 详细

EditText左侧固定图片

时间:2015-03-03 14:49:24      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

EditText左侧固定图片,常见于注册登录界面的ui设计

1. 可使用 EditText的drawableLeft,drawablePadding 标签, 但此种方法设置的图片无法调整大小

 

2. 使用RelativeLayout嵌入ImageView和EditText标签的方法

原理为使ImageView和EditText处于RelativeLayout中,并使它们上下左对齐, 然后设置EditText左内边距paddingLeft为一个较大值,通过padding标签改变ImageView大小。

 

代码示例:

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="40dp" >

<EditText
android:id="@+id/username"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:background="@drawable/rounded_edittext"
android:hint="@string/username_hint"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingRight="10dp"
android:paddingEnd="10dp"
android:paddingLeft="60dp"
android:paddingStart="60dp"
/>

<ImageView
android:id="@+id/username_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="12dp"
android:layout_alignBottom="@id/username"
android:layout_alignLeft="@id/username"
android:layout_alignStart="@id/username"
android:layout_alignTop="@id/username"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:contentDescription="@string/username_image_description"
android:src="@drawable/denglu_03" />
</RelativeLayout>

核心为红色部分, 通过设置这几个标签,使得EditText和ImageView上下左对齐。然后设置EditText 的paddingLeft标签为一合理距离值,使ImageView和EditText的输入内容保持一定距离。 ImageView的padding标签作用是改变图片的大小。

完整示例代码:

 

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

<TextView
android:id="@+id/login_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="30dp"
android:text="@string/login_title"
android:textColor="#FFFFFF"
android:textSize="20sp"
android:typeface="normal" />

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="40dp" >

<EditText
android:id="@+id/username"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:background="@drawable/rounded_edittext"
android:hint="@string/username_hint"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingRight="10dp"
android:paddingEnd="10dp"
android:paddingLeft="60dp"
android:paddingStart="60dp"
/>

<ImageView
android:id="@+id/username_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="12dp"
android:layout_alignBottom="@id/username"
android:layout_alignLeft="@id/username"
android:layout_alignStart="@id/username"
android:layout_alignTop="@id/username"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:contentDescription="@string/username_image_description"
android:src="@drawable/denglu_03" />
</RelativeLayout>

<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:paddingTop="10dp" >

<EditText
android:id="@+id/password"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:background="@drawable/rounded_edittext"
android:hint="@string/password_hint"
android:inputType="textPassword"
android:paddingBottom="10dp"
android:paddingEnd="10dp"
android:paddingLeft="60dp"
android:paddingRight="10dp"
android:paddingStart="60dp"
android:paddingTop="10dp" />

<ImageView
android:id="@+id/password_image"
android:padding="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/password"
android:layout_alignLeft="@id/password"
android:layout_alignStart="@id/password"
android:layout_alignTop="@id/password"
android:layout_marginEnd="10dp"
android:layout_marginRight="10dp"
android:contentDescription="@string/password_image_description"
android:src="@drawable/denglu_06" />
</RelativeLayout>

</LinearLayout>

 

android:background="@drawable/rounded_edittext"引用为一设置EditText为圆角矩形的xml文件

文件内容:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" android:padding="10dp">
<solid android:color="#E6E6FA"></solid>
<corners android:bottomLeftRadius="5dp"
android:bottomRightRadius="5dp"
android:topLeftRadius="5dp"
android:topRightRadius="5dp"/>
</shape>

 

参考: http://zhoudan241.iteye.com/blog/768255

http://blog.csdn.net/cangkukuaimanle/article/details/6853379

EditText左侧固定图片

标签:

原文地址:http://www.cnblogs.com/vagrant1991/p/4310772.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!