引言
最近在苦练Kotlin,一款不错的app(开眼)中的布局吸引了我,也在不懈的努力下通过Kotlin语言完成了开眼首页的RecyclerView多ViewType布局效果,开心!(文末会贴出来)其中用到的图片处理控件很实用,也在日常的项目中会经常用到,因此安利给大家!
本次就针对Android开发中的图片处理给大家安利两个开源库:CircleImageView(圆形图片)+RoundedImageView(圆角图片)。
本期效果预览
用法
第一步:添加依赖(app下build.gradle)
//圆角图片
implementation 'com.makeramen:roundedimageview:2.3.0'
//图片圆形处理
implementation 'de.hdodenhof:circleimageview:3.1.0'
第二步:布局文件使用控件
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp"
tools:context=".blog.Case53"
tools:ignore="MissingConstraints">
<TextView
android:id="@+id/title1"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@color/pink"
android:gravity="center"
android:text="默认ImageView样式"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/defaultImage"
android:layout_width="150dp"
android:layout_height="120dp"
android:scaleType="centerCrop"
android:layout_marginTop="20dp"
android:src="@drawable/pic1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/defaultImage1"
app:layout_constraintTop_toBottomOf="@id/title1" />
<ImageView
android:id="@+id/defaultImage1"
android:layout_width="150dp"
android:layout_height="120dp"
android:scaleType="centerCrop"
android:layout_marginTop="20dp"
app:layout_constraintEnd_toEndOf="parent"
android:src="@drawable/pic2"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="@id/defaultImage"
app:layout_constraintTop_toBottomOf="@id/title1" />
<TextView
android:id="@+id/title2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@color/pink"
android:gravity="center"
android:text="RoundedImageView样式"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintTop_toBottomOf="@id/defaultImage" />
<com.makeramen.roundedimageview.RoundedImageView
android:id="@+id/roundedImage1"
android:layout_width="150dp"
android:layout_height="120dp"
android:scaleType="centerCrop"
android:layout_marginTop="20dp"
app:riv_corner_radius="8dp"
android:src="@drawable/pic1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/roundedImage2"
app:layout_constraintTop_toBottomOf="@id/title2" />
<com.makeramen.roundedimageview.RoundedImageView
android:id="@+id/roundedImage2"
android:layout_width="150dp"
android:layout_height="120dp"
android:scaleType="centerCrop"
android:layout_marginTop="20dp"
app:riv_corner_radius="8dp"
android:src="@drawable/pic2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/roundedImage1"
app:layout_constraintTop_toBottomOf="@id/title2" />
<TextView
android:id="@+id/title3"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_marginTop="20dp"
android:background="@color/pink"
android:gravity="center"
android:text="CircleImageView样式"
android:textColor="@color/white"
android:textSize="18sp"
app:layout_constraintTop_toBottomOf="@id/roundedImage1" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/circleImageView1"
android:layout_width="150dp"
android:layout_height="120dp"
android:layout_marginTop="20dp"
android:src="@drawable/pic1"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/circleImageView2"
app:layout_constraintTop_toBottomOf="@id/title3" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/circleImageView2"
android:layout_width="150dp"
android:layout_height="120dp"
android:layout_marginTop="20dp"
android:src="@drawable/pic2"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@id/circleImageView1"
app:layout_constraintTop_toBottomOf="@id/title3" />
</androidx.constraintlayout.widget.ConstraintLayout>
API介绍
-
RoundedImageView
RoundedImageView riv = new RoundedImageView(context);
riv.setScaleType(ScaleType.CENTER_CROP);
riv.setCornerRadius((float) 10);
riv.setBorderWidth((float) 2);
riv.setBorderColor(Color.DKGRAY);
riv.mutateBackground(true);
riv.setImageDrawable(drawable);
riv.setBackground(backgroundDrawable);
riv.setOval(true);
riv.setTileModeX(Shader.TileMode.REPEAT);
riv.setTileModeY(Shader.TileMode.REPEAT); -
CircleImageView
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"
大功告成!
开眼首页
Tips: Kotlin实现,写完整个项目会分享git源码给大家!
没错,这是一个RecyclerView布局实现的~
网友评论