安卓开发

安卓利用selector设置图片点击效果

2020-09-02  本文已影响0人  蓝不蓝编程

目标

按压后,图片控件显示不同的图片,松开后,又还原.

效果图

按压前后效果对比:


主要代码

  1. 按压后的图片: 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>
  1. 按压前图片: 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>
  1. 设置选择器: 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>
  1. 使用
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/selector_image_view"
    android:clickable="true"
    android:focusable="true" />

完整源代码

https://gitee.com/cxyzy1/selector-demo

上一篇下一篇

猜你喜欢

热点阅读