Android高级xml布局之输入框EditText设计

时间 2019-11-06

标签 android 高级 xml 布局输入 edittext 设计栏目 Android 繁體版

原文原文链接

今天给你们介绍一下如何实现一款简约时尚的安卓登录界面。你们先看一下效果图android

当用户输入时动态出现删除按钮ide

如今先罗列一下技术点：
1.如何使用圆角输入框和按钮背景
2.如何实现“手机号”、“密码”后面的竖线
3.如何嵌套输入框的布局
4.如何监听输入框的输入事件及删除按钮的动态显示隐藏工具

1.如何使用圆角输入框和按钮背景布局

安卓为开发者准备了shape这个xml标签，用于自定义一些形状。
那么我就来定义一个白色的输入框背景。代码以下：学习

?spa

1.net

2设计

33d

4code

<shape xmlns:android="http://schemas.android.com/apk/res/android"

android:shape="rectangle" >

<solid android:color="#ffffff" />

<stroke

android:width="1dip"

android:color="#ffffff" />

<padding

android:bottom="10dp"

android:left="10dp"

android:right="10dp"

android:top="10dp" />

<corners android:radius="6dp" />

</shape>

将其设置成任何View的background就能够了

1	`android:background="@drawable/shape_wihte_frame"`

2.如何实现“手机号”、“密码”后面的竖线

这个其实很简单，只需书写一个竖线便可，宽度为1dp或者1px（或你认为更合适的数值）。

<View

android:id="@+id/view1"

android:layout_width="1dip"

android:layout_height="fill_parent"

android:layout_centerVertical="true"

android:layout_gravity="center_horizontal"

android:layout_marginLeft="2dp"

android:layout_marginRight="2dp"

android:layout_toRightOf="@+id/textView1"

android:background="#EEEFFF" />

3.如何嵌套输入框的布局

安卓给咱们提供了多种布局，可是你用任何一种都没办法把界面设计好。必须嵌套，不少新手不敢去嵌套，你们必定要大胆的去嵌套去使用各类布局，必定会组合出炫酷的效果的。这里布局很简单仅仅是一层嵌套（整个页面布局嵌套输入框的布局）。

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

android:background="@drawable/shape_wihte_frame" >

<TextView

android:id="@+id/textView1"

android:layout_width="40dp"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:layout_centerVertical="true"

android:lines="1"

android:padding="1dp"

android:text="手机号"

android:textSize="11sp" />

<View

android:id="@+id/view1"

android:layout_width="1dip"

android:layout_height="fill_parent"

android:layout_centerVertical="true"

android:layout_gravity="center_horizontal"

android:layout_marginLeft="2dp"

android:layout_marginRight="2dp"

android:layout_toRightOf="@+id/textView1"

android:background="#EEEFFF" />

<EditText

android:id="@+id/phonenumber"

android:layout_width="wrap_content"

android:layout_height="40dp"

android:layout_centerVertical="true"

android:layout_marginLeft="2dp"

android:layout_toRightOf="@+id/view1"

android:background="@drawable/transparent"

android:ems="19"

android:hint="请输入手机号"

android:inputType="phone"

android:padding="1dp"

android:textSize="12sp" >

<requestFocus />

</EditText>

<ImageView

android:id="@+id/del_phonenumber"

android:layout_width="20dp"

android:layout_height="20dp"

android:layout_alignParentRight="true"

android:layout_centerVertical="true"

android:layout_marginRight="3dp"

android:src="@drawable/text_del"

android:visibility="invisible" />

</RelativeLayout>

4.如何监听输入框的输入事件及删除按钮的动态显示隐藏

思想很简单，就是监听EditText的输入事件，以后若是输入长度大于0就显示后面的删除按钮，若是=0就隐藏删除按键，点击删除按钮就清空输入框。在这里我写出了一个工具类方便你们调用。高内聚低耦合是咱们共同的追求。

public class EditTextClearTools {

public static void addclerListener(final EditText e1, final ImageView m1) {

e1.addTextChangedListener(new TextWatcher() {

@Override

public void onTextChanged(CharSequence s, int start, int before,

int count) {

// TODO Auto-generated method stub

}

@Override

public void beforeTextChanged(CharSequence s, int start, int count,

int after) {

// TODO Auto-generated method stub

}

@Override

public void afterTextChanged(Editable s) {

// TODO Auto-generated method stub

// 监听若是输入串长度大于0那么就显示clear按钮。

String s1 = s + "";

if (s.length() > 0) {

m1.setVisibility(View.VISIBLE);

} else {

m1.setVisibility(View.INVISIBLE);

}

});

m1.setOnClickListener(new OnClickListener() {

@Override

public void onClick(View v) {

// TODO Auto-generated method stub

// 清空输入框

e1.setText("");

}

});

}

主程序代码

public class MainActivity extends Activity {

EditText e1, e2;

ImageView m1, m2;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_user_login);

init();

}

private void init() {

// TODO Auto-generated method stub

e1 = (EditText) findViewById(R.id.phonenumber);

e2 = (EditText) findViewById(R.id.password);

m1 = (ImageView) findViewById(R.id.del_phonenumber);

m2 = (ImageView) findViewById(R.id.del_password);

// 添加清楚监听器大气

EditTextClearTools.addclerListener(e1, m1);

EditTextClearTools.addclerListener(e2, m2);

}

xml对于安卓程序的重要性相信你们在开发的路程中会慢慢体会到。在这里仅仅是给了一个简单的例子，后面会更新不少很好的安卓技术博客。我是安卓天，感谢你们支持。但愿你们多多沟通交流。

代码链接：源码下载

以上就是本文的所有内容，但愿对你们的学习有所帮助，也但愿你们多多支持脚本之家。