我们聊聊我们常写的登录界面，这个界面我相信很多人都写过，而且也没什么难度，但是如果要实现比较不一般的效果，那就要花点心思了，先看看项目的效果吧：
我一直都不知道怎么在编辑框连设置图片大小，所以这个图不怎么样适配编辑框了，大家先凑合着看看。
我先讲讲思路，当我们输入完账号跟密码之后，点击登录，那这个输入框就慢慢的消失，在消失后，紧接着就出现这个进度的界面。
思路有了，那我们就开始编码了：
新建一个项目，然后系统生成了一个MainActivity.java文件和activity_main.xml文件。先在activity_main里面操作：
代码如下：
这里我引用外面的三个布局，再加上一个TextView写的按钮，标题所引用的文件:
title_layout.xml
输入框引用的文件：input_layout.xml
还有一个加载进度的界面：layout_progress.xml
当然，我这里还用到了drawable文件：radius_drawable_bg.xml，这个文件是输入框的圆角矩形背景：
还有进度的白色圆形背景：rotate_layout_bg.xml
除此之外，还有一个按钮的描边背景text_bg.xml
至此，我们的前期界面的编写就完成了，不难，很容易理解，下面开始处理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);
}
这里主要就是加载控件了，不需要多解释，重点看看动画的处理：
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轴的缩放，然后我们监听到的生命周期，并且在动画结束的时候，隐藏当前布局，开启另外一个布局的显示动画，看到另外一个动画：
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);
}
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) {
}
});
}
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();
}
}
至此，所有的操作已经完成了，运行项目后点击登录按钮，就可以看到效果了。
源码下载：http://xiazai.jb51.net/201607/yuanma/LoginProject(jb51.net).rar
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
