Skip to content

Commit 8f63dd6

Browse files
crazyqiangcrazyqiang
committed
ImageFilterView、ShapeableImageView处理图片圆角等
1 parent b2b9a91 commit 8f63dd6

File tree

2 files changed

+224
-3
lines changed

2 files changed

+224
-3
lines changed

‎app/src/main/kotlin/org/ninetripods/mq/study/activity/RoundImageActivity.kt

+74-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
package org.ninetripods.mq.study.activity
22

3+
import android.content.res.ColorStateList
34
import android.graphics.Bitmap
45
import android.graphics.BitmapFactory
56
import android.graphics.BitmapShader
@@ -14,17 +15,21 @@ import android.graphics.Shader
1415
import android.graphics.drawable.Drawable
1516
import androidx.appcompat.widget.AppCompatImageView
1617
import androidx.appcompat.widget.Toolbar
18+
import androidx.constraintlayout.utils.widget.ImageFilterView
1719
import androidx.core.graphics.drawable.RoundedBitmapDrawableFactory
1820
import com.bumptech.glide.Glide
1921
import com.bumptech.glide.load.resource.bitmap.CenterCrop
2022
import com.bumptech.glide.load.resource.bitmap.RoundedCorners
2123
import com.bumptech.glide.request.RequestOptions
24+
import com.google.android.material.imageview.ShapeableImageView
25+
import com.google.android.material.shape.RelativeCornerSize
26+
import com.google.android.material.shape.RoundedCornerTreatment
27+
import com.google.android.material.shape.ShapeAppearanceModel
2228
import org.ninetripods.mq.study.BaseActivity
2329
import org.ninetripods.mq.study.R
2430
import org.ninetripods.mq.study.kotlin.ktx.clipToRoundView
2531
import org.ninetripods.mq.study.kotlin.ktx.dp2px
2632
import org.ninetripods.mq.study.kotlin.ktx.id
27-
import org.ninetripods.mq.study.widget.RoundedCornersTransformation
2833
import org.ninetripods.mq.study.widget.roundImage.RoundImgView
2934

3035
/**
@@ -39,10 +44,18 @@ class RoundImageActivity : BaseActivity() {
3944
private val mIvGlide2: AppCompatImageView by id(R.id.iv_glide2)
4045
private val mIvClipPath: RoundImgView by id(R.id.iv_custom_img)
4146
private val mIvClipPath2: RoundImgView by id(R.id.iv_custom_img2)
42-
4347
private val mIvBitmapShader: AppCompatImageView by id(R.id.iv_bitmap_shader)
4448
private val mIvBitmapDrawable: AppCompatImageView by id(R.id.iv_bitmap_drawable)
4549

50+
//ImageFilterView使用
51+
private val mIvFilterView1: ImageFilterView by id(R.id.iv_filter_view1)
52+
private val mIvFilterView2: ImageFilterView by id(R.id.iv_filter_view2)
53+
54+
//ShapeableImageView使用
55+
private val mIvShapeAble5: ShapeableImageView by id(R.id.iv_shapeAble_view5)
56+
private val mIvShapeAble6: ShapeableImageView by id(R.id.iv_shapeAble_view6)
57+
private val mIvShapeAble7: ShapeableImageView by id(R.id.iv_shapeAble_view7)
58+
private val mIvShapeAble8: ShapeableImageView by id(R.id.iv_shapeAble_view8)
4659

4760

4861
override fun setContentView() {
@@ -122,6 +135,59 @@ class RoundImageActivity : BaseActivity() {
122135
cornerRadius = 20.dp2px().toFloat()
123136
}
124137
mIvBitmapDrawable.setImageDrawable(roundBitmapDrawable)
138+
139+
/**
140+
* 方式7：ImageFilterView
141+
*/
142+
val bitmap5 = BitmapFactory.decodeResource(resources, R.drawable.icon_cat_w)
143+
val bitmap6 = BitmapFactory.decodeResource(resources, R.drawable.icon_cat_w)
144+
mIvFilterView1.run {
145+
round = 10.dp2px().toFloat()
146+
setImageBitmap(bitmap5)
147+
}
148+
149+
mIvFilterView2.run {
150+
roundPercent = 1f
151+
setImageBitmap(bitmap6)
152+
}
153+
154+
/**
155+
* 方式8：ShapeableImageView
156+
*/
157+
// 代码设置圆角 圆角矩形等效果
158+
val shapeAppearanceModel5 = ShapeAppearanceModel.builder()
159+
.setAllCorners(RoundedCornerTreatment())
160+
.setAllCornerSizes(20f)
161+
.build()
162+
mIvShapeAble5.shapeAppearanceModel = shapeAppearanceModel5
163+
164+
val shapeAppearanceModel6 = ShapeAppearanceModel.builder()
165+
.setAllCorners(RoundedCornerTreatment())
166+
.setAllCornerSizes(RelativeCornerSize(0.5f))
167+
.build()
168+
mIvShapeAble6.shapeAppearanceModel = shapeAppearanceModel6
169+
170+
val shapeAppearanceModel7 = ShapeAppearanceModel.builder()
171+
.setAllCorners(RoundedCornerTreatment())
172+
.setAllCornerSizes(20f)
173+
.build()
174+
mIvShapeAble7.run {
175+
shapeAppearanceModel = shapeAppearanceModel7
176+
strokeWidth = 4.dp2px().toFloat()
177+
strokeColor = ColorStateList.valueOf(Color.RED)
178+
setPadding(2.dp2px(), 2.dp2px(), 2.dp2px(), 2.dp2px())
179+
}
180+
181+
val shapeAppearanceModel8 = ShapeAppearanceModel.builder()
182+
.setAllCorners(RoundedCornerTreatment())
183+
.setAllCornerSizes(RelativeCornerSize(0.5f))
184+
.build()
185+
mIvShapeAble8.run {
186+
shapeAppearanceModel = shapeAppearanceModel8
187+
strokeWidth = 4.dp2px().toFloat()
188+
strokeColor = ColorStateList.valueOf(Color.RED)
189+
setPadding(2.dp2px(), 2.dp2px(), 2.dp2px(), 2.dp2px())
190+
}
125191
}
126192

