Bagikan melalui

Tema Pustaka UI dalam aplikasi

  • Artikel

Cuplikan layar yang memperlihatkan pengalaman menggunakan warna kustom di Pustaka UI.

Pustaka UI Azure Communication Services adalah sekumpulan komponen, ikon, dan komposit yang memudahkan Anda membangun antarmuka pengguna berkualitas tinggi untuk proyek Anda. Pustaka UI menggunakan komponen dan ikon dari UI Fasih, sistem desain lintas platform yang digunakan Microsoft. Akibatnya, komponen dibangun dengan kegunaan, aksesibilitas, dan pelokalan dalam pikiran.

Dalam artikel ini, Anda mempelajari cara mengubah tema untuk komponen Pustaka UI saat mengonfigurasi aplikasi.

Pustaka UI sepenuhnya didokumenkan untuk pengembang di situs terpisah. Dokumentasi ini interaktif dan membantu Anda memahami cara kerja API dengan memberi Anda kemampuan untuk mencobanya langsung dari halaman web. Untuk informasi selengkapnya, lihat dokumentasi Pustaka UI.

Prasyarat

Menyiapkan tema

Untuk dokumentasi terperinci dan mulai cepat tentang Pustaka Antarmuka Pengguna Web, lihat Buku Cerita Pustaka UI Web.

Untuk mempelajari selengkapnya, lihat Tema di Pustaka Antarmuka Pengguna Web.

Untuk informasi selengkapnya, lihat Pustaka UI Android sumber terbuka dan kode aplikasi sampel.

Menentukan tema

Tema di Android ditangani melalui file sumber daya XML. Kami mengekspos ID sumber daya berikut ke cakupan publik:

<resources>
    <public name="AzureCommunicationUICalling.Theme" type="style" />
    <public name="azure_communication_ui_calling_primary_color" type="attr" />
    <public name="azure_communication_ui_calling_primary_color_tint10" type="attr" />
    <public name="azure_communication_ui_calling_primary_color_tint20" type="attr" />
    <public name="azure_communication_ui_calling_primary_color_tint30" type="attr" />
    <public name="azure_communication_ui_calling_foreground_on_primary_color" type="attr" />
</resources>

Anda dapat menerapkan tema seperti yang berikut ini di aplikasi Anda untuk menyediakan warna dan warna utama:

<style name="MyCompany.CallComposite" parent="AzureCommunicationUICalling.Theme">
    <item name="azure_communication_ui_calling_primary_color">#7800D4</item>
    <item name="azure_communication_ui_calling_primary_color_tint10">#882BD8</item>
    <item name="azure_communication_ui_calling_primary_color_tint20">#E0C7F4</item>
    <item name="azure_communication_ui_calling_primary_color_tint30">#ECDEF9</item>
    <item name="azure_communication_ui_calling_foreground_on_primary_color">#00FF00</item>
</style>

Contoh sebelumnya memengaruhi elemen UI berikut:

  • PrimaryColor:
    • Avatar/Video - Batas - Indikasi Berbicara
    • Tombol Gabung Panggilan - Latar Belakang
  • Warna PrimaryColorTint10:
    • Tombol Gabung Panggilan - Latar Belakang - Disorot - Mode Terang
    • Tombol Gabung Panggilan - Batas - Mode Terang/Gelap
  • Warna PrimaryColorTint20:
    • Tombol Gabung Panggilan - Latar Belakang - Disorot - Mode Gelap
  • Warna PrimaryColorTint30:
    • Tombol Gabung Panggilan - Batas - Disorot - Mode Terang/Gelap

Menerapkan tema

Gaya tema diterapkan untuk meneruskan ID sumber daya tema ke ThemeConfiguration/Theme dalam .CallCompositeBuilder

val callComposite: CallComposite =
        CallCompositeBuilder()
            .theme(R.style.MyCompany_CallComposite)
            .build()

Mode terang dan gelap

Sistem sumber daya Android menangani tema malam. Mode malam di Android adalah konfigurasi di seluruh sistem. Saat Anda mengaktifkan mode malam, Android memberikan preferensi pada sumber daya di -night/ folder. Untuk menentukan warna mode malam, tambahkan file kedua theme.xml ke values-night/.

Untuk mengaktifkan mode malam secara terprogram, Android menyediakan fungsi berikut. Namun, konfigurasi ini berlaku secara global untuk aplikasi. Tidak ada cara yang dapat diandalkan untuk mengatur mode malam untuk satu aktivitas. Untuk menerapkan tema gelap, gunakan pengaturan berikut di aplikasi Anda:

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

