Android高级xml布局之输入框EditText设计,android edittext光标

6
回复
782
查看
[复制链接]

325

主题

1020

帖子

704

安币

手工艺人

发表于 2018-3-12 12:03:22 | 显示全部楼层 |阅读模式

            

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

        

201712071120392.jpg

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

        

201712071120393.jpg
201712071120394.jpg

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

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

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

[Java] 查看源文件 复制代码
<!-- 形状 -->
<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就可以了

[Java] 查看源文件 复制代码
android:background="@drawable/shape_wihte_frame"

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

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

[Java] 查看源文件 复制代码
 <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.如何嵌套输入框的布局

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

[Java] 查看源文件 复制代码
 <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就隐藏删除按键,点击删除按钮就清空输入框。在这里我写出了一个工具类方便大家调用。高内聚低耦合是我们共同的追求。

[Java] 查看源文件 复制代码
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("");

   }
  });

 }

}

        主程序代码

[Java] 查看源文件 复制代码
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对于安卓程序的重要性相信大家在开发的路程中会慢慢体会到。在这里仅仅是给了一个简单的例子,后面会更新很多很好的安卓技术博客。我是安卓天,感谢大家支持。希望大家多多沟通交流。

        代码连接:源码下载



        

446

主题

1150

帖子

1976

安币

手工艺人

发表于 2018-3-12 18:20:42 | 显示全部楼层
感谢分享,安卓巴士有你更精彩:lol

758

主题

1464

帖子

1857

安币

手工艺人

发表于 2018-3-13 03:02:19 | 显示全部楼层
感谢分享,楼主V5~

429

主题

1156

帖子

1895

安币

手工艺人

发表于 2018-3-13 12:40:13 | 显示全部楼层
支持,感谢,祝巴士越来越好~

0

主题

9262

帖子

2054

安币

Android大神

Rank: 6Rank: 6

发表于 2018-3-14 08:21:19 | 显示全部楼层
感觉楼主很用心,辛苦啦~

7

主题

1万

帖子

2316

安币

Android大神

Rank: 6Rank: 6

发表于 2018-3-15 08:50:09 | 显示全部楼层
感谢大神~

27

主题

9735

帖子

1856

安币

Android大神

Rank: 6Rank: 6

发表于 2018-3-16 12:56:39 | 显示全部楼层
帮帮顶顶!!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

领先的中文移动开发者社区
18620764416
7*24全天服务
意见反馈:1294855032@qq.com

扫一扫关注我们

Powered by Discuz! X3.2© 2001-2019 Comsenz Inc.( 粤ICP备15117877号 )