焦点选中状态(二)

2017-11-28  本文已影响532人  fengfancky

用户使用遥控器控制电视界面,我们需要提示(或突出)当前焦点的位置,用户通过变焦点的位置来控制界面。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颜色、设置背景等方式组合在一起使用。

运动焦点框

后续内容。

上一篇 下一篇

猜你喜欢

热点阅读