127193

@@ -187,7 +253,12 @@ class RoundImageActivity : BaseActivity() {
187253
drawRoundRect(rect, radius.toFloat(), radius.toFloat(), strokePaint)
188254
} else {
189255
//绘制圆形
190-
drawCircle(outWidth / 2f, outHeight / 2f, (outWidth - border) / 2f, strokePaint)
256+
drawCircle(
257+
outWidth / 2f,
258+
outHeight / 2f,
259+
(outWidth - border) / 2f,
260+
strokePaint
261+
)
191262
}
192263
}
193264
}

‎app/src/main/res/layout/activity_image_round.xml

+150
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
<LinearLayout
1919
android:layout_width="match_parent"
2020
android:layout_height="match_parent"
21+
android:clipChildren="false"
2122
android:orientation="vertical">
2223

2324
<!--方式一：ViewOutlineProvider可以设置圆角矩形、椭圆、圆形等-->
@@ -78,6 +79,7 @@
7879
android:scaleType="centerCrop" />
7980
</LinearLayout>
8081

82+
<!--3、ClipPath-->
8183
<TextView
8284
android:layout_width="match_parent"
8385
android:layout_height="wrap_content"
@@ -106,6 +108,7 @@
106108
android:scaleType="centerCrop" />
107109
</LinearLayout>
108110

111+
<!--4、CardView-->
109112
<TextView
110113
android:layout_width="match_parent"
111114
android:layout_height="wrap_content"
@@ -128,6 +131,7 @@
128131
android:src="@drawable/icon_cat_w" />
129132
</androidx.cardview.widget.CardView>
130133

134+
<!--5、BitmapShader-->
131135
<TextView
132136
android:layout_width="match_parent"
133137
android:layout_height="wrap_content"
@@ -141,6 +145,7 @@
141145
android:layout_height="100dp"
142146
android:layout_gravity="center" />
143147

