本文实现的UI功能介绍。在各个控件间切换焦点,焦点框可以随之移动,并在移动过程中根据下一个控件的大小,焦点框做平滑的大小变化。
直接附上代码, 代码中在关键的部分 已经写好注释。如有问题 或者 看不懂 欢迎给我留言。
java代码
package com.example.testanimview;
import android.util.Log;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.app.Activity;
import android.widget.Button;
import android.graphics.Rect;
import android.widget.ImageView;
import android.view.WindowManager;
import android.widget.RelativeLayout;
import android.app.ActionBar.LayoutParams;
import android.view.View.OnFocusChangeListener;
import android.view.animation.AnimationSet;
import android.view.animation.ScaleAnimation;
import android.view.animation.TranslateAnimation;
/**
* @author snake
*
*/
public class MainActivity extends Activity implements OnFocusChangeListener {
private static final String TAG = MainActivity.class.getSimpleName();
private Button button1;
private Button button2;
private Button button3;
private Button button4;
private Button button5;
private View preSaveView;
private ImageView move_view;
private final int animDuration = 2100;
/**
* 移动焦点缩放的倍数, 1表示没有缩放。
*/
private final float scaleXY = 1.0f;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
move_view = (ImageView) findViewById(R.id.move_view);
button1 = (Button) findViewById(R.id.button1);
button2 = (Button) findViewById(R.id.button2);
button3 = (Button) findViewById(R.id.button3);
button4 = (Button) findViewById(R.id.button4);
button5 = (Button) findViewById(R.id.button5);
button1.setTag("A");
button2.setTag("B");
button3.setTag("C");
button4.setTag("D");
button5.setTag("E");
button1.setOnFocusChangeListener(this);
button2.setOnFocusChangeListener(this);
button3.setOnFocusChangeListener(this);
button4.setOnFocusChangeListener(this);
button5.setOnFocusChangeListener(this);
}
@Override
public void onFocusChange(View arg0, boolean arg1) {
if (arg0.hasFocus()) {
Log.e(TAG, "=======hasFocus=====" + arg0.getTag());
arg0.clearAnimation();
move_view.bringToFront();
setFrameView(arg0, move_view);
} else {
Log.e(TAG, "=======noFocus=====" + arg0.getTag());
arg0.clearAnimation();
preSaveView = arg0;
}
}
private void setFrameView(View curView, ImageView move_view) {
Rect curRect = new Rect();
curView.getGlobalVisibleRect(curRect);
// setFramViewLocation(curRect, move_view);
if (preSaveView == null) {
setFramViewLocation(curRect, move_view);
return;
} else {
}
Rect preRect = new Rect();
preSaveView.getGlobalVisibleRect(preRect);
setFramViewLocation(preRect, move_view);
startFrameAnim(move_view, preRect, curRect);
}
/**
* 设置移动动画, 平移和缩放的合成
* @param move_view
* @param preRect
* @param curRect
*/
private void startFrameAnim(ImageView move_view, Rect preRect, Rect curRect) {
Rect imgRect = new Rect();
move_view.getGlobalVisibleRect(imgRect);
int l = imgRect.left;
int t = imgRect.top;
Log.e(TAG, "::::::::::" + l + ":::" + t);
AnimationSet animationSet = new AnimationSet(true);
TranslateAnimation translateAnimation = new TranslateAnimation(0.0f,
curRect.left - preRect.left - (curRect.right - curRect.left) * (scaleXY -1)/2,
0.0f, curRect.top - preRect.top - ((curRect.bottom - curRect.top)* (scaleXY -1)/2));
ScaleAnimation scaleAnimation = new ScaleAnimation(1f,
(float) (curRect.right - curRect.left)
/ (float) (preRect.right - preRect.left) * scaleXY, 1f,
(float) (curRect.bottom - curRect.top)
/ (float) (preRect.bottom - preRect.top) * scaleXY);
translateAnimation.setDuration(animDuration);
scaleAnimation.setDuration(animDuration);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(translateAnimation);
Log.e(TAG, "curRect.right - curRect.left = "
+ (curRect.right - curRect.left) + ":::"
+ (preRect.right - preRect.left));
Log.e(TAG, "::" + (curRect.left + "::" + preRect.left));
animationSet.setFillAfter(true);
// jyc 移动框 的 平移和缩放
move_view.startAnimation(animationSet);
}
/**
* 设置移动图片的位置,通过setLayoutParams设置的才会真正的改变坐标。 Animation 改变的只是UI,真正的坐标并没有改变
*
* @param curRect
* @param move_view
*/
private void setFramViewLocation(Rect curRect, ImageView move_view) {
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
lp.leftMargin = curRect.left;
lp.topMargin = curRect.top;
lp.width = curRect.width();
lp.height = curRect.height();
Log.e(TAG, " ====== setFramViewLocation" + curRect.left + ":::"
+ curRect.width());
move_view.setLayoutParams(lp);
}
}
xml文件
<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"
tools:context=".MainActivity" >
<!-- android:background="@drawable/bgone" -->
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/button1"
android:layout_width="100dp"
android:layout_height="80dp"
android:layout_alignLeft="@+id/textView1"
android:layout_below="@+id/textView1"
android:layout_marginLeft="536dp"
android:layout_marginTop="27dp"
android:text="A" />
<Button
android:id="@+id/button2"
android:layout_width="50dp"
android:layout_height="250dp"
android:layout_alignLeft="@+id/textView1"
android:layout_alignParentBottom="true"
android:layout_marginBottom="117dp"
android:text="B" />
<Button
android:id="@+id/button3"
android:layout_width="170dp"
android:layout_height="80dp"
android:layout_below="@+id/button1"
android:layout_marginLeft="36dp"
android:layout_marginTop="52dp"
android:layout_toRightOf="@+id/button1"
android:text="C" />
<Button
android:id="@+id/button4"
android:layout_width="250dp"
android:layout_height="300dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_marginBottom="35dp"
android:layout_marginRight="537dp"
android:text="D" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_below="@+id/button3"
android:layout_marginRight="32dp"
android:layout_marginTop="19dp"
android:text="Button" />
<ImageView android:id="@+id/move_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#770000ff"/>
</RelativeLayout>