当前位置：移动技术网 > IT编程>移动开发>Android > Android属性动画实现炫酷的登录界面

Android属性动画实现炫酷的登录界面

2019年07月24日 | 移动技术网IT编程 | 我要评论

熟成蘑菇,上海迪士尼概念股,李z瑞事件图片

我们聊聊我们常写的登录界面，这个界面我相信很多人都写过，而且也没什么难度，但是如果要实现比较不一般的效果，那就要花点心思了，先看看项目的效果吧：

这里写图片描述

我一直都不知道怎么在编辑框连设置图片大小，所以这个图不怎么样适配编辑框了，大家先凑合着看看。

我先讲讲思路，当我们输入完账号跟密码之后，点击登录，那这个输入框就慢慢的消失，在消失后，紧接着就出现这个进度的界面。

思路有了，那我们就开始编码了：
新建一个项目，然后系统生成了一个mainactivity.java文件和activity_main.xml文件。先在activity_main里面操作：
代码如下：

<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="#7adfb8"
  tools:context=".mainactivity" >

  <include
    android:id="@+id/main_title"
    layout="@layout/title_layout" />

  <linearlayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/main_title"
    android:orientation="vertical" >

    <imageview
      android:layout_width="55dip"
      android:layout_height="55dip"
      android:layout_gravity="center_horizontal"
      android:src="@drawable/project_detail_cir" />

    <textview
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_margintop="5dip"
      android:gravity="center"
      android:text="firefly forest"
      android:textcolor="#ffffff"
      android:textsize="24sp" />

    <textview
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:gravity="center"
      android:text="show your ideas"
      android:textcolor="#ffffff"
      android:textsize="16sp" />
  </linearlayout>

  <relativelayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_centerinparent="true" >

    <include
      android:id="@+id/input_layout"
      android:layout_width="match_parent"
      android:layout_height="130dip"
      layout="@layout/input_layout" />

    <include
      android:id="@+id/layout_progress"
      android:layout_width="match_parent"
      android:layout_height="130dip"
      layout="@layout/layout_progress"
      android:visibility="gone" />

    <textview
      android:id="@+id/main_btn_login"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_below="@+id/input_layout"
      android:layout_centerinparent="true"
      android:layout_margintop="15dip"
      android:background="@drawable/text_bg"
      android:gravity="center"
      android:paddingbottom="2dip"
      android:paddingleft="15dip"
      android:paddingright="15dip"
      android:paddingtop="2dip"
      android:text="login"
      android:textcolor="#ffffff"
      android:textsize="20sp" />
  </relativelayout>

</relativelayout>

这里我引用外面的三个布局，再加上一个textview写的按钮，标题所引用的文件:
title_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="50dip"
  android:gravity="center_vertical"
  android:padding="10dip" >

  <imageview
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/back" />

  <textview 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textcolor="#ffffff"
    android:layout_alignparentright="true"
    android:layout_centervertical="true"
    android:textsize="20sp"
    android:text="sign up"
    />
</relativelayout>

输入框引用的文件：input_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical" >

  <linearlayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="20dip"
    android:background="@drawable/radius_drawable_bg"
    android:orientation="vertical"
    android:padding="10dip" >

    <linearlayout
      android:id="@+id/input_layout_name"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center_vertical"
      android:orientation="horizontal" >

      <imageview
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/paw_code" />

      <edittext
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginleft="10dip"
        android:background="#00000000"
        android:hint="账号/用户名/邮箱"
        android:padding="5dip"
        android:textsize="16sp" />
    </linearlayout>

    <view
      android:layout_width="match_parent"
      android:layout_height="1px"
      android:layout_marginbottom="5dip"
      android:layout_margintop="5dip"
      android:background="#eeeeee" />

    <linearlayout
      android:id="@+id/input_layout_psw"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center_vertical"
      android:orientation="horizontal" >

      <imageview
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/paw_left" />

      <edittext
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginleft="10dip"
        android:background="#00000000"
        android:hint="密码"
        android:inputtype="textpassword"
        android:padding="5dip"
        android:textsize="16sp" />
    </linearlayout>
  </linearlayout>
</linearlayout>

还有一个加载进度的界面：layout_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical" >

  <linearlayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="20dip"
    android:background="@drawable/rotate_layout_bg"
    android:orientation="vertical"
    android:padding="10dip" >

    <progressbar
      android:id="@+id/progressbar2"
      android:layout_width="wrap_content"
       android:layout_margin="10dip"
      android:layout_height="wrap_content" />
  </linearlayout>

</linearlayout>

当然，我这里还用到了drawable文件：radius_drawable_bg.xml，这个文件是输入框的圆角矩形背景：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
  <corners android:radius="5dip"/>
  <solid android:color="#ffffff"/>

</shape>

还有进度的白色圆形背景：rotate_layout_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval" >

  <corners android:radius="60dip" />

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

</shape>

