Android圖片底部居中的ImageView
原生ImageView可設定的scaleType有fitCenter、fitEnd、fitXY、centerInside等。
有時候,會有"fitBottom"+centerInside的需求。
效果如下圖:
ps:控制元件的background設定為紅色,用於感知控制元件寬高。
實現的原理是重寫ImageView的onDraw方法。在繪製drawable的時候,如果圖片寬高小於控制元件的寬高,那麼就將圖片繪製於控制元件底部居中位置,否則按父類的邏輯去繪製。
程式碼如下:(用法跟ImageView一樣,該咋用就咋用。)
class FitBottomImageView : AppCompatImageView {
private var mVWidth: Int = 0
private var mVHeight: Int = 0
constructor(context: Context) : super(context)
constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(
context,
attrs,
defStyleAttr
)
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
//獲取控制元件的寬高
mVWidth = measuredWidth
mVHeight = measuredHeight
}
override fun onDraw(canvas: Canvas) {
val imageDrawable = drawable ?: return
val bounds = imageDrawable.bounds
//獲取圖片的寬高
val width = bounds.width()
val height = bounds.height()
if (width > mVWidth || height > mVHeight) {
//按原生的邏輯去繪製
super.onDraw(canvas)
} else {//圖片的寬高小於控制元件的寬高
//底部居中位置繪製
canvas.save()
canvas.translate(((mVWidth - width) / 2).toFloat(), (mVHeight - height).toFloat())
imageDrawable.draw(canvas)
canvas.restore()
}
}
}
相關文章
- Android:ImageView圖片縮放、居中AndroidView
- android imageview圖片居中技巧應用AndroidView
- iOS開發之imageView居中顯示圖片iOSView
- Android ImageView 清空背景圖片AndroidView
- Android ImageView和TextView居中AndroidTextView
- android 中ImageView 無法居中AndroidView
- android imageview 縮放檢視圖片AndroidView
- Android ImageView 圖片靠右,靠左處理AndroidView
- Android中ImageView無法居中的問題AndroidView
- ImageView圖片填充全屏View
- Android用ImageView顯示本地和網上的圖片AndroidView
- Android 從本地選取圖片或者拍照填充ImageViewAndroidView
- ImageView顯示網路上的圖片View
- Android自定義ImageView 在圖片上新增一個圖層AndroidView
- htmlcss圖片居中HTMLCSS
- CSS去掉圖片底部的空白CSS
- [Android]Layout中ImageView中圖片的對齊顯示問題AndroidView
- ImageView的屬性android:scaleType設定最佳比例圖片顯示ViewAndroid
- flex圖片居中效果Flex
- UIImageView的圖片居中問題UIView
- iOS ImageView contentMode 圖片填充模式iOSView模式
- ImageView中圖片儲存到檔案View
- Android學習筆記:如何設定ImageView中圖片的顯示方式Android筆記View
- display:flex 圖片居中效果Flex
- imageView圖片放大縮小及旋轉View
- 設定圖片和文字的垂直居中
- 設定圖片水平垂直居中
- 高效圖片輪播,兩個ImageView實現View
- EXOPlayer居中播放,類似ImageView的CENTER_CROPView
- Android radioButton只設定圖片是居中顯示Android
- android 相對佈局,程式碼建立imageview,佈局居中問題AndroidView
- css垂直居中怎麼設定?文字上下居中和圖片垂直居中CSS
- [Android] ImageView.ScaleType設定圖解AndroidView圖解
- ImageView顯示圖片資源的兩種方法(background/src)View
- 將圖片旋轉(這裡不是旋轉imageView)View
- 直播電商平臺開發,Android | 圖片縮放、自動居中Android
- UIButton圖片文字控制元件位置自定義(圖片居右文字居左、圖片居中文字居中、圖片居左文字消失等)UI控制元件
- 圖片基礎知識梳理(1) ImageView 的 ScaleType 屬性解析View