Android鬼點子 Q彈的計數器

我是綠色大米呀發表於2019-01-23

無意在某設計網站看到一個這樣的設計。留下了很深的印象。

然後，我自己嘗試的實現了一下，另外豐富了一下效果，如下：

這個控制元件支援設定顏色，支援是否允許小於0。使用Kotlin實現。好像目前在購物車常用到這個效果。這個控制元件主要用到了Google新出物理彈性動畫SpringAnimation。SpringAnimation 類是最近（25.3.0版本）才新增在支援庫中的一個類，它可以很方便的實現彈簧效果，支援的屬性有

TRANSLATION_X
TRANSLATION_Y
TRANSLATION_Z
SCALE_X
SCALE_Y
ROTATION
ROTATION_X
ROTATION_Y
X
Y
Z
ALPHA
SCROLL_X
SCROLL_Y
複製程式碼

如果是一個現有的控制元件，想要實現彈簧效果，可以參考（http://www.jianshu.com/p/c2962a8135f5）這個地址。建議先讀過上面這篇文章，再讀本文。本文是一個非常規的使用方式，主要是使用了SpringAnimation計算結果，更新中間小球及整個控制元件的位置。首先上完整程式碼：

package com.greendami.ppcountview

import android.content.Context
import android.graphics.*
import android.support.animation.DynamicAnimation
import android.support.animation.SpringAnimation
import android.util.AttributeSet
import android.view.MotionEvent
import android.view.VelocityTracker
import android.view.View
import kotlinx.android.synthetic.main.activity_main.view.*


/**
 * 計數器
 * Created by GreendaMi on 2017/7/31.
 */
class PPCountView(context: Context?, attrs: AttributeSet?) : DynamicAnimation.OnAnimationUpdateListener, View(context, attrs) {
    var lenth = height / 8f
    var color: Int = 0
        set(value) {
            field = value
            postInvalidate()
        }
    var canDownzaro = true
        set(value) {
            field = value
            postInvalidate()
        }
    var centerX: Float = 0.toFloat()
        set(value) {
            field = if (value + measuredWidth / 2f <= measuredHeight / 2) measuredHeight / 2f
            else if (value + measuredWidth / 2f >= measuredWidth - measuredHeight / 2f) measuredWidth - measuredHeight / 2f else value + measuredWidth / 2f
            postInvalidate()
        }
    var count: Int = 0//顯示的數字
    private var textPaint: Paint = Paint()
    private var mPaint: Paint = Paint()
    private var velocityTracker: VelocityTracker = VelocityTracker.obtain()
    private var downX: Float = 0.toFloat()
    val animX = SpringAnimation(this, SpringAnimation.TRANSLATION_X, 0f)

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        setBackgroundColor(Color.TRANSPARENT)
        initPaint()
        lenth = measuredHeight / 8f
        centerX = 0f
        if (color == 0) {
            color = context.resources.getColor(R.color.colorPrimary)
        }
        animX.addUpdateListener(this)
        animX.spring.stiffness = getStiffness()
        animX.spring.dampingRatio = getDamping()
    }

    private fun initPaint() {
        textPaint.reset()
        mPaint.reset()
        mPaint.color = color
        mPaint.isAntiAlias = true
        textPaint.color = Color.WHITE
        textPaint.textSize = height / 2f
        textPaint.strokeWidth = height / 18f
        textPaint.isAntiAlias = true
    }


    override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
        drawBackground(canvas)
        drawBackCenterCircle(canvas)
    }

    private fun drawBackCenterCircle(canvas: Canvas?) {


        //畫陰影
        var mRadialGradient = RadialGradient(centerX, height / 2f, (height / 2f) * 1.16f, intArrayOf(Color.GRAY, Color.TRANSPARENT), null,
                Shader.TileMode.REPEAT)
        mPaint.shader = mRadialGradient

        //計算陰影半徑
        var r = if (centerX > width / 2) Math.min(width - centerX, height / 2f * 1.15f) else Math.min(centerX, height / 2f * 1.15f)

        canvas?.drawCircle(centerX, height / 2f, r, mPaint)

        //畫圓
        mPaint.reset()
        mPaint.color = Color.WHITE
        mPaint.isAntiAlias = true
        canvas?.drawCircle(centerX, height / 2f, height / 2f * 0.95f, mPaint)

        //寫數字
        textPaint.color = color
        canvas?.drawText(count.toString(), centerX - textPaint.measureText(count.toString()) / 2f, (height - textPaint.ascent() - textPaint.descent()) / 2f, textPaint)
    }

    private fun drawBackground(canvas: Canvas?) {
        initPaint()
        canvas?.drawRoundRect(0f, 0f, width.toFloat(), height.toFloat(), height / 2f, height / 2f, mPaint)


        textPaint.color = Color.WHITE
        canvas?.drawLine(height / 2f - lenth, height / 2f, height / 2f + lenth, height / 2f, textPaint)
        canvas?.drawLine((width - height / 2f) - lenth, height / 2f, (width - height / 2f) + lenth, height / 2f, textPaint)
        canvas?.drawLine(width - height / 2f, height / 2f - lenth, width - height / 2f, height / 2f + lenth, textPaint)
    }

    override fun onAnimationUpdate(animation: DynamicAnimation<out DynamicAnimation<*>>?, value: Float, velocity: Float) {
        box.centerX = value
    }

    override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                downX = event.rawX
                velocityTracker.addMovement(event)
                return true
            }
            MotionEvent.ACTION_MOVE -> {
                animX.cancel()
                this.centerX = (event.rawX - downX)
                this.translationX = (event.rawX - downX)
                velocityTracker.addMovement(event)
                return true
            }
            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                velocityTracker.computeCurrentVelocity(500)
                if (box.translationX !== 0f) {

                    animX.setStartVelocity(velocityTracker.getXVelocity())
                    animX.start()

                }
                if (event.rawX > downX) {
                    count++
                } else {
                    if (count <= 0 && canDownzaro) count--
                    if (count <= 0 && !canDownzaro) count = 0
                    if (count > 0) count--
                }

                velocityTracker.clear()
                return true
            }
        }
        return false
    }

    private fun getDamping(): Float {
        return 0.4f
    }

    private fun getStiffness(): Float {
        return 50f
    }

}
複製程式碼