除此之外，还有一个按钮的描边背景text_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  >

  <corners android:radius="50dip"/>

  <stroke
    android:width="1dip"
    android:color="#ffffff" />

</shape>

至此，我们的前期界面的编写就完成了，不难，很容易理解，下面开始处理mainactivity.java文件，先看看这里的初始化操作;

  private textview mbtnlogin;

  private view progress;

  private view minputlayout;

  private float mwidth, mheight;

  private linearlayout mname, mpsw;

  private void initview() {
    mbtnlogin = (textview) findviewbyid(r.id.main_btn_login);
    progress = findviewbyid(r.id.layout_progress);
    minputlayout = findviewbyid(r.id.input_layout);
    mname = (linearlayout) findviewbyid(r.id.input_layout_name);
    mpsw = (linearlayout) findviewbyid(r.id.input_layout_psw);

    mbtnlogin.setonclicklistener(this);
  }

这里主要就是加载控件了，不需要多解释，重点看看动画的处理：

/**
   * 输入框的动画效果
   * 
   * @param view
   *      控件
   * @param w
   *      宽
   * @param h
   *      高
   */
  private void inputanimator(final view view, float w, float h) {

    animatorset set = new animatorset();

    valueanimator animator = valueanimator.offloat(0, w);
    animator.addupdatelistener(new animatorupdatelistener() {

      @override
      public void onanimationupdate(valueanimator animation) {
        float value = (float) animation.getanimatedvalue();
        viewgroup.marginlayoutparams params = (marginlayoutparams) view
            .getlayoutparams();
        params.leftmargin = (int) value;
        params.rightmargin = (int) value;
        view.setlayoutparams(params);
      }
    });

    objectanimator animator2 = objectanimator.offloat(minputlayout,
        "scalex", 1f, 0.5f);
    set.setduration(1000);
    set.setinterpolator(new acceleratedecelerateinterpolator());
    set.playtogether(animator, animator2);
    set.start();
    set.addlistener(new animatorlistener() {

      @override
      public void onanimationstart(animator animation) {

      }

      @override
      public void onanimationrepeat(animator animation) {

      }

      @override
      public void onanimationend(animator animation) {
        /**
         * 动画结束后，先显示加载的动画，然后再隐藏输入框
         */
        progress.setvisibility(view.visible);
        progressanimator(progress);
        minputlayout.setvisibility(view.invisible);

      }

      @override
      public void onanimationcancel(animator animation) {

      }
    });

  }

这里用到的知识点还是挺多，例如：属性动画容器、插值器、属性动画的监听、动态的设置控件的相对位置;一开始可能不容易理解，没关系，以后我会在博客里都讲到。我就说一下这里的思路;
当我们开启这个动画的时候，先是设置相对位置，同时处理在x轴的缩放，然后我们监听到的生命周期，并且在动画结束的时候，隐藏当前布局，开启另外一个布局的显示动画，看到另外一个动画：

/**
   * 出现进度动画
   * 
   * @param view
   */
  private void progressanimator(final view view) {
    propertyvaluesholder animator = propertyvaluesholder.offloat("scalex",
        0.5f, 1f);
    propertyvaluesholder animator2 = propertyvaluesholder.offloat("scaley",
        0.5f, 1f);
    objectanimator animator3 = objectanimator.ofpropertyvaluesholder(view,
        animator, animator2);
    animator3.setduration(1000);
    animator3.setinterpolator(new jellyinterpolator());
    animator3.start();

  }

其实这里的套路是一样的但是不同的是，这里我用到了自己的插值器;
jellyinterpolator.java:

public class jellyinterpolator extends linearinterpolator {
  private float factor;

  public jellyinterpolator() {
    this.factor = 0.15f;
  }

  @override
  public float getinterpolation(float input) {
    return (float) (math.pow(2, -10 * input)
        * math.sin((input - factor / 4) * (2 * math.pi) / factor) + 1);
  }
}

让动画更有动感。下面我贴上mainactivity的全部代码;

public class mainactivity extends activity implements onclicklistener {

  private textview mbtnlogin;

  private view progress;

  private view minputlayout;

  private float mwidth, mheight;

  private linearlayout mname, mpsw;

  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    requestwindowfeature(window.feature_no_title);
    setcontentview(r.layout.activity_main);

