Android Material Design之ShapeableImageView(十三)

最新推荐文章于 2025-01-24 03:34:06 发布

原创最新推荐文章于 2025-01-24 03:34:06 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#android #android studio #ide

Android 专栏收录该内容

56 篇文章

订阅专栏

本文介绍如何在Android应用中使用ShapeableImageView创建带有圆角及边框的图片显示效果，包括设置圆角大小、边框宽度和颜色等属性，并提供具体的XML布局代码实例。

效果图
资源引入

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

属性

属性	描述
android:id	控件id
android:layout_width	控件长度
android:layout_height	控件高度
app:shapeAppearance	控件外观样式
app:strokeWidth	画笔粗度
app:strokeColor	画笔颜色
android:src	图像资源

源代码
xml布局代码:

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">


    <com.google.android.material.imageview.ShapeableImageView
        android:id="@+id/shapeableImageView"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_gravity="center"
        android:padding="2.5dp"
        android:src="@mipmap/ic_upic"
        app:shapeAppearance="@style/roundImg"
        app:strokeColor="@color/black"
        app:strokeWidth="5dp" />


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottomNavMenu"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="bottom"
        app:itemIconSize="25dp"
        app:itemIconTint="@color/icon_color"
        app:itemTextColor="@color/text_color"
        app:labelVisibilityMode="labeled"
        app:menu="@menu/bottom_menu" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

style: roundImg.xml

 <style name="roundImg">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">150dp</item>
    </style>

使用注意
如果圆角图片需要加入边框线则需要设置android:padding 且padding的大小等于app:strokeWidth的一半,否则你将会看到上下左右四个方向各有一段遮挡