詳解Android用Shape制作單邊框圖的兩種思路和坑
開發(fā)中遇到單/多邊框的UI,簡(jiǎn)單的可以自己寫shape圖,復(fù)雜的一般都讓設(shè)計(jì)配合制作9patch圖了。
今天不說(shuō)需要切圖的情況,只聊簡(jiǎn)單的單/多邊框,主要是實(shí)現(xiàn)思路。
效果很簡(jiǎn)單:
就以上圖為例介紹,只有上邊框,邊框紅色、寬1dp,其余為白色。
思路一
- 兩層畫布疊加:底層紅色;上層白色;
- 上層白色畫布下移1dp。
代碼實(shí)現(xiàn):
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!--下層畫布,紅色--> <item> <shape> <solid android:color="#f10606" /> </shape> </item> <!--下層畫布,白色,向下移1dp--> <item android:top="1dp"> <shape> <solid android:color="#ffffff" /> </shape> </item> </layer-list>
其中 <item>
標(biāo)簽的 left
、 top
、 right
、 bottom
屬性可以理解為 view
的 marginXX
,這樣接下來(lái)的思路二也就順理成章了。
思路二
margin有正值,也有負(fù)值,所以...
- 兩層畫布:底層全部白色;上層只有紅色邊框,邊框?qū)挾?dp;
- 上層紅色邊框分別設(shè)置左、右、下margin為-1dp(這里只要負(fù)值大于邊框?qū)挾燃纯?,并且必須大于邊框?qū)挾龋?/li>
代碼實(shí)現(xiàn):
<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!--下層畫布,全白色--> <item> <shape> <solid android:color="#ffffff" /> </shape> </item> <!--上層畫布,紅色邊框,寬度1dp;左、右、下設(shè)置margin--> <item android:bottom="-1dp" android:left="-1dp" android:right="-1dp" android:top="0dp"> <shape> <stroke android:width="1dp" android:color="#f10606" /> </shape> </item> </layer-list>
單邊框就這樣了,同理,那二邊框、三邊框也就簡(jiǎn)單了。
按需自取。
坑?
你以為到則里就結(jié)束了?圖樣圖森炮!
跑一下上邊思路二的代碼看看效果
神馬情況, stroke
里 width
的值和 item
里 left
等的值轉(zhuǎn)化為像素的比例還不一樣?并且不同手機(jī)分辨率效果也不同,分辨率越高越容易出現(xiàn)。
當(dāng)然,思路二里把 item
里 left
等的負(fù)值絕對(duì)值設(shè)置比 width
大的多一些就闊以了;另外,思路一是沒(méi)這個(gè)問(wèn)題的。
至于原因嘛,太晚了,睡一覺(jué)再研究吧。
更多shape使用請(qǐng)移步這里:
android shape的使用詳解以及常用效果(漸變色、分割線、邊框、半透明陰影效果等)
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
20行Android代碼寫一個(gè)CircleImageView
這篇文章主要介紹了20行Android代碼寫一個(gè)CircleImageView,制作圓形頭像,感興趣的小伙伴們可以參考一下2016-08-08淺談Android Classloader動(dòng)態(tài)加載分析
這篇文章主要介紹了淺談Android Classloader動(dòng)態(tài)加載分析,詳細(xì)的介紹了ClassLoader概念、分類,具有一定的參考價(jià)值,有興趣的可以了解一下2018-03-03Android UI設(shè)計(jì)系列之ImageView實(shí)現(xiàn)ProgressBar旋轉(zhuǎn)效果(1)
這篇文章主要為大家詳細(xì)介紹了Android UI設(shè)計(jì)之ImageView實(shí)現(xiàn)ProgressBar旋轉(zhuǎn)效果,具有一定的實(shí)用性和參考價(jià)值,感興趣的小伙伴們可以參考一下2016-06-06Android使用Handler實(shí)現(xiàn)倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了Android使用Handler實(shí)現(xiàn)倒計(jì)時(shí)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06Android 使用RecycleView列表實(shí)現(xiàn)加載更多的示例代碼
這篇文章主要介紹了Android 使用RecycleView列表實(shí)現(xiàn)加載更多的示例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-05-05Android中自定義ScrollView代碼實(shí)例
這篇文章主要介紹了Android中自定義ScrollView代碼實(shí)例,本文直接給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2015-05-05Android中App字體大小不隨系統(tǒng)改變而改變
這篇文章主要介紹了Android中App字體大小不隨系統(tǒng)改變而改變,需要的朋友可以參考下2017-04-04Android如何幫助用戶自動(dòng)接聽或者掛斷來(lái)電
這篇文章主要為大家詳細(xì)介紹了Android幫助用戶自動(dòng)接聽或者掛斷來(lái)電,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05