Android 圓形圖片,圓角圖片以及各種形狀的簡(jiǎn)單實(shí)現(xiàn)

Android Material 組件 1.2.0版本 新增的ShapeableImageView 控件,解決日常情況遇到的圖片常見的一些場(chǎng)景

效果圖

效果圖

官方文檔

出現(xiàn)原因:Android 實(shí)現(xiàn)圓角,圓形方式五花八門過(guò)于繁瑣

Android 以前實(shí)現(xiàn)圓角,圓形方式

1.使用shape元素（比較常用)
2.,使用背景圖片
3.自定義控件實(shí)現(xiàn)(原型,方形切)
4.使用ViewOutlineProvider裁剪view
5.使用cardView

解決方案: ShapeableImageView

支持功能:

1.圓角尺寸、
2.切角
3.不同的描邊寬度和顏色
4.各種形狀繪制

ShapeableImageView :

全新的 ShapeableImageView widget 是 AppCompatImageView 的擴(kuò)展，用于處理形狀主題 (shape theming)。常見用例是對(duì)矩形源圖像進(jìn)行圓角遮罩。不過(guò)，該 ShapeableImageView 也支持各種圓角尺寸、切角以及不同的描邊寬度和顏色

使用方法

1.添加material:1.2.0依賴

implementation 'com.google.android.material:material:1.2.0'

2.在values文件家的style.xml中創(chuàng)建style

 <?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 圓角圖片Style -->
<style name="RoundStyle">
    <item name="cornerSizeTopLeft">8dp</item>
    <item name="cornerSizeTopRight">8dp</item>
    <item name="cornerSizeBottomRight">8dp</item>
    <item name="cornerSizeBottomLeft">8dp</item>
</style>
</resources>

3.布局中直接使用

<!-- 圓角圖片 -->
<!-- shapeAppearanceOverlay或shapeAppearance 加載style -->
<!-- strokeColo描邊顏色 -->
<!-- elevation陰影注意需要和padding搭配->
<!-- strokeWidth描邊寬度 -->
<com.google.android.material.imageview.ShapeableImageView
android:layout_width="160dp"
android:layout_height="160dp"
android:padding="1dp"
android:src="@mipmap/ic_launcher"
android:elevation="4dp"
android:padding="8dp"
app:shapeAppearanceOverlay="@style/roundedCornerImageStyle"
app:strokeColor="#FFFFFF"
app:strokeWidth="5dp" />

各種樣式效果

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- 圓形圖片 -->
<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>

</resources>

資源

1.Android ShapeableImageView使用

2.官網(wǎng)

3.帶圓角,帶邊框,帶陰影的新版本CardView:MaterialCardView