圓形背景圖標 (button),點擊變色,簡單實現(xiàn)

如圖 實現(xiàn)右側(cè)上傳button,點擊整體變色


Screenshot_20191211-165118_FileManager.jpg

核心代碼

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

    <item android:state_pressed="true">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
            <item>
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="oval"
                    android:useLevel="false">
                    <solid android:color="#26000000" />
                    />
                </shape>
            </item>
            <item android:drawable="@drawable/cloud_upload_pressed" />
        </layer-list>
    </item>

    <item android:state_pressed="false">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
            <item>
                <shape xmlns:android="http://schemas.android.com/apk/res/android"
                    android:shape="oval"
                    android:useLevel="false">
                    <solid android:color="#8d000000" />
                    />
                </shape>
            </item>
            <item android:drawable="@drawable/cloud_upload" />
        </layer-list>
    </item>
</selector>

使用簡單

<TextView
        android:id="@+id/videoUpload"
        android:layout_width="50dp"
        android:layout_height="50dp"
        ..........
        android:background="@drawable/upload_bg"
        android:clickable="true" 
        android:onClick="uploadTo..."/>

注意點:
透明背景圖片,圖片應(yīng)留有一定padding

shape

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>

單純背景色drawable

<?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"
            android:useLevel="false">
            <solid android:color="#26000000" />
        </shape>
    </item>
    <item android:state_hovered="true">
       <shape
        android:shape="rectangle"
        android:useLevel="false">
        <solid android:color="#26000000" />
    </shape>
    </item>
    <item>
        <shape
            android:shape="rectangle"
            android:useLevel="false">
        <solid android:color="#00000000" />
        </shape>
    </item>
</selector>

單純圖片focus變換

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true"  android:drawable="@drawable/cloud_upload_pressed"/>
    <item android:state_pressed="false" android:drawable="@drawable/cloud_upload"/>
</selector>

單純顏色color

<selector xmlns:android="http://schemas.android.com/apk/res/android">   
<item android:state_selected="true" android:color="#000" />   
<item android:state_focused="true" android:color="#000" />   
<item android:state_pressed="true" android:color="#000" />
<item android:color="#FFF" />   
</selector> 
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容