美文网首页
Layout选中放大效果实现

Layout选中放大效果实现

作者: 跟我去北方吧 | 来源:发表于2018-01-03 12:29 被阅读0次

在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的圆角图片实现的;

相关文章

网友评论

      本文标题:Layout选中放大效果实现

      本文链接:https://www.haomeiwen.com/subject/todhnxtx.html