TimePickerView는 시간 선택 UI를 위한 View입니다. 드래그를 이용해서 원하는 시간을 손쉽게 선택할 수 있습니다.
- drag를 이요한 선택 (보간법 적용)
- Clock 종료 날자 조절 가능
- 각도를 기준으로 계산
- 호의 길이가 작은 영역은 터치 무효
Add the JitPack repository in your build.gradle (top level module):
allprojects {
repositories {
jcenter()
maven { url "https://jitpack.io" }
}
}And add next dependencies in the build.gradle of the module:
dependencies {
implementation 'com.github.heesung6701:TimePicker:0.0.1'
}
<com.github.heesung6701.timepicker.library.TimePickerView
android:id="@+id/time_picker"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
선택된 시간의 정보는 TimePickerView의 timeItemArray에 저장되어 있다.
timeItemArray 자세히 보기
time_picker.timeItemArray[0].selected = true
- Observer<Array> Interface 추가
...
class MainActivity : AppCompatActivity(), Observer<Array<TimeItem>>
...
override fun update(item: Array<TimeItem>) {
// do something
}
- timeItemArray에 Observer를 추가한다.
time_picker.timeItemArray.add(this)
update 함수는 배열이 값이 변경되거나 벼열의 값인 Item의 속성이 변경되면 호출된다.
🔔 update 호출되는 경우 time_picker.timeItemArray[0].selected = true time_picker.timeItemArray[0] = TimeItem(false)
하지만 배열 자체가 변경되는 경우는 호출되지 않는다.
🔕 update 호출 안되는 경우 time_picker.timeItemArray = TimeItemArrayPublisher(24) { TimeItem.makeDefault() }
Clock의 크기를 지정한다.
app:clockSize="24"
| name | clockSize |
| Type | Int |
| Default | 24 |
clockSize: 24
clockSize: 12
Clock 외부 여백을 지정한다.
app:clockPadding="50"
| Name | clockPadding |
| Type | Float |
| Default | 50.0f |
clockPadding: 50.0f
clockPadding: 0.0f
시간 텍스트 색상을 지정한다
app:timeTextColor
app:timeTextColor="#F6BB43"
| Name | timeTextColor |
| Type | color |
| Default | GRAY |
timeTextColor="#F6BB43"
timeTextColor="#FFF700"
선택시 텍스트(시간) 색상을 지정한다
app:timeSelectedTextColor="#F6BB43"
| Name | timeSelectedTextColor |
| Type | color |
| Default | WHITE |
timeSelectedColor="#F6BB43"
timeSelectedColor="#FF7F00"
선택시 시간 배경 색상을 지정한다
app:timeBackgroundColor="#F6BB43"
| Name | timeBackgroundColor |
| Type | color |
| Default | GRAY |
timeBackgroundColor = "#F6BB43"
timeBackgroundColor = "#FF7F00"
시계의 테두리 색상을 지정한다.
app:clockBorderColor="#F6BB43"
| Name | clockBorderColor |
| Type | color |
| Default | GRAY |
clockBorderColor="#F6BB43"
clockBorderColor="#FF7F00"
시계의 배경 색상을 지정한다.
app:clockColor="#F6BB43"
| Name | clockColor |
| Type | color |
| Default | WHITE |
clockColor="#FF7F00"
clockColor="#F6BB43"
시계 중앙의 이미지를 추가한다.
app:centerImage="@drawable/ic_search"
app:centerImageWidth="100dp"
app:centerImageHeight="100dp"
| Name | centerImage | centerImageWidth | centerImageHeight |
| Type | reference | dimension | dimension |
| Default | NONE | 200.0f | 200.0f |
centerImage="@drawable/ic_search" app:centerImageWidth="50dp" app:centerImageHeight="50dp"
app:centerImage="@drawable/ic_launcher_foreground" app:centerImageWidth="300dp" app:centerImageHeight="300dp"
- v0.0.1 기초적인 기능 구현 후 라이브러리 화 시도
TimeItemArrayPublisher는 Array을 가지고 있는 Publisher이다.
class TimeItemArrayPublisher(size: Int, init: (Int) -> TimeItem) : Publisher<Array<TimeItem>> {
private val array = Array<TimeItem>(size) { init(it) }
...
하지만 operator를 이용해서 배열과 같이 접근이 가능하다.
operator fun set(index: Int, element: TimeItem) {
array[index] = element
notifyObserver()
}
operator fun get(index: Int): TimeItem {
return array[index]
}
여기서 주의할 점은 setter 함수를 호출하면 내부의 배열의 값을 바꾸면서 Observer에게 이 사실을 알린다.
class TimeItemArrayPublisher(...) : Publisher<Array<TimeItem>>, Observer<TimeItem> {
TimeItemArrayPublisher는 배열의 요소인 TimeItem의 속성이 변경되는 것 또한 관측 하고 있다. 따라서 TimeItemArrayPublisher는 Array을 제공하는 Publisher이면서 TimeItem을 관측하는 Observer이다.
- 입력된 좌표를 이용해서 Angle을 계산한다.
- 계산된 Angle을 sampling 해서 hour를 구한다.
- 이전 값을 이용해서 빠르게 드래그 할 경우 놓치게 되는 시간 값을 인식한다.
- 데이터를 업데이트 한다.
- Time 범위 지정 가능
- clock Border Stroke 설정 가능
- ImageResource 설정
- ImageDrawable 설정
- time item을 layout으로 지정할 수 있도록 구현
- Adapter 생성
- Extends a CircularListView