效果預(yù)覽

??時(shí)隔十個(gè)月，今天再次來分享項(xiàng)目中使用到的自定義View讹语，話不多說钙皮，直接開始，主要在相機(jī)預(yù)覽的時(shí)候點(diǎn)擊預(yù)覽界面對(duì)焦時(shí)使用顽决，并增加了對(duì)焦動(dòng)畫短条，可調(diào)節(jié)曝光〔挪ぃ可以設(shè)置曝光的上限和下限茸时，用于調(diào)整曝光時(shí)回調(diào)，點(diǎn)擊后無操作5秒后隱藏赋访】啥迹總的來說就是這些缓待，下面開始上代碼

對(duì)焦框

override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    val width = MeasureSpec.getSize(widthMeasureSpec)
    val height = MeasureSpec.getSize(heightMeasureSpec)
    frameRadius = width / 5f
    frameRectF.left = (width / 2f) - frameRadius
    frameRectF.right = (width / 2f) + frameRadius
    frameRectF.top = (height / 2f) - frameRadius
    frameRectF.bottom = (height / 2f) + frameRadius
    _14 = frameRectF.height() / 4f
}

override fun onDraw(canvas: Canvas?) {
    super.onDraw(canvas)
    canvas?.apply {
        val points = floatArrayOf(
        frameRectF.left, frameRectF.top, frameRectF.left, frameRectF.top + _14,
        frameRectF.left, frameRectF.top, frameRectF.left + _14, frameRectF.top,
        frameRectF.left, frameRectF.bottom, frameRectF.left, frameRectF.bottom - _14,
        frameRectF.left, frameRectF.bottom, frameRectF.left + _14, frameRectF.bottom,
        frameRectF.right, frameRectF.top, frameRectF.right, frameRectF.top + _14,
        frameRectF.right, frameRectF.top, frameRectF.right - _14, frameRectF.top,
        frameRectF.right, frameRectF.bottom, frameRectF.right, frameRectF.bottom - _14,
        frameRectF.right, frameRectF.bottom, frameRectF.right - _14, frameRectF.bottom)
        drawLines(points, framePaint)
    }
}

??這個(gè)對(duì)焦框顯而易見，其實(shí)就是畫了八條線渠牲，_14是用來控制邊框線條的長度的旋炒，想要邊框間距更近一些，就改成
_14 = frameRectF.height() / 3f

小太陽

1.按住顯示的直線

override fun onDraw(canvas: Canvas?) {
    super.onDraw(canvas)
    canvas?.apply {
        // 畫直線
        if (showLine) {
            if (circleY != circleRadius + dp8) {
                drawLine(centerOfCircle, 0f, centerOfCircle, (height * progress) - (circleRadius) - dp10, sunPaint)
            }
            if (circleY != height - (circleRadius) - dp8) {
                drawLine(centerOfCircle, (height * progress) + (circleRadius) + dp10, centerOfCircle, height * 1f, sunPaint)
            }
        }
    }
}

@SuppressLint("ClickableViewAccessibility")
override fun onTouchEvent(event: MotionEvent?): Boolean {
    event?.let { ev ->
        when (ev.action) {
            MotionEvent.ACTION_DOWN -> {
                if (circleY < 0f) {
                    circleY = height * progress
                    lastCircleY = circleY
                }
                posY = event.y
                paintColor = Color.WHITE
            }
            MotionEvent.ACTION_MOVE -> {
                curPosY = event.y
                paintColor = Color.WHITE
                if ((curPosY - posY > 0) || (curPosY - posY < 0)) {
                    showLine = true
                    invalidate()
                }
            }
            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                showLine = false
                invalidate()
            }
            else -> {

            }
        }
    }
    return true
}

??直線受showLine影響顯示或隱藏签杈，showLine會(huì)在手指移動(dòng)的時(shí)候會(huì)修改為true瘫镇，這個(gè)時(shí)候就會(huì)顯示小太陽后的直線；circleY是記錄小太陽y軸的位置答姥，而(circleY != circleRadius + dp8)是用來判斷當(dāng)前小太陽是否處于最上方铣除，如果不是的話，就會(huì)繪制小太陽上方的直線踢涌，(circleY != height - (circleRadius) - dp8)同理通孽，判斷是否處于最下方。

2.小太陽外部

override fun onDraw(canvas: Canvas?) {
    super.onDraw(canvas)
    canvas?.apply {
        // 畫圓,空心圓
        drawCircle(centerOfCircle, height * progress, circleRadius, sunPaint)
        // 畫線條
        for (i in 0 until 8) {
            val startPointF = calculationPoint(angle - (i * 45f), circleRadius + dp3)
            val endPointF = calculationPoint(angle - (i * 45f), circleRadius + dp5)
            borderWidth = 5f
            sunPaint.strokeWidth = borderWidth
            canvas.drawLine(startPointF.x, startPointF.y, endPointF.x, endPointF.y, sunPaint)
            borderWidth = 3f
        }
    }
}

/**
 * 計(jì)算圓上任意點(diǎn)的坐標(biāo)
 * @param angle 角度
 * @param radius 半徑
 * @return 點(diǎn)坐標(biāo)
 */
private fun calculationPoint(angle: Float, radius: Float): PointF {
    val x = (centerOfCircle) + (radius) * cos(angle * Math.PI / 180f).toFloat()
    val y = (height * progress) + (radius) * sin(angle * Math.PI / 180f).toFloat()
    return PointF(x, y)
}

