Memberikan data yang berguna melalui detail

Detail adalah fitur tampilan jam smartwatch dan fisik yang menampilkan informasi tambahan. Biasanya pengguna memilih informasi yang ditampilkan dalam detail.

Biasanya, detail hadir dalam sejumlah bentuk:

  1. Persegi panjang
  2. Melingkar
  3. Busur, di sepanjang tepi tampilan jam
  4. Latar belakang, yang menutupi seluruh tampilan jam

Di Wear OS, sistem Komplikasi dapat dibagi menjadi dua bagian:

  1. Sumber data Detail
  2. Rendering Detail

Misalnya, aplikasi kesehatan dan kebugaran dapat menerapkan sumber data komplikasi Langkah Harian. Hal ini dapat dirender oleh tampilan jam WFF.

Sumber data dalam detail

Sumber data detail hanya menentukan data yang akan dirender, dan jenis detail. Sumber data tidak berperan dalam menentukan cara data harus ditampilkan di tampilan jam.

Misalnya, sumber data komplikasi Langkah Harian kesehatan dan kebugaran dapat menghasilkan data berikut untuk menunjukkan bahwa pengguna telah melakukan 2.400 langkah dari target 10.000 langkah hari ini:

Perhatikan bahwa tidak ada dalam data ini yang menunjukkan cara merendernya.

Tampilan jam menentukan jenis detail yang dapat dirender. Hal ini menentukan sumber data mana yang kemudian tersedia untuk dipilih pengguna.

Dalam contoh Langkah Harian, Anda memutuskan dalam definisi tampilan jam cara merender Value dan TargetValue: apakah sebagai teks, atau sebagai indikator progres? Anda sebagai desainer tampilan jam yang akan memutuskan hal ini.

Menentukan detail

Menawarkan kemampuan untuk menampilkan widget di tampilan jam dapat bermanfaat bagi pengguna, karena memungkinkan mereka memiliki berbagai informasi yang dapat dilihat sekilas dan disesuaikan dengan kebutuhan mereka.

Tentukan apakah dan berapa banyak detail yang akan didukung di tampilan jam Anda, bentuk dan posisinya, serta jenis data yang didukung.

Setiap ruang pada tampilan jam untuk detail ditentukan sebagai ComplicationSlot yang di dalamnya ditentukan area pembatas untuk rendering detail:

<ComplicationSlot slotId="1" supportedTypes="SHORT_TEXT SMALL_IMAGE EMPTY"
    x="100" y="100" width="100" height="100">
    <BoundingOval x="0"  y="0" width="100" height="100" />
    <Complication type="SHORT_TEXT">
        <!-- Complication content for rendering SHORT_TEXT data goes here -->
    </Complication>
    <Complication type="SMALL_IMAGE">
        <!-- Complication content for rendering SMALL_IMAGE data goes here -->
    </Complication>
</ComplicationSlot>
watchface_complications.xml

Pendekatan serupa dapat diterapkan pada bentuk pembatas lainnya seperti persegi panjang dan elips.

Menetapkan jenis dan default detail

Sistem detail menyediakan sejumlah jenis yang berbeda, yang memungkinkan tampilan jam mengekspresikan jenis data yang dapat direpresentasikannya di layar. Misalnya, detail Arc, seperti yang ditunjukkan sebelumnya, tidak cocok untuk jenis data detail berbasis gambar seperti SMALL_IMAGE, tetapi dapat berfungsi dengan sangat baik untuk data numerik seperti RANGED_VALUE.

Dalam deklarasi ComplicationSlot, tetapkan supportedTypes ke daftar jenis yang dipisahkan spasi yang dapat dirender di slot ini.

Anda juga harus menetapkan sumber default untuk ComplicationSlot, kecuali jika Anda mengizinkan jenis EMPTY, dalam hal ini penetapan default bersifat opsional:

<ComplicationSlot slotId="2" supportedTypes="SHORT_TEXT SMALL_IMAGE EMPTY"
    x="250" y="100" width="100" height="100">
    <DefaultProviderPolicy
        defaultSystemProvider="STEP_COUNT"
        defaultSystemProviderType="SHORT_TEXT" />
    <!-- ... -->
</ComplicationSlot>
watchface_complications.xml

Selain harus menentukan penyedia sistem, Anda dapat secara opsional menentukan penyedia non-sistem, seperti penyedia pihak ketiga yang akan digunakan secara default, jika penyedia tersebut sudah diinstal.

Merender data detail

Setelah menentukan ComplicationSlot, batas, dan elemen Complication yang berisi, gunakan komponen WFF standar, seperti PartDraw, PartImage dan PartText untuk menampilkan data Komplikasi.

Elemen dalam data Complication memiliki akses ke sumber data khusus: COMPLICATION, yang menyediakan berbagai properti data yang ditetapkan oleh sumber data kartu jam.

Misalnya, komplikasi SMALL_IMAGE dapat menetapkan nilai COMPLICATION.SMALL_IMAGE dan COMPLICATION.SMALL_IMAGE_AMBIENT. Kode ini dapat digunakan sebagai pengganti resource dalam elemen Image:

<Complication type="SMALL_IMAGE">
    <PartImage x="0" y="0" width="100" height="100">
        <Image resource="[COMPLICATION.SMALL_IMAGE]" />
    </PartImage>
</Complication>
watchface_complications.xml

Setiap jenis widget yang berbeda memiliki serangkaian properti yang tersedia dan dapat ditetapkan; untuk mengetahui daftar lengkapnya, lihat referensi Complication. Contoh ini menampilkan teks dari detail SHORT_TEXT:

<Complication type="SHORT_TEXT">
    <PartText x="0" y="0" width="100" height="100">
        <Text>
            <Font size="32">
                <Template>
                    <![CDATA[%s]]><Parameter expression="[COMPLICATION.TEXT]" />
                </Template>
            </Font>
        </Text>
    </PartText>
</Complication>
watchface_complications.xml

Memaksimalkan kegunaan saat merender tampilan jam

Ada sejumlah tantangan saat menambahkan ComplicationSlots ke tampilan jam:

  1. Ada banyak jenis data Detail. Aplikasi yang berbeda dapat menyediakan satu atau banyak di antaranya.
  2. Setiap jenis data Detail, selain memiliki properti wajib, juga memiliki banyak properti opsional. Pastikan rendering yang paling berguna dibuat dari properti yang tersedia, dengan mempertimbangkan berbagai kombinasi.

Untuk mengatasi masalah ini, beberapa strategi yang dapat dilakukan antara lain:

  1. Mendukung beberapa jenis detail untuk setiap slot. Misalnya, SHORT_TEXT didukung secara luas oleh sumber data detail, sehingga mendukung sejumlah jenis yang berbeda, seperti SHORT_TEXT RANGED_VALUE untuk detail melingkar kecil, akan meningkatkan kompatibilitas.
  2. Menawarkan berbagai jenis detail di seluruh tampilan jam. Misalnya, Anda dapat mendukung RANGED_VALUE dan GOAL_PROGRESS pada detail Arc yang diposisikan di tepi, serta SHORT_TEXT dan SMALL_IMAGE pada detail melingkar di isi tampilan jam.
  3. Periksa elemen opsional untuk setiap jenis data. Misalnya, SHORT_TEXT secara opsional mendukung properti judul dan gambar. Tata letak Anda untuk merender data yang tersedia mungkin berbeda, bergantung pada apakah gambar atau judul tersedia atau tidak.