Android实现图标焦点突出效果

最近想做一个图标获取焦掉则会有突出效果的功能，效果如下所示：

看了网上android tv焦点特效实现浅析的介绍，综合自己的理解，总结出来，这里就直接上代码吧

首先MainActivity中直接setContentView(R.layout.main)，其他什么都没做，主要还是在xml中定义的;

package com.Javen;import android.app.Activity;import android.os.Bundle;public class HomeZomeActivity extends Activity {    /** Called when the activity is first created. */    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.main);    }}

在main.xml中，这里最好用RelativeLayout布局

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:clipChildren="false"    android:clipToPadding="false" >    <include        android:id="@+id/source_1"        android:layout_width="@dimen/layout_source_w"        android:layout_height="@dimen/layout_source_h"        android:layout_alignParentLeft="true"        android:layout_alignParentTop="true"        layout="@layout/source_hdmi"        android:layout_marginLeft="60dp"        android:layout_marginTop="20dp"/>    <include        android:id="@+id/source_2"        android:layout_width="@dimen/layout_source_w"        android:layout_height="@dimen/layout_source_h"        android:layout_alignTop="@id/source_1"        android:layout_toRightOf="@id/source_1"        layout="@layout/source_vga"         android:layout_marginLeft="10dp"/>    <include        android:id="@+id/source_3"        android:layout_width="@dimen/layout_source_w"        android:layout_height="@dimen/layout_source_h"        android:layout_alignLeft="@id/source_1"        android:layout_below="@id/source_1"        layout="@layout/source_av"        android:layout_marginTop="10dp"/>    <include        android:id="@+id/source_4"        android:layout_width="@dimen/serch_usb_w"        android:layout_height="@dimen/serch_usb_h"        android:layout_below="@id/source_2"        android:layout_toRightOf="@id/source_3"        layout="@layout/serch"        android:layout_marginTop="10dp"         android:layout_marginLeft="10dp"/>    <include        android:id="@+id/source_5"        android:layout_width="@dimen/serch_usb_w"        android:layout_height="@dimen/serch_usb_h"        android:layout_below="@id/source_2"        android:layout_toRightOf="@id/source_4"        layout="@layout/usb_mm"        android:layout_marginTop="10dp"/>        <include         android:id="@+id/source_6"        android:layout_width="304dp"    android:layout_height="480dp"    android:layout_toRightOf="@id/source_2"    android:layout_alignTop="@id/source_2"    layout="@layout/browser"    android:layout_marginLeft="10dp"/></RelativeLayout>

这里的source_hdmi.xml，source_vga.xml等布局都是一样的，这里只看一个就行了

<view xmlns:android="http://schemas.android.com/apk/res/android"    android:id="@+id/layout_source_hidmi"    android:layout_width="@dimen/layout_source_w"    android:layout_height="@dimen/layout_source_h"    class="com.Javen.HomeItemZoom"    android:clickable="true"    android:clipChildren="false"    android:clipToPadding="false"    android:descendantFocusability="blocksDescendants"    android:focusable="true"    android:focusableInTouchMode="true"    android:nextFocusDown="@+id/layout_source_av"    android:nextFocusRight="@+id/layout_source_vga" >    <ImageView        android:id="@+id/layout_tv_hdmi_image_background"        android:layout_width="fill_parent"        android:layout_height="fill_parent"        android:layout_gravity="left|center"        android:background="@drawable/source_hdmi_img"        android:duplicateParentState="true"        android:focusable="true"        android:focusableInTouchMode="true" />    <TextView        android:id="@+id/layout_tv_source_hdmi_name"        android:layout_width="148dp"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_gravity="bottom|left"        android:layout_marginBottom="50dp"        android:layout_marginRight="10dp"        android:focusable="false"        android:focusableInTouchMode="false"        android:gravity="center"        android:text="@string/source_hdmi_name"        android:textColor="#FFFFFFFF"        android:textSize="35sp" /></view>

最后最主要的功能实现在HomeItemZoom类中

package com.Javen;import android.content.Context;import android.graphics.Canvas;import android.graphics.Rect;import android.graphics.drawable.Drawable;import android.util.AttributeSet;import android.view.animation.Animation;import android.view.animation.AnimationUtils;import android.widget.RelativeLayout;public class HomeItemZoom extends RelativeLayout {private Rect mBound;private Drawable mDrawable;private Rect mRect;private Animation scaleSmallAnimation;private Animation scaleBigAnimation;public HomeItemZoom(Context context) {super(context);init();}public HomeItemZoom(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);init();}public HomeItemZoom(Context context, AttributeSet attrs) {super(context, attrs);init();}protected void init() {setWillNotDraw(false);mRect = new Rect();mBound = new Rect();mDrawable = getResources().getDrawable(R.drawable.baidu);//nav_focused_2,poster_shadow_4  home_usb_selsetChildrenDrawingOrderEnabled(true);}@Overrideprotected void onAttachedToWindow() {super.onAttachedToWindow();}@Overridepublic void draw(Canvas canvas) {super.draw(canvas);}@Overrideprotected void onDraw(Canvas canvas) {if (hasFocus()) {System.out.println("HomeItemZoom focus : true ");super.getDrawingRect(mRect);//mBound.set(-16+mRect.left, -16+mRect.top, 16+mRect.right, 16+mRect.bottom);//haiermBound.set(-37+mRect.left, -37+mRect.top, 37+mRect.right, 37+mRect.bottom);//baidumDrawable.setBounds(mBound);canvas.save();mDrawable.draw(canvas);canvas.restore();}super.onDraw(canvas);}@Overrideprotected void onFocusChanged(boolean gainFocus, int direction, Rect previouslyFocusedRect) {super.onFocusChanged(gainFocus, direction, previouslyFocusedRect);if (gainFocus) {bringToFront();getRootView().requestLayout();getRootView().invalidate();zoomOut();} else {zoomIn();}}private void zoomIn() {if (scaleSmallAnimation == null) {scaleSmallAnimation = AnimationUtils.loadAnimation(getContext(), R.anim.bottom_zoom_out);}startAnimation(scaleSmallAnimation);}private void zoomOut() {if (scaleBigAnimation == null) {scaleBigAnimation = AnimationUtils.loadAnimation(getContext(), R.anim.bottom_zoom_in);}startAnimation(scaleBigAnimation);}}

这样就能实现获取焦掉后的突出效果了