??畫空心圓沒啥好說的睁壁，height * progress其實(shí)意義上也就是circleY背苦。至于小太陽上下滑動(dòng)外部線條也跟著轉(zhuǎn)是不斷改變angle，從線條最上面移動(dòng)到最下面潘明，就是從0到360的變化行剂。不斷的改變角度，達(dá)到根據(jù)手指移動(dòng)旋轉(zhuǎn)的效果钳降。

3.小太陽內(nèi)部

override fun onDraw(canvas: Canvas?) {
    super.onDraw(canvas)
    canvas?.apply {
        // 畫中間月亮效果
        if (realProcess < .5f) {
            // 張弦月
            val left = centerOfCircle - (((circleRadius - dp2) * 2f) * abs(realProcess - 0.5f))
            val top = (height * progress) - (circleRadius - dp2)
            val right = centerOfCircle + (((circleRadius - dp2) * 2f) * abs(realProcess - 0.5f))
            val bottom = (height * progress) + (circleRadius - dp2)
            drawOval(left, top, right, bottom, moonPaint)
            drawArc(centerOfCircle - (circleRadius - dp2), (height * progress) - (circleRadius - dp2),
                centerOfCircle + (circleRadius - dp2), (height * progress) + (circleRadius - dp2),
                90f, 180f, false, moonPaint)
        } else if (realProcess == .5f) {
            // 下弦月
            drawArc(centerOfCircle - (circleRadius - dp2), (height * progress) - (circleRadius - dp2),
                centerOfCircle + (circleRadius - dp2), (height * progress) + (circleRadius - dp2),
                90f, 180f, false, moonPaint)
        } else {
            // 殘?jiān)?            val save = saveLayer(null, null)
            val left = centerOfCircle - (((circleRadius - dp2) * 2f) * abs(realProcess - 0.5f))
            val top = (height * progress) - (circleRadius - dp2)
            val right = centerOfCircle + (((circleRadius - dp2) * 2f) * abs(realProcess - 0.5f))
            val bottom = (height * progress) + (circleRadius - dp2)
            drawArc(centerOfCircle - (circleRadius - dp2 - 1), (height * progress) - (circleRadius - dp2 - 1),
                centerOfCircle + (circleRadius - dp2 - 1), (height * progress) + (circleRadius - dp2 - 1),
                90f, 180f, false, moonPaint)
            moonPaint.xfermode = porterDuffDstOut
            drawOval(left, top, right, bottom, moonPaint)
            moonPaint.xfermode = null
            restoreToCount(save)
        }
    }
}

??小太陽中間的月亮效果是參考了蹭中秋熱度來了~Android 自定義View——月有陰晴圓缺這個(gè)文章厚宰，感興趣的可以去看一下∷焯睿總的來說铲觉，這個(gè)月亮主要分為三個(gè)部分，殘?jiān)?> 下弦月 > 張弦月吓坚。

??殘?jiān)潞蛷埾以碌脑硎钱嬃艘粋€(gè)下弦月撵幽，在下弦月的基礎(chǔ)上，再畫一個(gè)橢圓礁击，這個(gè)橢圓是高度和下弦月相同盐杂，寬度動(dòng)態(tài)向兩邊延伸的。橢圓的效果如下：

效果圖

??這里放大了整個(gè)View哆窿，也是為了更加直觀的看到橢圓的變化链烈。看到這里就可以明白張弦月其實(shí)就是這個(gè)橢圓和下弦月疊放在一起的效果挚躯，那殘?jiān)率侨绾螌?shí)現(xiàn)的呢强衡，這里用到了PorterDuffXfermode，對(duì)于PorterDuffXfermode不了解的可以看下Google的官方文檔码荔，文章中用到的是DST_OUT漩勤，效果如圖：

效果圖

??使用PorterDuff.Mode.DST_OUT將可變化的橢圓和下弦月疊放在一起就實(shí)現(xiàn)了殘?jiān)碌男Ч?/p>

總結(jié)

??到這里就結(jié)束了号涯，那么如何使用呢，代碼如下锯七，首先是xml：

<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"
    tools:context=".MainActivity">

    <View
        android:id="@+id/preview_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black" />

    <com.lazyiones.focussunview.FocusSunView
        android:id="@+id/focus_sun_view"
        android:layout_width="120dp"
        android:layout_height="140dp"
        android:visibility="invisible"
        app:layout_constraintStart_toStartOf="@+id/preview_view"
        app:layout_constraintTop_toTopOf="@+id/preview_view" />

</androidx.constraintlayout.widget.ConstraintLayout>

??這里一定要把visibility設(shè)置為invisible，不然第一次顯示無法正常處理寬高誉己，對(duì)焦框顯示的位置會(huì)偏離眉尸，preview_view顧名思義就是預(yù)覽的View。下面是Activity中：

val focusSunView = findViewById<FocusSunView>(R.id.focus_sun_view)

findViewById<View>(R.id.preview_view).setOnTouchListener { _, motionEvent ->
    when (motionEvent.action) {
        MotionEvent.ACTION_DOWN -> {
            focusSunView.visibility = View.VISIBLE
            focusSunView.translationX = motionEvent.x - (focusSunView.width / 2f)
            focusSunView.translationY = motionEvent.y - (focusSunView.height / 2f)
            focusSunView.startCountdown()
        }
    }
    return@setOnTouchListener true
}

focusSunView.setOnExposureChangeListener(object : FocusSunView.OnExposureChangeListener {
    override fun onExposureChangeListener(exposure: Float) {
        // 處理相機(jī)曝光
        Log.e("FocusSunView", "onExposureChangeListener: -----------> $exposure")
    }
})

??OK巨双，大致就是這樣噪猾，有寫的不好的地方歡迎指正。
源碼地址：FocusSunView