gradle是這樣的,我用的是AS3.0。所以引入方式有點不同，但這不是本文的重點。

apply plugin: 'com.android.application'

apply plugin: 'kotlin-android'

apply plugin: 'kotlin-android-extensions'

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.1"
    defaultConfig {
        applicationId "com.greendami.ppcountview"
        minSdkVersion 21
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation"org.jetbrains.kotlin:kotlin-stdlib-jre7:$kotlin_version"
    implementation 'com.android.support:appcompat-v7:26.0.0-beta1'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:0.5'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:2.2.2'
    implementation 'com.android.support:support-dynamic-animation:26.0.0-beta1'
}

複製程式碼

Main.java中設定顏色，和是否支援負數。

package com.greendami.ppcountview

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity()  {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
//        box.color = Color.GREEN
        box.canDownzaro = true
    }

}

複製程式碼

佈局檔案是這樣的。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="com.greendami.ppcountview.MainActivity">

    <com.greendami.ppcountview.PPCountView
        android:id="@+id/box"
        android:layout_width="130dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:background="@color/colorPrimary" />


</LinearLayout>
複製程式碼

程式碼中比較重點的就是DynamicAnimation.OnAnimationUpdateListener，實現了監聽器，得到SpringAnimation的計算結果。然後將結果當做座標，然後重繪小球。

//宣告一個動畫，第一個引數是要執行動畫的View，第二個動畫是需要被計算的屬性，這裡是X軸的移動，第三個引數是動畫的結束位置。
val animX = SpringAnimation(this, SpringAnimation.TRANSLATION_X, 0f)
複製程式碼

//設定動畫監聽器
animX.addUpdateListener(this)
//設定彈性的生硬度，stiffness值越小，彈簧越容易擺動，擺動的時間越長，反之擺動時間越短
animX.spring.stiffness = getStiffness()
//方法設定彈性阻尼，dampingRatio越大，擺動次數越少，當到1的時候完全不擺動
animX.spring.dampingRatio = getDamping()
複製程式碼

在ontouch中

MotionEvent.ACTION_MOVE -> {
                animX.cancel()
                this.centerX = (event.rawX - downX)
                this.translationX = (event.rawX - downX)
                velocityTracker.addMovement(event)
                return true
            }
            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                velocityTracker.computeCurrentVelocity(500)
                if (box.translationX !== 0f) {

                    animX.setStartVelocity(velocityTracker.getXVelocity())
                    animX.start()

                }
                if (event.rawX > downX) {
                    count++
                } else {
                    if (count <= 0 && canDownzaro) count--
                    if (count <= 0 && !canDownzaro) count = 0
                    if (count > 0) count--
                }

                velocityTracker.clear()
                return true
            }
