view屬性微信小程序樣式(微信小程序ss新增樣式特性)
作者：yechaoa
作者：yechaoa
簡介
ShapeableImageView 是 ImageView 的一個子類。
特點(diǎn)
在 不寫shape、不引入三方庫 的情況下，可實(shí)現(xiàn)較多場景下的圖片顯示效果，具體如下圖：
效果 使用介紹1. 引入Material包implementation 'com.google.android.material:material:1.2.1'
2. 常用屬性
屬性
描述
strokeWidth
描邊寬度
strokeColor
描邊顏色
shapeAppearance
外觀樣式
shapeAppearanceOverlay
同上，疊加層
展開全文
3. 常規(guī)使用
和ImageView正常使用沒有區(qū)別
com.google.android.material.imageview.ShapeableImageView
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:layout_margin= "10dp"
android:src= "@mipmap/ic_avatar"/
常用效果
下面主要介紹的使用效果是：
圓角
圓
半圓
菱形
com.google.android.material.imageview.ShapeableImageView
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:layout_margin= "10dp"
android:src= "@mipmap/ic_avatar"
app:shapeAppearance= "@style/RoundedStyle"/
!--ShapeableImageView 圓角--
style name= "RoundedStyle"
item name= "cornerFamily"rounded/item
item name= "cornerSize"10dp/item
/style
沒有直接設(shè)置圓角的屬性，需要用到 app:shapeAppearance ，后面會說
cornerFamily 角的處理方式，rounded圓角，cut裁剪
cornerSize 圓角大小
沒有直接設(shè)置圓角的屬性，需要用到 app:shapeAppearance ，后面會說
cornerFamily 角的處理方式，rounded圓角，cut裁剪
cornerSize 圓角大小
com.google.android.material.imageview.ShapeableImageView
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:layout_margin= "10dp"
android:src= "@mipmap/ic_avatar"
app:shapeAppearance= "@style/CircleStyle"/
!--ShapeableImageView 圓 --
style name= "CircleStyle"
item name= "cornerFamily"rounded/item
item name= "cornerSize"50%/item
/style
圓角的大小可以用百分比，也可以自己計算，比如寬高100dp，圓角50dp
圓角的大小可以用百分比，也可以自己計算，比如寬高100dp，圓角50dp
com.google.android.material.imageview.ShapeableImageView
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:layout_margin= "10dp"
android:padding= "2dp"
android:src= "@mipmap/ic_avatar"
app:shapeAppearance= "@style/SemicircleStyle"
app:strokeColor= "@color/red"
app:strokeWidth= "4dp"/
!--ShapeableImageView 半圓 --
style name= "SemicircleStyle"
item name= "cornerFamily"rounded/item
item name= "cornerSizeTopLeft"50%/item
item name= "cornerSizeTopRight"50%/item
/style
4. 菱形
com.google.android.material.imageview.ShapeableImageView
android:layout_width= "wrap_content"
android:layout_height= "wrap_content"
android:layout_margin= "10dp"
android:padding= "2dp"
android:src= "@mipmap/ic_avatar"
app:shapeAppearance= "@style/RhombusStyle"
app:strokeColor= "@color/red"
app:strokeWidth= "4dp"/
!--ShapeableImageView 菱形 --
style name= "RhombusStyle"
item name= "cornerFamily"cut/item
item name= "cornerSize"50%/item
/style
同樣，裁剪模式下圓角大小也可以計算
同樣，裁剪模式下圓角大小也可以計算
主要介紹：shapeAppearance、ShapeAppearanceModel、MaterialShapeDrawable
會涉及到源碼，但是經(jīng)過去繁從簡，看起來也非常輕松的。
1. ShapeAppearance
?
Shape appearance overlay style reference for ShapeableImageView. ShapeableImageView的形狀外觀覆蓋樣式參考。
?
Shape appearance overlay style reference for ShapeableImageView. ShapeableImageView的形狀外觀覆蓋樣式參考。
?
前面可以看到我們設(shè)置圓角其實(shí)是用的 style ，那為什么不直接用 attrs 呢，不是更加直觀方便嗎，帶著疑問來看看源碼是怎么處理的。
直接看 ShapeableImageView 的次構(gòu)造方法：
public class ShapeableImageView extends AppCompatImageView implements Shapeable {
...
public ShapeableImageView(Context context, @Nullable AttributeSet attrs, int defStyle) {
super(wrap(context, attrs, defStyle, DEF_STYLE_RES), attrs, defStyle);
// Ensure we are using the correctly themed context rather than the context that was passed in.
context = getContext;
clearPaint = new Paint;
clearPaint.setAntiAlias( true);
clearPaint.setColor(Color.WHITE);
clearPaint.setXfermode(new PorterDuffXfermode(Mode.DST_OUT));
destination = new RectF;
maskRect = new RectF;
maskPath = new Path;
TypedArray attributes =
context.obtainStyledAttributes(
attrs, R.styleable.ShapeableImageView, defStyle, DEF_STYLE_RES);
strokeColor =
MaterialResources.getColorStateList(
context, attributes, R.styleable.ShapeableImageView_strokeColor);
strokeWidth = attributes.getDimensionPixelSize(R.styleable.ShapeableImageView_strokeWidth, 0);
borderPaint = new Paint;
borderPaint.setStyle(Style.STROKE);
borderPaint.setAntiAlias( true);
shapeAppearanceModel =
ShapeAppearanceModel.builder(context, attrs, defStyle, DEF_STYLE_RES).build;
shadowDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
if(VERSION.SDK_INT = VERSION_CODES.LOLLIPOP) {
setOutlineProvider(new OutlineProvider);
}
}
}
常規(guī)操作，獲取自定義屬性。
關(guān)鍵的兩行代碼：
shapeAppearanceModel = ShapeAppearanceModel.builder(context, attrs, defStyle, DEF_STYLE_RES).build;
shadowDrawable = new MaterialShapeDrawable(shapeAppearanceModel);
也就是說我們給 shapeAppearance 設(shè)置的style，并不是 ShapeableImageView 自己來處理的，而是由 ShapeAppearanceModel 來構(gòu)建的，然后又交給 MaterialShapeDrawable 來繪制的。
2. ShapeAppearanceModel
有點(diǎn)類似 Flutter 中的Decoration，可以構(gòu)建出花里胡哨的效果。
來看 ShapeAppearanceModel 部分源碼：
public class ShapeAppearanceModel {
/** Builder to create instances of {@link ShapeAppearanceModel}s. */
public static final class Builder {
@NonNull
private CornerTreatment topLeftCorner = MaterialShapeUtils.createDefaultCornerTreatment;
@NonNull
private CornerTreatment topRightCorner = MaterialShapeUtils.createDefaultCornerTreatment;
@NonNull
private CornerTreatment bottomRightCorner = MaterialShapeUtils.createDefaultCornerTreatment;
@NonNull
private CornerTreatment bottomLeftCorner = MaterialShapeUtils.createDefaultCornerTreatment;
@NonNull private CornerSize topLeftCornerSize = new AbsoluteCornerSize(0);
@NonNull private CornerSize topRightCornerSize = new AbsoluteCornerSize(0);
@NonNull private CornerSize bottomRightCornerSize = new AbsoluteCornerSize(0);
@NonNull private CornerSize bottomLeftCornerSize = new AbsoluteCornerSize(0);
@NonNull private EdgeTreatment topEdge = MaterialShapeUtils.createDefaultEdgeTreatment;
@NonNull private EdgeTreatment rightEdge = MaterialShapeUtils.createDefaultEdgeTreatment;
@NonNull private EdgeTreatment bottomEdge = MaterialShapeUtils.createDefaultEdgeTreatment;
@NonNull private EdgeTreatment leftEdge = MaterialShapeUtils.createDefaultEdgeTreatment;
public Builder{}
...
}
...
}
可以看到有各種邊和角的屬性，這里注意兩個點(diǎn)：
MaterialShapeUtils.createDefaultCornerTreatment 創(chuàng)建默認(rèn)角的處理方式
MaterialShapeUtils.createDefaultEdgeTreatment 創(chuàng)建默認(rèn)邊的處理方式
MaterialShapeUtils.createDefaultCornerTreatment 創(chuàng)建默認(rèn)角的處理方式
MaterialShapeUtils.createDefaultEdgeTreatment 創(chuàng)建默認(rèn)邊的處理方式
也就意味著，邊和角除了默認(rèn)，是可以自定義的，這就有極大的想象空間了， 比如這樣：
// 代碼設(shè)置 角和邊
val shapeAppearanceModel2 = ShapeAppearanceModel.builder.apply {
setAllCorners(RoundedCornerTreatment)
setAllCornerSizes(50f)
setAllEdges(TriangleEdgeTreatment(50f, false))
}.build
val drawable2 = MaterialShapeDrawable(shapeAppearanceModel2).apply {
setTint(ContextCompat.getColor(this@ShapeableImageViewActivity, R.color.colorPrimary))
paintStyle = Paint.Style.FILL_AND_STROKE
strokeWidth = 50f
strokeColor = ContextCompat.getColorStateList(this@ShapeableImageViewActivity, R.color.red)
}
mBinding.text2.setTextColor(Color.WHITE)
mBinding.text2.background = drawable2
再比如這樣：
// 代碼設(shè)置 聊天框效果
val shapeAppearanceModel3 = ShapeAppearanceModel.builder.apply {
setAllCorners(RoundedCornerTreatment)
setAllCornerSizes(20f)
setRightEdge(object : TriangleEdgeTreatment(20f, false) {
// center 位置 ， interpolation 角的大小
override fun getEdgePath(length: Float, center: Float, interpolation: Float, shapePath: ShapePath) {
super.getEdgePath(length, 35f, interpolation, shapePath)
}
})
}.build
val drawable3 = MaterialShapeDrawable(shapeAppearanceModel3).apply {
setTint(ContextCompat.getColor(this@ShapeableImageViewActivity, R.color.colorPrimary))
paintStyle = Paint.Style.FILL
}
(mBinding.text3.parent as ViewGroup).clipChildren = false// 不限制子view在其范圍內(nèi)
mBinding.text3.setTextColor(Color.WHITE)
mBinding.text3.background = drawable3
3. MaterialShapeDrawable
用于設(shè)置背景、陰影等其他屬性。源碼如下（有刪減）：
public class MaterialShapeDrawable extends Drawable implements TintAwareDrawable, Shapeable {
...
@Override
public void draw(@NonNull Canvas canvas) {
fillPaint.setColorFilter(tintFilter);
final int prevAlpha = fillPaint.getAlpha;
fillPaint.setAlpha(modulateAlpha(prevAlpha, drawableState.alpha));
strokePaint.setColorFilter(strokeTintFilter);
strokePaint.setStrokeWidth(drawableState.strokeWidth);
final int prevStrokeAlpha = strokePaint.getAlpha;
strokePaint.setAlpha(modulateAlpha(prevStrokeAlpha, drawableState.alpha));
if(pathDirty) {
calculateStrokePath;
calculatePath(getBoundsAsRectF, path);
pathDirty = false;
}
maybeDrawCompatShadow(canvas);
if(hasFill) {
drawFillShape(canvas);
}
if(hasStroke) {
drawStrokeShape(canvas);
}
...
static final class MaterialShapeDrawableState extends ConstantState {
...
public MaterialShapeDrawableState(@NonNull MaterialShapeDrawableState orig) {
shapeAppearanceModel = orig.shapeAppearanceModel;
elevationOverlayProvider = orig.elevationOverlayProvider;
strokeWidth = orig.strokeWidth;
colorFilter = orig.colorFilter;
fillColor = orig.fillColor;
strokeColor = orig.strokeColor;
tintMode = orig.tintMode;
tintList = orig.tintList;
alpha = orig.alpha;
scale = orig.scale;
shadowCompatOffset = orig.shadowCompatOffset;
shadowCompatMode = orig.shadowCompatMode;
useTintColorForShadow = orig.useTintColorForShadow;
interpolation = orig.interpolation;
parentAbsoluteElevation = orig.parentAbsoluteElevation;
elevation = orig.elevation;
translationZ = orig.translationZ;
shadowCompatRadius = orig.shadowCompatRadius;
shadowCompatRotation = orig.shadowCompatRotation;
strokeTintList = orig.strokeTintList;
paintStyle = orig.paintStyle;
if(orig.padding != null) {
padding = new Rect(orig.padding);
}
}
...
}
...
}
需要特別說明的是：
ShapeAppearanceModel 只能是實(shí)現(xiàn) Shapeable 接口的View才可以設(shè)置，比如 Chip 、 MaterialButtom 等。
而 MaterialShapeDrawable 其實(shí)就是 Drawable ，是所有View都可以設(shè)置的。
ShapeAppearanceModel 只能是實(shí)現(xiàn) Shapeable 接口的View才可以設(shè)置，比如 Chip 、 MaterialButtom 等。
而 MaterialShapeDrawable 其實(shí)就是 Drawable ，是所有View都可以設(shè)置的。
至此，關(guān)于ShapeableImageView這個小而美的官方圖片顯示控件講解完畢。
? 耗時2年，Android進(jìn)階三部曲第三部《Android進(jìn)階指北》出版！
? 『BATcoder』做了多年安卓還沒編譯過源碼？一個視頻帶你玩轉(zhuǎn)！
? 『BATcoder』我去！安裝Ubuntu還有坑？
? 重生！進(jìn)階三部曲第一部《Android進(jìn)階之光》第2版 出版！
BATcoder技術(shù)群，讓一部分人先進(jìn)大廠
大家好，我是劉望舒，騰訊TVP，著有三本業(yè)內(nèi)知名暢銷書，連續(xù)四年蟬聯(lián)電子工業(yè)出版社年度優(yōu)秀作者，百度百科收錄的資深技術(shù)專家。
想要加入 BATcoder技術(shù)群，公號回復(fù)BAT 即可。
為了防止失聯(lián)，歡迎關(guān)注我的小號
微信改了推送機(jī)制，真愛請星標(biāo)本公號??
掃描二維碼推送至手機(jī)訪問。
版權(quán)聲明：本文由飛速云SEO網(wǎng)絡(luò)優(yōu)化推廣發(fā)布，如需轉(zhuǎn)載請注明出處。