    initview();
  }

  private void initview() {
    mbtnlogin = (textview) findviewbyid(r.id.main_btn_login);
    progress = findviewbyid(r.id.layout_progress);
    minputlayout = findviewbyid(r.id.input_layout);
    mname = (linearlayout) findviewbyid(r.id.input_layout_name);
    mpsw = (linearlayout) findviewbyid(r.id.input_layout_psw);

    mbtnlogin.setonclicklistener(this);
  }

  @override
  public void onclick(view v) {

    // 计算出控件的高与宽
    mwidth = mbtnlogin.getmeasuredwidth();
    mheight = mbtnlogin.getmeasuredheight();
    // 隐藏输入框
    mname.setvisibility(view.invisible);
    mpsw.setvisibility(view.invisible);

    inputanimator(minputlayout, mwidth, mheight);

  }

  /**
   * 输入框的动画效果
   * 
   * @param view
   *      控件
   * @param w
   *      宽
   * @param h
   *      高
   */
  private void inputanimator(final view view, float w, float h) {

    animatorset set = new animatorset();

    valueanimator animator = valueanimator.offloat(0, w);
    animator.addupdatelistener(new animatorupdatelistener() {

      @override
      public void onanimationupdate(valueanimator animation) {
        float value = (float) animation.getanimatedvalue();
        viewgroup.marginlayoutparams params = (marginlayoutparams) view
            .getlayoutparams();
        params.leftmargin = (int) value;
        params.rightmargin = (int) value;
        view.setlayoutparams(params);
      }
    });

    objectanimator animator2 = objectanimator.offloat(minputlayout,
        "scalex", 1f, 0.5f);
    set.setduration(1000);
    set.setinterpolator(new acceleratedecelerateinterpolator());
    set.playtogether(animator, animator2);
    set.start();
    set.addlistener(new animatorlistener() {

      @override
      public void onanimationstart(animator animation) {

      }

      @override
      public void onanimationrepeat(animator animation) {

      }

      @override
      public void onanimationend(animator animation) {
        /**
         * 动画结束后，先显示加载的动画，然后再隐藏输入框
         */
        progress.setvisibility(view.visible);
        progressanimator(progress);
        minputlayout.setvisibility(view.invisible);

      }

      @override
      public void onanimationcancel(animator animation) {

      }
    });

  }

  /**
   * 出现进度动画
   * 
   * @param view
   */
  private void progressanimator(final view view) {
    propertyvaluesholder animator = propertyvaluesholder.offloat("scalex",
        0.5f, 1f);
    propertyvaluesholder animator2 = propertyvaluesholder.offloat("scaley",
        0.5f, 1f);
    objectanimator animator3 = objectanimator.ofpropertyvaluesholder(view,
        animator, animator2);
    animator3.setduration(1000);
    animator3.setinterpolator(new jellyinterpolator());
    animator3.start();

  }
}

至此，所有的操作已经完成了，运行项目后点击登录按钮，就可以看到效果了。

源码下载：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

Android制作登录页面并且记住账号密码功能的实现代码

一、页面搭建<?xml version="1.0" encoding="utf-8"?><android.support.co... [阅读全文]
Android studio开发小型对话机器人app(实例代码)

前言偶然在网上看到一个免费机器人接口，所以生此想法，接口地址：，android开发比爬虫要繁琐得多，所以本文我将细说接口的调用方法，读者可根据思路去网上找一些免... [阅读全文]
Android通过Java sdk的方式接入OpenCv的方法

简述公司最近要做运动检测和眼球追踪，鉴于资费等因素，最后考虑使用opencv的相关api来来满足业务需求。在使用过程中发现opencv的v4.2.0和v4.1.... [阅读全文]
Android 通过cmake的方式接入opencv的方法步骤

简述我们通过java sdk的方式已经将opencv接入到项目中了，如果想使用opencv sdk 提供的 c++ 头文件与 .so动态库,自己封装jni这样... [阅读全文]
Android开发学习实现简单计算器

这里是用线性布局实现的计算器，为防止以后再回顾知识代码找不到，特将代码贴在这里：xml文件的布局代码：<?xml version="1.0" en... [阅读全文]
Android Studio finish()方法的使用与解决app点击“返回”(直接退出)

在这里，我们将用到finish(),简单介绍一下它的使用:finish()官方解析:call this when your activity is done a... [阅读全文]
Flutter 实现虎牙/斗鱼弹幕功能

用flutter实现弹幕功能，轻松实现虎牙、斗鱼的弹幕效果。先来一张效果图：实现原理弹幕的实现原理非常简单，即将一条弹幕从左侧平移到右侧，当然我们要计算弹幕垂直... [阅读全文]
Flutter 插件url_launcher简介

url_launcher是用于在移动平台中启动url的flutter插件，适用于ios和android平台。他可以打开网页，发送邮件，还可以拨打电话。githu... [阅读全文]
Android 进度条 ProgressBar的实现代码(隐藏、出现、加载进度)

初识进度条progressbar软件：android studio实现：1.点击按钮，进度条隐藏；再次点击，进度条出现。循环2.点击按钮，水平进度条进度呈现并+... [阅读全文]
Flutter 实现网易云音乐字幕的代码

没有接触过音乐字幕方面知识的话，会对字幕的实现比较迷茫，什么时候转到下一句？看了这篇文章，你就会明白字幕so easy。先来一张效果图：字幕格式目前市面上有很多... [阅读全文]

网友评论


验证码：

Android属性动画实现炫酷的登录界面

2019年07月24日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论