複製程式碼

滑動的時候，控制元件跟隨手指移動，鬆手後，給動畫賦一個加速度，然後開始動畫，此時之前設定的監聽器收到了事件。監聽器中收到計算後的數值，然後賦值給centerX。當centerX改變後

var centerX: Float = 0.toFloat()
        set(value) {
            field = if (value + measuredWidth / 2f <= measuredHeight / 2) measuredHeight / 2f
            else if (value + measuredWidth / 2f >= measuredWidth - measuredHeight / 2f) measuredWidth - measuredHeight / 2f else value + measuredWidth / 2f
            postInvalidate()
        }
複製程式碼

要保證小球座標的位置不會超出整個控制元件的大小，最後呼叫重繪。

最後說一下小球的陰影繪製，陰影的範圍要實時計算，當小球運動到兩端的時候，是沒有陰影的。

//畫陰影
var mRadialGradient = RadialGradient(centerX, height / 2f, (height / 2f) * 1.16f, intArrayOf(Color.GRAY, Color.TRANSPARENT), null,Shader.TileMode.REPEAT)
 
mPaint.shader = mRadialGradient

//計算陰影半徑
var r = if (centerX > width / 2) Math.min(width - centerX, height / 2f * 1.15f) else Math.min(centerX, height / 2f * 1.15f)

canvas?.drawCircle(centerX, height / 2f, r, mPaint)
複製程式碼

Android鬼點子 100行程式碼，搞定柱狀圖!
2019-02-26
Android行程
Android鬼點子-不用百行程式碼，讓文字閃閃發光
2019-03-04
Android行程
Python程式設計：Counter計數器-dict字典的子類
2018-08-24
Python程式設計
android10.0(Q) Nvram 新增節點
2020-11-30
AndroidVR
React計算antd的TreeSelect元件所選中的子節點數量
2018-11-21
React元件
2023年最新免費加速器--子彈加速器
2023-04-27
讓前端的子彈飛-TypeScript
2019-03-03
前端TypeScript
3 月書訊丨如果我早點看到這套書，數學也不會學成這個鬼樣子
2021-03-24
[譯] Bob，函數語言程式設計是什麼鬼？
2019-02-19
函數程式設計
layer父介面呼叫子彈窗的方法和獲取子彈窗的元素值總結
2018-11-05
layui 子彈窗獲取父頁面的引數傳參
2019-07-05
UI
Android入門教程 | RecyclerView響應子項點選
2021-11-09
AndroidView
[Android]關於Android子view超出父view無法響應點選事件
2020-10-15
AndroidView事件
阿里雲釋出的數加是什麼鬼
2018-09-04
阿里
強大的CSS：使用“變數種子計數器”擴充套件動畫更多可能性
2019-05-21
CSS變數套件動畫
Android Dialog風格彈出框的Activity
2019-01-22
Android
計數器
2024-08-13
斷路器的回退是被高估的彈性設計 - nurkiewicz
2019-07-11
知識點：樹中結點的度以及葉子結點（度為0的結點）的計算
2024-11-04
歡迎加入 Android Q 測試版計劃！
2019-04-18
Android
Android中handler倒數計時
2019-02-12
Android
CountDownTimer使用——android倒數計時
2019-03-04
Android
lc2953 統計完全子字串的數目
2024-03-23
字串
mapreduce的程式設計模型，計數器
2018-07-02
程式設計模型
精心設計的 GNN 只是“計數器”？
2021-11-06
GNN
appium+python+android，如何驗證 RecyclerView 子項數量？
2020-07-21
APPPythonAndroidView
Android斷點續傳下載器JarvisDownloader
2018-05-01
Android斷點JAR
計數器中的硬體
2020-10-14
[腦洞點子] macbook 變壓器架包
2018-06-27
Mac
數位電子技術的課設，交通燈倒數計時
2024-11-29
高效能Mysql(第3版)--網站點選計數器
2020-12-06
MySql網站
129 - 求根到葉子節點數字之和 - Python
2020-10-05
Python
手機直播原始碼，Android 簡單的彈框
2023-09-27
原始碼Android
全零子矩形計數問題
2024-11-10
射擊遊戲裡的子彈是如何飛行的
2020-06-09
遊戲
你手中的程式碼，可能變成他們的子彈
2019-02-20
面向切面程式設計AspectJ在Android埋點的實踐
2018-07-18
程式設計Android
Android彈窗二則: PopupWindow和AlertDialog
2019-03-03
Android

Android鬼點子 Q彈的計數器

相關文章