- 前段時(shí)間Google推送了文章 ， Android Material 組件 1.2.0 現(xiàn)已發(fā)布
里面就有ShapeableImageView番甩，不用像以前再寫(xiě)shape
效果
1.添加material:1.2.0依賴
implementation 'com.google.android.material:material:1.2.0'
2.在style.xml文件里面添加style
<!-- 圓角圖片 -->
<style name="roundedCornerImageStyle">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">25dp</item>
</style>
3.布局xml直接出效果
<!-- 圓角圖片 -->
<!-- shapeAppearanceOverlay或shapeAppearance 加載style -->
<!-- strokeColo描邊顏色 -->
<!-- strokeWidth描邊寬度 -->
<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image1"
android:layout_width="100dp"
android:layout_height="100dp"
android:padding="1dp"
android:src="@mipmap/ic_launcher"
app:shapeAppearanceOverlay="@style/roundedCornerImageStyle"
app:strokeColor="#F44336"
app:strokeWidth="2dp" />
4.描邊問(wèn)題
-
因?yàn)槿绻柽叺膚idth寫(xiě)了6，沒(méi)有設(shè)置padding3,那筆畫(huà)可能一半看不見(jiàn)，這個(gè)跟自定義view,使用畫(huà)筆時(shí)是一樣樣的，繪制時(shí)所踊，畫(huà)筆有一半在邊界外
超出
正常
image.png
- 黑色代表畫(huà)筆，藍(lán)色代表邊框栗弟，就會(huì)有一半超出去
5.花里胡哨的樣式
- 看你需求自己設(shè)置就行
- cornerSize 如果傳dp就是具體，如果傳百分比工闺，就是以控件高為準(zhǔn)算百分比乍赫，比如高寫(xiě)了100dp，cornerSize寫(xiě)50%陆蟆，就是50dp的效果
<!-- 圓形圖片 -->
<style name="circleImageStyle">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
<!-- 切角圖片 -->
<style name="cutImageStyle">
<item name="cornerFamily">cut</item>
<item name="cornerSize">15dp</item>
</style>
<!-- 菱形圖片 -->
<style name="diamondImageStyle">
<item name="cornerFamily">cut</item>
<item name="cornerSize">50%</item>
</style>
<!-- 左上角90度扇形圖片 -->
<style name="topLeftRoundImageStyle">
<item name="cornerFamilyTopLeft">rounded</item>
<item name="cornerSizeTopLeft">100%</item>
</style>
<!-- 火箭頭圖片 -->
<style name="rocketImageStyle">
<item name="cornerFamilyTopLeft">rounded</item>
<item name="cornerFamilyTopRight">rounded</item>
<item name="cornerSizeTopLeft">70%</item>
<item name="cornerSizeTopRight">70%</item>
</style>
<!-- 水滴 -->
<style name="waterImageStyle">
<item name="cornerFamilyBottomLeft">rounded</item>
<item name="cornerFamilyBottomRight">rounded</item>
<item name="cornerFamilyTopLeft">rounded</item>
<item name="cornerFamilyTopRight">rounded</item>
<item name="cornerSizeBottomLeft">25dp</item>
<item name="cornerSizeBottomRight">25dp</item>
<item name="cornerSizeTopLeft">70%</item>
<item name="cornerSizeTopRight">70%</item>
</style>
<!-- 葉子圖片 -->
<style name="leafImageStyle">
<item name="cornerFamilyTopLeft">rounded</item>
<item name="cornerFamilyBottomRight">rounded</item>
<item name="cornerSizeTopLeft">50%</item>
<item name="cornerSizeBottomRight">50%</item>
</style>
<!-- tip圖片 -->
<style name="tipImageStyle">
<item name="cornerFamilyTopLeft">rounded</item>
<item name="cornerSizeTopLeft">50%</item>
<item name="cornerFamilyBottomLeft">rounded</item>
<item name="cornerSizeBottomLeft">50%</item>
<item name="cornerFamilyTopRight">cut</item>
<item name="cornerSizeTopRight">50%</item>
<item name="cornerFamilyBottomRight">cut</item>
<item name="cornerSizeBottomRight">50%</item>
</style>
