ViewfinderViewAndroid 取景视图组件

联合创作 · 2023-09-24 06:07

ViewfinderView 是一个取景视图:主要用于渲染扫描相关的动画效果。其样式主要分为两大类:classic:经典样式(带扫描框)、popular:流行样式(不带扫描框);可任意定制。

如果你之前有使用过 ZXingLite  MLKit,可能会用到其内部的 ViewfinderView。现已将 ViewfinderView 独立出来,便于后续统一维护。

以后ZXingLiteMLKitWeChatQRCode 都将直接使用此 ViewfinderView 作为通用的扫描渲染视图。

Gif 展示

你也可以直接下载 演示App 体验效果

ViewfinderView属性说明

属性 属性类型 默认值 属性说明
vvViewfinderStyle enum classic 取景框样式;支持:classic:经典样式(带扫描框)、popular:流行样式(不带扫描框)
vvMaskColor color #60000000 扫描区外遮罩的颜色
vvFrameColor color #7F1FB3E2 扫描区边框的颜色
vvFrameWidth dimension   扫描框宽度
vvFrameHeight dimension   扫描框高度
vvFrameRatio float 0.625f 扫描框与屏幕占比,当未设置扫描框的宽高时,使用占比来计算宽高
vvFrameLineStrokeWidth dimension 1dp 边框线宽度
vvFramePaddingLeft dimension 0 扫描框左边的内间距
vvFramePaddingTop dimension 0 扫描框上边的内间距
vvFramePaddingRight dimension 0 扫描框右边的内间距
vvFramePaddingBottom dimension 0 扫描框下边的内间距
vvFrameGravity enum center 扫描框对齐方式
vvFrameCornerColor color #FF1FB3E2 扫描区边角的颜色
vvFrameCornerSize dimension 16dp 扫描区边角的大小
vvFrameCornerStrokeWidth dimension 4dp 扫描区边角的描边宽度
vvFrameDrawable reference   扫描框自定义图片
vvLaserLineHeight dimension 5dp 激光扫描线高度
vvLaserMovementSpeed dimension 2dp 激光扫描线的移动速度
vvLaserAnimationInterval integer 20 扫描动画延迟间隔时间,单位:毫秒
vvLaserGridColumn integer 20 网格激光扫描列数
vvLaserGridHeight integer 40dp 网格激光扫描高度,为0dp时,表示动态铺满
vvLaserColor color #FF1FB3E2 扫描区激光线的颜色
vvLaserStyle enum line 激光扫描的样式
vvLaserDrawable reference   激光扫描线自定义图片
vvLaserDrawableRatio float 0.625f 激光扫描图片与屏幕占比
vvLabelText string   扫描提示文本信息
vvLabelTextColor color #FFC0C0C0 提示文本字体颜色
vvLabelTextSize dimension 14sp 提示文本字体大小
vvLabelTextPadding dimension 24dp 提示文本距离扫描区的间距
vvLabelTextWidth dimension   提示文本的宽度,默认为View的宽度
vvLabelTextLocation enum bottom 提示文本显示位置
vvPointColor color #FF1FB3E2 结果点的颜色
vvPointStrokeColor color #FFFFFFFF 结果点描边的颜色
vvPointRadius dimension 15dp 结果点的半径
vvPointStrokeRatio float 1.2 结果点描边半径与结果点半径的比例
vvPointDrawable reference   结果点自定义图片
vvPointAnimation boolean true 是否显示结果点的动画
vvPointAnimationInterval integer 3000 结果点动画间隔时长;单位:毫秒

ViewfinderView相关的自定义属性统一使用 vv 开头。

引入

Gradle:

  1. 在Project的 build.gradle 里面添加远程仓库
allprojects {
    repositories {
        //...
        mavenCentral()
    }
}
 
  1. 在Module的 build.gradle 里面添加引入依赖项
// AndroidX 版本
implementation 'com.github.jenly1314:viewfinderview:1.0.0'
 

示例

布局示例

ViewfinderView 相关的自定义属性可参见上面的 ViewfinderView属性说明

    <com.king.view.viewfinderview.ViewfinderView
        android:id="@+id/viewfinderView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:vvLaserStyle="line" />
浏览 7
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

编辑 分享
举报