Layout选中放大效果实现

在Android TV开发中，由于屏幕显示距离用户较远且没有用户的触摸感知

所以在操作的交互性上经常会用到，选中放大的效果，用以增强View被选中的交互性；

这里介绍一种简单的Focus（获得焦点）后被放大的效果，以ScaleAnimation和AnimationSet两个类来实现；

首先看效果图：

1.png

看一下布局
其实就是很简单的两个FrameLayout,每个Layout里面有一个ImageView和一个TextView；

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center"
        android:orientation="horizontal" >
        <FrameLayout
            android:id="@+id/framelayout_diagnosis"
            android:layout_marginTop="20dp"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="20dp"
            android:focusable="true"
            android:clickable="true"
            android:visibility="visible"
            android:background="@drawable/network_home_strength_bg"
            android:layout_width="330dp"
            android:layout_height="400dp">

            <ImageView
                android:id="@+id/imageview_diagnosis"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="top|center_horizontal"
                android:layout_marginTop="100dp"
                android:src="@drawable/icon_wangluozhenduan"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|center_horizontal"
                android:layout_marginBottom="140dp"
                android:textSize="32sp"
                android:textColor="#ffe1e1e1"
                android:text="@string/network_test"
                />
        </FrameLayout>

        <FrameLayout
            android:id="@+id/framelayout_speedtest"
            android:layout_marginTop="20dp"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="20dp"
            android:focusable="true"
            android:clickable="true"
            android:visibility="visible"
            android:background="@drawable/network_home_speed_bg"
            android:layout_width="330dp"
            android:layout_height="400dp">
            <ImageView
                android:id="@+id/imageview_speed"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="top|center_horizontal"
                android:layout_marginTop="100dp"
                android:src="@drawable/icon_wangluocesu"/>
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|center_horizontal"
                android:layout_marginBottom="140dp"
                android:textSize="32sp"
                android:textColor="#ffe1e1e1"
                android:text="@string/network_speed"
                />
        </FrameLayout>

    </LinearLayout>

我们在代码中获取到两个Framelayout,对他们设置onFocusChangeListener监听；
当获得焦点时，让这个布局进行放大动画，当失去焦点时，让布局变回原来大小需要进行缩小动画；

代码如下：

    public void onFocusChange(View view, boolean b) {
        switch (view.getId()){
            case R.id.framelayout_diagnosis:
                if(b){
                    setViewZoomIn(view);//获得焦点，放大
                    IV_diagnosis.setImageResource(R.drawable.icon_wangluozhenduan_foucs);
                }else{
                    setViewZoomOut(view);//失去焦点，缩小
                    IV_diagnosis.setImageResource(R.drawable.icon_wangluozhenduan);
                }
                break;
            case R.id.framelayout_speedtest:
                if(b){
                    setViewZoomIn(view);//获得焦点，放大
                    IV_speedtest.setImageResource(R.drawable.icon_wangluocesu_foucs);
                }else{
                    setViewZoomOut(view);//失去焦点，缩小
                    IV_speedtest.setImageResource(R.drawable.icon_wangluocesu);
                }
                break;
            default:
                break;
        }
    }

   //对所有View都可执行的放大动画
    private void setViewZoomIn(View v){
        AnimationSet animationSet = new AnimationSet(true);
        ScaleAnimation animation = new ScaleAnimation(1.0f,1.1f,1.0f,1.1f,
                Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        animation.setDuration(350);//动画效果时间
        animation.setFillAfter(true);
        animationSet.addAnimation(animation);
        animationSet.setFillAfter(true);
        v.clearAnimation();
        v.startAnimation(animationSet);
    }
   //对所有View都可执行的缩小动画
    private  void setViewZoomOut(View v){
        AnimationSet animationSet = new AnimationSet(true);
        ScaleAnimation animation = new ScaleAnimation(1.1f,1.0f,1.1f,1.0f,
                Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
        animation.setDuration(350);//动画效果时间
        animation.setFillAfter(true);
        animationSet.addAnimation(animation);
        animationSet.setFillAfter(true);
        v.clearAnimation();
        v.startAnimation(animationSet);
    }

该布局的圆角是通过background的圆角图片实现的；