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

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

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

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

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

思路有了，那我们就开始编码了：
新建一个项目，然后系统生成了一个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",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,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,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",animator2);    animator3.setDuration(1000);    animator3.setInterpolator(new JellyInterpolator());    animator3.start();  }}

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

源码下载：http://xiazai.jb51.net/201607/yuanma/LoginProject(jb51.net).rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android属性动画实现炫酷的登录界面全部内容，希望文章能够帮你解决Android属性动画实现炫酷的登录界面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。