图片获得焦点变大并显示在最前方，覆盖后面的图片

转载请注明出处，谢谢：http://blog.csdn.net/harryweasley/article/details/46678315

提前声明：本篇博客是基于电视机顶盒的。所有操作是用遥控器。

先看下效果图

如上图所看到的，图片放大，而且在最前方，能够遮盖住后面的图片。

在做放大效果之前，我们先创建一个类ScaleAnimEffect。

package com.amt.appstore.activity;

import android.view.animation.AccelerateInterpolator;
import android.view.animation.Animation;
import android.view.animation.ScaleAnimation;

public class ScaleAnimEffect {
	private long duration;
	private float fromAlpha;
	private float fromXScale;
	private float fromYScale;
	private float toAlpha;
	private float toXScale;
	private float toYScale;

	public void setAttributs(float paramFloat1, float paramFloat2,
			float paramFloat3, float paramFloat4, long paramLong) {
		this.fromXScale = paramFloat1;
		this.fromYScale = paramFloat3;
		this.toXScale = paramFloat2;
		this.toYScale = paramFloat4;
		this.duration = paramLong;
	}

	public Animation createAnimation() {
		/**
		 * @param fromX
		 *            动画開始前水平方向的伸缩比例大小
		 * @param toX
		 *            动画结束后，水平方向的伸缩比例大小
		 * @param fromY
		 *            动画開始前，竖直方向的比例大小
		 * @param toY
		 *            动画结束结束后，竖直方向的比例大小
		 * @param pivotXType
		 *            指定pivotXValue以哪个为坐标点为中心来旋转。 Animation.ABSOLUTE,
		 *            Animation.RELATIVE_TO_SELF, 或者
		 *            Animation.RELATIVE_TO_PARENT这三个当中之中的一个。

* @param pivotXValue
		 *            正在伸缩的对象的点的x坐标，指定为绝对数，而且0是左边缘（当对象改变尺寸的时候，点保持不变。）
		 *            假设pivotXType是
		 *            Animation.ABSOLUTE，这个值既能够是绝对数，也能够为百分数（1.0位100%）
		 *
		 * @param pivotYType
		 *            指定pivotYValue以哪个为坐标点为中心来旋转。

Animation.ABSOLUTE,
		 *            Animation.RELATIVE_TO_SELF, 或者
		 *            Animation.RELATIVE_TO_PARENT这三个当中之中的一个。
		 * @param pivotYValue
		 *            正在伸缩的对象的点的y坐标，指定为绝对数，而且0是左边缘（当对象改变尺寸的时候，点保持不变。）
		 *            假设pivotYType是
		 *            Animation.ABSOLUTE，这个值既能够是绝对数，也能够为百分数（1.0位100%）
		 */
		ScaleAnimation localScaleAnimation = new ScaleAnimation(
				this.fromXScale, this.toXScale, this.fromYScale, this.toYScale,
				Animation.RELATIVE_TO_SELF, 0.5F, Animation.RELATIVE_TO_SELF,
				0.5F);
		// 动画运行完毕后。是否停留在运行完的状态
		localScaleAnimation.setFillAfter(true);
		// 在动画開始的地方速率比較慢。然后開始加速
		localScaleAnimation.setInterpolator(new AccelerateInterpolator());
		// 设置动画持续时间
		localScaleAnimation.setDuration(this.duration);
		return localScaleAnimation;
	}

}

关于Interpolator，被用于修饰动画效果，定义动画的变化率。

AccelerateDecelerateInterpolator 在动画開始与结束的地方速率改变比較慢，在中间的时候加速

AccelerateInterpolator  在动画開始的地方速率改变比較慢，然后開始加速

AnticipateInterpolator 開始的时候向后然后向前甩

AnticipateOvershootInterpolator 開始的时候向后然后向前甩一定值后返回最后的值

BounceInterpolator   动画结束的时候弹起

CycleInterpolator 动画循环播放特定的次数，速率改变沿着正弦曲线

DecelerateInterpolator 在动画開始的地方快然后慢

LinearInterpolator   以常量速率改变

OvershootInterpolator    向前甩一定值后再回到原来位置

