วิดเจ็ตนาฬิกา
นาฬิกาบนหน้าจอหลักที่บอกมากกว่าเวลา ขนาด 4×2 แบ่งเป็นสองครึ่ง ซ้ายคือนาฬิกา ขวาคือกิจกรรม แถบฟ้า 24 ชั่วโมงของ drawer ถูกดัดเป็นวงรอบตัวเลขเวลา เที่ยงอยู่บน เที่ยงคืนอยู่ล่าง กิจกรรมของวันนี้เป็นส่วนโค้งรอบวง และเข็มคือเส้น “ตอนนี้” เส้นเดียวกับขีดกลางของโลโก้ มองครั้งเดียวรู้ว่ากี่โมง อยู่ตรงไหนของวัน และงานถัดไปอยู่ห่างแค่ไหน ลากแถบเวลาด้านบนเพื่อดูทุกตัวอย่างเปลี่ยนตาม
ซ้ายคือรูปร่างของวัน ขวาคือชื่อ
ครึ่งซ้ายไม่มีตัวหนังสือนอกจากเวลา มันบอกว่าวันนี้แน่นช่วงไหน ว่างช่วงไหน และตอนนี้อยู่ตรงไหน ครึ่งขวาบอกชื่อของสิ่งที่กำลังเกิดและสิ่งที่จะมา สองครึ่งพูดเรื่องเดียวกันด้วยสีเดียวกัน จึงไม่ต้องมีเส้นโยงหากัน ปุ่มด้านล่างสลับหน้าปัดของทุกตัวอย่างในหน้านี้
บนหน้าจอหลัก
พื้นวิดเจ็ตเป็นสีแผ่นของแอป มุมโค้งใช้ค่าของ launcher สลับสว่างมืดตามระบบเหมือนวิดเจ็ตกิจกรรมที่จะถึง สีของฟ้าเหมือนกันทั้งสองโหมด ในโหมดมืดครึ่งกลางคืนของวงจึงกลืนไปกับพื้น เหลือกลางวันลอยอยู่ครึ่งบน ย่อเป็น 2×2 แล้วเหลือนาฬิกากับงานเดียว
สามหน้าปัด
ทั้งสามใช้ชิ้นส่วนชุดเดียวกัน คือฟ้า ขีดกิจกรรม และเส้นตอนนี้ ต่างกันที่วิธีบอกเวลา ครึ่งขวาเหมือนกันทุกแบบ ข้อเสนอคือใช้ “วงวัน” เป็นค่าเริ่มต้น จะทำแบบเดียว หรือให้เลือกหน้าปัดตอนวางวิดเจ็ตก็ได้
วงวัน แนะนำ
หนึ่งรอบคือ 24 ชั่วโมง เห็นกลางวัน กลางคืน และงานทั้งวันในวงเดียว งานที่ผ่านไปแล้วยังอยู่เป็นสีจาง ตัวเลขตรงกลางเดินเองทุกนาที
ข้อแลก: วงหนึ่งรอบยาวราว 460 dp งาน 15 นาทีจึงเหลือเป็นจุดเดียว
เข็ม
หน้าปัด 12 ชั่วโมงแบบนาฬิกาข้อมือ วงรอบนอกคือ 12 ชั่วโมงข้างหน้า เริ่มที่ปลายเข็มสั้น สิ่งที่เข็มผ่านแล้วหายไปจากวง งานสั้นเห็นชัดขึ้นเพราะวงละเอียดเป็นสองเท่า
ข้อแลก: ไม่เห็นงานที่ผ่านไปแล้ว ต้องอ่านเข็ม และเข็มวินาทีมีเฉพาะ Android 12 ขึ้นไป
ตัวเลข
ตัวเลขใหญ่ที่สุด อ่านได้จากไกล ชั่วโมงอยู่บน นาทีอยู่ล่าง คั่นด้วยแถบฟ้าเส้นตรงแบบเดียวกับใน drawer เหมือนขีดกลางของตัว A ในโลโก้
ข้อแลก: แถบยาวแค่ 160 dp รายละเอียดของวันน้อยกว่าสองแบบแรก
โครง
หน้าปัดวงวันเวลา 08:10 ก่อนงานแรกของช่วงสาย ทุกส่วนแตะได้และพาไปที่ที่มันบอกด้วย LaunchLink ชุดเดิม
แตะนาฬิกาเปิดวันนี้ แตะแถวเปิดกิจกรรม แตะ + เพิ่มกิจกรรม
- เวลาตัวเลขที่ระบบเดินให้เองทุกนาที ตามการตั้งค่า 12 หรือ 24 ชั่วโมงของเครื่อง บรรทัดใต้เวลาคือพระอาทิตย์ขึ้นหรือตกครั้งถัดไป ไม่รู้ตำแหน่งก็ไม่แสดง
- วงฟ้าสีฟ้าจริงของแต่ละชั่วโมง 24 ช่อง เที่ยงอยู่บน เที่ยงคืนอยู่ล่าง เช้าอยู่ซ้าย เย็นอยู่ขวา พระอาทิตย์ขึ้นและตกอยู่ตรงที่สีเปลี่ยน ตัวเลข 12 กับ 00 บอกทิศของวง
- เข็มตอนนี้จุดกับเส้น แบบเดียวกับบนแถบฟ้าใน drawer เข็มเดียวเดินวันละรอบ อ่านคู่กับวงฟ้า ไม่ได้ใช้อ่านนาที
- เส้นรอจุดประสีของ “ตอนนี้” จากเข็มถึงงานถัดไป ยิ่งใกล้ยิ่งสั้น ทำหน้าที่แทนข้อความ “อีกกี่นาที” ที่วิดเจ็ตเขียนไม่ได้ ระหว่างที่มีงานกำลังเกิดไม่แสดง
- ส่วนโค้งกิจกรรมงานที่มีเวลาทุกงานของวันนี้ ยาวตามเวลาจริง ใช้สีของงานเอง ที่ผ่านไปแล้วเหลือสีจาง งานที่กำลังเกิดจางมาถึงเข็ม งานที่สั้นกว่าความหนาของเส้นเป็นจุด
- วันที่ชื่อวันกับวันที่ เสาร์ อาทิตย์ และวันหยุดใช้สีเดียวกับบนเดือน ปุ่มเพิ่มกิจกรรมเป็นวง 24 dp ในพื้นที่แตะ 48 dp
- งานทั้งวันและงานหลายวันชิปแบบเดียวกับใน drawer ขีดใต้ชื่อคือวันทั้งหมดของงาน เกินหนึ่งงานยุบเป็น +N
- แถวหลักงานที่กำลังเกิด ถ้าไม่มีก็งานถัดไป งานที่ยังไม่ถึงเวลาเริ่มเป็นตัวหนา งานที่กำลังเกิดพื้นจางจากซ้ายและเวลาจบขึ้นเป็นตัวหนา เพราะสิ่งที่ยังเหลือคือเวลาจบ
- งานที่ตามมาบรรทัดย่อ เวลาเริ่มกับชื่อ บนพื้นสีอ่อนของงานเอง ใส่เท่าที่พอดีทั้งบรรทัด ไม่มีบรรทัดที่ถูกตัดครึ่ง งานที่ไม่ได้ขึ้นยังอยู่บนวง
อะไรเดินเอง อะไรรอวาดใหม่
วิดเจ็ตวาดใหม่ทุกนาทีไม่ได้ แต่นาฬิกาต้องตรงทุกนาที จึงแบ่งงานกัน ตัวเลขเวลา (และเข็มของหน้าปัดเข็ม) เป็นนาฬิกาของระบบ เดินเองโดยไม่ปลุกแอป ส่วนวง เข็มตอนนี้ เส้นรอ และพื้นแถวที่กำลังเกิด วาดใหม่ทุก 5 นาทีและทุกครั้งที่งานเริ่มหรือจบ
คลาดได้ไม่เกิน 5 นาที บนวง 24 ชั่วโมงคือ 1.25 องศา หรือราว 1.5 dp ที่ขอบวง ตัวหนังสือทุกคำบอกเวลาบนนาฬิกา ไม่มีข้อความนับถอยหลัง จึงจริงไปจนถึงรอบวาดถัดไป ตัวอย่างในหน้านี้วาดแบบเดียวกัน ลากแถบเวลาแล้วตัวเลขเปลี่ยนทุกนาที แต่เข็มบนวงขยับทีละ 5 นาที
กำลังเกิด
ศุกร์ 10:42 เข็มผ่าส่วนโค้งของงานที่กำลังเกิด ด้านหลังเข็มจางแล้ว แถวหลักจางไปเกือบครึ่ง เวลาจบ 11:30 เป็นตัวหนา
ว่างอยู่
ศุกร์ 16:10 เส้นรอทอดจากเข็มไปถึงยิมตอน 17:30 แถวหลักเป็นงานถัดไป เวลาเริ่มเป็นตัวหนา
หมดวันแล้ว
ศุกร์ 22:10 ส่วนโค้งทุกชิ้นจางหมด เข็มอยู่ในครึ่งกลางคืน ใต้เวลาเปลี่ยนเป็นพระอาทิตย์ขึ้น รายการไปต่อที่วันพรุ่งนี้
วันว่าง
อาทิตย์ 25 ต.ค. ไม่มีอะไรเลย วงเหลือแต่ฟ้ากับเข็ม รายการบอกว่าวันนี้ยังว่าง แล้วไปวันถัดไปที่มีงาน
ข้ามคืน
อาทิตย์ 11 ต.ค. 01:20 งานที่เริ่มเมื่อวานเป็นส่วนโค้งที่เริ่มจากเที่ยงคืน เวลาเริ่มมีเลข −1 กำกับ เวลาจบเป็นตัวหนา
ยังไม่ได้อนุญาต
ไม่มีสิทธิ์อ่านปฏิทิน นาฬิกา ฟ้า และเข็มยังทำงาน เพราะไม่ต้องใช้ข้อมูลปฏิทิน แตะครึ่งขวาเพื่อเปิดแอปไปขอสิทธิ์
อะไรขึ้นในครึ่งขวา
- แถวหลักคืองานที่ยังไม่จบงานแรกของวันนี้ งานที่จบแล้วหลุดจากรายการ เหลือเป็นส่วนโค้งสีจางบนวง (กติกาเดิมของ
WidgetAgenda) - ไม่มีบรรทัดช่วงว่าง วิดเจ็ตกิจกรรมที่จะถึงเขียนว่า “ว่างถึง 12:00” ที่นี่เส้นรอบนวงกับเวลาเริ่มตัวหนาของแถวหลักบอกเรื่องเดียวกันแล้ว
- วันนี้หมดแล้วค่อยไปวันถัดไป ขึ้นเฉพาะวันที่มีงานที่มีเวลา มีหัวข้อวันนำ และใช้บรรทัดย่อทั้งหมด ไม่มีแถวหลัก
- งานข้ามคืนขึ้นในวันที่เริ่ม เลขเล็ก +1 ที่เวลาจบแปลว่าจบวันถัดไป −1 ที่เวลาเริ่มแปลว่าเริ่มเมื่อวาน
ขนาดและตัวอักษรใหญ่
วิดเจ็ตนี้มีสองขนาด 4×2 ตามที่ออกแบบ กับ 2×2 สำหรับคนที่อยากได้แค่นาฬิกา ตัวเลขบนหน้าปัดผูกกับขนาดของวง ไม่โตตามขนาดตัวอักษรของเครื่อง เพราะเป็นส่วนหนึ่งของหน้าปัด (สูง 38 dp อยู่แล้ว) ข้อความครึ่งขวาโตตามปกติ แถวสูงขึ้นเอง และจำนวนบรรทัดลดลงเท่าที่พอดี
จากเอกสารไปโค้ด
ยังไม่ได้ลองสร้างจริง ตารางนี้คือทางที่คิดไว้ จุดที่ต้องพิสูจน์ก่อนมีสองจุด คือ launcher แสดงฟอนต์ที่มากับแอปใน
TextClock ได้จริงหรือไม่ และ bitmap ของหน้าปัด (170 dp หนึ่งใบต่อถังขนาด) ไม่ทำให้ binder transaction ใหญ่เกิน
ซึ่งเป็นปัญหาเดียวกับที่ทำให้มี MAX_ROWS
| ส่วน | ในโค้ด | งาน |
|---|---|---|
| วิดเจ็ตตัวที่สอง | ใหม่ ใน widget/ | receiver กับ appwidget-provider ของตัวเอง ขนาดเริ่มต้น 4×2 ย่อได้ถึง 2×2 ถังขนาดสองถัง รับของผ่าน WidgetEntryPoint เหมือนตัวเดิม |
| ตัวเลขเวลา | TextClock ใน layout XML ครอบด้วย AndroidRemoteViews | Glance ไม่มีนาฬิกาที่เดินเอง จึงฝัง RemoteViews หนึ่งชิ้น ระบบอัปเดตทุกนาทีและตามการตั้งค่า 12/24 ชั่วโมง ฟอนต์ตั้งด้วย @font/instrument_sans ใน XML (ต้องลองบน launcher จริง) ถ้าไม่ได้ใช้ Roboto Light เมื่อตั้งค่า > ฟอนต์ เป็นฟอนต์ของเครื่อง ใช้ layout อีกชุด (widget_clock_time_device) เพราะ RemoteViews เปลี่ยนฟอนต์เองไม่ได้ |
| เข็มของหน้าปัดเข็ม | AnalogClock ใน layout XML | Android 12 ขึ้นไปตั้งรูปเข็มและเข็มวินาทีได้ ก่อนหน้านั้นมีแค่เข็มชั่วโมงกับนาทีจาก drawable ใน XML วงรอบนอกเป็น ImageView ซ้อนอยู่ข้างหลัง |
| วงฟ้า ส่วนโค้ง เข็มตอนนี้ เส้นรอ | ใหม่ วาดด้วย Canvas ลง bitmap ใบเดียว | เรขาคณิต (นาทีเป็นมุม ส่วนโค้งที่สั้นกว่าเส้นเป็นจุด ช่วงของเส้นรอ) แยกเป็นฟังก์ชันล้วนใน core/model พร้อม unit test สีจาก Sky, DaylightRepository และ tones() |
| จังหวะวาดใหม่ | WidgetRefresh, agendaFlow | ใช้ร่วมกับวิดเจ็ตเดิม: ขอบเวลาถัดไปหรือขั้น 5 นาทีถัดไป แล้วแต่อะไรถึงก่อน ยังเป็นนาฬิกาปลุกแบบไม่ปลุกเครื่อง จอดับไม่วาด |
| ครึ่งขวา | WidgetAgenda.of() | ใช้ของเดิม เพิ่มการตัดจำนวนบรรทัดตามความสูงของถังกับขนาดตัวอักษร (ฟังก์ชันล้วน มี test) แถวกับชิปใช้ composable ร่วมกับวิดเจ็ตเดิม |
| การแตะ | LaunchLink | คงเดิม: day จากนาฬิกาและวันที่ event จากแถวและชิป new จากปุ่ม + |
| อ่านออกเสียง | contentDescription | นาฬิกาเป็นประโยคเดียว เช่น “วันนี้ 7 กิจกรรม ผ่านไปแล้ว 2” ไม่อ่านเวลาเพราะจะค้าง แถวอ่านแบบเดียวกับวิดเจ็ตเดิม |
| รูปตัวอย่างในตัวเลือกวิดเจ็ต | providePreview และไฟล์ webp | ถ่ายใหม่ทั้งไทยและอังกฤษ แยกจากของวิดเจ็ตเดิม |