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

210 篇文章 3 订阅
34 篇文章 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)
    }
}

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Android 中实现圆形剪裁框的方法有许多,以下是其中一种实现方式: 1. 创建一个圆形的 ShapeDrawable 可以通过创建一个圆形的 ShapeDrawable 对象来实现圆形剪裁框。在 drawable 目录下创建一个 xml 文件,例如 circular_shape.xml,内容如下: ```xml <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval"> <solid android:color="@android:color/transparent" /> <stroke android:width="5dp" android:color="@android:color/white" /> </shape> ``` 这个 ShapeDrawable 对象是一个圆形,有一个白色的描边和一个透明的填充。 2. 创建一个 ImageView 在布局文件中创建一个 ImageView,设置其宽高相等,并设置 ScaleType 为 centerCrop。例如: ```xml <ImageView android:id="@+id/image_view" android:layout_width="200dp" android:layout_height="200dp" android:scaleType="centerCrop" /> ``` 3. 将 ShapeDrawable 设置为 ImageView 的背景 在代码中获取 ImageView 对象,并将 ShapeDrawable 对象设置为其背景。例如: ```java ImageView imageView = findViewById(R.id.image_view); ShapeDrawable shapeDrawable = (ShapeDrawable) ContextCompat.getDrawable(this, R.drawable.circular_shape); imageView.setBackground(shapeDrawable); ``` 这样,ImageView 就被圆形剪裁了,只显示了圆形区域内的图片。 ### 回答2: Android 圆形剪裁框是一种图形处理技术,常用于将图片或者其他视图以圆形形式显示。 实现圆形剪裁框的方法有很多种,其中常用的方法是使用 BitmapShader 和 Canvas 对图片进行裁剪和绘制。 首先,我们需要创建一个圆形的 Shape,可以使用 ShapeDrawable 或者自定义一个继承自 Drawable 的类。然后,通过设置 Drawable 的 Bounds 为图片的边界,即可限制绘制的区域为圆形。 接下来,我们需要获取源图像的 Bitmap 对象,并根据需要设置尺寸和缩放比例。然后,使用 BitmapShader 将 Bitmap 对象与圆形的 Shape 进行关联,创建一个 Paint 对象并设置 Shader 为 BitmapShader。 接着,我们创建一个新的 Bitmap,并创建一个 Canvas 对象并将其与 Bitmap 关联。然后,使用 Canvas 的 drawCircle 方法绘制一个圆形,通过设置 Paint 的 Xfermode 为 PorterDuff.Mode.SRC_IN,实现将 Bitmap 绘制到圆形区域的效果。 最后,我们将处理好的 Bitmap 绘制在指定的 View 或者 ImageView 中,并设置为背景或者源图像。 圆形剪裁框在 Android 开发中经常用于实现头像展示、圆形图标等功能。通过上述的步骤,我们可以将任意形状的图片剪裁为圆形,实现更加美观和独特的视觉效果。同时,我们也可以通过添加边框、描边等操作,进一步丰富圆形剪裁框的效果。 总之,Android 圆形剪裁框是一种常用的图形处理技术,通过对 Bitmap 进行裁剪和绘制,可以实现将图片以圆形形式展示的效果。 ### 回答3: Android圆形剪裁框是一种常见的图像处理技术,用于将图像裁剪成圆形形状。在Android开发中,可以使用一些库或自定义视图来实现这个效果。 一种常见的实现方式是使用ImageView和BitmapShader结合,可以按以下步骤进行操作: 1. 通过ImageView来显示要剪裁的图像,可以在布局文件中添加一个ImageView控件。 2. 加载图像资源到Bitmap对象中。 3. 创建一个正方形的 Bitmap 对象作为剪裁框的背景,可以使用Bitmap.createBitmap()方法,并设置宽高为图像的宽高中较大的值。 4. 创建一个BitmapShader对象,用于指定图像的绘制方式为填充剪裁框。可以使用BitmapShader的构造方法并传入图像资源和Shader.TileMode的相关参数。 5. 创建一个Paint对象,并设置其颜色过滤器为一个PorterDuffColorFilter。这个过滤器用于限制只在剪裁框内绘制图像。 6. 创建一个圆形的Path对象,用于绘制剪裁框形状。 7. 在onDraw方法中,绘制剪裁框的背景Bitmap对象,并设置Paint的图像绘制方式为Shader。然后,使用drawCircle方法绘制圆形剪裁框。 8. 设置ImageView的裁剪模式为圆形,可以使用ImageView.setScaleType()方法设置ScaleType为CENTER_CROP。 通过以上步骤,就可以将图像裁剪成圆形剪裁框的形状。这样,在ImageView中显示的图像就会被自动裁剪成圆形,并填充到指定的剪裁框中。 总结起来,实现Android圆形剪裁框的关键是使用BitmapShader来绘制图像,并通过Paint的过滤器限定绘制范围。另外,利用ImageView的ScaleType属性可以更方便地实现圆形剪裁框的显示效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值