android属性动画实现好看的登录界面效果(登录页面editText标题上下浮动的动画)

最新推荐文章于 2024-05-17 09:38:45 发布
最新推荐文章于 2024-05-17 09:38:45 发布
阅读量921 收藏 13
点赞数 2
分类专栏： 移动开发 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33886316/article/details/117454914
版权

前言

使用安卓objectAnimator实现登录页面editText标题上下浮动的动画

效果

在这里插入图片描述

代码

MainActivity.java监听动画关键的代码

//编辑框点击时的动画
    @Override
    public void onFocusChange(View v, boolean hasFocus) {

        if(hasFocus){
            //获得焦点
            if(v.getId()==R.id.editText_login_user_name){
                
                if(editText_login_user_name.getText().length()==0){
                    //动画用的是px单位 需自己定义工具转换
                    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_user_name, "translationY", ViewUtil.dip2px(this,25), 0);
                    objectAnimator.setDuration(400);
                    objectAnimator.start();

                }
                //编辑框下的横线的动画
                textView_line_1.setBackgroundColor(getResources().getColor(R.color.colorBlue));
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_line_1, "scaleX", 0, 1);
                objectAnimator.setDuration(400);
                objectAnimator.start();
            }
            if(v.getId()==R.id.editText_login_password){
                if(editText_login_password.getText().length()==0){
                    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_password, "translationY", ViewUtil.dip2px(this,25), 0);
                    objectAnimator.setDuration(400);
                    objectAnimator.start();
                }
                textView_line_2.setBackgroundColor(getResources().getColor(R.color.colorBlue));
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_line_2, "scaleX", 0, 1);
                objectAnimator.setDuration(400);
                objectAnimator.start();
            }

        }else{
            //取消焦点
            textView_line_2.setBackgroundColor(getResources().getColor(R.color.grey));
            textView_line_1.setBackgroundColor(getResources().getColor(R.color.grey));
            if(v.getId()==R.id.editText_login_user_name&&editText_login_user_name.getText().length()==0){
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_user_name, "translationY", 0, ViewUtil.dip2px(this,25));
                objectAnimator.setDuration(400);
                objectAnimator.start();

            }
            if(v.getId()==R.id.editText_login_password&&editText_login_password.getText().length()==0){
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_password, "translationY", 0, ViewUtil.dip2px(this,25));
                objectAnimator.setDuration(400);
                objectAnimator.start();
            }

        }

    }

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener,View.OnFocusChangeListener {

    private TextView textView_login_user_name; // 声明一个文本视图对象
    private TextView textView_login_password; // 声明一个文本视图对象
    private TextView textView_line_1; // 声明一个文本视图对象
    private TextView textView_line_2; // 声明一个文本视图对象
    private EditText editText_login_user_name; // 声明一个编辑框对象
    private EditText editText_login_password; // 声明一个编辑框对象
    private Button btn_forget; // 声明一个按钮控件对象
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView_login_user_name = findViewById(R.id.textView_login_user_name);
        textView_login_password = findViewById(R.id.textView_login_password);
        textView_line_1 = findViewById(R.id.textView_line_1);
        textView_line_2 = findViewById(R.id.textView_line_2);
        editText_login_user_name = findViewById(R.id.editText_login_user_name);
        editText_login_password = findViewById(R.id.editText_login_password);

        btn_forget = findViewById(R.id.button_forget_password);
        // 给editText_login_user_name添加文本变更监听器
        editText_login_user_name.addTextChangedListener(new HideTextWatcher(editText_login_user_name, 11));
        // 给editText_login_password添加文本变更监听器
        editText_login_password.addTextChangedListener(new HideTextWatcher(editText_login_password, 6));


        btn_forget.setOnClickListener(this);
        findViewById(R.id.button_login).setOnClickListener(this);
        
        //动画绑定
        editText_login_user_name.setOnFocusChangeListener(this);
        editText_login_password.setOnFocusChangeListener(this);
    }
   
    //编辑框点击时的动画
    @Override
    public void onFocusChange(View v, boolean hasFocus) {

        if(hasFocus){
            //获得焦点
            if(v.getId()==R.id.editText_login_user_name){

                if(editText_login_user_name.getText().length()==0){
                    //动画用的是px单位 需自己定义工具转换
                    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_user_name, "translationY", ViewUtil.dip2px(this,25), 0);
                    objectAnimator.setDuration(400);
                    objectAnimator.start();

                }
                //编辑框下的横线的动画
                textView_line_1.setBackgroundColor(getResources().getColor(R.color.colorBlue));
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_line_1, "scaleX", 0, 1);
                objectAnimator.setDuration(400);
                objectAnimator.start();
            }
            if(v.getId()==R.id.editText_login_password){
                if(editText_login_password.getText().length()==0){
                    ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_password, "translationY", ViewUtil.dip2px(this,25), 0);
                    objectAnimator.setDuration(400);
                    objectAnimator.start();
                }
                textView_line_2.setBackgroundColor(getResources().getColor(R.color.colorBlue));
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_line_2, "scaleX", 0, 1);
                objectAnimator.setDuration(400);
                objectAnimator.start();
            }

        }else{
            //取消焦点
            textView_line_2.setBackgroundColor(getResources().getColor(R.color.grey));
            textView_line_1.setBackgroundColor(getResources().getColor(R.color.grey));
            if(v.getId()==R.id.editText_login_user_name&&editText_login_user_name.getText().length()==0){
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_user_name, "translationY", 0, ViewUtil.dip2px(this,25));
                objectAnimator.setDuration(400);
                objectAnimator.start();

            }
            if(v.getId()==R.id.editText_login_password&&editText_login_password.getText().length()==0){
                ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(textView_login_password, "translationY", 0, ViewUtil.dip2px(this,25));
                objectAnimator.setDuration(400);
                objectAnimator.start();
            }

        }

    }

}

activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/linearLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView_login_wellcome"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:padding="10dp"
        android:text="欢迎登录"
        android:textAlignment="viewStart"
        android:textColor="@color/black"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView_login_wellcome">

        <TextView
            android:id="@+id/textView_login_user_name"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="-20dp"
            android:background="@null"
            android:text="用户名"
            android:textSize="20sp"
            android:translationY="25dp"
            app:layout_constraintBottom_toTopOf="@+id/editText_login_user_name"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="@+id/editText_login_user_name"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/editText_login_user_name"
            android:layout_width="0dp"
            android:layout_height="25dp"
            android:layout_marginTop="2dp"
            android:background="@android:color/transparent"
            android:ems="10"
            android:inputType="textPersonName"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView_login_user_name" />

        <TextView
            android:id="@+id/textView_line_1"
            android:layout_width="0dp"
            android:layout_height="2px"
            android:layout_marginTop="2dp"
            android:layout_marginBottom="8dp"
            android:background="@color/grey"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/editText_login_user_name" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/constraintLayout2">

        <TextView
            android:id="@+id/textView_login_password"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="100dp"
            android:text="密码"
            android:textSize="20sp"
            android:translationY="25dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <EditText
            android:id="@+id/editText_login_password"
            android:layout_width="0dp"
            android:layout_height="25dp"
            android:layout_marginTop="2dp"
            android:background="@android:color/transparent"
            android:ems="10"
            android:inputType="textPassword"
            app:layout_constraintEnd_toStartOf="@+id/button_forget_password"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/textView_login_password" />

        <Button
            android:id="@+id/button_forget_password"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_marginBottom="8dp"
            android:background="@null"
            android:text="忘记密码"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/editText_login_password"
            app:layout_constraintTop_toBottomOf="@+id/textView_login_password" />

        <TextView
            android:id="@+id/textView_line_2"
            android:layout_width="0dp"
            android:layout_height="2px"
            android:layout_marginTop="2dp"
            android:layout_marginBottom="8dp"
            android:background="@color/grey"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/button_forget_password"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/editText_login_password" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <Button
        android:id="@+id/button_login"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/button_style"
        android:text="登录"
        android:textColor="@color/white"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/constraintLayout3" />


</androidx.constraintlayout.widget.ConstraintLayout>

其他样式布局文件未给出有需要联系作者

