安卓利用selector设置图片点击效果
2020-09-02 本文已影响0人
蓝不蓝编程
目标
按压后,图片控件显示不同的图片,松开后,又还原.
效果图
按压前后效果对比:
主要代码
- 按压后的图片: switch_selected.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="64dp"
android:height="64dp"
android:viewportWidth="1024"
android:viewportHeight="1024">
<path
android:fillColor="#FF8C00"
android:pathData="M512.1,960C271.5,960 76.5,765 76.5,524.5c0,-178.1 107,-331.2 260.3,-398.7l0.7,1.3c2.1,-0.5 4.3,-0.7 6.6,-0.7 17.2,0 31.1,14 31.1,31.1 0,7.6 -2.9,14.4 -7.4,19.9l1.4,2.3c-2.5,1 -5,2.3 -7.4,3.4 -2.8,2 -5.9,3.4 -9.2,4.3 -126.3,59.8 -213.7,188.3 -213.7,337.3C138.8,730.8 306,898 512.2,898s373.1,-167.4 373.1,-373.5c0,-139.9 -77.1,-261.5 -190.8,-325.4 -12,-4.3 -20.7,-15.7 -20.7,-29.2 0,-17.2 14,-31.1 31.1,-31.1 5.8,0 11.1,1.7 15.7,4.4l0.5,-0.8c134.9,74 226.4,217.2 226.4,382.1C947.6,765 752.6,960 512.1,960zM711.1,275.5c0,6.8 5.5,12.5 12.5,12.5 6.9,0 12.5,-5.5 12.5,-12.5s-5.5,-12.5 -12.5,-12.5 -12.5,5.7 -12.5,12.5zM512.1,835.6C340.3,835.6 201,696.3 201,524.5c0,-21.1 2.2,-41.7 6.1,-61.7l-22.9,-12.1c-5.3,23.8 -8.2,48.4 -8.2,73.7 0,185.5 150.4,335.9 335.9,335.9s335.9,-150.4 335.9,-335.9c0,-85.5 -32,-163.5 -84.6,-222.7l-15.7,20.1c46.9,54.4 75.3,125.1 75.3,202.6 0.2,171.9 -139,311.2 -310.7,311.2zM530.7,623.9c17.2,0 31.1,-14 31.1,-31.1L561.8,95.1c0,-17.2 -14,-31.1 -31.1,-31.1h-12.5c-17.2,0 -31.1,14 -31.1,31.1v497.8c0,17.2 14,31.1 31.1,31.1l12.5,-0.1z" />
</vector>
- 按压前图片: switch_unselected.xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="64dp"
android:height="64dp"
android:viewportWidth="1024"
android:viewportHeight="1024">
<path
android:fillColor="#DCDCDC"
android:pathData="M512.1,960C271.5,960 76.5,765 76.5,524.5c0,-178.1 107,-331.2 260.3,-398.7l0.7,1.3c2.1,-0.5 4.3,-0.7 6.6,-0.7 17.2,0 31.1,14 31.1,31.1 0,7.6 -2.9,14.4 -7.4,19.9l1.4,2.3c-2.5,1 -5,2.3 -7.4,3.4 -2.8,2 -5.9,3.4 -9.2,4.3 -126.3,59.8 -213.7,188.3 -213.7,337.3C138.8,730.8 306,898 512.2,898s373.1,-167.4 373.1,-373.5c0,-139.9 -77.1,-261.5 -190.8,-325.4 -12,-4.3 -20.7,-15.7 -20.7,-29.2 0,-17.2 14,-31.1 31.1,-31.1 5.8,0 11.1,1.7 15.7,4.4l0.5,-0.8c134.9,74 226.4,217.2 226.4,382.1C947.6,765 752.6,960 512.1,960zM711.1,275.5c0,6.8 5.5,12.5 12.5,12.5 6.9,0 12.5,-5.5 12.5,-12.5s-5.5,-12.5 -12.5,-12.5 -12.5,5.7 -12.5,12.5zM512.1,835.6C340.3,835.6 201,696.3 201,524.5c0,-21.1 2.2,-41.7 6.1,-61.7l-22.9,-12.1c-5.3,23.8 -8.2,48.4 -8.2,73.7 0,185.5 150.4,335.9 335.9,335.9s335.9,-150.4 335.9,-335.9c0,-85.5 -32,-163.5 -84.6,-222.7l-15.7,20.1c46.9,54.4 75.3,125.1 75.3,202.6 0.2,171.9 -139,311.2 -310.7,311.2zM530.7,623.9c17.2,0 31.1,-14 31.1,-31.1L561.8,95.1c0,-17.2 -14,-31.1 -31.1,-31.1h-12.5c-17.2,0 -31.1,14 -31.1,31.1v497.8c0,17.2 14,31.1 31.1,31.1l12.5,-0.1z" />
</vector>
- 设置选择器: selector_image_view.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/switch_selected" android:state_pressed="true" />
<item android:drawable="@drawable/switch_unselected" android:state_pressed="false" />
</selector>
- 使用
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/selector_image_view"
android:clickable="true"
android:focusable="true" />