Android描边外框stroke边线、rotate旋转、circle圆形图的简洁通用方案，基于Glide与ShapeableImageView，Kotlin

Love The Way You Lie 2024-02-19 11:01 58阅读 0赞

### Android描边外框stroke边线、rotate旋转、circle圆形图的简洁通用方案，基于Glide与ShapeableImageView，Kotlin ###

利用ShapeableImageView专门处理圆形和外框边线的特性，通过Glide加载图片装载到ShapeableImageView。注意，因为要描边，在xml定义ShapeableImageView时候，padding值与stroke值要保持一直，否则，圆图会在某些边缘地方被切边。  
旋转的话，可以在上层Kotlin代码设置rotation（动态设置，灵活），旋转ShapeableImageView；也可以在xml里面写死rotation值（静态配置，不灵活）。  
ShapeableImageView通过配置shapeAppearance改造成圆形图。

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/image1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/ic_launcher_background"
            android:padding="30px"
            android:src="@drawable/ic_launcher_foreground"
            app:shapeAppearance="@style/rounded_style"
            app:strokeColor="@android:color/holo_red_dark"
            app:strokeWidth="30px" />
    
        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/image2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/ic_launcher_background"
            android:padding="30px"
            android:src="@drawable/ic_launcher_foreground"
            app:shapeAppearance="@style/rounded_style"
            app:strokeColor="@android:color/holo_red_dark"
            app:strokeWidth="30px" />
    
        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/image3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/ic_launcher_background"
            android:padding="30px"
            android:src="@mipmap/pic1"
            app:shapeAppearance="@style/rounded_style"
            app:strokeColor="@android:color/holo_red_dark"
            app:strokeWidth="30px" />
    
        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/image4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/ic_launcher_background"
            android:padding="30px"
            android:rotation="-30"
            android:src="@mipmap/pic1"
            app:shapeAppearance="@style/rounded_style"
            app:strokeColor="@android:color/holo_red_dark"
            app:strokeWidth="30px" />
    
        <com.google.android.material.imageview.ShapeableImageView
            android:id="@+id/image5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/ic_launcher_background"
            android:padding="30px"
            android:rotation="-30"
            android:scaleType="centerCrop"
            android:src="@mipmap/pic1"
            app:shapeAppearance="@style/rounded_style"
            app:strokeColor="@android:color/holo_red_dark"
            app:strokeWidth="30px" />
    
    </LinearLayout>

styles.xml:

<?xml version="1.0" encoding="utf-8"?>
    <resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
    
        <style name="rounded_style">
            <item name="cornerFamily">rounded</item>
            <item name="cornerSize">50%</item>
        </style>
    </resources>

import android.os.Bundle
    import androidx.appcompat.app.AppCompatActivity
    import com.bumptech.glide.load.resource.bitmap.CenterCrop
    import com.google.android.material.imageview.ShapeableImageView
    
    
    class MainActivity : AppCompatActivity() {
        companion object {
            const val DEGREE = -60
            const val SIZE = 500
        }
    
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
    
            val iv1 = findViewById<ShapeableImageView>(R.id.image1)
            GlideApp.with(this)
                .load(R.mipmap.pic1)
                .transform(CenterCrop())
                .error(android.R.drawable.stat_notify_error)
                .override(SIZE)
                .into(iv1)
    
            val iv2 = findViewById<ShapeableImageView>(R.id.image2)
            iv2.rotation = DEGREE.toFloat()
            GlideApp.with(this)
                .load(R.mipmap.pic1)
                .transform(CenterCrop())
                .error(android.R.drawable.stat_notify_error)
                .override(SIZE)
                .into(iv2)
        }
    }

![a763eac88db04b94b20e064616054410.png][]

[Android Glide加载transform CenterCrop, CircleCrop ShapeableImageView圆形图并描边，Kotlin-CSDN博客文章浏览阅读446次。Android RoundedBitmapDrawable：Android官方的圆角图形图象实现方案RoundedBitmapDrawable是Android在support v4的扩展包中新增的实现圆角图形的关键类，借助RoundedBitmapDrawable的帮助，可以轻松的以Android标准方式实现圆角图形图象。现在结合他人的代码加以修改，给出一个以原始图形中心为原点，修剪图片为头像的工具类，此类可以直接在布局文件中加载使用，比。所实现的在Kotlin动态代码中绘制的描边效果。![favicon32.ico][]https://blog.csdn.net/zhangphil/article/details/134297059][Android Glide_transform CenterCrop_ CircleCrop ShapeableImageView_Kotlin-CSDN_446_Android RoundedBitmapDrawable_Android_RoundedBitmapDrawable_Android_support v4_RoundedBitmapDrawable_Android_Kotlin_favicon32.ico_https_blog.csdn.net_zhangphil_article_details_134297059]

[a763eac88db04b94b20e064616054410.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/76872857cf25432ca7d7669f63bf6771.png
[favicon32.ico]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/d8a6411331d4468593324fc099cf5cbb.png
[Android Glide_transform CenterCrop_ CircleCrop ShapeableImageView_Kotlin-CSDN_446_Android RoundedBitmapDrawable_Android_RoundedBitmapDrawable_Android_support v4_RoundedBitmapDrawable_Android_Kotlin_favicon32.ico_https_blog.csdn.net_zhangphil_article_details_134297059]: https://blog.csdn.net/zhangphil/article/details/134297059