上次写了一篇关于机顶盒焦点事件的获取。以及页面的适配。
接下来，開始编写机顶盒开发中对于一些图片的焦点事件。动画效果、倒影的实现。这都是在机顶盒开发界面中经常要要用到的一些效果！！
直接开代码：
因为上一篇文章我已经写过了一些界面的适配。（http://blog.csdn.net/a565102223/article/details/41074645）接下来就直接在上次的代码中改动了。为了简单演示起见，我仅仅改动View1的layout1.
<?接下来就是改动View1的代码了：xml version="1.0" encoding="utf-8"?
> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingTop="45dp" > <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" > <!-- 这个布局中的imageview是创建倒影使用的 --> <RelativeLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="425dp" > <ImageView android:id="@+id/setting_layout_refimg_0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="50dp" /> <ImageView android:id="@+id/setting_layout_refimg_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="300dip" /> </RelativeLayout> <RelativeLayout android:id="@+id/video_type_layout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" > <!-- 布局都是使用的帧布局，看起起来会有突出的效果，记得把可点击的属性都加上 --> <FrameLayout android:id="@+id/setting_layout_fl_0" android:layout_width="510dp" android:layout_height="344dp" > <!-- 这张图片作为第一张图片，但图片获得焦点后显示，失去焦点后不显示 --> <ImageView android:id="@+id/setting_layout_bg_0" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="20dp" android:layout_marginTop="20dp" android:background="@drawable/setting_left_top" /> <!-- 功能图片 --> <ImageView android:id="@+id/setting_layout_log_0" android:layout_width="264dp" android:layout_height="250dp" android:layout_marginLeft="115dp" android:layout_marginTop="20dp" android:clickable="true" android:focusable="true" android:focusableInTouchMode="true" android:nextFocusDown="@+id/setting_layout_log_1" android:nextFocusRight="@+id/setting_layout_log_3" android:nextFocusUp="@id/settings" android:scaleType="fitXY" android:src="@drawable/setting_net" /> </FrameLayout> <FrameLayout android:id="@+id/setting_layout_fl_1" android:layout_width="400dp" android:layout_height="244dp" android:layout_marginLeft="50dp" android:layout_marginTop="210dp" > <ImageView android:id="@+id/setting_layout_bg_1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/right_bottom" /> <ImageView android:id="@+id/setting_layout_log_1" android:layout_width="264dp" android:layout_height="150dp" android:layout_marginLeft="65dp" android:layout_marginTop="65dp" android:clickable="true" android:focusable="true" android:focusableInTouchMode="true" android:nextFocusRight="@+id/setting_layout_log_2" android:nextFocusUp="@+id/setting_layout_log_0" android:scaleType="fitXY" android:src="@drawable/setting_update" /> </FrameLayout> <FrameLayout android:id="@+id/setting_layout_fl_2" android:layout_width="550dp" android:layout_height="300dp" android:layout_marginLeft="300dp" android:layout_marginTop="165dp" > <ImageView android:id="@+id/setting_layout_bg_2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/vod_big_top" /> <ImageView android:id="@+id/setting_layout_log_2" android:layout_width="405dp" android:layout_height="200dp" android:layout_marginLeft="85dp" android:layout_marginTop="60dp" android:background="@drawable/setting_viedo" android:clickable="true" android:focusable="true" android:focusableInTouchMode="true" android:nextFocusLeft="@+id/setting_layout_log_1" android:nextFocusRight="@+id/settings" android:nextFocusUp="@+id/setting_layout_log_3" /> </FrameLayout> <FrameLayout android:id="@+id/setting_layout_fl_3" android:layout_width="387dp" android:layout_height="338dp" android:layout_marginLeft="294dip" android:layout_marginTop="5dip" > <ImageView android:id="@+id/setting_layout_bg_3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="15dp" android:background="@drawable/setting_left_top" /> <ImageView android:id="@+id/setting_layout_log_3" android:layout_width="200dp" android:layout_height="200dp" android:layout_marginLeft="90dp" android:layout_marginTop="15dp" android:clickable="true" android:focusable="true" android:focusableInTouchMode="true" android:nextFocusDown="@+id/setting_layout_log_2" android:nextFocusLeft="@+id/setting_layout_log_0" android:nextFocusRight="@+id/setting_layout_log_4" android:src="@drawable/setting" /> </FrameLayout> <FrameLayout android:id="@+id/setting_layout_fl_4" android:layout_width="387dp" android:layout_height="338dp" android:layout_marginLeft="500dip" android:layout_marginTop="5dip" > <ImageView android:id="@+id/setting_layout_bg_4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="15dp" android:background="@drawable/setting_left_top" /> <ImageView android:id="@+id/setting_layout_log_4" android:layout_width="200dip" android:layout_height="200dip" android:layout_marginLeft="90dp" android:layout_marginTop="15dp" android:clickable="true" android:focusable="true" android:focusableInTouchMode="true" android:nextFocusDown="@id/setting_layout_log_2" android:nextFocusLeft="@id/setting_layout_log_3" android:nextFocusRight="@id/setting_layout_log_4" android:nextFocusUp="@id/settings" android:src="@drawable/setting_launch" /> </FrameLayout> </RelativeLayout> <ImageView android:id="@+id/white_boder" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/white_border" android:visibility="invisible" /> </FrameLayout> </FrameLayout>
package com.example.fouseonclick;
import android.content.Context;
import android.graphics.Bitmap;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
public class View1 extends LinearLayout implements OnClickListener,
OnFocusChangeListener {
private Context mContext;
private ImageView refImg[] = new ImageView[2];
private FrameLayout[] fls = new FrameLayout[5];
private ImageView[] backGrounds = new ImageView[5];// 背景图片层
private ImageView[] typeLogs = new ImageView[5];// 类型标志
public View1(Context context) {
super(context);
mContext = context;
}
//初始化UI
public void initView() {
setLayoutParams(new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT));
setGravity(Gravity.CENTER_HORIZONTAL);
View root = LayoutInflater.from(mContext).inflate(R.layout.layout1,
null);
addView(root);
refImg[0] = (ImageView)findViewById(R.id.setting_layout_refimg_0);
refImg[1] = (ImageView)findViewById(R.id.setting_layout_refimg_1);
fls[0] = (FrameLayout) findViewById(R.id.setting_layout_fl_0);
fls[1] = (FrameLayout) findViewById(R.id.setting_layout_fl_1);
fls[2] = (FrameLayout) findViewById(R.id.setting_layout_fl_2);
fls[3] = (FrameLayout) findViewById(R.id.setting_layout_fl_3);
fls[4] = (FrameLayout) findViewById(R.id.setting_layout_fl_4);
typeLogs[0] = (ImageView) findViewById(R.id.setting_layout_log_0);
typeLogs[1] = (ImageView) findViewById(R.id.setting_layout_log_1);
typeLogs[2] = (ImageView) findViewById(R.id.setting_layout_log_2);
typeLogs[3] = (ImageView) findViewById(R.id.setting_layout_log_3);
typeLogs[4] = (ImageView) findViewById(R.id.setting_layout_log_4);
backGrounds[0] = (ImageView) findViewById(R.id.setting_layout_bg_0);
backGrounds[1] = (ImageView) findViewById(R.id.setting_layout_bg_1);
backGrounds[2] = (ImageView) findViewById(R.id.setting_layout_bg_2);
backGrounds[3] = (ImageView) findViewById(R.id.setting_layout_bg_3);
backGrounds[4] = (ImageView) findViewById(R.id.setting_layout_bg_4);
//设置事件
for (int i = 0; i < 5; i++) {
typeLogs[i].setOnClickListener(this);
typeLogs[i].setOnFocusChangeListener(this);
backGrounds[i].setVisibility(View.GONE);
}
initRef();
}
// 倒影的实现
private void initRef() {
int refIndex = 0;
for (int i = 0; i < 2; i++) {
switch (i) {
case 0:
Bitmap rebm = ImageReflect.createCutReflectedImage(
ImageReflect.convertViewToBitmap(fls[1]), 0);
refImg[refIndex].setImageBitmap(rebm);
refIndex++;
break;
case 1:
Bitmap rebm1 = ImageReflect.createCutReflectedImage(
ImageReflect.convertViewToBitmap(fls[2]), 0);
refImg[refIndex].setImageBitmap(rebm1);
refIndex++;
break;
default:
break;
}
}
}
//动画效果实现
ScaleAnimEffect animEffect = new ScaleAnimEffect();
@Override
public void onFocusChange(View v, boolean hasFocus) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.setting_layout_log_0:
if (hasFocus) {
showOnFocusAnimation(0);
} else {
showLooseFocusAinimation(0);
}
break;
case R.id.setting_layout_log_1:
if (hasFocus) {
showOnFocusAnimation(1);
} else {
showLooseFocusAinimation(1);
}
break;
case R.id.setting_layout_log_2:
if (hasFocus) {
showOnFocusAnimation(2);
} else {
showLooseFocusAinimation(2);
}
break;
case R.id.setting_layout_log_3:
if (hasFocus) {
showOnFocusAnimation(3);
} else {
showLooseFocusAinimation(3);
}
break;
case R.id.setting_layout_log_4:
if (hasFocus) {
showOnFocusAnimation(4);
} else {
showLooseFocusAinimation(4);
}
break;
}
}
//失去焦点后的动画
private void showLooseFocusAinimation(int position) {
animEffect.setAttributs(1.10f, 1.0f, 1.10f, 1.0f, 100);
if (position == 0) {
} else if (position == 1) {
} else if (position == 4) {
}
typeLogs[position].startAnimation(animEffect.createAnimation());
backGrounds[position].setVisibility(View.GONE);
}
//获得焦点后的显示动画
private void showOnFocusAnimation(final int position) {
fls[position].bringToFront();
animEffect.setAttributs(1.0f, 1.10f, 1.0f, 1.10f, 100);
Animation anim = animEffect.createAnimation();
anim.setAnimationListener(new AnimationListener() {
@Override
public void onAnimationStart(Animation animation) {
}
@Override
public void onAnimationRepeat(Animation animation) {
}
@Override
public void onAnimationEnd(Animation animation) {
backGrounds[position].startAnimation(animEffect.alphaAnimation(
0, 1, 150, 0));
backGrounds[position].setVisibility(View.VISIBLE);
}
});
typeLogs[position].startAnimation(anim);
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.setting_layout_log_0:
Toast.makeText(mContext, "点击了无线设置", 3).show();
break;
case R.id.setting_layout_log_1:
Toast.makeText(mContext, "点击了检查更新", 3).show();
break;
case R.id.setting_layout_log_2:
Toast.makeText(mContext, "点击了本地媒体", 3).show();
break;
case R.id.setting_layout_log_3:
Toast.makeText(mContext, "点击了系统设置", 3).show();
break;
case R.id.setting_layout_log_4:
Toast.makeText(mContext, "点击了壁纸设置", 3).show();
break;
}
}
}
倒影实现类：
package com.example.fouseonclick;
import android.graphics.Bitmap;
import android.graphics.Bitmap.Config;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PorterDuff.Mode;
import android.graphics.PorterDuffXfermode;
import android.graphics.Shader.TileMode;
import android.view.View;
import android.view.View.MeasureSpec;
public class ImageReflect {
/**
* 图片倒影效果实现
*/
private static int reflectImageHeight = 80;
/**
* view界面转换成bitmap
*
* @param view
* @return
*/
public static Bitmap convertViewToBitmap(View view) {
view.measure(MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED),
MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
view.buildDrawingCache();
Bitmap bitmap = view.getDrawingCache();
return bitmap;
}
/**
* 将bitmap设置倒影
*
* @param bitmap
* @return
*/
public static Bitmap createReflectedImage(Bitmap bitmap, int reflectHeight) {
int width = bitmap.getWidth();
int height = bitmap.getHeight();
if (height <= reflectHeight) {
return null;
}
Matrix matrix = new Matrix();
matrix.preScale(1, -1);
Bitmap reflectionImage = Bitmap.createBitmap(bitmap, 0, height
- reflectHeight, width, reflectHeight, matrix, true);
Bitmap bitmapWithReflection = Bitmap.createBitmap(width, reflectHeight,
Config.ARGB_8888);
Canvas canvas = new Canvas(bitmapWithReflection);
canvas.drawBitmap(reflectionImage, 0, 0, null);
LinearGradient shader = new LinearGradient(0, 0, 0,
bitmapWithReflection.getHeight()
, 0x80ffffff, 0x00ffffff, TileMode.CLAMP);
Paint paint = new Paint();
paint.setShader(shader);
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
canvas.drawRect(0, 0, width, bitmapWithReflection.getHeight(), paint);
return bitmapWithReflection;
}
public static Bitmap createCutReflectedImage(Bitmap bitmap, int cutHeight) {
int width = bitmap.getWidth();
int height = bitmap.getHeight();
int totleHeight = reflectImageHeight + cutHeight;
if (height <= totleHeight) {
return null;
}
Matrix matrix = new Matrix();
matrix.preScale(1, -1);
System.out.println(height - reflectImageHeight - cutHeight);
Bitmap reflectionImage = Bitmap.createBitmap(bitmap, 0, height
- reflectImageHeight - cutHeight, width, reflectImageHeight,
matrix, true);
Bitmap bitmapWithReflection = Bitmap.createBitmap(width,
reflectImageHeight, Config.ARGB_8888);
Canvas canvas = new Canvas(bitmapWithReflection);
canvas.drawBitmap(reflectionImage, 0, 0, null);
LinearGradient shader = new LinearGradient(0, 0, 0,
bitmapWithReflection.getHeight()
, 0x80ffffff, 0x00ffffff, TileMode.CLAMP);
Paint paint = new Paint();
paint.setShader(shader);
paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
canvas.drawRect(0, 0, width, bitmapWithReflection.getHeight(), paint);
if (!reflectionImage.isRecycled()) {
reflectionImage.recycle();
}
// if (!bitmap.isRecycled()) {
// bitmap.recycle();
// }
System.gc();
return bitmapWithReflection;
}
}
动画效果实现类：
package com.example.fouseonclick;
import android.view.animation.AccelerateInterpolator;
import android.view.animation.AlphaAnimation;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;
public class ScaleAnimEffect {
private float fromXScale;
private float toXScale;
private float fromYScale;
private float toYScale;
private long duration;
// private long offSetDuration;
/**
* 设置缩放參数
*
* @param fromXScale
* 初始X轴缩放比例
* @param toXScale
* 目标X轴缩放比例
* @param fromYScale
* 初始Y轴缩放比例
* @param toYScale
* 目标Y轴缩放比例
* @param duration
* 动画持续时间
*/
public void setAttributs(float fromXScale, float toXScale,
float fromYScale, float toYScale, long duration) {
this.fromXScale = fromXScale;
this.fromYScale = fromYScale;
this.toXScale = toXScale;
this.toYScale = toYScale;
this.duration = duration;
}
public Animation createAnimation() {
ScaleAnimation anim = new ScaleAnimation(fromXScale, toXScale,
fromYScale, toYScale, Animation.RELATIVE_TO_SELF, 0.5f,
Animation.RELATIVE_TO_SELF, 0.5f);
anim.setFillAfter(true);
anim.setInterpolator(new AccelerateInterpolator());
anim.setDuration(duration);
return anim;
}
public Animation alphaAnimation(float fromAlpha, float toAlpha,
long duration, long offsetDuration) {
AlphaAnimation anim = new AlphaAnimation(fromAlpha, toAlpha);
anim.setDuration(duration);
anim.setStartOffset(offsetDuration);
anim.setInterpolator(new AccelerateInterpolator());
return anim;
}
}
上面的代码凝视都比較清晰，至于后面怎么开发，依照这种规则来即可了。第一张图片做的不是非常对称，所以效果不是非常好，但基本就是这种：