关于ScaleAnimation的构造函数后面四个參数。我是真的头大，经过看官方的翻译，还是有点云里雾里，就先这样定义吧。

接下来看xml布局文件activity_increase.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="fill_parent"
     >

    <FrameLayout
        android:id="@+id/flid1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:focusable="false" >

        <ImageView
            android:id="@+id/itvimageid1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:scaleType="fitXY"
            android:src="@drawable/ic_empty" />
    </FrameLayout>

    <FrameLayout
        android:id="@+id/flid2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="80dp"
        android:layout_marginTop="10dp"
        android:focusable="false" >

        <ImageView
            android:id="@+id/itvimageid2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:scaleType="fitXY"
            android:src="@drawable/ic_error" />
    </FrameLayout>

    <FrameLayout
        android:id="@+id/flid3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="160dp"
        android:layout_marginTop="10dp"
        android:focusable="false" >

        <ImageView
            android:id="@+id/itvimageid3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:focusable="true"
            android:focusableInTouchMode="true"
            android:scaleType="fitXY"
            android:src="@drawable/ic_stub" />
    </FrameLayout>

</RelativeLayout>

这里之所以用relativeLayout布局。而不用LinearLayout布局直接放入这三个FrameLayout，由于在之后的IncreaseActivity用到了一个方法bringToFront()，关于这种方法，之后解说。

最后是IncreaseActivity

package com.example.test;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.View.OnFocusChangeListener;
import android.view.animation.Animation;
import android.widget.FrameLayout;
import android.widget.ImageView;

public class IncreaseActivity extends Activity implements OnClickListener {
	public static final int COLUMN_IMAGE_COUNT = 3;
	ImageView columnImages[] = new ImageView[COLUMN_IMAGE_COUNT];
	FrameLayout mFrameLayout[]=new FrameLayout[COLUMN_IMAGE_COUNT];
	ScaleAnimEffect animEffect = new ScaleAnimEffect();

	@Override
	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_increase);
		findviewbyid();
		//给图片注冊焦点改变监听
		for (int i = 0; i < COLUMN_IMAGE_COUNT; i++) {
		    columnImages[i].setOnFocusChangeListener(focusChangeListener);
		    columnImages[i].setOnClickListener(this);
		}
	}

	public void findviewbyid() {
		columnImages[0] = (ImageView) findViewById(R.id.itvimageid1);
		columnImages[1] = (ImageView) findViewById(R.id.itvimageid2);
		columnImages[2] = (ImageView) findViewById(R.id.itvimageid3);

		mFrameLayout[0] = (FrameLayout) findViewById(R.id.flid1);
		mFrameLayout[1] = (FrameLayout) findViewById(R.id.flid2);
		mFrameLayout[2] = (FrameLayout) findViewById(R.id.flid3);
	}

	@Override
	public void onClick(View v) {
	}

	private OnFocusChangeListener focusChangeListener=new OnFocusChangeListener() {

		@Override
		public void onFocusChange(View v, boolean hasFocus) {
		    switch(v.getId()){
		    case R.id.itvimageid1:
				if (hasFocus) {
					showOnFocusAnimation(0);
					return;
				}
				showLooseFocusAinimation(0);
				return;
			case R.id.itvimageid2:
				if (hasFocus) {
					showOnFocusAnimation(1);
					return;
				}
				showLooseFocusAinimation(1);
				return;
			case R.id.itvimageid3:
				if (hasFocus) {
					showOnFocusAnimation(2);
					return;
				}
				showLooseFocusAinimation(2);
				return;
		    }
		}

	};

	/**
	 * 获取焦点后运行的方法
	 * @param i
	 */
	private void showOnFocusAnimation(int i) {
		//将该控件移到最前面
		mFrameLayout[i].bringToFront();
		this.animEffect.setAttributs(1.0F, 1.25F, 1.0F, 1.25F, 100L);
		Animation localAnimation = this.animEffect.createAnimation();
		this.mFrameLayout[i].startAnimation(localAnimation);
	}
	/**
	 * 失去焦点后运行的方法
	 * @param i
	 */
	private void showLooseFocusAinimation(int i) {
		animEffect.setAttributs(1.25F, 1.0F, 1.25F, 1.0F, 0L);
		mFrameLayout[i].startAnimation(animEffect.createAnimation());
	}
}

