設定點選效果foreground

ditclear發表於2017-11-01

簡書地址：www.jianshu.com/p/848249f0a…

android:foreground

最近一段時間研究了一下plaid，想學習一下material design。

這裡記錄一下view的background和foreground。

平時的話我們設定點選效果，為了簡便，大多數人應該都會使用

android:background="@drawable/selecterDrawable"
//或是
android:background="?selectableItemBackground"複製程式碼

但是相信都注意到一個情況，就是在有ImageView的時候，點選效果無法渲染在ImageView上面

在玩plaid和medium app的時候發現它們的點選效果就很好，看了plaid的xml發現是設定了foreground

所以奧祕就在這裡，以後設定點選效果的話可以設定foreground

<FrameLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_gravity="center"
            android:clickable="true"
            android:foreground="@drawable/middle_grey"
            android:padding="@dimen/activity_vertical_margin"
            android:stateListAnimator="@animator/anim_rise">


        <android.support.v7.widget.AppCompatImageView
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_gravity="center_vertical"
                android:layout_marginLeft="50dp"
                android:scaleType="fitCenter"
                app:srcCompat="@drawable/image"/>

        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical|right"
                android:text="foreground"/>

    </FrameLayout>複製程式碼

因為api 21以上才能使用ripple效果，所以最好區分以下

api21以下的middle_grey及效果

<?xml version="1.0" encoding="utf-8"?>
<selector  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="false">
        <color android:color="@android:color/transparent"/>
    </item>
    <item android:state_pressed="true">
        <color android:color="@color/mid_grey"/>
    </item>
</selector>複製程式碼

<21
<21

api21以上的middle_grey

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/mid_grey">
</ripple>複製程式碼

21以上
21以上

可以看出效果要好很多

限制: 想要確保有以上效果需要注意幾點

  1. 確保view是可以點選的（即有click事件或者clickable="true"）
  2. 確保安卓版本在6.0（M）及以上或者以FrameLayout本身及其子類作為容器

附贈：

AS快速導航menu的icon

icon
icon

其實平時一直都沒注意過，後來fork了這個專案的時候突然出現了一個小圖示，才發現這一點，感覺挺不錯的。

講一下怎麼簡單設定icon

change_icon
change_icon

在專案上右鍵，點選Change Icon選擇自己的icon就好了

GIPHY CAPTURE : 錄屏 GIF

推薦一下這款mac上的錄屏軟體，非常實用而且顏值蠻高，個人覺得比LICEcap更好。

錄製完成之後，你能簡單剪輯 GIF 和選擇播放速度、大小。

可以看這裡瞭解更多

相關文章