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,对他们设置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的圆角图片实现的;

你可能感兴趣的:(Layout选中放大效果实现)