属性介绍
style 属性:
属性名 | 描述 | 作用 |
---|---|---|
cornerFamily | 属性/样式 | -rounded: 圆角0 -cut: 切角1 |
cornerSize | 弧度 | 弧度大小 |
cornerSizeTopLeft | 左上角弧度大小 | |
cornerSizeTopRight | 右上角弧度大小 | |
cornerSizeBottomRight | 右下角弧度大小 | |
cornerSizeBottomLeft | 左下角弧度大小 | |
cornerFamilyTopLeft | 左上角样式(圆角或切角) | |
cornerFamilyTopRight | 右上角样式(圆角或切角) | |
cornerFamilyBottomRight | 右下角样式(圆角或切角) | |
cornerFamilyBottomLeft | 左下角样式(圆角或切角) |
布局属性:
属性名 | 描述 | 作用 |
---|---|---|
shapeAppearance | shapeableImageView的形状外观样 | 引用style样式 |
shapeAppearanceOverlay | ShapeableImageView的形状外观叠加样式 | 引用style样式 |
strokeColor | 描边颜色 | |
strokeWidth | 描边粗细 |
样式案例
build.gradle 配置
implementation 'com.google.android.material:material:1.6.1'
对应Style如下:
<!--圆形-->
<style name="roundStyle">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">50%</item>
</style>
<!--圆角-->
<style name="roundedCornerImageStyle10">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">10dp</item>
</style>
<!--切角-->
<style name="roundedCutStyle">
<item name="cornerFamily">cut</item>
<item name="cornerSize">10dp</item>
</style>
<!--左上右上圆角-->
<style name="roundedTopStyle">
<item name="cornerFamily">rounded</item>
<item name="cornerSizeTopLeft">20dp</item>
<item name="cornerSizeTopRight">20dp</item>
</style>
<!--菱形-->
<style name="roundedDiamondStyle">
<item name="cornerFamily">cut</item>
<item name="cornerSize">50%</item>
</style>
<!--子弹头-->
<style name="roundedBulletStyle">
<item name="cornerFamilyTopRight">rounded</item>
<item name="cornerSizeTopRight">50dp</item>
<item name="cornerSizeTopLeft">50dp</item>
<item name="cornerFamilyTopLeft">rounded</item>
</style>
<!--Tips-->
<style name="roundedTipsStyle">
<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>
<!-- 左上角90度扇形图片 -->
<style name="topLeftRoundImageStyle">
<item name="cornerFamilyTopLeft">rounded</item>
<item name="cornerSizeTopLeft">100%</item>
</style>
有个小细节需要注意,当我们使用strokeWidth属性时,一定要对应设置padding,否则会出现显示一半的效果。而padding的值设置为strokeWidth值的一半。如:
app:strokeWidth="5dp"
android:padding="2.5dp"
代码已上传github:
https://github.com/ljlstudio/KtMvvm/tree/master/demo/src/main/java/com/kt/ktmvvm/jetpack/shapeableimageview