需求:
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 屬性 ,要注意線段前後“帽子”的影響。線段高度值小的話,無所謂。線段高度越高,影響值,越大。