圓角與陰影 State List + Layer List + shape 筆記

實(shí)現(xiàn)卡片的陰影效果漓摩,且點(diǎn)擊時(shí)跟著變化

  • 自定義xml文件
  • selector + shape +layer-list + State List
  • 引用
  • 漸變陰影
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <!-- 點(diǎn)擊之后 -->
        <item android:state_pressed="true">
                <layer-list><item android:left="-1dp" android:top="0.5dp" android:bottom="1.8dp"><shape>
                        <solid android:color="#fff" />
                        <corners android:radius="5dp" />
                        <stroke android:width="1dp" android:color="#ffffffff" />
                </shape></item></layer-list>
        </item>

        <item><layer-list>
                <!-- 第一層拦英,先繪制陰影 -->
                <item android:left="0.5dp" android:top="0.5dp"><shape>
                       <solid android:color="#665e5e5e" />
                       <corners android:radius="5dp" />
                       <!-- 描邊
                                              <stroke android:width="1dp" android:color="#ffffffff" />
                                              -->
                </shape></item>

                <!-- 第二層,看到的框 -->
                 <item android:bottom="1dp" android:right="0dp"><shape>
                       <solid android:color="#fff" />
                       <corners android:radius="5dp" />
                       <stroke android:width="1dp" android:color="#ffffffff" /> 
                 </shape></item>
       </layer-list></item>

</selector>

根據(jù)不同狀態(tài)寫出多個(gè)<item>拇泛,無論是editor、button或者是其他的布局與控件思灌,
直接用 background 屬性來引用:

android:background="@drawable/xxxxx"

下面是解析上面不同標(biāo)簽的作用:

<selector>

根據(jù)不同的選定狀態(tài)來定義不同的現(xiàn)實(shí)效果
分為四大屬性:
android:state_selected 選中
android:state_focused 獲得焦點(diǎn)
android:state_pressed 點(diǎn)擊
android:state_enabled 設(shè)置是否響應(yīng)事件,指所有事件
android:state_window_focused 默認(rèn)時(shí)的背景圖片

<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="float"
        android:centerY="float"
        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>

<layer-list> 將多個(gè)圖片或畫布按照順序?qū)盈B起來

<layer-list
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:drawable="@[package:]drawable/drawable_resource"
        android:id="@[+][package:]id/resource_name"
        android:top="dimension"
        android:right="dimension"
        android:bottom="dimension"
        android:left="dimension" />
</layer-list>

item里的屬性是相對(duì)的偏移距離

漸變的陰影

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <layer-list>
            <!-- 陰影 -->
            <item android:gravity="bottom">
                <shape>
                    <size android:height="1.5dp"/>
                    <padding android:bottom="1.5dp"/>
                    <gradient
                        android:angle="-90"
                        android:endColor="@color/transparent"
                        android:startColor="#d1d1d1"/>
                </shape>
            </item>
            <item android:gravity="top">
                <shape>
                    <size android:height="1.5dp"/>
                    <padding android:top="1.5dp"/>
                    <gradient
                        android:angle="90"
                        android:endColor="@color/transparent"
                        android:startColor="#d1d1d1"/>
                </shape>
            </item>

        </layer-list>
    </item>
</selector>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末俺叭,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子泰偿,更是在濱河造成了極大的恐慌熄守,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,378評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件耗跛,死亡現(xiàn)場離奇詭異裕照,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)调塌,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,356評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門晋南,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人羔砾,你說我怎么就攤上這事负间。” “怎么了姜凄?”我有些...
    開封第一講書人閱讀 152,702評(píng)論 0 342
  • 文/不壞的土叔 我叫張陵政溃,是天一觀的道長。 經(jīng)常有香客問我檀葛,道長玩祟,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,259評(píng)論 1 279
  • 正文 為了忘掉前任屿聋,我火速辦了婚禮空扎,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘润讥。我一直安慰自己转锈,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,263評(píng)論 5 371
  • 文/花漫 我一把揭開白布楚殿。 她就那樣靜靜地躺著撮慨,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上砌溺,一...
    開封第一講書人閱讀 49,036評(píng)論 1 285
  • 那天影涉,我揣著相機(jī)與錄音,去河邊找鬼规伐。 笑死蟹倾,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的猖闪。 我是一名探鬼主播鲜棠,決...
    沈念sama閱讀 38,349評(píng)論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼培慌!你這毒婦竟也來了豁陆?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,979評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤吵护,失蹤者是張志新(化名)和其女友劉穎盒音,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體何址,經(jīng)...
    沈念sama閱讀 43,469評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡里逆,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,938評(píng)論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了用爪。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片原押。...
    茶點(diǎn)故事閱讀 38,059評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖偎血,靈堂內(nèi)的尸體忽然破棺而出诸衔,到底是詐尸還是另有隱情,我是刑警寧澤颇玷,帶...
    沈念sama閱讀 33,703評(píng)論 4 323
  • 正文 年R本政府宣布笨农,位于F島的核電站,受9級(jí)特大地震影響帖渠,放射性物質(zhì)發(fā)生泄漏谒亦。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,257評(píng)論 3 307
  • 文/蒙蒙 一空郊、第九天 我趴在偏房一處隱蔽的房頂上張望份招。 院中可真熱鬧,春花似錦狞甚、人聲如沸锁摔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,262評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽谐腰。三九已至孕豹,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間十气,已是汗流浹背励背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評(píng)論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留砸西,地道東北人椅野。 一個(gè)月前我還...
    沈念sama閱讀 45,501評(píng)論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像籍胯,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子离福,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,792評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,509評(píng)論 25 707
  • 概述 今天我們來探究一下android的樣式杖狼。其實(shí),幾乎所有的控件都可以使用 background屬性去引用自定義...
    CokeNello閱讀 4,813評(píng)論 1 19
  • 記得剛開始學(xué)Android時(shí)妖爷,看著自己完全用系統(tǒng)控件寫出的不忍直視的界面蝶涩,對(duì)于如何做出不一樣的按鈕,讓它們?cè)诓煌瑺?..
    biloba閱讀 1,696評(píng)論 1 11
  • 概述 Android把任何可繪制在屏幕上的圖形圖像都稱為drawable 資源,你可以通過類似getDrawabl...
    小蕓論閱讀 2,709評(píng)論 2 5
  • 一個(gè)陽光溫暖的小男孩 咩咩烊
    咩咩烊閱讀 342評(píng)論 0 2