android 登录输入框_android 上一个输入框没输入无法输入内容到下一个输入框 - CSDN
  • 之前看到过一个别人做的APP,登录界面十分炫酷,就是点击输入框之后输入框上提示的文字会通过一个动画变换到输入框上方,不知道是怎么做的,希望哪位大神可以解答。
  • 常常在网上登录的时候看到这样一个效果,就是当我们选择账号或者密码输入框时,它的背景会变成一种选中的状态,也就是输入框四周会有一种选中颜色的渐变效果。  所以很多情况下我们也希望自己的APP也能有这样的效果...

      关注finddreams,一起分享,一起进步:http://blog.csdn.net/finddreams/article/details/45502277
      常常在网上登录的时候看到这样一个效果,就是当我们选择账号或者密码输入框时,它的背景会变成一种选中的状态,也就是输入框四周会有一种选中颜色的渐变效果。就如GitHub登录界面这样的效果:
      这里写图片描述
      所以很多情况下我们也希望自己的APP也能有这样的效果,当点击账号和密码输入框时显示成选中的状态,这样的效果该怎么实现呢?如图:
      这里写图片描述
      其实要实现这样的效果,思路很简单,只需要建一个背景selector选择器,分别在不同的状态下配置不同的背景。
      一、建一个bg_edittext_selector.xml背景选择器,具体代码如下:
      

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:state_focused="true"><shape android:shape="rectangle">
                <gradient android:angle="270.0" android:endColor="#ffffffff" android:startColor="#ffffffff" />
    
                <stroke android:width="1dp" android:color="#2D9FF7" />
    
                <corners android:bottomLeftRadius="5.0dip" android:bottomRightRadius="5.0dip" android:topLeftRadius="5.0dip" android:topRightRadius="5.0dip" />
            </shape></item>
        <item><shape android:shape="rectangle">
                <gradient android:angle="270.0" android:endColor="#ffffffff" android:startColor="#ffffffff" />
    
                <stroke android:width="1dp" android:color="#ffffffff" />
    
                <corners android:bottomLeftRadius="5.0dip" android:bottomRightRadius="5.0dip" android:topLeftRadius="5.0dip" android:topRightRadius="5.0dip" />
            </shape></item>
    
    </selector>

    二、然后就是写布局文件,并把选择器设置成输入框的背景。代码:

     <LinearLayout
                android:id="@id/login_username_ll"
                android:layout_width="fill_parent"
                android:layout_height="50.0dip"
                android:layout_margin="10.0dip"
                    android:addStatesFromChildren="true"
                android:background="@drawable/bg_edittext_selector"
                android:orientation="horizontal" >
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="10.0dip"
                    android:text="@string/username"
                    android:textSize="18.0sp" />
    
                <com.finddreams.view.ClearEditText
                    android:id="@id/login_account_et"
                    android:gravity="center_vertical"
                    android:background="@null"
                    android:layout_width="0.0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="1.0"
                    android:hint="@string/please_input_username" />
            </LinearLayout>
    
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="50.0dip"
                android:layout_marginLeft="10dip"
                android:layout_marginRight="10dip"
                android:addStatesFromChildren="true"
                android:background="@drawable/bg_edittext_selector"
                android:orientation="horizontal" >
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:layout_marginLeft="10.0dip"
                    android:text="@string/password"
                    android:textSize="18.0sp" />
    
                <com.finddreams.view.ClearEditText
                    android:id="@id/login_password_cet"
                     android:gravity="center_vertical"
                    android:background="@null"
                    android:layout_width="0.0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="1.0"
                    android:gravity="center_vertical"
                    android:background="@null"
                    android:hint="@string/please_input_password"
                    android:inputType="textPassword" />
            </LinearLayout>

      从代码中可以看出,我在布局上使用的是一个LinearLayout中包含两个子控件,水平的排列,一个是TextView,另一个则是带有清除功能的自定义控件ClearEditText。
      为了实现这样选中效果,所以要把选择器bg_edittext_selector.xml做为父容器LinearLayout的背景。
      但是这里有个小的细节需要注意一样,我们知道选择器有很多的状态,默认状态,选中,聚焦等等。那我们这里的父容器本身没有给它聚焦和选中的状态,我们只关心的是账号,密码这两个输入框是否被选中了,选中了则需要变成选中的背景。那怎么样做到子类控件的状态和父容器的状态相关联呢?
      这里父容器控件LinearLayout有一个很好的属性 android:addStatesFromChildren=”true”,这个属性在谷歌官方Api中是这样描述的:
      这里写图片描述
      本人英语水平有限,只知道大概意思是说如果属性设置成true的话,ViewGroup的drawable状态就可以根据子类控件EditText或者Button的聚焦状态发生改变。这样它们看起来成了一个整体,父容器的状态跟随子控件的状态来变动。
      最后,把ClearEditText的代码贴一下:
     

    /**
     * @Description: 带删除按钮的输入框
     * @author http://blog.csdn.net/finddreams
     */
    public class ClearEditText extends EditText implements OnFocusChangeListener,
            TextWatcher {
        /**
         * 删除按钮的引用,可以自定义图片
         */
        private Drawable mClearDrawable;
        public static int SIZE = 0;
    
        public ClearEditText(Context context) {
            this(context, null);
        }
    
        public ClearEditText(Context context, AttributeSet attrs) {
            // 这里构造方法也很重要,不加这个很多属性不能再XML里面定义
            this(context, attrs, android.R.attr.editTextStyle);
        }
    
        public ClearEditText(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
            init();
        }
    
        private void init() {
            // 获取EditText的DrawableRight,假如没有设置我们就使用默认的图片
            mClearDrawable = getCompoundDrawables()[2];
            if (mClearDrawable == null) {
                mClearDrawable = getResources().getDrawable(
                        R.drawable.progresscancelbtn);
    
            }
            mClearDrawable.setBounds(0, 0, mClearDrawable.getIntrinsicWidth()
                    + SIZE, mClearDrawable.getIntrinsicHeight() + SIZE);
            setClearIconVisible(false);
            setOnFocusChangeListener(this);
            addTextChangedListener(this);
            // setClickable(false);
        }
    
        /**
         * 因为我们不能直接给EditText设置点击事件,所以我们用记住我们按下的位置来模拟点击事件 当我们按下的位置 在 EditText的宽度 -
         * 图标到控件右边的间距 - 图标的宽度 和 EditText的宽度 - 图标到控件右边的间距之间我们就算点击了图标,竖直方向没有考虑
         */
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            if (getCompoundDrawables()[2] != null) {
                if (event.getAction() == MotionEvent.ACTION_UP) {
                    boolean touchable = event.getX() > (getWidth()
                            - getPaddingRight() - mClearDrawable
                                .getIntrinsicWidth())
                            && (event.getX() < ((getWidth() - getPaddingRight())));
                    if (touchable) {
                        this.setText("");
    
                    }
                }
            }
    
            return super.onTouchEvent(event);
        }
    
        /**
         * 当ClearEditText焦点发生变化的时候,判断里面字符串长度设置清除图标的显示与隐藏
         */
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            if (hasFocus) {
                setClearIconVisible(getText().length() > 0);
            } else {
                setClearIconVisible(false);
            }
        }
    
        /**
         * 设置清除图标的显示与隐藏,调用setCompoundDrawables为EditText绘制上去
         * 
         * @param visible
         */
        protected void setClearIconVisible(boolean visible) {
            Drawable right = visible ? mClearDrawable : null;
            setCompoundDrawables(getCompoundDrawables()[0],
                    getCompoundDrawables()[1], right, getCompoundDrawables()[3]);
        }
    
        /**
         * 当输入框里面内容发生变化的时候回调的方法
         */
        @Override
        public void onTextChanged(CharSequence s, int start, int count, int after) {
            setClearIconVisible(s.length() > 0);
        }
    
        @Override
        public void beforeTextChanged(CharSequence s, int start, int count,
                int after) {
    
        }
    
        @Override
        public void afterTextChanged(Editable s) {
    
        }
    
        /**
         * 设置晃动动画
         */
        public void setShakeAnimation() {
            this.setAnimation(shakeAnimation(5));
        }
    
        /**
         * 晃动动画
         * 
         * @param counts
         *            1秒钟晃动多少下
         * @return
         */
        public static Animation shakeAnimation(int counts) {
            Animation translateAnimation = new TranslateAnimation(0, 10, 0, 0);
            translateAnimation.setInterpolator(new CycleInterpolator(counts));
            translateAnimation.setDuration(1000);
            return translateAnimation;
        }
    
    }
    展开全文
  • 当一个界面的输入框(EditText)>1,并且

    有一些软件在登录输入用户名和密码的时候,你是不是感觉很别扭,因为往往输入密码的那个框被输入法挡住了,输完用户名,你会发现点不到密码输入框,这时,只能烦躁的点一下隐藏输入法,再重新点击密码输入框输入。

    当一个界面的输入框(EditText)>1,并且输入框的位置比较靠近屏幕底部,这时,问题来了。

    是否android的控件这么不人性化?答案是否,因为EditText有一个属性往往被我们忽略:android:imeOptions

    这里举几个常用的常量值:

         (1)actionUnspecified未指定,对应常量EditorInfo.IME_ACTION_UNSPECIFIED效果:

    (2)actionNone 没有动作,对应常量EditorInfo.IME_ACTION_NONE效果:

    (3)actionGo去往,对应常量EditorInfo.IME_ACTION_GO 效果:

    (4)actionSearch 搜索,对应常量EditorInfo.IME_ACTION_SEARCH效果: 

    (5)actionSend 发送,对应常量EditorInfo.IME_ACTION_SEND效果:

    (6)actionNext 下一个,对应常量EditorInfo.IME_ACTION_NEXT效果:

    (7)actionDone 完成,对应常量EditorInfo.IME_ACTION_DONE效果:


    软键盘的Enter键默认显示的是“确认”文本,但是很明显,在输完用户名之后,我们需要的功能是切换到下一个输入框,这时,我们可以自己在EditText加上android:imeOptions="actionNext"属性,运行程序,Enter已变为下一项。


    ps:如果你加入android:imeOptions="actionNext" 没有显示如上图那样的效果的话,看看是否设置android:singleLine="true"


    展开全文
  • 就是常见的4-6位 数字的密码输入框。如下图 业务分析: 1. 首先5个验证码输入的地方没有光标闪烁,也就是5个格子其实不是EditText。 2. 输入数字之后,按删除回退,会从最后一个开始从右往左删除已输入的数字。 ...

    分享一个在项目中遇到开发的一个小知识点。

    就是常见的4-6位 数字的密码输入框。如下图



    业务分析:

    1.每个数字之间是有竖线隔开的,并不是一个连续的输入控件

    2. 5个验证码数字输入的地方没有光标闪烁,也就是5个格子其实不是EditText。

    3. 输入数字之后,继续输入(未满5个的时候)、或者删除回退,都应该从当前最右侧的位置开始操作。

    4. 点击5个格子的地方,需要弹起软键盘。



    弯路:

     在做这种类型的自定义控件,大家第一谈到印象输入框,就会马上想到EditText,但是如果按照操作习惯,5个格子很可能就会变成5个EditText去实现,这个过程是会出现很多复杂的业务场景的。 5个EditText 如果删除、插入的时候,处理光标的问题很不友好,需要监听从最后一个再到第一个EditText的光标问题。


    所以,我在做这个控件的时候也想过以上问题。后来想到的实现方式,就是EditText被TextView覆盖,由TextView处理显示数字。其它网上应该也会有很合理的实现方式,这里欢迎大家补充、交流。


    我的设计思路:

    1.一个EditText放在FrameLayout中,EditText的目的是用来实际获取用户在输入框中输入的内容。

    2.EditText被 LinearLayout覆盖,里面是5个TextView,将用来映射显示EditText的值。

    3.用户实际上使用输入框输入数字的时候,EditText是监听到输入的,同时也能输入数字在EditText身上,只不过被盖住了,看不到。

    4.拿到EditText输入的内容,.处理好切割EditText已输入的文本,分别在5个TextView上显示。

    5.LinearLayout上监听点击事件,弹起输入框,把焦点赋予EditText。(这一步千万不能忘记!)


    以下 贴出核心部分的布局代码。

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <!--手机号码栏-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/common_margin_60px"
            android:gravity="center"
            android:orientation="horizontal">
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="验证码已经发送到手机:"/>
    
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
    
        </LinearLayout>
    
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/common_margin_60px"
            android:gravity="center">
    
            <EditText
                android:layout_width="@dimen/dp20"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:layout_gravity="center"
                android:background="@null"
                android:inputType="number"
                android:maxLength="5"
                android:visibility="visible"/>
    
            <!--验证码输入栏-->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:clickable="true"
                android:orientation="horizontal"
                android:visibility="visible">
    
                <TextView
                    style="@style/code_text_style"/>
    
                <ImageView
                    style="@style/vertical_line_style"/>
    
                <TextView
                    style="@style/code_text_style"/>
    
                <ImageView
                    style="@style/vertical_line_style"/>
    
                <TextView
                    style="@style/code_text_style"/>
    
                <ImageView
                    style="@style/vertical_line_style"/>
    
                <TextView
                    style="@style/code_text_style"/>
    
                <ImageView
                    style="@style/vertical_line_style"/>
    
                <TextView
                    style="@style/code_text_style"/>
    
            </LinearLayout>
    
    
        </FrameLayout>
    
        <!--下一步按钮-->
        <Button
            style="@style/account_login_btn_style"
            android:layout_margin="@dimen/common_margin_60px"
            android:text="@string/next"/>
    
    </LinearLayout>


    style中 TextView的设置

        <!--登陆 输入验证码edit style-->
        <style name="code_text_style">
            <item name="android:layout_width">@dimen/item_view_height_156px</item>
            <item name="android:layout_height">@dimen/item_view_height_156px</item>
            <item name="android:textColor">@color/black</item>
            <item name="android:maxLength">1</item>
            <item name="android:clickable">false</item>
            <item name="android:gravity">center</item>
            <item name="android:textSize">@dimen/text_14sp</item>
            <item name="android:background">@null</item>
        </style>
    

    style中 ImageView 分隔线的设置

       <style name="vertical_line_style">
            <item name="android:layout_width">0.5dp</item>
            <item name="android:layout_height">match_parent</item>
            <item name="android:background">@color/gray</item>
        </style>


    以下是java操作业务逻辑的核心代码

    1.对EditText进行一个输入监听,当发生变化的时候,就会输入的文字进行切割,分别投射在5个格子的TextView上

    2.这样就可以保证删除、插入新的数字,都会从文本的最后一位操作。

    3.切割已输入的EditText字符,通过switch判断输入的个数,分别对每5个TextView的显示值(当然输入密码的情况亦可直接换成星号*)进行重设,实现一个密码输入的效果。

    4.对于这个在输入的时候监听,会产生不停的切割字符、重设Text的操作,可能会有一定的效率问题。在这里留下一个讨论点。具体我也没研究过到底会不会产生很大的效率问题。有兴趣交流的朋友,欢迎你们指点不足的地方。或者你们有更好的实现方式,我们亦可以互相交流。

        /**
         * 输入内容监听,投射到5个空格上
         */
        TextWatcher edtCodeChange = new TextWatcher() {
    
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
    
            }
    
            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
    
            }
    
            @Override
            public void afterTextChanged(Editable s) {
    
                tvCode1.setText("");
                tvCode2.setText("");
                tvCode3.setText("");
                tvCode4.setText("");
                tvCode5.setText("");
    
                switch (s.length()) {
                    case 5:
                        tvCode5.setText(s.subSequence(4, 5));
                    case 4:
                        tvCode4.setText(s.subSequence(3, 4));
                    case 3:
                        tvCode3.setText(s.subSequence(2, 3));
                    case 2:
                        tvCode2.setText(s.subSequence(1, 2));
                    case 1:
                        tvCode1.setText(s.subSequence(0, 1));
                    default:
                        break;
                }
    
                //输入完5个验证码 自动请求验证
                if (s.length() == 5) {
                    clickNext();
                }
    
            }
        };


    以上。谢谢大家。

    展开全文
  • 仿照拉钩网的登录做的登录界面,如图github 地址:https://github.com/chenzongwen/login

    仿照拉钩网的登录做的登录界面,如图

    这里写图片描述

    github 地址:https://github.com/chenzongwen/login

    展开全文
  • Android输入框下拉列表

    2018-06-01 15:50:17
    今天物色了Android基础:两个特殊的输入框——炒鸡有意思的是,一直认为这两兄弟跟TextView亲,事实是他们更类似于EditText。1.AutoCompleteTextView2.MultiAutoCompleteTextView...

    今天物色了Android基础:两个特殊的输入框

    ——炒鸡有意思的是,一直认为这两兄弟跟TextView亲,事实是他们更类似于EditText。

    1.AutoCompleteTextView

    2.MultiAutoCompleteTextView


    展开全文
  • Android也可像iOS7一样...首先是输入框Android4.2的输入框是只有一条下划线,比较难看 1.在drawable里new–》drawable resource file……编写输入框的样式 然后再activity_main.mxl中background引用。 <shape xmlns
  • 这次给大家介绍的时android输入框的圆角半透明效果,就像这样的效果: 首先,在drawable文件夹下面新建android resource file,命名为translucent(名字可以自己命名) xml version="1.0" encoding="utf-8"?> xmlns:...
  • &lt;?xml version="...shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"&gt; &lt;stroke android:width="1dp&
  • Android验证码输入框,炫酷的动画
  • Android四方形输入框、密码框 一、自定义view继承EditText,代码中控制输入框的个数和是否为可见密码格式 ...import android.content.Context;...import android.graphics.Canvas;...import android.g...
  • 微信的登录输入框效果如下 怎么实现这样的效果呢,其实非常简单! 简单的布局我就不说了,直接上干货。 1.实现进入自动弹出软键盘,在根文件中的Activity中设置 windowSoftInputMode 属性为 stateVisible|...
  • 每次在输入框里输入的时候,输入法弹起来之后,就会覆盖输入框,如果在登录的时候覆盖,你会不会更气,在这里推荐几种解决的办法。 解决办法一 如果希望输入法弹出时,不自动挤压Activity, 可以在Manifest中写入...
  • 实现android 金额输入框输入小数点后两位的效果也不是很复杂,只需要设置输入框输入的字符类型、设置InputFilter、设置输入变化监听即可。这篇文章主要介绍了Android金额输入框只允许输入小数点后两位 ,需要的朋友...
  • 上篇博客讲到登录注册的流程所需用到的带显示密码的输入框,而在...当然,关于验证码的实现很多大神的博客也写过,并且款式多样,任君选择,这里只是记录一下小弟在开发过程中用到的验证码输入框。  先上图:  ...
  • Android 自定义输入框

    2019-03-25 14:52:29
    在我们的开发过程中难免会用到输入框,可是当我们的项目中使用到输入框的地方多了的话,我们可以考虑写个自定义view,方便我们使用: 首先我们看下效果图: 这个就是我的一个简单的自定义输入框输入框的标题...
  • Android常用的输入框

    2019-10-11 19:22:10
    1、左边文字,右边输入内容的输入框:    效果图:    xml代码:    左边使用TextView放文字,右边使用EditText输入内容。把这两个控件放到一个线性布局里。然后通过设置线性布局的背景,使两个...
  • android2.2 设计EditText的属性:Edit.setInputType(InputType.TYPE_DATETIME_VARIATION_NORMAL);
  • Android EditText输入框限制输入数值范围前言解决逻辑完事 前言 在一些只需要数字输入的地方,经常会使用数字范围来限制输入的数字。具体可参考我这篇文章:android EditText输入框限制输入数字大小,一个页面内多次...
  • android输入框内容改变的监听事件一般用于比如我们常见的:登录qq时 用户名输入完整时头像自动显示,或者注册用户时实时提示注册格式是否正确等。那么我们在这里举例:判断输入框是否有内容,来改变按钮的状态,常...
1 2 3 4 5 ... 20
收藏数 39,744
精华内容 15,897
关键字:

android 登录输入框