安卓实战开发之CardView的selector及GrideView的item按下状态保留selector(state_activated)的实现

android的selector对于android开发者而言再熟悉不过了,只要定义一个drawable目录下定义一个selector的xml文件,在布局文件中background引用这个xml文件或者在代码中setBackgroundDrawable的时候使用此xml就可以实现控件按下或有焦点或激活状态等不同状态的效果。你真的对selector的使用全了解吗?

前言

项目中确实用到了像多个标签,然后选中规格要给文字的边框加点颜色,对于长度和个数不确定的情况呢我们通常可以在代码中通过数据的长度动态的new一个控件然后给他们加点击事件,并且给每个控件设置背景是可以实现的,但是使用grideView的话还是不好实现,所以呢就搜了下发现state_activated能够完美的实现此功能。

效果如下

安卓4.4下效果:

安卓5.1效果

selector属性介绍

selector 的根节点必须是item、可以包含一个或多个item元素
xmlns:android String、必须、定义XML的命名空间、必须是 “http://schemas.android.com/apk/res/android”

android:state_pressed
Boolean、“true”表示按下状态使用(例如按钮按下)、“false”表示非按下状态使用

android:state_focused
Boolean、“true”表示聚焦状态使用(例如使用聚焦Button);“false”表示非聚焦状态使用

android:state_selected
Boolean、“true”表示选中状态使用(例如Tab 打开);“false” 表示非选中状态使用

android:state_enabled设置是否响应事件,指所有事件

哈哈,上面的属性你是否经常使用,因为我们的需求一般都是有无焦点有无按下来改变图片的文字和背景颜色,然后呢,比如listView和grideView点击后状态保留你可能不一定使用过。

android:state_checkable
Boolean、“true”表示可勾选状态时使用;“false”表示非可 勾选状态使用、(只对能切换可勾选—非可勾选的构件有用)

android:state_hovered
这个是api14以上才有的,这个是当光标移动到某一个组件之上的时候的状态,到目前为止,还没有看见过哪个手机设备带有鼠标之类的东西,可能这个专门是为平板电脑设置的或者以后可能出现带有鼠标之类的设备而准备的吧,文档中说,一般这个值设置为与focused这个值一样。

android:state_window_focused
这个是是否对当前界面是否得到焦点的两种状态的设置,所以呢一般我们都是用不到的

android:state_activated
表示当前控件被激活的状态,这个呢或许很多安卓开发者都没有用过,然后呢它可以保留被按下的状态

详细的请看官方的API,那里写的更详细http://developer.android.com/guide/topics/resources/drawable-resource.html#StateList

selector的实例使用

一般selector的作用呢就是给view控件设置背景前景等,因为selector本意呢根据状态的不同为同一个图形更换不同的图片。然后呢使用StateListDrawable来代替普通的drawable,具体的drawable的绘制你可以参考Android的各种Drawable讲解,所以呢drawable可以是color,shape,img,今天的重点不是要去绘制drawable而是去使用selector。

给cardView设置selector(state_pressed使用)

我相信很多人使用过CardView,现在呢我们给它加一个前景selector

 <android.support.v7.widget.CardView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:foreground="@drawable/card_foreground"
        android:id="@+id/cv_item"
        android:elevation="2dp"
        app:cardCornerRadius="4dp"
        app:cardBackgroundColor="@android:color/white"
        app:cardPreventCornerOverlap="false"
        app:cardUseCompatPadding="true"
        android:clickable="true">

        <TextView
            android:id="@+id/text_view"
            android:padding="20dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="selector 按下松开效果"/>
    </android.support.v7.widget.CardView>

要设置selector的前提呢,我们得准备drawable,然后cardView我们给它设置selector就得区分5.0之前和之后的效果,我们都知道5.0后点击会有水波纹效果(ripple ),然后之前我们并没有此效果。

然后我们怎么去设置呢:

drawable文件下适配

card_foreground.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/card_foreground_selector" android:insetLeft="2dp" android:insetRight="2dp" android:insetTop="4dp" android:insetBottom="4dp"/>

card_foreground_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#e0F5AD6E"/>
            <corners android:radius="@dimen/card_radius" />
        </shape>
    </item>
    <item android:state_focused="true" android:state_enabled="true">
        <shape android:shape="rectangle">
            <solid android:color="#0f000000"/>
            <corners android:radius="@dimen/card_radius" />
        </shape>
    </item>
