美文网首页开源库Android专题Android控件使用篇
Android开发中的圆角图片+圆形图片,看这一篇就够了!

Android开发中的圆角图片+圆形图片,看这一篇就够了!

作者: 千夜零一 | 来源:发表于2020-10-23 23:03 被阅读0次

    引言

      最近在苦练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布局实现的~

    相关文章

      网友评论

        本文标题:Android开发中的圆角图片+圆形图片,看这一篇就够了!

        本文链接:https://www.haomeiwen.com/subject/yhvbmktx.html