rightstar_
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Android属性动画实现炫酷的登录界面
09-01
主要为大家详细介绍了Android属性动画实现炫酷的登录界面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
安卓EditText输入框相关-material风格的edittext效果很不错。.rar
07-29
material风格的edittext，效果很不错。.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
推荐一个优雅的Android登录界面库——MaterialLogin
最新发布
gitblog_00068的博客
05-17 444
推荐一个优雅的Android登录界面库——MaterialLogin 项目地址:https://gitcode.com/shem8/MaterialLogin 在当今移动应用设计中，用户界面的设计至关重要，它直接决定了用户的体验感和留存率。今天，我们要推荐一个专为Android开发者打造的，基于Material Design风格的登录视图库——MaterialLogin。这个开源项目旨在帮助开发者...
Android 常用且比较好看的EditText（二）—— TextInputEditText
https://github.com/W4ited
12-10 8062
文章目录Android EditText样例图一xml图二xml错误提示样式一错误提示样式二错误信息样式关键点总结 Android EditText 之前讲了一个带动画的EditText 这一篇来讲一下 对于我个人也比较常用的一个EditText —— Material Design 的 TextInputEditText 网上也有很多文章关于这个TextInputEditText 很多属性也都归纳过 这里我就简单讲述一下 我使用的 仅为个人自己所学习和使用的 首先 TextInputEditText 要和
Android 常用且比较好看的EditText（一）——带动画的EditText搜索框
https://github.com/W4ited
12-07 4371
Android EditText组件：带过渡动画的常用EditText组件
带动画效果的登录页面（手撕版）
weixin_52831324的博客
11-24 422
带动画效果的登录页面（手撕版）
前端五个拿来就能用的炫酷动画登录页面
热门推荐
程序员成长指北
06-29 2万+
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言：提供了完整代码和预览图为防止大家复制出错，特提供代码的打包下载地址百度网盘[1]链接：https://pan.baidu.com/s/1qjquFV9j7I0KldFu7d7eZg?pwd=n2sz提取码：n2sz微信截图_20220517142941.png一....
Android自定义EditText实现登录界面
08-28
"Android自定义EditText实现登录界面" Android自定义EditText实现登录界面是Android应用开发中一个常见的需求，实现一个带有删除按钮的EditText控件，可以让用户更方便地清除输入的内容。 在Android中，EditText...
Android EditText实现扁平化的登录界面
08-28
本篇文章将详细介绍如何使用Android的EditText组件来实现一个扁平化的登录界面。 首先，我们从界面布局开始。在Android中，通常使用XML文件来定义用户界面的结构。在提供的代码段中，可以看到使用了`...
Android中使用Kotlin实现一个简单的登录界面
08-29
总结来说，使用Kotlin实现Android登录界面的优势在于代码简洁、可读性高，借助Anko库可以快速构建UI。通过理解Kotlin的基础语法、Anko DSL以及Android UI组件的工作原理，开发者能够轻松地创建出功能完善的登录界面...
Android实现闪屏及注册和登录界面之间的切换效果
09-01
这些界面的设计和实现涉及到Android的UI组件，如EditText用于文本输入，Button用于提交操作，以及可能的ProgressBar显示加载状态。为了实现从引导页到注册/登录界面的跳转，同样使用`Intent`： ```java Intent ...
一个精美的Login界面(解决了一EditText自带clear的功能,类似iphone的UITextField)
07-10
见博客:http://blog.csdn.net/baidu_nod/article/details/37655153和http://blog.csdn.net/baidu_nod/article/details/37655327
Box 效果的 EditText，很漂亮哦.zip
10-10
Box 效果的 EditText，很漂亮哦。.zip,基于（旧）google材料设计指南的框中的材料设计文本字段。
HTML编写渐变色动画登录页面全攻略
canshanyin的博客
05-21 1515
在线渐变色生成器（如https://www.cssmatic.com/gradient-generator）可以在你调试渐变效果时提供非常方便的帮助，你可以在其中选择渐变类型、角度、颜色、位置等属性，实时查看效果，并将生成的渐变色代码直接复制到自己的CSS文件中。gradient属性支持多种类型的渐变（线性渐变、径向渐变等）和多种形式的颜色定义（RGB、HEX、HSL等），同时还支持在渐变过程中设置不同的颜色位置和角度等属性。渐变色动画是指在网页中使用渐变色呈现动态效果，通常用于按钮、背景等元素上。
html+css+js实现的，好玩的，带动画登录注册页面
bilibuling的博客
04-17 867
html+css+js实现的好玩的登录注册页面 先看效果： login.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i
【每日一练】46—登录页面表单输入动画效果的实现
web前端开发
08-17 198
写在前面登录功能是我们在做网站时，一个非常高频的功能需求。当然，也有很多博客个人小站什么的，不需要这个功能，一个功能是否需要，主要还是看我们产品的实际需求，需要我们就加上，不需要自然就是舍弃，不要觉得，这个功能别人有，我没有，好像不行一样，千万不要这么觉得。但是，对于我们的日常练习，我们肯定是每个常用功能都会尝试着去写一写，练一练，因此，今天我们就来练习一个登录页面的效果，具体效果可以看下面的GI...
android输入框样式,android 漂亮的EditText样式
weixin_39836943的博客
05-27 2199
edittext_focused.xmlandroid:width="1dip"android:color="#728ea3" />edittext_normal.xmlandroid:width="1dip"android:color="#BDC7D8" />bg_edittext_selector.xmlactivity_main.xmlxmlns:tools="http://sc...
自定义EditText
Key_MQL的博客
07-03 502
这几天想要做一种类似于淘宝App的登录界面，看着淘宝上的EditText真是好看，它换了底线，换了光标。应该是继承EditText后重写的onDrow方法。那么它具体是怎么实现的呢？经过一段时间的摸索后终于实现了类似的效果。首先我们看看如果更改光标样式 这个主要是这么一个参数：android:textCursorDrawable 给它配一个shape文件就可以了。关于shape我这里有一篇博客关于
Android开发之EditText控件（实现用户登录界面）并实现数据传输代码实例
04-12
EditText控件是用来接收用户输入的一种控件，可以用于实现登录界面。在Android开发中，可以通过findViewById方法找到EditText控件，并使用getText方法获取用户输入的内容，在需要传输数据时可以使用Intent传递数据。...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值