</selector>

drawable-v21文件下适配

card_foreground.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android" android:color="#F5AD6E" android:drawable="@drawable/card_foreground_selector" />

card_foreground_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#F5AD6E"/>
        </shape>
    </item>
    <item android:state_focused="true" android:state_enabled="true">
        <shape android:shape="rectangle">
            <solid android:color="#0f000000"/>
        </shape>
    </item>
</selector>

什么ripple和inset 并不是重点,重点是我们如何去写selector文件,其实呢特别简单,你有多少个状态就用item分开好了,接着为各种状态下配置drawable好了,这里呢我直接把shape作为drawable使用了。

grideView的item按下状态保留(state_activated)

其实没有碰到这种情况的时候我也没有去注意state_activated使用,哈哈,确实给开发带来了很大的方便。
当我们发现selector中的state_selected不起作用:注意state_activated状态,作用是激活view后状态一直到保留,除非激活状态被取消,所以必须指定android:state_activated为true或者false。
gride_selector.xml

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  

    <item android:state_activated="false">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" >

            <!-- 线的宽度,颜色灰色 -->
            <stroke android:width="1dp" android:color="#A3A3A3"></stroke>
            <!-- 矩形的圆角半径 -->
            <corners android:radius="4dp" />
        </shape>
    </item>
    <item android:state_pressed="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" >
            <!-- 线的宽度,颜色灰色 -->
            <stroke android:width="1dp" android:color="#ffea5514"></stroke>
            <!-- 矩形的圆角半径 -->
            <corners android:radius="4dp" />
        </shape>
    </item>
    <item android:state_activated="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android" >
            <!-- 线的宽度,颜色灰色 -->
            <stroke android:width="1dp" android:color="#ffea5514"></stroke>
            <!-- 矩形的圆角半径 -->
            <corners android:radius="4dp" />
        </shape>
    </item>
</selector>

哈哈写完了,我们就可以加到grideView的item布局里面,具体的是加在根布局下还是具体的控件下都是可以的。
好了,我们来看看activity的代码:

package com.losileeya.selectmaster;

import android.os.Bundle;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;

import com.losileeya.selectmaster.adapter.TagAdapter;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.gridview)
    GridView gridview;
    private TagAdapter mAdapter;
    private List<String>mDatas;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initData();
        doEvent();
    }
    private void initData() {
        mDatas=new ArrayList<>();
        mDatas.add("东方财富•理财");
        mDatas.add("58 同 城");
        mDatas.add("搜 房 网");
        mDatas.add("携程旅行网");
        mDatas.add("百度地图");
        mDatas.add("12306•旅游");
        mDatas.add("世纪佳缘");
        mDatas.add("赶 集 网");
        mDatas.add("易 车 网");
        mDatas.add("去哪儿网");
        mDatas.add("唯 品 会");
    }
    private void doEvent() {
        gridview.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, View view,
                                    int position, long id) {
                Snackbar.make(gridview,mDatas.get(position), Snackbar.LENGTH_SHORT)
                        .show();

            }
        });
    gridview.setChoiceMode(GridView.CHOICE_MODE_SINGLE);// 单选模式
        // 默认第一个item被选中
        mAdapter = new TagAdapter(MainActivity.this, mDatas, 0);
        gridview.setAdapter(mAdapter);
        gridview.post(new Runnable() {
            @Override
            public void run() {
                gridview.setItemChecked(0, true);
                gridview.setSelected(true);
                gridview.setSelection(0);
            }
        });
    }
}

看上面的代码可知:大体实现步骤

1.GridView中的图标在drawable中写出selector,该selector文件中列出了android:state_pressed的图片资源、state_selected的图片资源。

2.gridview.setChoiceMode(GridView.CHOICE_MODE_SINGLE);// 单选模式

3.GridView的onItemClickedListener监听里,针对当前选择的view,调用view.selected(true)

4.gridview.setItemChecked(0, true);gridview.setSelection(0);默认选中第一个

注意事项

selector.xml中的state_activated状态属性必须在androidAPI-11及以上版本使用。

写到这里就写完了,基本上都是项目中能够用到的(check这里没讲,使用差不多不多讲)不知道对你有什么帮助,虽然很简单是不是对selector的理解更进一步。

demo传送门:SelectMaster.rar

你可能感兴趣的:(android)