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

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

利用ShapeableImageView专门处理圆形和外框边线的特性,通过Glide加载图片装载到ShapeableImageView。注意,因为要描边,在xml定义ShapeableImageView时候,padding值与stroke值要保持一直,否则,圆图会在某些边缘地方被切边。

旋转的话,可以在上层Kotlin代码设置rotation(动态设置,灵活),旋转ShapeableImageView;也可以在xml里面写死rotation值(静态配置,不灵活)。

ShapeableImageView通过配置shapeAppearance改造成圆形图。

XML 复制代码
<?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 复制代码
<?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>
Kotlin 复制代码
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)
    }
}

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

相关推荐
雨白5 小时前
Jetpack系列(二):Lifecycle与LiveData结合,打造响应式UI
android·android jetpack
kk爱闹6 小时前
【挑战14天学完python和pytorch】- day01
android·pytorch·python
每次的天空8 小时前
Android-自定义View的实战学习总结
android·学习·kotlin·音视频
恋猫de小郭8 小时前
Flutter Widget Preview 功能已合并到 master,提前在体验毛坯的预览支持
android·flutter·ios
断剑重铸之日9 小时前
Android自定义相机开发(类似OCR扫描相机)
android
随心最为安9 小时前
Android Library Maven 发布完整流程指南
android
岁月玲珑10 小时前
【使用Android Studio调试手机app时候手机老掉线问题】
android·ide·android studio
还鮟14 小时前
CTF Web的数组巧用
android
小蜜蜂嗡嗡15 小时前
Android Studio flutter项目运行、打包时间太长
android·flutter·android studio
aqi0015 小时前
FFmpeg开发笔记(七十一)使用国产的QPlayer2实现双播放器观看视频
android·ffmpeg·音视频·流媒体