美文网首页
焦点选中状态(二)

焦点选中状态(二)

作者: fengfancky | 来源:发表于2017-11-28 11:14 被阅读532次

    用户使用遥控器控制电视界面,我们需要提示(或突出)当前焦点的位置,用户通过变焦点的位置来控制界面。Android系统提供了许多view,有些view获得焦点会有状态的改变,如:button;也有一些view在获得焦点的时候,默认状态是不会改变的,如:textView、imageView,这会导致用户找不到焦点进而无法有效的操作。通常我们使view的颜色、大小等状态发生改变来显示当前焦点。

    selector

    编写几个xml文件放到drawable目录下:

    选中状态的drawable:view_focus.xml

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
        <!--设置圆角-->
        <corners
            android:radius="10dp"/>
        <!--设置填充颜色-->
        <solid
            android:color="@color/trans" />
        <!-- 设置表框-->
        <stroke
            android:width="3dp"
            android:color="@color/blue"/>
    </shape>
    

    默认状态的drawable:view_normal.xml

      <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android">
       
        <!--设置填充颜色-->
        <solid
            android:color="@color/trans" />
    
    </shape>
    

    selector: view_selector.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_focused="true" android:drawable="@drawable/view_focus"/>
        <!--<item android:state_focused="false" android:drawable="@drawable/view_normal"/>-->
        <item android:drawable="@drawable/view_normal"/>
    </selector>
    

    在xml中使用:

         <TextView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:background="@drawable/view_selector"
            android:focusable="true"
            android:padding="3dp"  
            android:text="示例"
            android:textColor="#fff"
            android:textSize="16sp" />
    

    当焦点选中该TextView时,TextView会显示一个蓝色的边框(如果未显示边框,你可以尝试设置padding ,因为边框很可能被视图自己遮住)。根据自己的需求写合适的drawable,当然也可以是图片。


    使用动画

    常常是过一个动画来突出焦点,比如:放大。示例如下:

     TextView textView=(TextView )findviewById(R.id.text_view);
     textView.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View v, boolean hasFocus) {
                if (hasFocus){
                    textView.animate().scaleX(1.2f).scaleY(1.2f).setDuration(300).start();
                }else {
                    textView.animate().scaleX(1.0f).scaleY(1.0f).setDuration(300).start();
                }
            }
        });
    

    获取焦点时放大,失去后还原。
    在RecyclerView中可以自定义item的焦点监听接口,在接口中完成上述动画。通常我们会将selector、动画、设置view颜色、设置背景等方式组合在一起使用。

    运动焦点框

    后续内容。

    相关文章

      网友评论

          本文标题:焦点选中状态(二)

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