148+
<!--6、BitmapDrawable-->
144149
<TextView
145150
android:layout_width="match_parent"
146151
android:layout_height="wrap_content"
@@ -153,6 +158,151 @@
153158
android:layout_width="100dp"
154159
android:layout_height="100dp"
155160
android:layout_gravity="center" />
161+
<!--7、ImageFilterView-->
162+
<TextView
163+
android:layout_width="match_parent"
164+
android:layout_height="wrap_content"
165+
android:layout_marginTop="20dp"
166+
android:gravity="center"
167+
android:text="7、ImageFilterView" />
168+
169+
<LinearLayout
170+
android:layout_width="match_parent"
171+
android:layout_height="wrap_content"
172+
android:layout_marginTop="20dp"
173+
android:gravity="center_horizontal"
174+
android:orientation="horizontal">
175+
176+
<androidx.constraintlayout.utils.widget.ImageFilterView
177+
android:id="@+id/iv_filter_view1"
178+
android:layout_width="100dp"
179+
android:layout_height="100dp"
180+
android:layout_gravity="center"
181+
android:scaleType="centerCrop" />
182+
183+
<androidx.constraintlayout.utils.widget.ImageFilterView
184+
android:id="@+id/iv_filter_view2"
185+
android:layout_width="100dp"
186+
android:layout_height="100dp"
187+
android:layout_gravity="center"
188+
android:layout_marginStart="20dp"
189+
android:scaleType="centerCrop" />
190+
</LinearLayout>
191+
192+
<!--8、ShapeableImageView-->
193+
<TextView
194+
android:layout_width="match_parent"
195+
android:layout_height="wrap_content"
196+
android:layout_marginTop="20dp"
197+
android:gravity="center"
198+
android:text="8、ShapeableImageView" />
199+
200+
<LinearLayout
201+
android:layout_width="match_parent"
202+
android:layout_height="wrap_content"
203+
android:layout_marginTop="20dp"
204+
android:layout_marginBottom="20dp"
205+
android:gravity="center"
206+
android:orientation="horizontal">
207+
208+
<com.google.android.material.imageview.ShapeableImageView
209+
android:id="@+id/iv_shapeAble_view1"
210+
android:layout_width="80dp"
211+
android:layout_height="80dp"
212+
android:layout_gravity="center"
213+
android:scaleType="centerCrop"
214+
android:src="@drawable/icon_cat_w"
215+
app:shapeAppearance="@style/roundedCornerStyle" />
216+
217+
<com.google.android.material.imageview.ShapeableImageView
218+
android:id="@+id/iv_shapeAble_view2"
219+
android:layout_width="80dp"
220+
android:layout_height="80dp"
221+
android:layout_gravity="center"
222+
android:layout_marginStart="10dp"
223+
android:scaleType="centerCrop"
224+
android:src="@drawable/icon_cat_w"
225+
app:shapeAppearance="@style/circleCornerStyle" />
226+
227+
<com.google.android.material.imageview.ShapeableImageView
228+
android:id="@+id/iv_shapeAble_view3"
229+
android:layout_width="80dp"
230+
android:layout_height="80dp"
231+
android:layout_gravity="center"
232+
android:layout_marginStart="10dp"
233+
android:padding="2dp"
234+
android:scaleType="centerCrop"
235+
android:src="@drawable/icon_cat_w"
236+
app:shapeAppearance="@style/roundedCornerStyle"
237+
app:strokeColor="@color/red"
238+
app:strokeWidth="4dp" />
239+
240+
<com.google.android.material.imageview.ShapeableImageView
241+
android:id="@+id/iv_shapeAble_view4"
242+
android:layout_width="80dp"
243+
android:layout_height="80dp"
244+
android:layout_gravity="center"
245+
android:layout_marginStart="10dp"
246+
android:padding="2dp"
247+
android:scaleType="centerCrop"
248+
android:src="@drawable/icon_cat_w"
249+
app:shapeAppearance="@style/circleCornerStyle"
250+
app:strokeColor="@color/red"
251+
app:strokeWidth="4dp" />
252+
</LinearLayout>
253+
254+
<LinearLayout
255+
android:layout_width="match_parent"
256+
android:layout_height="wrap_content"
257+
android:layout_marginBottom="20dp"
258+
android:gravity="center"
259+
android:orientation="horizontal">
260+
261+
<com.google.android.material.imageview.ShapeableImageView
262+
android:id="@+id/iv_shapeAble_view5"
263+
android:layout_width="80dp"
264+
android:layout_height="80dp"
265+
android:layout_gravity="center"
266+
android:scaleType="centerCrop"
267+
android:src="@drawable/icon_cat_w" />
268+
269+
<com.google.android.material.imageview.ShapeableImageView
270+
android:id="@+id/iv_shapeAble_view6"
271+
android:layout_width="80dp"
272+
android:layout_height="80dp"
273+
android:layout_gravity="center"
274+
android:layout_marginStart="10dp"
275+
android:scaleType="centerCrop"
276+
android:src="@drawable/icon_cat_w" />
277+
278+
<com.google.android.material.imageview.ShapeableImageView
279+
android:id="@+id/iv_shapeAble_view7"
280+
android:layout_width="80dp"
281+
android:layout_height="80dp"
282+
android:layout_gravity="center"
283+
android:layout_marginStart="10dp"
284+
android:scaleType="centerCrop"
285+
android:src="@drawable/icon_cat_w" />
286+
287+
<com.google.android.material.imageview.ShapeableImageView
288+
android:id="@+id/iv_shapeAble_view8"
289+
android:layout_width="80dp"
290+
android:layout_height="80dp"
291+
android:layout_gravity="center"
292+
android:layout_marginStart="10dp"
293+
android:scaleType="centerCrop"
294+
android:src="@drawable/icon_cat_w" />
295+
</LinearLayout>
296+
297+
<!-- <TextView-->
298+
<!-- android:id="@+id/tv_shape_able_1"-->
299+
<!-- android:layout_width="100dp"-->
300+
<!-- android:layout_height="100dp"-->
301+
<!-- android:layout_gravity="center"-->
302+
<!-- android:layout_marginTop="20dp"-->
303+
<!-- android:layout_marginBottom="10dp"-->
304+
<!-- android:gravity="center"-->
305+
<!-- android:text="shapeable" />-->
156306
</LinearLayout>
157307

158308
</androidx.core.widget.NestedScrollView>

0 commit comments

Comments
 (0)