关于这里的bringToFront()方法。Android中的ViewGroup是通过一个Array来保存其Children。当调用某个childView的bringToFront时，是将该childView放在其Parent的Array数组的最后，ViewGroup的dispatchDraw在draw时是依照Array从前往后依次调用drawChild的，这样最后一个childView就在最前面了。

这也是为什么要用relativeLayout来布局，而不是用LinearLayout来布局。

假设是LinearLayout布局，调用bringToFront方法，位置会错乱。你能够自己去试试。

时间： 2024-08-01 18:52:50

图片获得焦点变大并显示在最前方，覆盖后面的图片的相关文章

20150620图片点击变大

html========== <div id="small"> <img id='pic' src="images/small.jpg"/> </div> css=========== #small{width: 200px;height: 200px;margin:110px auto;position: relative;} #pic{position: absolute;left: 0;top: 0;} js========

goodsDetail点击图片变大

运用JQuery点击图片变大 goodsDetail.html中: <link href="css/style.css" rel="stylesheet" /> <script type="text/javascript" src="js/script.js"></script> 显示图片: <div id="tFocus"> <div class=&q

点击图片触点变大的方法

android:scaleType="center"android:src="@drawable/goods_item_back_selector" center 不会改变图片大小,在width, height 变大的时候

js之图片变大变小效果

1.当鼠标移到图片上,图片变大:当鼠标移出图片,图片变小,效果如图: 2.原理不难,就是鼠标over时,设置一个定时器,让图片逐渐变大,鼠标out时同理,看下最初的简略代码你就会明白: <!DOCTYPE html> <html> <head> <style type="text/css"> div {     width: 200px;           /* 宽度 */     height: 100px;          /* 

鼠标移动到图片上图片逐渐变大、变清晰（带有过渡效果）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>鼠标移动到图片上图片逐渐变大.变清晰(带有过渡效果)</title> <style type="text/css"> div{ width: 300px; height: 300px; margin: 50px auto; overflow: hidden; fil

让source insight的源代码文件显示字体变大

让source insight的源代码文件显示字体变大source insight version 4.00.0084 options->file type options->screen font->选中,然后键入yes.这样,所有的文件的字体大小都改变了. 原文地址:https://www.cnblogs.com/praiseslow/p/11478611.html

bitmap过大无法显示图片的问题 - z

public Bitmap ratio(Bitmap image, float pixelW, float pixelH) {Bitmap bitmap = null;try {ByteArrayOutputStream os = new ByteArrayOutputStream();    image.compress(Bitmap.CompressFormat.JPEG, 100, os);    if( os.toByteArray().length / 1024>1024) {//判断

蚂蚁变大象：浅谈常规网站是如何从小变大的（五）（转）

原文:http://blog.sina.com.cn/s/blog_6203dcd60100xurh.html          [第九阶段 : 逻辑关联和层次划分]   在第七阶段的时候,我们提到了几个问题,其中有一个就是业务关联问题.当我们将业务拆分以后,多个业务之间没有了耦合(或者是极弱的耦合),能够独立的运转.这个看起来是多么美妙的事情.但是实际情况真是如此嘛? 这样的业务还真是存在的.比如我们有两个业务blog和image.blog可以上传和展示图片.那image.XXX.com就提供

关于windows系统DPI增大导致字体变大的原因分析

最近再学习WPF开发,其中提到一个特性“分辨率无关性”,主要功能就是实现开发的桌面程序在不同分辨率的电脑上显示时,会根据系统的DPI自动进行UI的缩放,从而不会导致应用程序的失真. 这个里面就提到了个系统DPI,这个其实在我们windows系统中(不论XP,还是vista之后的win7.win8.win10等),我们都可以设置.DPI就是指每英寸像素点数,及一英寸的长度上存在的像素数,它其实反映的是一个密度问题.windows系统默认情况下,系统DPI都是96DPI,这里还是得注意和显示器实际的