android触摸反馈特效



简介


这节课我们要学习反馈触摸的响应。那么什么是反馈触摸的响应呢?就是当我手指触碰到屏幕的时候,因应用程序要给用户一个感知,告诉用户你已经触摸到某个位置。这就是我们所说的触摸反馈。谷歌在Material Design中,提出了一种比较酷的反馈方式。就是像水波纹一样的四周散开的。



举例


看一个示例。


0.png


就是这种效果:


1.png



那么要实现这种效果,难吗?不难。看一下代码。这就是我的两个TextView:


2.png


然后,我们来看一下这个布局的源代码:



<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools=http://schemas.android.com/tools android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
 
    <TextView
android:background="@drawable/myripple" 
android:layout_width="300dp"
       android:layout_height="300dp"
       android:clickable="true"
       android:id="@+id/image"
       android:text="Clickable"
       android:gravity="center" />
 
    <TextView
        android:gravity="center"
        android:layout_marginTop="20dp"
        android:clickable="true"
        android:layout_below="@id/image"
        android:text="Clickable"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="?android:attr/selectableItemBackground"/>
</RelativeLayout>


在TextView中设置了背景,然后这个背景指定了这个属性:android:attr/selectableItemBackground,那么我就可以在安卓L以上的版本中显示这样的一个效果。那上面这个呢,其实和上面这个是一样的,唯一的区别就是我给它的这个属性,是没有边框的。大家可以看到,我这个宽高都是300像素。但是,我的这个圆圈可以超出它的视图之外:就是无边界的,它会达到一种特殊的效果。要实现非常的简单,那么我们当然也可以对效果进行定制。


3.png



比如说,你说我想更换这种点击的颜色,怎么换呢?我们只需要在主题里面设置这个的值就可以了。那么我就可以更换这个颜色。


4.png



大家请看,上一次是灰色,这一次已经变成了绿色了。就是我在主题里面指定的颜色。


5.png



当然,除了是使用系统默认的值以外,我们还可以自定义圆圈。那么,谷歌在安卓5.0中新引入了一个类,叫:rippleDrawerble。这里使用XML的方式把它定义出来。


6.png


它呢,分为多层。第一个就是颜色:就是我们触摸时的颜色。


7.png



然后,这里有个Item,这个Item就是我们平常的颜色。


8.png



然后,我把这个ripple使用到我们的背景中去:


9.png



然后我们来看一下效果:平常的颜色是橘红色,点击之后,慢慢的被蓝色覆盖掉:


90.png



当然,还有之前说到了,无边框的ripple。


91.png



我们只要把这个Item给删除掉,那么它就属于无边界的ripple。那么效果呢就会扩展到视图的外边。和我们预期的是一致的。


92.png


除了改变颜色以外,我们还可以做一些动画。我们来看一下下一个例子。好,我们这里有三个按钮。注意,它其实是有阴影的。


93.png



然后呢,我们点击它,感觉抬起来饿了,对吧!把它吸上来了。


94.png



那这种效果是怎么实现的呢?安卓L中引入了一个新的属性,stateListAnimated,我们先来看一下布局文件:


<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EAEAEA"
    >
 
    <android.support.v7.widget.Toolbar
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:background="?android:colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:elevation="5dp"
        />
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        >
 
        <android.support.v7.widget.CardView
            android:layout_gravity="center"
            android:layout_width="100dp"
            android:layout_height="45dp"
            android:layout_marginTop="16dp"
            android:stateListAnimator="@drawable/translation_selector"
            android:elevation="2dp"
            android:clickable="true"
            card_view:cardCornerRadius="4dp"
            />
 
        <android.support.v7.widget.CardView
            android:layout_gravity="center"
            android:layout_width="100dp"
            android:layout_height="45dp"
            android:layout_marginTop="16dp"
            android:stateListAnimator="@drawable/translation_selector"
            android:elevation="2dp"
            android:clickable="true"
            card_view:cardCornerRadius="4dp"
            />
 
        <android.support.v7.widget.CardView
            android:layout_gravity="center"
            android:layout_width="100dp"
            android:layout_height="45dp"
            android:layout_marginTop="16dp"
            android:layout_marginBottom="@dimen/activity_vertical_margin"
            android:stateListAnimator="@drawable/translation_selector"
            android:elevation="2dp"
            android:clickable="true"
            card_view:cardCornerRadius="4dp"
            />
 
    </LinearLayout>
</FrameLayout>


这里面最重要的是这个stateListAnimator属性,我们知道,我们之前的selector其实他是一个变换的过程。那么最新的5.0引入了selector动画,这个selector动画实际上是之前selector的一个扩展。之前,我们的selector是可以指定颜色的,那么现在它是可以指定一个动画。那么,大家请看这里,这是一个selector,我们在press等于true的情况下,定义了一个动画。就是我按下的时候,我希望它能够在Z轴上变换值dp。


95.png



然后,当我释放的时候,那么它的动画就是落下去,回到之前的初始化位置:这也就形成了我们刚刚所看到的。


96.png



除了在XML文件里面去定义这个stateListAnimator属性之外,当然你也可以用代码的方式去写,达成的效果是一样的。在课程的最后呢!我这里写了一个小小的游戏Demo。这里就不做扩展的讲,大家可以下来思考一下,我这个怎么实现的。我这里有9个方框,当我随便点击一个的时候,它就会跑。


97.png


98.png



 99.png



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
© 2012-2016 www.maiziedu.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

免费领取价值1888元求职宝典!

客服热线 400-862-8862

回到顶部