簡單的可滑動、點擊的次數選擇器(類似卡尺)

需求:
1、樣式類似下圖
在這裏插入圖片描述
2、可以滑動,滑動過程中,圓點頂部的數字隨之變動;
3、可點擊,點擊後,個數變動1。如:當前指示的數字爲:2。點擊2左邊的區域,則指示數字變爲1(即使點擊了0的位置)
4、次數爲:0、1、2、3。其中,0表示關閉

項目地址

在寫項目的時候,有些細節需要特別處理。請看下面的說明

項目效果圖:
在這裏插入圖片描述
其中,除頂部數字對應位置的圓點外,其他都是輔助點。爲了看位置畫的。可以去掉。藍點表示“有效位”。即:0、1、2、3的位置。黑點表示兩點之間的中點。如:2和3之間的黑點,表示,2和3線段的中點

項目缺點:
因爲需求簡單的原因,我這裏只需要 0、1、2、3 這4個點。所以,在代碼中,計算點的位置、計算 點上面要顯示的文字 的算法,都很簡單。沒有複雜算法。不適用於 主線上點數過多的情況。當然,以現在手機的性能,計算十來個點,都不是什麼問題,看不出卡頓。如果是好幾百、甚至上千的點。就要換算法了。

附加情況:(附加內容中的代碼,是項目源碼中沒有的,我後來調試出來的,就是一個細節,就直接寫在這裏了)

假設,現在是一個設置界面,除了這個 次數選擇器,還有其他設置按鈕。一屏放不下,就需要用 ScrollView 了。但是 ScrollView 自帶滑動,會和 次數選擇器 衝突。即:控件中的圓點,和 ScrollView 整體同時滑動。

解決辦法:當手指最開始按下的時候,如果是按住了 次數選擇器,就讓 ScrollView 不滑動。

相關代碼如下:(共3步)
1、新建個佈局,用於包裹 次數選擇器

class MyLinearLayout:LinearLayout {

    private var parentScrollview: ScrollView? = null

    constructor(context: Context?) : this(context,null)
    constructor(context: Context?, attrs: AttributeSet?) : this(context, attrs,0)
    constructor(context: Context?, attrs: AttributeSet?, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    )

    fun setParentScrollview(parentScrollview: ScrollView) {
        this.parentScrollview = parentScrollview
    }

    override fun onInterceptTouchEvent(ev: MotionEvent?): Boolean {
        parentScrollview?.requestDisallowInterceptTouchEvent(true)
        return super.onInterceptTouchEvent(ev)
    }

}

2、佈局中使用

<ScrollView
        android:id="@+id/sv"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

	<LinearLayout
		android:orientation="vertical"
		android:layout_width="match_parent"
		android:layout_height="wrap_content">

			......
			
            <com.demo.mycalibrationview.MyLinearLayout
                android:id="@+id/myLinearLayout"
                android:orientation="vertical"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <com.demo.mycalibrationview.MyCalibrationView
                    android:id="@+id/myCalibrationView"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="20dp"
                    android:layout_marginEnd="20dp"
                    android:background="#ffffff"
                    app:lineColor="#55ff0000"
                    app:moveTColor="#000000"
                    app:moveTSize="20"
                    app:pointColor="#0000ff"
                    app:tColor="#999999"
                    app:tSize="15" />
                    
            </com.demo.mycalibrationview.MyLinearLayout>

			......

	</LinearLayout>     
</ScrollView>

3、最後,在代碼中加上:

myLinearLayout?.setParentScrollview(sv)

這樣,當手指最開始按下的時候,如果是按到了 次數選擇器中,隨便滑動,ScrollView 不動。當按到了 次數選擇器 以外的地方,ScrollView 滑動

------------ 分割線 ----------------------- 分割線 -------------------------- 分割線 --------------------------

說明:項目代碼中,可以看到有時候會對 主線的高度(其實也是主線畫筆的寬度,也可以說是主線的寬度。都一個意思) 進行處理。其他的計算都好理解,爲什麼要單獨處理一下 主線的高度。如:+ lineHeight(lineHeight是主線高度)

這是因爲,主線的畫筆,設置了屬性

paint?.strokeCap = Paint.Cap.ROUND

字面意思:帽子。就是給線段設置個帽子。有的地方,也叫“筆觸”
在這裏插入圖片描述

下面,通過簡單的例子說明(證明):

先畫2條線
在這裏插入圖片描述
效果圖:
在這裏插入圖片描述
現在,紅色主線的畫筆,是默認的。接下來,改一下

1、設置 BUTT 屬性

 paint?.strokeCap=Paint.Cap.BUTT

效果不變。

2、SQUARE 屬性
在這裏插入圖片描述
注意這裏,畫2條輔助線,其中一條,要往前 25px,因爲 主線 的寬度爲 50。要取一半
在這裏插入圖片描述
3、同理,ROUND 屬性

paint?.strokeCap=Paint.Cap.ROUND

在這裏插入圖片描述
由此可知,如果設置了 strokeCap 屬性 ,要注意線段前後“帽子”的影響。線段高度值小的話,無所謂。線段高度越高,影響值,越大。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章