本文介绍了机顶盒开发中如何实现图片的焦点事件、动画、倒影及悬浮效果。通过代码示例展示具体实现过程，适用于机顶盒界面的常见视觉效果开发。
上次写了一篇关于机顶盒焦点事件的获取，以及页面的适配。接下来，开始编写机顶盒开发中对于一些图片的焦点事件，动画效果、倒影的实现。这都是在机顶盒开发界面中常常要要用到的一些效果！！直接开代码：
由于上一篇文章我已经写过了一些界面的适配，（http://blog.youkuaiyun.com/a565102223/article/details/41074645）接下来就直接在上次的代码中修改了，为了简单演示起见，我只修改View1的layout1.
<?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;
}
}
上面的代码注释都比较清晰，至于后面怎么开发，按照这种规则来就行了。第一张图片做的不是很对称，所以效果不是很好，但基本就是这样的：
扫一扫
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
