博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
实现一个带浮动标签的输入框
阅读量:6844 次
发布时间:2019-06-26

本文共 2620 字,大约阅读时间需要 8 分钟。

现在带浮动标签的输入框也是一个很常见的东西了,在材料设计里面有一个 TextInputLayout 的控件,我们可以用它实现这个效果。但是材料设计控件的样式比较固定,并不能满足我们产品设计的脑洞。这里提供一个用属性动画实现的方法。

还是先看看效果吧:

大概的思路是这样的:

  • 控件有两层,一层是浮动的标签,一层是输入框。
  • 当点击控件后,标签同时执行一个横向和纵向的缩放动画,还有一个向上移动的动画,让输入框获取到焦点并弹出键盘。
  • 当输入框失去焦点时,判断是否有内容,如果没有则让标签执行一个复原的动画。

下面看看控件的布局:

复制代码

由于 EditText 会默认获取到焦点,所以我先把它隐藏了。这里面值得注意的是 transformPivotXY 这个参数,等下会讲到。

然后我们创建标签向上缩放的方法,代码如下:

public void animationUp() {    ObjectAnimator scaleX = ObjectAnimator.ofFloat(tvHint, "scaleX", 0.6f);    ObjectAnimator scaleY = ObjectAnimator.ofFloat(tvHint, "scaleY", 0.6f);    AnimatorSet animatorSet = new AnimatorSet();    animatorSet.setDuration(100);    animatorSet.setInterpolator(new DecelerateInterpolator());    animatorSet.play(scaleX).with(scaleY); //两个动画同时开始    animatorSet.start();    animatorSet.addListener(new Animator.AnimatorListener() {        @Override        public void onAnimationStart(Animator animation) {        }        @Override        public void onAnimationEnd(Animator animation) {            etContent.setVisibility(View.VISIBLE);            etContent.requestFocus();            //弹出键盘            InputMethodManager imm = (InputMethodManager) getContext().getSystemService(Context.INPUT_METHOD_SERVICE);            imm.showSoftInput(etContent, 0);        }        @Override        public void onAnimationCancel(Animator animation) {                }        @Override        public void onAnimationRepeat(Animator animation) {        }    });}复制代码

代码不难理解,就是同时执行了横向和纵向的缩放动画,让标签缩小到 60%。动画执行完后显示EditText,让它获取到焦点并弹出键盘。如果 animatorSet.setInterpolator(new DecelerateInterpolator()); 这句不懂的话,看看下面这张图就明白了:

到这里,你可能还有的一个疑问就是,向上移动的动画呢?

缩放动画是根据控件的基准坐标来进行缩放的。也就是说,当我们把基准坐标设在控件上方时,缩放的时候也会有一个移动的效果。所以在布局里面用

android:transformPivotX="0dp"android:transformPivotY="-30dp"复制代码

将标签的基准点设为 (0dp, -30dp),这样我们就省去了移动动画。

至于复原的动画,就更简单了:

public void animationDown() {    etContent.setVisibility(View.GONE);    ObjectAnimator scaleX = ObjectAnimator.ofFloat(tvHint, "scaleX", 1);    ObjectAnimator scaleY = ObjectAnimator.ofFloat(tvHint, "scaleY", 1);    AnimatorSet animatorSet = new AnimatorSet();    animatorSet.setDuration(100);    animatorSet.setInterpolator(new DecelerateInterpolator());    animatorSet.play(scaleX).with(scaleY); //两个动画同时开始    animatorSet.start();}复制代码

为了实现失去焦点,标签复原,我们需要监听输入框是否有焦点:

etContent.setOnFocusChangeListener(new OnFocusChangeListener() {    @Override    public void onFocusChange(View view, boolean b) {        if (!b && TextUtils.isEmpty(etContent.getText())) {            animationDown();        }    }});复制代码

这样就已经完成了一个带浮动标签的输入框,妥妥的。

虽然实现一个这样的控件不难,但我个人还是希望可以使用原生控件的,希望移动端的设计能多去了解一下材料设计吧。(T_T)

转载地址:http://rpdul.baihongyu.com/

你可能感兴趣的文章
Java并发/多线程指南
查看>>
深入理解并行编程1
查看>>
听诺奖评委讲演有感
查看>>
强制卸载无响应的nfs挂载目录
查看>>
RHCE认证培训+考试七天实录(一)
查看>>
把DataTable导入SqlServer中
查看>>
py2exe的逆向
查看>>
shell 游戏系列 俄罗斯方块
查看>>
DDOS和sql注入网络***实验
查看>>
DDN与×××备份互联
查看>>
Flask最佳实践
查看>>
kafka源码剖析(三)之日志管理-LogManager
查看>>
tcp连接wait连接过多解决
查看>>
EVE模拟器教程之如何设置预配
查看>>
Dell PowerEdge R720xd 上的 Microsoft Exchange 2010 与 R510 上的 Exchange 2007 之间的跨代大PK...
查看>>
A记录、NS记录、CNAME记录的区别和联系
查看>>
nginx搭建支持http和rtmp协议的流媒体服务器之---环境搭建
查看>>
Java 内存分配全面浅析
查看>>
Linux 文件与权限管理
查看>>
2016-12-7 第一次 测试
查看>>