在android开发中我们是要为用户提供一些区域让用于可以输入属于自己的一些个人信息的,最经常看到的就是咱们平时登录、注册时,用户输入自己的个人信息及账号和密码,android中提供了一个非常简单易用的控件,就是EditText,将单词拆开来读就是可编辑的文本框。
我们可以用EditText和TextView来使用我们已经学习过的相对布局(RelativeLayout)来完成用户的登录注册页面。
我们如果想使用EditText这个控件,首先就要把它写到我们的布局文件当中activity_main.xml当前代码如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<EditText
android:id="@+id/edit_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="请输入您的账号"
/>
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/hello_world" />
</RelativeLayout>
选择shape选项:在Flie栏目将文件名称命名为edit_bg点击Finish按钮一个名为edit_bg.xml的文件就会创建。文件代码:可通过百度搜索关键词:EditText边框 得到。(学习学的不是死的知识而是方法)
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
<!-- 填充的颜色:这里设置背景透明 -->
<solid android:color="@android:color/transparent" />
<!-- 边框的颜色 :不能和窗口背景色一样-->
<stroke
android:width="3dp"
android:color="#ffffff" />
<!-- 设置按钮的四个角为弧形 -->
<!-- android:radius 弧形的半径 -->
<corners android:radius="5dip" />
<!-- padding:Button里面的文字与Button边界的间隔 -->
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
接下来activity_main.xml代码更新如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<EditText
android:id="@+id/edit_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/eidt_bg"
android:hint="请输入您的账号" />
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/hello_world" />
</RelativeLayout>
这时EditText控件不管事最初展示,还是用户选中编辑时都不会有蓝色底部边框,我们甚至还可对edit_bg.xml代码进行更改让EditText拥有不同的边框。
接下来,我们来实现下,一开始说说的登录注册的ui界面。
通过已学只是完成如图所示界面效果:
代码如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#33DEDBD7"
tools:context=".MainActivity" >
<RelativeLayout
android:id="@+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:background="@drawable/relative_bg" >
<EditText
android:id="@+id/edit_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/eidt_bg"
android:ems="10"
android:hint="手机号码" >
</EditText>
<EditText
android:id="@+id/edit_pass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView1"
android:layout_below="@+id/edit_user"
android:background="@drawable/eidt_bg"
android:ems="10"
android:hint="密码" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignLeft="@+id/edit_user"
android:layout_below="@+id/edit_user"
android:background="#DEDBD7" />
<TextView
android:id="@+id/TextView01"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignBottom="@+id/edit_pass"
android:layout_alignParentLeft="true"
android:background="#DEDBD7" />
<ImageView
android:id="@+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/TextView01"
android:layout_below="@+id/edit_pass"
android:src="@drawable/login" />
</RelativeLayout>
</RelativeLayout>
EditText常用属性如下:
SingleLines限定单行
Numric限定接受的数字类型
我们可以用EditText和TextView来使用我们已经学习过的相对布局(RelativeLayout)来完成用户的登录注册页面。
我们如果想使用EditText这个控件,首先就要把它写到我们的布局文件当中activity_main.xml当前代码如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<EditText
android:id="@+id/edit_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="请输入您的账号"
/>
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/hello_world" />
</RelativeLayout>
在当前代码中我们为EditText设置了id为edit_user,宽高的值为wrap_content即内容包裹,也就是控件会随着内容的大小多少而变化。android:hint="请输入您的账号"这段代码的作用是,展示用户提示信息,当用户选用EditText进行文本编辑时,"请输入您的账号"这段文本内容将消失。左图为用户未开始编辑时控件显示效果,右图为开始编辑。如图:
但是到了这一步还不够,我们自己用的应用,可编辑的文本框下面是没有一条蓝色的线条的,在展示给用户的时候我们如何让蓝色线条消失呢?很简单,利用EditText的属性background来引用一个xml文件。这个XML可以让EditText蓝色底部边框消失,即自定义EditText的边框:
选中Drawable目录新建xml file,如图:
选择shape选项:在Flie栏目将文件名称命名为edit_bg点击Finish按钮一个名为edit_bg.xml的文件就会创建。文件代码:可通过百度搜索关键词:EditText边框 得到。(学习学的不是死的知识而是方法)
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
>
<!-- 填充的颜色:这里设置背景透明 -->
<solid android:color="@android:color/transparent" />
<!-- 边框的颜色 :不能和窗口背景色一样-->
<stroke
android:width="3dp"
android:color="#ffffff" />
<!-- 设置按钮的四个角为弧形 -->
<!-- android:radius 弧形的半径 -->
<corners android:radius="5dip" />
<!-- padding:Button里面的文字与Button边界的间隔 -->
<padding
android:bottom="10dp"
android:left="10dp"
android:right="10dp"
android:top="10dp" />
</shape>
接下来activity_main.xml代码更新如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<EditText
android:id="@+id/edit_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/eidt_bg"
android:hint="请输入您的账号" />
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="@string/hello_world" />
</RelativeLayout>
这时EditText控件不管事最初展示,还是用户选中编辑时都不会有蓝色底部边框,我们甚至还可对edit_bg.xml代码进行更改让EditText拥有不同的边框。
接下来,我们来实现下,一开始说说的登录注册的ui界面。
通过已学只是完成如图所示界面效果:
代码如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#33DEDBD7"
tools:context=".MainActivity" >
<RelativeLayout
android:id="@+id/relativeLayout1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:background="@drawable/relative_bg" >
<EditText
android:id="@+id/edit_user"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/eidt_bg"
android:ems="10"
android:hint="手机号码" >
</EditText>
<EditText
android:id="@+id/edit_pass"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/textView1"
android:layout_below="@+id/edit_user"
android:background="@drawable/eidt_bg"
android:ems="10"
android:hint="密码" />
<TextView
android:id="@+id/textView1"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignLeft="@+id/edit_user"
android:layout_below="@+id/edit_user"
android:background="#DEDBD7" />
<TextView
android:id="@+id/TextView01"
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_alignBottom="@+id/edit_pass"
android:layout_alignParentLeft="true"
android:background="#DEDBD7" />
<ImageView
android:id="@+id/login"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/TextView01"
android:layout_below="@+id/edit_pass"
android:src="@drawable/login" />
</RelativeLayout>
</RelativeLayout>
EditText常用属性如下:
SingleLines限定单行
Numric限定接受的数字类型