Warna huruf

memungkinkan azure_communication_ui_calling_foreground_on_primary_color Anda mengonfigurasi warna font yang muncul pada elemen menggunakan warna utama. Anda dapat menggunakan pengaturan ini saat ingin mencocokkan tema atau pedoman merek tertentu. Dengan mengubah azure_communication_ui_calling_foreground_on_primary_color, Anda harus memastikan bahwa teks tetap dapat terbalik dan menarik secara visual dengan memilih warna font yang kontras yang sesuai untuk komponen berwarna primer.

Untuk informasi selengkapnya, lihat Pustaka UI iOS sumber terbuka dan kode aplikasi sampel.

Menentukan tema

Anda dapat menyesuaikan tema dengan mengubah warna utama dan warna terkait. Anda juga memiliki opsi untuk mengambil alih mode terang dan gelap dalam skema warna.

UI yang terpengaruh

  • PrimaryColor:
    • Avatar/Video - Batas - Indikasi Berbicara
    • Tombol Gabung Panggilan - Latar Belakang
  • Warna PrimaryColorTint10:
    • Tombol Gabung Panggilan - Latar Belakang - Disorot - Mode Terang
    • Tombol Gabung Panggilan - Batas - Mode Terang/Gelap
  • Warna PrimaryColorTint20:
    • Tombol Gabung Panggilan - Latar Belakang - Disorot - Mode Gelap
  • Warna PrimaryColorTint30:
    • Tombol Gabung Panggilan - Batas - Disorot - Mode Terang/Gelap

implementasi

Anda dapat membuat opsi tema kustom yang mengimplementasikan ThemeOptions protokol. Anda perlu menyertakan instans kelas baru tersebut di CallCompositeOptions.

class CustomThemeOptions: ThemeOptions {

 var primaryColor: UIColor {
  return UIColor(named: "primaryColor")
 }
 
 var primaryColorTint10: UIColor {
  return UIColor(named: "primaryColorTint10")
 }
 
 var primaryColorTint20: UIColor {
  return UIColor(named: "primaryColorTint20")
 }
 
 var primaryColorTint30: UIColor {
  return UIColor(named: "primaryColorTint30")
 }

 var colorSchemeOverride: UIUserInterfaceStyle {
  return UIUserInterfaceStyle.dark
 }
}

let callCompositeOptions = CallCompositeOptions(theme: CustomThemeOptions())

Warna huruf

memungkinkan foregroundOnPrimaryColor Anda memperbarui warna font yang muncul secara terprogram pada elemen menggunakan warna utama. Anda dapat menggunakan metode ini ketika Anda ingin mencocokkan tema atau pedoman merek tertentu. Dengan memanggil foregroundOnPrimaryColor, Anda harus memastikan bahwa teks tetap dapat terbalik dan menarik secara visual dengan memilih warna font yang kontras yang sesuai untuk komponen berwarna primer.

struct CustomColorTheming: ThemeOptions {    

    private var envConfigSubject: EnvConfigSubject  

    init(envConfigSubject: EnvConfigSubject) {        
        self.envConfigSubject = envConfigSubject    
    }    

    var primaryColor: UIColor {        
        return UIColor(envConfigSubject.primaryColor)    
    }    
    
    var primaryColorTint10: UIColor {        
        return UIColor(envConfigSubject.tint10)    
    }    
    
    var primaryColorTint20: UIColor {        
        return UIColor(envConfigSubject.tint20)    
    }    
    
    var primaryColorTint30: UIColor {        
        return UIColor(envConfigSubject.tint30)    
    }    
    
    var foregroundOnPrimaryColor: UIColor {        
        return UIColor(envConfigSubject.foregroundOnPrimaryColor)    
    }    

    var colorSchemeOverride: UIUserInterfaceStyle {        
        return envConfigSubject.colorSchemeOverride    
    }
}


let callCompositeOptions = CallCompositeOptions(theme: CustomColorTheming())

Menentukan aset warna

Tentukan setiap warna dalam aset, dengan bayangan untuk mode terang dan gelap. Gambar referensi berikut menunjukkan cara mengonfigurasi aset pada proyek Xcode.

Cuplikan layar contoh konfigurasi aset warna iOS.

Langkah berikutnya