美文网首页Android
Android ShapeableImageView使用

Android ShapeableImageView使用

作者: 进击的包籽 | 来源:发表于2020-09-11 17:35 被阅读0次
效果

1.添加material:1.2.0依赖

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

2.在style.xml文件里面添加style

<!-- 圆角图片 -->
<style name="roundedCornerImageStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">25dp</item>
</style>

3.布局xml直接出效果

<!-- 圆角图片 -->
<!-- shapeAppearanceOverlay或shapeAppearance 加载style -->
<!-- strokeColo描边颜色 -->
<!-- strokeWidth描边宽度 -->
<com.google.android.material.imageview.ShapeableImageView
    android:id="@+id/image1"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:padding="1dp"
    android:src="@mipmap/ic_launcher"
    app:shapeAppearanceOverlay="@style/roundedCornerImageStyle"
    app:strokeColor="#F44336"
    app:strokeWidth="2dp" />

4.描边问题

  • 因为如果描边的width写了6,没有设置padding3,那笔画可能一半看不见,这个跟自定义view,使用画笔时是一样样的,绘制时,画笔有一半在边界外


    超出
正常 image.png
  • 黑色代表画笔,蓝色代表边框,就会有一半超出去

5.花里胡哨的样式

  • 看你需求自己设置就行
  • cornerSize 如果传dp就是具体,如果传百分比,就是以控件高为准算百分比,比如高写了100dp,cornerSize写50%,就是50dp的效果
<!-- 圆形图片 -->
<style name="circleImageStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
</style>

<!-- 切角图片 -->
<style name="cutImageStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">15dp</item>
</style>

<!-- 菱形图片 -->
<style name="diamondImageStyle">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">50%</item>
</style>

<!-- 左上角90度扇形图片 -->
<style name="topLeftRoundImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerSizeTopLeft">100%</item>
</style>

<!-- 火箭头图片 -->
<style name="rocketImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeTopLeft">70%</item>
    <item name="cornerSizeTopRight">70%</item>
</style>

<!-- 水滴 -->
<style name="waterImageStyle">
    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerFamilyBottomRight">rounded</item>
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyTopRight">rounded</item>
    <item name="cornerSizeBottomLeft">25dp</item>
    <item name="cornerSizeBottomRight">25dp</item>
    <item name="cornerSizeTopLeft">70%</item>
    <item name="cornerSizeTopRight">70%</item>
</style>

<!-- 叶子图片 -->
<style name="leafImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerFamilyBottomRight">rounded</item>
    <item name="cornerSizeTopLeft">50%</item>
    <item name="cornerSizeBottomRight">50%</item>
</style>

<!-- tip图片 -->
<style name="tipImageStyle">
    <item name="cornerFamilyTopLeft">rounded</item>
    <item name="cornerSizeTopLeft">50%</item>

    <item name="cornerFamilyBottomLeft">rounded</item>
    <item name="cornerSizeBottomLeft">50%</item>

    <item name="cornerFamilyTopRight">cut</item>
    <item name="cornerSizeTopRight">50%</item>

    <item name="cornerFamilyBottomRight">cut</item>
    <item name="cornerSizeBottomRight">50%</item>
</style>

5.参考文章

相关文章

网友评论

    本文标题:Android ShapeableImageView使用

    本文链接:https://www.haomeiwen.com/subject/nxdbektx.html