【Android -- Material Design】ShapeableImageView 的基本使用

前言

官网：ShapeableImageView

属性

属性	含义
strokeWidth	描边宽度
strokeColor	描边颜色
shapeAppearance	外观样式
shapeAppearanceOverlay	同上，叠加层

使用

1. 引入 material 包：

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

2. 普通
   

<com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/shapeableImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_avatar" />

3. 圆角
   

<com.google.android.material.imageview.ShapeableImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_avatar"
        app:shapeAppearance="@style/RoundedStyle" />

--------------------------------style.xml-----------------------------------------
<!-- 圆角-->
    <style name="RoundedStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">10dp</item>
    </style>

4. 圆形
   

<com.google.android.material.imageview.ShapeableImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_avatar"
        app:shapeAppearance="@style/CircleStyle" />

--------------------------------style.xml-----------------------------------------
<!-- 圆 -->
    <style name="CircleStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

5. 圆形描边
   

<com.google.android.material.imageview.ShapeableImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:src="@mipmap/ic_avatar"
        app:shapeAppearance="@style/CircleStyle"
        app:strokeColor="@color/black"
        app:strokeWidth="4dp" />

--------------------------------style.xml-----------------------------------------
<!-- 圆 -->
    <style name="CircleStyle">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
    </style>

6. 切角
   

<com.google.android.material.imageview.ShapeableImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:padding="2dp"
        android:src="@mipmap/ic_avatar"
        app:shapeAppearance="@style/CutStyle"
        app:strokeColor="@color/black"
        app:strokeWidth="4dp" />

--------------------------------style.xml-----------------------------------------
<!-- 切角 -->
    <style name="CutStyle">
        <item name="cornerFamily">cut</item>
        <item name="cornerSize">10dp</item>
    </style>

7. 菱形
   

<com.google.android.material.imageview.ShapeableImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp" 
    android:src="@mipmap/ic_avatar"
    app:shapeAppearance="@style/RhombusStyle"
    app:strokeColor="@color/black"
    app:strokeWidth="4dp" />

--------------------------------style.xml-----------------------------------------
<!-- 菱形 -->
<style name="RhombusStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">50%</item>
</style>

8. 叶子
   

<com.google.android.material.imageview.ShapeableImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp" 
    android:src="@mipmap/ic_avatar"
    app:shapeAppearance="@style/LeafStyle"
    app:strokeColor="@color/black"
    app:strokeWidth="4dp" />

--------------------------------style.xml-----------------------------------------
<!-- 叶子 -->
<style name="LeafStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopLeft">50%</item>
    <item name="cornerSizeBottomRight">50%</item>
</style>

9. 半圆
   

<com.google.android.material.imageview.ShapeableImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="10dp" 
    android:src="@mipmap/ic_avatar"
   app:shapeAppearance="@style/SemicircleStyle"
    app:strokeColor="@color/black"
    app:strokeWidth="4dp" />

--------------------------------style.xml-----------------------------------------
<!-- 半圆 -->
<style name="SemicircleStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopLeft">50%</item>
    <item name="cornerSizeTopRight">50%</item>
</style>

关注我的视频号，每天都有优质视频教学推送。

微信扫一扫下方二维码即可关注：