Developing Themes with Style (Android Dev Summit '19)YouTube↗  IA↗(long shot)
Science & Technology  25.6K views 543 likes 15 dislikes   24 Oct 2019
Android Developers 1.4M subscribers N/A YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
[MUSIK DIPUTAR]
皆さん ようこそ
Halo semua. Terima kasih sudah datang.
私はニックです
Saya Nick Butcher.
クリスです
Saya Chris Banes.
2人ともAndroid Developer Relationsの エンジニアです
Kami berdua adalah engineer di tim Relasi Developer Android.
今回のテーマは
Tema konferensi ini sepertinya adalah
モダンなAndroid開発です
pengembangan Android modern, karenanya
Androidのテーマやスタイルを 紹介していきます
kami sangat tertarik untuk berbicara tentang tema
APIレベル１からほぼ変更ありませんが
dan gaya Android di sini, yang sebagian besar tidak berubah sejak API tingkat 1. [TERTAWA]
リリースしてから時間が経っていますが
Jadi walaupun Android sudah ada sejak beberapa lama,
いまだに多くの開発者が
saya lihat masih banyak developer yang cukup bingung
Androidテーマシステムに戸惑っています
atau frustasi saat coba menggunakan sistem bertema Android. Dan saya cukup menyayangkannya,
しかしテーマシステムを活用すれば
karena penggunaan sistem bertema yang efektif
ずっと柔軟で再利用可能な
benar-benar memungkinkan tata letak dan gaya yang fleksibel
レイアウトやスタイルを作れますし
dan dapat dipakai lagi.
コードの量も減って ずっと管理しやすくなります
Ini hebat karena Anda hanya perlu menulis lebih sedikit kode. Kode itu juga lebih dapat dipertahankan. Dan siapa yang tidak menginginkannya?
しかもダークテーマやマテリアルといった
Hal ini sebenarnya memungkinkan beberapa praktik modern, seperti tema.
最新のプラクティスや デザインシステムに対応できます
Jadi, Anda bisa mendukung hal seperti tema gelap atau sistem desain, seperti material.
テーマシステムを理解すれば
Saya yakin, akan ada manfaat yang besar
大きな見返りがあります
dalam memahami sistem tema.
しかし理解不足や誤解も多くあります
Namun, meskipun amat hebat, sistem ini juga mudah disalahgunakan
その大きな理由は
atau tidak dipahami.
テーマやスタイルの人間工学にあると思います
Saya rasa alasan utamanya adalah ergonomi cara kita menulis tema dan gaya ini.
このXMLタグはキーと値のペアです
Pada dasarnya, kita punya tag XML semacam rangkaian key value pair.
しかし型のないシステムであるため
Saya rasa mayoritas masalahnya, tag ini kebanyakan sistem tak bertipe.
テーマやスタイルに何を入れても コンパイルできます
Anda bisa letakkan hampir apa saja di dalam tema atau gaya, dan semua akan terkompilasi.
Android Studioは 赤い波線で警告したりしません
Android Studio tidak akan keberatan. Tak akan ada garis bergelombang merah di bawahnya.
テーマやスタイルの適用が思い通りにいかず
Siapa yang pernah merasa bingung saat mencoba menerapkan tema atau gaya
イライラすることもありますよね
tapi tidak bekerja sesuai keinginan?
では このようなタグが理想なのでは？
Maksud saya, bukankah memudahkan jika Anda memiliki tag seperti ini?
これなら スタイルは styleタグで定義し
Jadi, jika ingin menetapkan gaya, gunakan tag gaya.
テーマはthemeタグで定義できます
Dan jika ingin menetapkan tema, gunakan tag tema.
「たられば」ですが
Bagus kan kalau begitu? Sayangnya tidak begitu. [TERTAWA]
今日はAndroidの テーマとスタイルの仕組みと
Hari ini kami ingin memberi Anda kursus singkat untuk memahami sistem tema dan gaya Android,
その使い方や活用方法に関する ガイダンスです
bagaimana sebenarnya cara kerjanya. Kami akan berikan panduan sesuai pengalaman kami tentang cara yang seharusnya dilakukan,
後半の応用編は
cara mendapat manfaat maksimal.
ダークテーマの作成手順と
Lalu Anda akan kami pandu untuk menerapkannya untuk mengembangkan tema gelap dan mendukung tema material
マテリアルテーマへの対応方法です
agar Anda dapat memahaminya.
まずテーマとスタイルについてです
Mari kita mulai. Memahami tema dan gaya.
先ほどのXML構文ですが
Seperti yang saya bilang, ada sintaks XML seperti ini,
キーと値のセットになっています
semacam serangkaian kunci dan nilai bernama.
テーマやスタイルは 言わば構成ストアです
Anda dapat menganggap tema dan gaya ini, hampir seperti penyimpanan konfigurasi.
値を代入して
Jadi Anda bisa simpan beberapa nilai untuk jadi rujukan,
後で参照したり適用したりできます
menerapkannya ke sesuatu yang lain nanti.
テーマとスタイルは大きく異なります
Namun, tema dan gaya benar-benar berbeda.
その違いを理解すれば
Dan saya rasa, memahami perbedaan keduanya
効果的に活用できるようになります
akan membuat Anda dapat memanfaatkannya dengan efektif.
その違いを詳しく見ていきましょう
Jadi mari berfokus pada perbedaannya.
まずスタイルは 言うなれば
Pertama, gaya bisa Anda anggap sebagai peta tempat di sinilah
ビュー属性と値のマッピングです
tampilan beratribut ke nilai,
テーマは テーマ属性と値のマッピングです
sementara tema adalah tempat tema beratribut ke nilai. Kita lihat apa maksudnya.
こんなスタイルを作成しました
Semoga Anda telah menulis gaya yang seperti ini.
このキーはビュー属性で
Jadi, kuncinya di peta ini adalah atribut tampilan ini.
レイアウトの特定のビューに設定します
Ini adalah sesuatu yang akan Anda tetapkan di tata letak untuk tampilan tertentu.
値はその属性に適用するリソースです
Dan nilai adalah resource yang dapat diterapkan ke atribut itu.
ご存知のとおり リソースには多くのタイプがあります
Semoga Anda kenal dengan semua jenis resource berbeda yang tersedia untuk Anda gunakan.
一方の テーマは若干異なります
Di sisi lain, tema sedikit berbeda.
キーはビュー属性ではなくテーマ属性です
Kuncinya di sini bukanlah atribut tampilan.
ビューに個別で設定するものでは ありません
Tapi sesuatu yang disebut atribut tema. Secara kritis, ini bukan hal yang akan Anda tetapkan di tampilan individu.
colorPrimary属性などはありません
Tidak seperti atribut colorPrimary untuk jenis tampilan apa pun.
これらはセマンティック名を持つ
Ini seperti variabel dengan nama semantik
この構成ストア用の変数です
untuk penyimpanan konfigurasi ini.
何らかの構成を後で取得したり 参照したりできます
Ada cara untuk memasukkan konfigurasi ke peta untuk menariknya nanti dan merujuknya.
ビュー属性に似ていて
Tampak mirip atribut tampilan.
attrファイルで定義します
Didefinisikan serupa di file attr Anda seperti ini.
先に見たようなリソースタイプですが
Dan memiliki jenis resource yang sama
実際は異なります
seperti yang tadi. Namun berbeda.
参照するには ?attr構文を使います
Saat kita merujuknya, Anda kemudian dapat merujuknya dengan sintaks attr tanda tanya
構成ストアから取得する値は セマンティック名で指定します
lalu dengan nama semantiknya untuk nilai yang ingin ditarik dari penyimpanan konfigurasi ini.
この「?」記号は
Tanda tanya ini, jika belum pernah lihat,
テーマのセマンティック名の 現在の値を参照します
pada dasarnya mencari nilai saat ini untuk item bernama semantik ini dalam tema saat ini.
これはよく出来ていています
Dan saya rasa itu keren sekali.
このレベルの分離により いろいろと可能になります
Saya rasa, dengan memiliki tingkat pemisahan seperti ini, Anda dapat melakukan beberapa hal keren.
その例をご紹介します
Mari kita lihat contoh yang menunjukkan pentingnya hal ini.
Materialライブラリに
Ini adalah contoh dari library material,
colorPrimaryという テーマ属性があります
yang menentukan atribut tema, yang disebut colorPrimary.
次にアプリで
Lalu di aplikasi,
セマンティック名に対する値として
berikan nilai konkret untuk item bernama semantik ini.
色（...）を設定します
Anda tetapkan nilai ini.
これの良い点は
Anda tetapkan warna ini. Tapi, yang keren adalah
別の画面を違う外観にしたい時
jika nantinya Anda harus, mendukung tampilan dan nuansa lain di layar lain,
たとえばPro画面に 別の色スキームを持たせたい時に
misalnya layar [?Pro?] dengan skema warna berbeda,
新たなテーマを定義できます
Anda dapat memisahkannya dan menetapkan tema kedua yang menetapkan nilai lain untuknya.
プロダクトマネージャーが
Lalu, katakanlah, manajer produk Anda
ライトテーマとダークテーマを要求しているなら
ingin dukungan tema terang & gelap. Lalu Anda bisa berikan nilai yang berbeda lagi
異なる値を設定できます
untuk skema terang dan gelap.
つまりテーマ属性のメリットは
Yang menurut saya keren adalah isolasi terhadap hal yang ingin diubah,
外観で変更したい部分だけを 直接変更できる点です
tampilan dan nuansa yang ingin diubah, hanya ke tempat yang ingin diubah.
テーマ属性を使わない場合
Pikirkan jika kita tak menggunakan atribut tema di sini.
このように４種類のスタイルを 作る必要が生じます
Jika mencoba melakukan hal sama, skema warna berbeda ini untuk situasi berbeda ini, dengan gaya, Anda pastinya akan menulis empat gaya yang berbeda.
スタイルは特定のビューに適用するので
Tapi, seperti yang kita lihat tadi, gaya spesifik untuk tampilan tertentu.
ビュー固有のレイアウト属性を参照します
Gaya merujuk ke atribut tata letak yang khusus untuk satu jenis tampilan.
各ビューにスタイルを作成しようとすると
Jadi, Anda harus menulis semua jenis berbeda ini untuk semua permutasi tampilan yang berbeda
構成の組み合わせが このように爆発的に増えます
yang digunakan di aplikasi. Anda akan memiiki ledakan gabungan konfigurasi yang harus didukung.
つまり 間接的な抽出により
Dengan mengekstrak dan memiliki pengalihan untuk hal-hal yang pasti, Anda bisa mengisolasi hal
テーマの中で変更する箇所を分離し
yang berubah ke dalam tema,
ウィジェットとテーマを使って 適切な組み合わせを作れます
dan menggunakan widget dan tema, serta mendapatkan kombinasi item tersebut di waktu yang tepat.
これらが違いです
Semoga hal itu sedikit menjelaskan perbedaannya.
キーは構成ストアで
Intinya, penyimpanan konfigurasi
スタイルのビュー属性と テーマのテーマ属性を格納します
atribut tampilan untuk gaya, atribut tema untuk tema.
適用の仕方も異なります
Cara keduanya diterapkan juga berbeda.
先ほど見たように スタイルは 特定のビューやビュータイプに固有ですが テーマはコンテキストに応じて 階層に適用されます
Seperti yang sudah kita lihat gaya khusus untuk satu tampilan atau jenis tampilan tertentu, sementara tema diterapkan ke-- terkait dengan konteks, lalu diterapkan ke hierarki.
実際に見ていきましょう
Mari kita lihat apa maksud saya.
このような階層のアプリがあります
Katakanlah Anda memiliki hierarki dalam aplikasi,
スタイルの場合 １つのビューだけに適用されます
seperti ini. Jika Anda akan menerapkan gaya ke sini, gaya hanya akan diterapkan ke satu tampilan tertentu itu.
一方 テーマを同じビューに適用するには
Berbeda dengan saat Anda ingin menetapkan tema di tampilan yang sama
android:themeタグを使います
dengan tag tema Android.
階層に適用されるので
Tag ini akan turun ke semua turunannya
すべての子にカスケードされます
karena diterapkan ke hierarki.
実際には 上位のどこかに 必ずテーマがあります
Dan Anda sebenarnya selalu melakukannya dalam tema sesekali.
アクティビティに テーマが設定されているか
Selalu ada tema di tempat di atas Anda. Misal, Activity mungkin memiliki tema yang ditetapkan
アプリから継承しているか どちらかです
atau mungkin mewarisinya dari aplikasi atau sudah ada di sana.
テーマは相互に作用し 重ねて適用されます
Dengan begitu, tiap tema ini berinteraksi dan diterapkan di atas satu sama lain.
このようなものを構築するのに役立ちます
Kini, akan sangat bermanfaat jika ingin membuat sesuatu seperti ini.
このアプリの外観 つまり colorPrimaryはピンクです
Ini adalah aplikasi dengan tampilan dan nuansa pink. colorPrimary ditetapkan menjadi pink.
下部にこのようなセクションがあり
Tapi kemudian, di bagian bawah layar, ada bagian terkait ini
こちらは青い外観です
yang menggunakan tampilan dan nuansa lain,
階層全体にテーマを適用できるので
berupa kebiruan. Jadi, karena kita bisa memiliki tema
青のテーマを このセクションのroot に設定すれば
yang diterapkan ke seluruh hierarki kita bisa tetapkan tema biru itu hanya di root bagian bawah ini
その下でinflateされる すべてのビューに適用されます
dan menerapkannya di semua tampilan mengembang di bawahnya.
その動作を見ていきましょう
Mari kita lihat sekilas perilaku penumpukan ini.
理解しておくべき細かい点があります
Ada beberapa nuansa yang penting untuk dipahami.
この例では
Dalam contoh, kita mungkin sudah tetapkan
ActivityかFragmentのビューに ピンクのテーマが設定され
tema merah muda di Activity atau mungkin tampilan fragmen seperti ini.
下の階層では 青のテーマが設定されています
Lalu, saat Anda sedikit ke bawah, ke hierarki biru, kami ingin Anda menetapkan tema biru lain.
これを見ると 階層の中を理解できます
Namun, jika kita melihat tema ini, menarik sekali untuk memahami caranya bertumpuk satu sama lain.
Theme.Owl.Pinkには 画面での色などを定義します
Jadi, tema pink, Anda akan menentukan hal yang Anda inginkan khusus untuk layar itu. [? Dan Anda ?] [? akan ?] [? menenggelamkan ?] beberapa warna dan [? item ?] dan sebagainya.
ただし 親のテーマ つまり MaterialComponentsから
Tapi, itu mungkin diturunkan dari tema induk,
さまざまなスタイルを継承します
jadi seperti komponen material, yang menyiapkan beberapa hal seperti gaya widget dan lainnya.
その上には AppCompatがあり
Yang akhirnya akan diturunkan untuk AppCompat,
さらにその上には プラットフォームのテーマがあります
yang mungkin akan diturunkan dari tema platform.
つまり スタイルは 常にこのように継承されるのです
Jadi Anda akan selalu memiliki jenis stack gaya turunan ini
優先されるのは
di atas satu sama lain. Yang perlu dipahami di sini adalah
階層の一番下 つまり一番近い子です
yang terdekat dengan bagian bawah, turunan terdekat,
このスタックのうち ２つのテーマが同じ属性の場合
semacam akan menang. Jika dua tingkat tema dalam stack ini mendeklarasikan
たとえば colorPrimaryを定義している場合
atribut yang sama, materialnya menentukan colorPrimary, dan Anda menetapkan colorPrimary sendiri,
階層が下のものが優先され
yang lebih bawah akan menang.
親や祖先をオーバーライドします
Ini akan menimpa apa pun, induk maupun ancestor lainnya.
階層のもう１つの例です
Saat kita punya contoh hierarki ini lagi
ピンクのテーマと青のテーマがあり
tempat kita punya tema pink dan tema biru yang terhampar
青は下の方でオーバーレイになっています
di bagian bawah, ada beberapa hal yang harus diwaspadai.
おそらく共通の祖先を持っているので
Pertama, bahwa keduanya mungkin memiliki ancestor yang sama.
実質的に同じものを重ねて 適用するのは無駄です
Jadi hampir sia-sia untuk menerapkan hal yang sama persis yang sudah berfungsi, seperti komponen material yang mungkin sudah berfungsi.
テーマを重ねて設定するときは
Jadi, menerapkannya lagi tidak akan terlalu berguna. Yang lebih penting, jika Anda menetapkan tema di atas tema lain,
キープしたいものをオーバーライドしないよう
Anda harus hati-hati agar tidak mengganti sesuatu
注意してください
yang sebenarnya ingin dipertahankan.
画面全体に適用する shapeAppearanceなどが
Misalkan, tema pink menyiapkan beberapa hal,
テーマにある場合は
misalnya sesuatu yang khusus seperti tampilan bentuk,
オーバーライドしないよう気をつけます
untuk seluruh layar yang sebenarnya ingin Anda terapkan, Anda harus hati-hati agar tidak menggantinya.
そこで役立つのが ThemeOverlayです
Dan di sinilah muncul teknik yang disebut overlay tema.
難しそうに見えて実はシンプルです
Saya lihat orang-orang bingung dengan overlay tema. Namun sebenarnya ini gagasan sederhana.
別のタイプなどではなく
Overlay ini bukan jenis yang berbeda.
特定の目的にテーマを使う手法です
Semua itu adalah teknik menggunakan tema untuk melakukan sesuatu yang spesifik.
この手法では 親を持たず 何も継承しないと宣言し
Yang harus dilakukan adalah menyatakan ini tidak punya induk. Anda hanya perlu nyatakan bahwa ini tidak mewarisi apa pun.
変更したいものだけを宣言します
Lalu Anda hanya mendeklarasikan hal akurat
既存のテーマを基にした オーバーレイに適用されます
yang ingin Anda ubah. Jadi, ini didesain agar terhampar di bagian atas
他の必須要素は そこから取得されます
tema yang sudah ada, yang memberikan semua hal lain
変更が必要なこの２つだけです
yang diperlukan untuk layar. Dan saya hanya ingin ubah.. Saya ingin mengubah dua hal tertentu ini saja.
そしてThemeOverlayを適用すると
Jadi, saat jika menerapkannya, versi ThemeOverlay,
ピンクのテーマの 必要な設定を保持できます
kita akan pertahankan semua hal dalam tema pink yang diinginkan.
しかも AppCompat属性を 再度読み込んだりせずに
Kita tidak akan memuat semua atribut AppCompat lagi.
必要な部分だけ変更できます
Dan kita hanya akan ubah yang ingin diubah.
ThemeOverlayはシンプルですね
Jadi, overlay tema adalah hal yang amat sederhana.
そしてとても便利です
Tapi bisa sangat berguna.
既成のものがいくつかあるので
Dan sedikit tips, ada banyak yang sudah dibuat
ぜひ活用してください
untuk Anda yang sebaiknya Anda gunakan.
たとえばダークテーマのオーバーレイがあります
Misalnya, MaterialComponents
明るい画面の一部だけ ダークテーマにしたいときは
menawarkan overlay tema gelap. Misalnya, sebagian besar layar terang. Dan ada subbagian yang ingin dijadikan bertema gelap.
このダークなThemeOverlayを 階層に設定します
Anda dapat menetapkan overlay tema gelap ini di hierarki itu
ライトもあります
dan ini akan mengalihkannya. Dan akan ada terang juga.
階層はこのように振る舞うため
Juga karena jenis perilaku hierarki ini,
コンテキストやそれに関連したテーマには 注意が必要です
hati-hatilah saat menggunakan konteks itu, atau tema yang terkait dengan konteks,
色を取得するこのような処理が
saat menangani hal dalam kode. Anda mungkin punya kode di suatu tempat di code base,
コードベースにあるかもしれません
tempat mengambil warna menggunakan ContextCompat.
どんなコンテキストに適用するかに注意します
Hati-hatilah dengan konteks yang akan Anda terapkan di sana,
あまりに離れている場合
karena jika menggunakan konteks yang terlalu jauh,
例えばFragmentのrootにあって その上にテーマが適用されている場合
misalnya menggunakan konteks dari root fragmen atau seperti ini, tema yang ditumpuk di atasnya, jadi jika menetapkan tema Android di suatu tempat di tata letak,
下方のコンテキストを使うと取得できません
tema tak akan diambil jika Anda gunakan konteks yang
一番近いビューのコンテキストを使えば
ada dalam [? biru. ?] Jadi Anda mungkin ingin menggunakan konteks tampilan terdekat
その上にあるどのテーマも取得できます
sehingga segala jenis tema yang ditumpukkan di atasnya akan diambil.
それよりもさらに良いのがテーマ属性です
Atau yang lebih baik, memilih atribut tema.
テーマ属性はテーマシステムに対応しているので
Atribut tema dibuat untuk bekerja dengan sistem bertema. Dan sebaiknya Anda mencobanya dan memilih
名前が付いた色ではなく
menggunakan atribut tema alih-alih warna bernama jika
テーマ属性を使用することを勧めます
mungkin, karena atribut itu berfungsi dalam sistem.
コードでオーバーレイと同じ処理をするには
Dan jika dalam kode perlu melakukan perilaku overlay yang sama
ContextThemeWrapperを使って コンテキストをラップし
Anda bisa melihatnya dengan wrapper tema konteks, jadi Anda bisa ambil konteks
別のスタイルを適用します
dan membungkusnya, menerapkan gaya lain, untuk memberi perilaku overlay yang sama ini.
こちらは android:themeタグの内部処理です
Inilah yang dilakukan tag tema Android secara internal.
テーマとスタイルの違いを 理解していない人も珍しくありません
Jadi sebenarnya ini adalah... saya rasa banyak orang yang bingung dengan ini, saat tidak paham perbedaan antara tema dan gaya.
ボタンの背景色を変更したい場合は
Katakanlah Anda ingin mengubah warna latar belakang tombol.
このようにスタイルで
Kita semua pernah melakukannya.
colorPrimaryを設定します
Lalu mereka coba seperti ini, menetapkan gaya yang mengatur colorPrimary.
スタイルではビュー属性に値を設定しますが
Dan masalahnya adalah gaya itu
困ったことにcolorPrimaryは
sebenarnya adalah atribut tampilan ke nilai. Jadi pada dasarnya Anda mencoba
ビュー属性ではありません
menetapkan atribut tampilan colorPrimary.
これはテーマ属性で存在しません
colorPrimary bukan atribut tampilan. Ini titik pengalihan lainnya, semacam atribut tema.
テーマ属性の存在理由や 使い方を理解したうえで
Jadi, ini tidak ada. Yang harusnya Anda lakukan adalah memahami perbedaan mengapa atribut tema ini ada,
このようにThemeOverlayを設定すると
bagaimana cara menggunakannya, dan menetapkan overlay tema seperti ini
色を設定できます
yang mengarah ke..
一言で言えば
yang menetapkan warna. Dan saya anggap hal ini--
スタイルとテーマの 違い、存在理由、相互作用を理解すれば
jangan libatkan gaya dalam memilih tema. Terutama, jika Anda paham perbedaan keduanya, alasan keberadaan, dan bagaimana keduanya saling berinteraksi,
テーマに対するフラストレーションが かなり解消されるはずです
saya rasa itu akan menyelesaikan kebingungan banyak orang terkait tema.
重要なのは テーマとスタイルの違いを理解し
Begitulah. Memahami perbedaan antara tema dan gaya adalah semacam fondasi dalam diskusi ini.
属性の存在理由と 使い方を理解することです
Memahami mengapa beberapa atribut ada dan cara menggunakannya.
これらを踏まえた上で
Saya benar-benar mencoba untuk menguraikan perbedaan
両方をうまく活用するのが一番です
antara tema dan gaya. Namun faktanya, keduanya paling baik jika bekerja sama.
テーマや属性を参照するスタイルを作成し
Jadi Anda bisa dan harus membuat gaya yang merujuk ke tema,
テーマでスタイルを設定します
seperti tema dan atribut, dsb. dan menggunakan tema yang menetapkan gaya.
大切なのは 長所や使う場所 組み合わせです
Jadi, memahami keahliannya, kapan harus digunakan, dan bagaimana keduanya bekerja sama.
ありがとう ニック
Terima kasih, Nick.
ニックが紹介したテーマやスタイルの理論を
Nick barusan membahas tentang teori
アプリで応用していきましょう
di balik tema dan gaya. Sekarang saya ingin jelaskan bagaimana penerapannya ke aplikasi.
アプリで最も重要なリソースは色です
Bagi saya, jenis resource terpenting di aplikasi,
大半の要素には色が着いています
adalah warna. Warnalah yang menyusun sebagian besar item yang digambar.
色を定義する方法は複数あります
Ada sejumlah cara untuk mendefinisikan warna di Android.
colorタグの中身はARGBの値でです
Kita punya tag warna yang biasanya dibuat dari nilai warna ARGB.
colorタグから別のcolorタグを参照して エイリアスを作成できます
Tag warna sebenarnya dapat merujuk tag warna lain
またcolorタグからテーマ属性は参照できず
jadi Anda bisa buat alias. Satu hal yang perlu diketahui adalah Anda tak bisa merujuk atribut tema dari tag warna.
別のcolorタグのみ参照できます
Anda hanya dapat merujuk tag warna lain.
次は動的な色です
Dan begitu juga warna statis.
ColorStateListは 色のステートフルなラッパーで
Sekarang tentang warna stateful. Jadi, daftar status warna adalah wrapper stateful terkait warna.
異なる状態に応じて使用する色を定義できます
Daftar ini memungkinkan Anda mendefinisikan warna lain yang digunakan di status yang berbeda.
Drawableなどと同じ
Yang digunakan adalah sistem drawable status sama
State Drawableシステムです
sebagai drawable, tapi juga tampilan.
たとえばこのボタンは stat_pressedがtrueで
Begitulah kerjanya. Sebagai contoh di sini, ada tombol
クリックすると色が変わります
dengan state_pressed = true. Jadi, saat tampilan diklik, warna akan berubah. Ini sebenarnya [TIDAK TERDENGAR].
ビューを無効にすると
Tapi saat Anda menonaktifkan tampilan itu,
このような半透明になります
jadinya semacam tembus pandang.
ColorStateListを使っています
Dan itu didukung oleh daftar status warna.
ColorStateListの中には
Jadi, jika Anda melihat cara daftar status warna dibuat,
selectorタグに アイテムが２つあります
kita punya tag pemilih. Dan dalam contoh ini, kita punya dua item.
１つ目は色です
Item pertama mendefinisikan warna.
brand_color_brightで定義した色は
Yang menunjuk ke<i> brand_color_bright</i>.
state_checkedがtrueの時の色です
Dan akan digunakan kapan pun status <i>state_checked = true</i> diaktifkan.
２つ目は 状態を定義していないので
Lalu kita punya item kedua yang tidak mendefinisikan status apa pun.
既定の色になります
Artinya itu adalah warna default-nya.
現在の状態に一致する色が他になければ
Jadi, jika tidak ada item warna lain yang akan sesuai dengan status saat ini,
この色が使われます
ini tidak akan digunakan.
ColorStateList内のアイテムは
Satu tips: Anda harus selalu mengurutkan item di daftar status warna
必ず 具体性の順に上から並べます
mulai paling spesifik di atas ke paling tidak spesifik di bawah.
ColorStateListは
Karena begitulah daftar status warna ini bekerja.
一致するものが見つかるまで 全アイテムを調べるからです
Daftar ini mengulangi seluruh item hingga [?mereka?] menemukan yang cocok.
先ほどのアイテムの順序を入れ替えて
Jika kita kembali ke contoh
状態のないアイテムを一番上にすると
dan membalik urutannya, jadi item tanpa status ada di atas,
この色しか使われなくなります
yang terjadi adalah inilah satu-satunya warna
状態を指定してないのですべての状態に一致し
yang akan digunakan. Tanpa status artinya cocok dengan status apa pun.
その下のアイテムは使われません
Sehingga, item apa pun di bawahnya
これは重要な点です
tidak akan digunakan, hanya yang ini. Ada sedikit [TIDAK TERDENGAR] yang harus Anda ketahui.
ColorStateListも改良を重ねてきました
ColorStateList menjalani beberapa upgrade
Lollipopでは
beberapa tahun ini.
android:alphaタグを使う 透過度調整を追加したほか
Di Lollipop, kami tambah modulasi alfa menggunakan tag alfa Android.
API 23で テーマ属性の参照が可能になり
Dan di API 23, kami memberikan kemampuan untuk merujuk atribut tema.
とても有用なツールになっています
Saat ini menjadi alat yang sangat berguna untuk membantu Anda terkait tema dan gaya.
また AppCompatを使えば
Atau jika menggunakan AppCompat,
API 14までバックポートできます
akan terjadi backport kembali ke API 14.
AppCompatウィジェットも 仕組みは同じです
Semua widget AppCompat mungkin memakai metode ini secara internal.
手動で使うことも 内部で使うこともできます
Anda bisa gunakan secara manual atau banyak-- katakanlah, warna teks, atau apa pun itu,
スタイル内のテーマ属性を使って
dan ini digunakan secara internal.
ColorStateListを 安全に参照できます
Jadi, Anda dapat merujuk daftar status warna dengan aman menggunakan atribut tema dalam gaya tersebut.
ColorStateListを使えば 次のような状況を回避できます
Jadi, satu cara menggunakan daftar status warna
このように透過度が異なる
adalah menghindari situasi ini. Saya hampir bisa jamin Anda akan memperoleh hal seperti ini,
色のコピーがあります
memiliki salinan warna dengan berbagai jenis alfa warna.
普通は灰色で
Biasanya warna abu-abu, jadi ada sekitar 20
20や40ぐらいの灰色の色調になります
atau mungkin 40 nuansa abu-abu di sana.
これは避けたいわけです
[TERTAWA] Kita memang harus menghindarinya,
なぜなら １色を変更するだけで
karena Anda tak ingin hanya punya satu warna,
アプリ内の透過度を変えたバリアントまで 全部変更する必要が出るからです
dan lalu mengubahnya. Namun Anda kemudian melihat semua varian alfa acak ini di suatu tempat di aplikasi Anda, dan mengubahnya juga.
ColorStateListなら アイテムを複数持つ必要はなく
Jadi, kita bisa gunakan daftar status warna. Daftar status warna tak harus punya banyak item.
１つで十分です
Bisa hanya satu item.
既定の色を使って
Kita bisa gunakan fungsi itu dari warna default
そのアイテムを常に使う色にします
item tunggal itu selalu menjadi warna yang dipakai.
ここではcolorOnPrimaryという テーマを参照するので
Jadi kita akan fokus pada tema yang disebut colorOnPrimary.
透過度を調整できます
Kita bisa gunakan modulasi Android,
値は０から１の間です
yang saya sebutkan tadi, yaitu pecahan antara nol dan satu.
colorOnPrimaryは 色のalpha値を取得して
Yang akan dilakukannya adalah mengambil nilai alfa
指定した値をそれに掛けます
dari warna itu dan mengalikannya dengan pecahan yang Anda berikan
それがこの25%のcolorOnPrimaryです
Jadi, kita mendapatkan 25% colorOnPrimary di sini.
このファイルを必要なalpha値の分だけ
Anda bisa salin file ini sebanyak yang dibutuhkan
コピーします
di semua nilai alfa yang berbeda.
ColorStateListの
Fitur lain dari daftar status warna
便利な使い方をもう１つ
adalah hal seperti ini.
この例では 色をビューの背景として参照しています
Di sini ada warna yang sebenarnya kita rujuk sebagai latar belakang tampilan.
前景でも画面ソースでも構いませんが
Tak selalu latar belakang. Bisa latar depan, sumber gambar--
色をDrawableとして参照しています
apa saja. Namun merujuk warna sebagai drawable.
内部的には 属性システムが この色をinflateして
Secara internal, yang terjadi adalah sistem atribut akan mengembangkan warna itu dan membungkusnya
ColorDrawableにラップします
ke dalam ColorDrawable. Dan itulah yang sebenarnya ditetapkan.
でも色をColorStateListに設定すると うまくいきません
Tapi, jika mencoba dan melakukan ini, yakni menetapkannya menjadi daftar status warna, itu tak akan berfungsi.
内部的にColorDrawableは ステートフルではないため
Karena secara internal, drawable warna tidak bersifat stateful.
ColorStateListの扱い方が 分からないのです
Jadi tak tahu apa yang harus dilakukan dengan daftar status warna.
しかし Android 10以降では
Ini akan berfungsi di Android 10 ke atas,
ColorStateListDrawable という新クラスで処理できます
karena ada class baru yang disebut drawable daftar status warna. Jadi ini adalah satu tips untuk Anda,
必ず異なるAPIレベルでテストしてください
agar selalu menguji di level API berbeda, karena tidak semua akan selalu berfungsi.
すべてのAPIレベルで機能させる ひとつの策は
Satu trik yang bisa dilakukan untuk mendapatkan efek yang sama yang berfungsi di semua level API
backgroundTintを使うことです
adalah ini. Kita gunakan pewarnaan latar belakang.
塗りつぶした四角を設定し
Kita akan tetapkan kotak dengan warna solid.
色はテーマでないとすぐに分かる マゼンタにしています
Saya pakai magenta sebab akan sangat terlihat
backgroundTintで ColorStateListを参照すると
saat belum bertema. Lalu kita pakai tinta latar belakang yang menunjuk
同じ効果が得られます
ke daftar status warna itu, dan efek yang didapat tetap sama.
以上が色でした
Itulah beberapa hal tentang warna.
次のトピックは 整理方法です
Sekarang mari kita membahas tentang item organisasi.
３つの役立つアドバイスがあります
Saya punya tiga tips teratas untuk Anda di sini.
１つ目はリソースの命名についてです
Pertama, tentang penamaan resource Anda.
皆さんのアプリにも
Saya hampir yakin bahwa Anda punya sesuatu
こんな色のリソースがあるのでは？
seperti ini di aplikasi, yakni sejumlah resource warna
使うテーマ属性が名前になっています
yang diberi nama sesuai atribut tema
color_primary、color_primary_dark color_accentがあります
yang akan digunakan untuk warna itu. Ada <i>color_primary</i>,<i> color_primary_dark</i>, <i>color_accent</i>.
テーマはこのようになっていて
Lalu tema Anda, Anda mungkin punya sesuatu seperti ini,
同じ名前の色リソースを参照しています
mengarah ke.. tema sebenarnya mengarah ke resource warna dengan nama yang sama.
これは好ましくありません
Kita tidak benar-benar menginginkannya.
色の値に セマンティックな 意味を持たせているからです
Alasannya karena kita mendapatkan makna semantik untuk apa yang hanya berupa nilai warna.
単なるARGBの値で指定した色ですが
Ini cuma [? sebuah ?] nilai A, dan R, G, dan B.
名前と意味を持たせてしまっています
Itu cuma warna. Namun kita memberinya nama dan makna semantik.
名前はリテラル名にします
Yang ingin kita lakukan adalah memberi nama literal.
ブランド色があれば ここでは青ですが
Jika ada semacam warna merek,
そう名付けます
dalam hal ini biru, bisa berupa warna apa saja, beri nama seperti itu juga.
マテリアルなどの色システムは
Atau jika sesuatu seperti material,
色をトーンで定義します
sistem warna tempat Anda mendefinisikan warna dalam hal corak,
material_blue_500と なっています
di sini ada <i>material_blue_500</i>.
マテリアルでなくても
Tidak harus selalu material,
トーンシステムがあれば大丈夫です
Tapi jika punya sistem corak, itu bisa sangat membantu.
ここで説明したのは
Yang kami sampaikan bukan cuma masalah
テーマやスタイルだけでなく
dalam tema dan gaya saja,
ソフト開発全般の問題です
ini adalah masalah rekayasa software umum.
インターフェースか実装かですね
Bagi saya, ini seperti antarmuka versus implementasi,
テーマはアプリの色を決める システム構成のようなもので
sama seperti pembicaraan Nick tadi, dalam tema seperti itu seharusnya ada jenis konfigurasi sistem warna untuk aplikasi Anda.
その下にあるのは 単なる実装です
Dan hal lainnya di bawahnya hanyalah implementasi.
インターフェースはテーマです
Jadi, antarmuka akan jadi tema, itulah yang selalu digunakan
リソースはテーマを通じて取得し
untuk memperoleh resource.
その下にリソース
Lalu, di bawahnya, ada resource Anda,
すなわち 色、Drawable ディメンションなどがあります
warna, permasalahan, apa pun itu, dimensi.
ヒント１： リソースにはリベラル名を使うこと
Itulah aturan pertamanya, gunakan nama literal untuk resource.
ヒント２： 一貫性のあるスタイル名を使うこと
Aturan kedua, gunakan nama gaya yang konsisten, yang sedikit berbeda.
次のようなスタイルを並べた経験が あるでしょう
Jadi, saya yakin Anda punya sesuatu seperti ini,
２つあり AppThemeとToolbarです
tempat Anda memiliki gaya di sini, satu disebut AppTheme, satunya Toolbar.
名前から これらが何かは すぐに見当がつきます
Sekarang cukup jelas dari penamaannya di sini. Anda kemungkinan bisa menebak apa maksudnya.
AppThemeはテーマで
AppTheme -- mungkin sebuah tema.
Toolbarは ツールバーウィジェット用でしょう
Toolbar -- kemungkinan sebuah gaya widget toolbar.
これにBlueThemedToolbarを 追加します
Tapi sekarang saya ingin menambahkan yang ketiga, BlueThemedToolbar.
これだとテーマなのかスタイルなのか はっきりしません
Tidak terlalu jelas kan apa maksudnya. Tema? Atau gaya?
なぜなら テーマもスタイルも 必ずstyleタグを使うので
Entah. Ini tidak jelas sebab kita tak tahu pasti jenisnya di sini karena tema dan gaya, seperti yang dikatakan Nick,
タイプがはっきりしません
kita selalu harus menggunakan tag gaya. Siapa yang tahu apa maksudnya itu?
なので命名規則を定めて
Jadi, yang harus dilakukan adalah membuat beberapa aturan yang membuat nama.
名前にタイプを含めれば
Kita harus sematkan jenis ke sistem penamaan.
用途が明快になります
Jadi Anda sungguh bisa melihat fungsinya.
ここではフレームワークやAndroidXと
Jadi, di sini kita akan gunakan [?framework?] [TIDAK TERDENGAR]
同じ命名規則を使用します
dan juga [?AppCompat?] dan Android X,
この規則では名前をピリオドで区切ります
yang merupakan skema penamaan, yang dipisahkan dengan titik.
最初はスタイルのタイプで
Jadi, grup pertama kita adalah jenis gaya.
テーマ、スタイル、テキストの外観
Tema, gaya, bisa jadi tampilan teks, overlay tema,
テーマオーバーレイ、シェイプの外観などです
tampilan bentuk, apa saja, ini adalah jenis gaya yang akan Anda gunakan.
次はグループ名 つまりアプリ名です
Selanjutnya nama grup. Ini biasanya akan jadi nama aplikasi Anda.
モジュール型アプリならモジュール名になります
Tapi, jika ada aplikasi yang amat modular, ini bisa jadi cuma nama modul.
スタイルの論理的なグループです
Apa pun pengelompokan logis untuk gaya Anda.
次はサブグループ名で ウィジェットに使用します
Selanjutnya adalah nama subgrup Anda. Ini biasanya digunakan untuk widget.
スタイルを作成するビューの クラス名となります
Ini akan menjadi nama class tampilan yang gayanya Anda buat.
最後は任意の バリアントです
Yang terakhir opsional.
メインスタイルのバリアントは
Ini adalah varian. Jika Anda punya varian gaya utama,
Theme.AppName.Blue
katakanlah Anda punya tema [?bernama?] AppName.Blue,
という名前になります
itu adalah varian tema utama.
これを繰り返して
Jadi ini akan [?jadi?] sebuah cara.
バリアントのバリアントも作れます
Dan dapat diulang. Jadi, Anda bisa punya varian dari varian, dan seterusnya.
例に戻ると次のようになります
Jika kita kembali ke contoh di sini, akan ada sesuatu yang seperti ini.
「AppTheme」から 「Theme.MyApp」に変わっています
Jika Anda berpindah dari bingkai aplikasi ke Theme.MyApp lalu begini, begitu, untuk gaya widget.
ここでのポイントですが Androidシステムの仕組み上
Yang perlu diketahui di sini adalah notasi titik sebenarnya
ピリオド区切りに基づいた 暗黙の継承があります
sejenis keajaiban dalam sistem [? Android ?], dan kita punya sistem turunan implisit berdasarkan hal ini.
このWidget.MyApp.Toolbar.Blueは
Jadi di sini, Widget.MyApp.Toolbar.Blue sebenarnya secara implisit diturunkan dari yang di tengah
上のものを暗黙に継承しています
karena notasi titik. Ini merupakan bawaan sistem.
この命名規則が本当に役立つのは
Satu tempat yang paling menonjol,
コードレビューです
sistem penamaan ini, sesuatu seperti ini.
この例では 誤ってテーマを スタイルに設定しています
Ini adalah tinjauan kode. Ini ada contoh, saat saya tak sengaja menggunakan tema sebagai gaya tampilan,
これは明らかにまずいですね
yang jelas tidak bagus, seperti yang sudah kita lakukan tadi.
ニックがコードレビューを要求します
Ini, Nick menyebutnya tinjauan kode,
名前に情報が含まれているので 名前から読み取れます
karena kita sebenarnya menggunakannya, dan nama menyematkan jenis informasi itu ke-- kita sebenarnya bisa baca dari namanya.
コードレビューがずっと楽になり
Jadi [?kita?] [?menyebabkan?] tinjauan kode itu
Lintルールを作って自動で補足もできます
jauh lebih baik. Kita bahkan bisa tulis aturan lint di sini agar benar-benar mendapatkannya secara otomatis.
３つ目となる最後のヒントは
Dan contoh ketiga, itu tips teratas kedua kami.
ファイルの分割です
Dan yang ketiga, yang terakhir, adalah memisah file.
これは今年のI/Oのアプリです
Ini sebenarnya adalah aplikasi I/O tahun ini.
テーマや...
Di sini ada tema.
...ウィジェット
Ada widget.
テキストの外観が定義され
Dan ada tampilan teks.
ファイルはstyles.xml の１つです
Dan [?ada?] hanya satu file, styles.xml.
そのせいでサイズが大きく
Ini sepertinya buruk karena file itu besar sekali.
600行ぐらいあるので
Saya rasa sepertinya ada 600 baris.
中身を追うのは大変です
Dan mustahil untuk dinavigasikan.
原因はファイルを
Karena semua filenya dikelola
リソースタイプ別に分けているからです
oleh jenis resource aktual.
スタイルはstyles.xmlに ディメンションはdimens.xmlに
Jadi, semua gaya di style.xml, dimensi, string, dan lainnya--
...などとしているせいです
semuanya ada dalam nama file yang sama.
ここではそうではなく イージーモードで行きます
Salah satu cara yang dapat dilakukan, yakni easy mode (mode mudah).
リソースタイプを用途で分類します
Kita tinggal memisahkan berdasarkan tujuan jenis resource.
テーマはthemes.xmlで
Jadi kita hanya perlu meletakkan tema di themes.xml.
テーマとテーマオーバーレイだけです
Ini hanya tema dan overlay tema, tak ada lainnya.
type.xmlは
Lalu kita akan membuat informasi jenis,
タイポグラフィ テキストの外観 テキストのサイズ ディメンション
tipografi, tampilan teks, ukuran teks, dimensi,
フォントファイルなどです
atau mungkin file font,
styles.xmlは
semua hal itu. Lalu kita membuat styles.xml.
ビュースタイルだけで 他の情報は含めません
Kita akan mempertahankannya, tapi hanya untuk gaya tampilan kita, bukan yang lain.
それ以外は
Lalu yang lainnya akan
リソースタイプをファイル名とします
masuk ke dalam nama file jenis resource aktual.
もっと頑張りたいなら
Jika menginginkan yang lebih rumit,
ハードモードで行きます
Anda gunakan yang saya sebut mode sulit.
これをさらに進めて
Kita sebenarnya akan lakukan lebih jauh.
論理的なタイプ別に分けます
Jadi, kita akan memecahnya, kita akan memisahkan jenis-jenis logikanya.
シェイプに関するものは
Jika ingin melakukan sesuatu dengan bentuk,
shape.xmlにまとめます
mungkin shape.xml.
ほかにもsys_uiがあります
Atau contoh bagus lainnya,<i> sys_ui</i>.
エッジトゥエッジで行く場合は
Jika ingin dari tepi ke tepi,
それに関連するリソースを含めます
yang seperti saya harapkan, Letakkan saja semua resource yang terkait dengan hal itu.
ブール値フラグや
Flag Boolean atau warna apa pun untuk
ナビゲーションバーやステータスバーの色です
menu navigasi atau status bar, apa pun semacamnya,
リソース自体でなくとも
tak perlu terkait dengan resource alaminya.
使い方が関連していれば構いません
Bisa jadi suatu cara untuk menggunakannya.
Android Studioの プロジェクトビューでは
Akan sangat bagus jika menggunakan tampilan project Android di Android Studio, karena saat ada penggantian
リソース修飾子別に オーバーライドの違いを
oleh pengkualifikasi resource, akan menjadi kisi yang apik,
すぐに見分けられるので便利です
dan Anda dapat melihat perbedaannya dengan sangat mudah.
以上が３つのアドバイスです
Jadi itulah tiga tips kami.
ニックがマテリアルテーマについて話します
Baiklah. Kembali ke Nick untuk membahas tentang tema material. Semangat!
テーマシステムを理解したら
Baiklah. Mari lihat yang apa yang bisa dibuat
次は何を作れるか見ていきましょう
setelah memahami dan mengetahui cara memanfaatkan sistem tema sepenuhnya.
マテリアルテーマには 大きな魅力があります
Satu hal yang sangat saya sukai adalah tema material.
これを使うとアプリのブランド性や個性を
Jadi, tema material adalah sebuah gagasan bahwa
大きく強化できます
Anda bisa lebih menonjolkan merek dan kepribadian
マテリアルデザインには入念に
dalam aplikasi Anda. Desain material memberikan Anda rangkaian
検証、設計、研究されたウィジェットが 用意されています
widget yang sudah diuji, dirancang, dan diteliti dengan baik,
ここに 独自の個性、ブランド、
tapi Anda juga perlu memunculkan kepribadian, merek, tampilan,
外観を吹き込んでください
dan nuansa Anda sendiri, ke aplikasi.
マテリアルデザインには
Jadi, untuk melakukannya, tema ini menonjolkan tiga sistem
タイポグラフィ、シェイプ、色という
parameter ini,
パラメータシステムがあります
tipografi, bentuk, dan warna.
タイポグラフィ、シェイプ、色の 値を指定するだけで
Hanya dengan memberikan nilai tipografi, bentuk, dan warna,
アプリで幅広い表現が可能になり
Anda benar-benar dapat mengekspresikan diri sendiri di aplikasi Anda
強い個性でブランドを体現できます
sehingga aplikasi tampak dan terasa amat berbeda satu sama lain dan mewakili merek khas Anda sendiri.
先の３つだけで
Cukup menakjubkan tingkat kepribadian yang bisa didapat
アプリが驚くほど個性的になります
hanya dengan tiga jenis dimensi ini.
では使い方を見ていきましょう
Mari kita lihat cara menggunakannya.
まず色システムには
Untuk memulainya, sistem warna
セマンティック名の付いた
dibuat dari berbagai variabel bernama semantik.
変数がたくさんあります
Variabel bernama semantik, saya sudah dengar, ya,
どれもテーマ属性です
benar, semuanya atribut tema.
セマンティック名が付いた色のテーマ属性が ライブラリにあり
Jadi, cara kerjanya, library menampakkan atribut tema untuk warna bernama semantik ini
それらに値を設定します
yang Anda berikan nilainya.
ライブラリの全ウィジェットが
Lalu, di library, semua widget yang dibuat
このセマンティック名を参照し
dengan merujuk ke item bernama semantik ini,
設定した色を取得します
titik pengalihan ini, dan akan menarik warna
色システムには理解しておくべき色があります
yang Anda tetapkan. Jadi, untuk sistem warna, ada beberapa warna yang perlu Anda ketahui dan pahami.
colorPrimaryは ブランドの主色で
Ada <i>color primary</i>, ada<i> color secondary</i>,
そのコントラストが colorSecondaryです
jenis warna merek utama dan warna kontras untuk warna utama,
バリアントはそのまたコントラストで
serta varian, yang sering digunakan
隣に来る色です
untuk mendapatkan kontras dari warna-warna itu. Jadi, ini bisa digunakan di sampingnya, misalnya.
セマンティック名はとても便利です
Memang, nama semantik sangatlah bermanfaat.
マテリアルではすべてサーフェスの上に
Seperti colorSurface, saya rasa juga sangat berguna. Jadi, ini jenis [?immaterial.?]
異なるエレベーションで配置され
Semuanya ada di permukaan, yang ada di tingkat elevasi yang berbeda.
サーフェスの色を取得できます
Dan memungkinkan Anda mengambil warna permukaan.
またセマンティック名なので
Serta item bernama semantik seperti colorError.
ハードコードでなく ?attr/colorErrorで
Jadi, daripada memiliki error hardcode [?warna?] di mana-mana, Rujuk saja ke tanda tanya setelah colorError,
エラーカラーを参照できます
dan tarik warna error dan hal semacamnya.
マテリアル色システムで気に入っているのが
Satu hal yang sangat saya sukai dengan sistem warna material
このcolorOnで
adalah sistem ini juga memberikannya di warna.
「On」の文字がない色の コントラストになります
Jadi, warna ini dijamin akan terlihat kontras dengan yang namanya hampir sama.
たとえばcolorOnPrimaryと colorPrimaryです
Jadi, colorOnPrimary, misalnya, akan selalu kontras dengan warna primer.
フローティング操作ボタンなら
Misalkan Anda perlu meletakkan ikon di atas tombol tindakan
ボタンはcolorPrimary
yang mengambang. [?Fab?] mungkin akan menjadi colorPrimary.
その上のアイコンは
Lalu Anda bisa gunakan colorOnPrimary
colorOnPrimaryにします
untuk memberi tint pada ikon. Dan ikon akan kontras terhadapnya.
特に便利なのはcolorSurfaceと colorOnSurfaceです
Yang sangat berguna, colorSurface dan colorOnSurface
新しい値を テーマの セマンティック名の変数に代入します
Jadi lakukan ini. Anda berikan nilai konkret terbaru ini ke variabel bernama semantik ini di tema Anda.
ここでは青のテーマに テーマ属性を設定しています
Jadi, saat Anda siapkan tema, saya menyiapkan tema biru-- saya akan mengatur beberapa atribut tema ini.
全部設定する必要はありません
Ingat, Anda tak harus menetapkannya semua.
たとえば
Jika dapat dari beberapa tema material,
MaterialComponents.Light を継承すれば
misal MaterialComponents.Light, atau MaterialComponents,
妥当な既定値が手に入ります
yang merupakan tema gelap, akan disiapkan default yang masuk akal.
ここではcolorSurfaceは設定せず
Misalnya, saya tidak mengatur colorSurface.
ライブラリを受け入れ
Saya akan menerima yang dari library,
望んだ設定に変更します
dan melanjutkan serta mengubah item-item yang ingin ditetapkan.
レイアウトやスタイルでは
Lalu, Anda dapat dan sebaiknya menggunakannya
これらを使用します
di tata letak dan gaya Anda.
colorPrimaryの現在の値をクエリし
Jadi saya ajukan kueri tentang nilai saat ini untuk colorPrimary
ビューの背景色として設定しています
dan mengaturnya sebagai warna latar belakang tampilan.
ここで クリスが紹介した色セレクターである
Dan tips teratasnya adalah kita bisa gunakan pemilih warna item tunggal ini, daftar status warna yang dibahas Chris,
ColorStateListを使えば
dengan warna ini agar pengaruhnya hebat,
いろんな色をいくつも定義する必要はありません
sehingga Anda tak perlu menentukan banyak warna yang berbeda.
たとえばデバイダーを使いたい場合は
Misalnya, Anda mau melakukan pemisahan.
新規作成する代わりに
Daripada membuat warna baru yang disebut colorDivider atau semacamnya.
colorOnSurfaceを使えば
Dapatkan saja colorOnSurface,
背景色のコントラスト色を取得できます
yang dijamin terlihat kontras dengan warna latar belakang--
alphaを20%に設定すれば
dan menggunakan modulasi alfa, jadi hanya 20%-nya,
最適な色が得られます
untuk memperoleh warna yang tepat.
さまざまなテーマに対応しているので便利です
Yang keren adalah kemampuannya merespons
たとえばこのダークとライトのテーマを 分けるデバイダーは
tema yang berbeda. Jadi, misalnya tema gelap. Di sini saya gunakan tema terang, dan pemisah ada di tengah layar,
colorOnSurfaceの20%で
adalah 20% colorOnSurface, yang akan jadi gelap di item terang.
明るい黒になります ダークに切り替えると
Namun, saat beralih ke tema gelap,
自動でcolorOnSurfaceは白になり
colorOnSurface otomatis jadi putih.
20%で望ましいグレーになります
Dan 20%-nya akan memberikan jenis nuansa abu-abu yang tepat
セマンティック名の色を活用すれば
sebagai kontrasnya. Jadi, menggunakan warna bernama semantik ini
いろんな色を定義して管理せずに済むので 便利です
bisa amat berguna, Anda tak perlu menentukan banyak warna yang berbeda dan Anda dapat memelihara aplikasi Anda.
以上が色です
Jadi itu tentang warna.
次はタイポグラフィです
Selanjutnya, sistem tipografi.
マテリアルはタイプスケールの 使用を推奨しています
Material menyarankan Anda menggunakan skala jenis,
これは少数のテキストスタイルを アプリ全体に適用する手法です
yang merupakan istilah keren dari sejumlah kecil gaya teks,
画面ごとに数十種類のサイズを
dan menerapkannya di seluruh aplikasi
定義せずに済みます
Jadi Anda tak akan berakhir dengan 15 ukuran teks berbeda
アプリに適用する 少数の選択肢のリストがあれば
di layar yang berbeda. Anda memiliki daftar kecil pilihan atau palet tekstil
一貫性を保てます
yang harus Anda rujuk dalam aplikasi demi konsistensi.
セマンティック名には Headline1、Body
Jadi, hal ini memberi nama semantik ini
Caption、Buttonなどがあります
semacam judul satu, judul dua, batang tubuh, teks, tombol,
これらのセマンティック名は テーマ属性として実装されます
dan sebagainya. Dan sekali lagi, hal ini diterapkan sebagai atribut tema.
マテリアルコンポーネントは
Jadi, komponen desain material menetapkan
緑色のテーマ属性を テキストの外観として定義します
atribut tema hijau ini. Dan menetapkannya sebagai tampilan teks.
アプリでは テーマでテーマ属性を設定し
Jadi, dalam tema, Anda bisa melakukannya di sini. Anda dapat menetapkan atribut tema dan menunjuknya
テキストの外観を参照します
ke tampilan teks Anda sendiri.
全部カスタマイズする必要はなく
Anda tidak perlu menyesuaikan semuanya.
マテリアルテーマから継承して Robotoを使えます
Anda bisa mendapatkannya dari tema material, yang akan menyiapkan menggunakan Roboto.
独自のテキストの外観を用意すれば
Jika Anda ingin menyediakan tampilan teks Anda sendiri,
独自のブランドフォントを使えます
yang menetapkan font pilihan, Anda gunakan seperti font merek Anda.
このテーマ属性をアプリで参照できます
Lalu, lagi-lagi, Anda bisa merujuk ke atribut tema ini
テキストに外観を設定するには
di aplikasi Anda. Jadi, saat menetapkan tampilan teks di teks,
?attrで テキストの外観を取得します
Anda gunakan attr tanda tanya. Lalu menarik salah satu tampilan teks bernama ini.
コードレビューでテキストの外観に テーマ属性が設定されていない場合は
Saya akan ingatkan bahwa jika Anda meninjau kode dan melihat seseorang mengatur tampilan teks yang bukan atribut tema,
このリストを参照しないので
Anda hampir bisa menganggapnya sebagai [?kode?]
問題が起こるかもしれません
[? bau, ?] karena artinya Anda tidak akan merujuk ke
一貫性のある１つのタイプスタイルを使うのは
palet yang kecil ini. Idenya adalah membatasi diri sendiri
このためです
terhadap rangkaian gaya jenis yang konsisten.
テキストの外観に関して 指摘されている点ですが
Dan bagi yang melihatnya menggunakan tampilan teks dan agak cemas,
テキストビューのテキスト構成を
karena sebelumnya tampilan teks
すべてはサポートしていません
belum mendukung semua konfigurasi teks
AppCompactなどは テキストの外観で設定できませんが
yang didukung tampilan teks. Ada yang tak bisa ditetapkan di tampilan teks,
ウィジェットを代用できます
komponen material, seperti AppCompact, ada substitusi widget.
レイアウトでテキストビューを宣言すると
Saat Anda menyatakan tampilan teks di tata letak,
最近追加された マテリアルテキストビューが作られます
yang Anda dapatkan adalah tampilan teks material,
マテリアルテーマのアプリでは
yang baru ditambahkan, dan menambahkan
通常のテキストの外観よりも 細かく設定できます
kemampuan super ke tampilan teks. Jadi Anda dapat menetapkan lebih banyak hal di aplikasi bertema material
たとえば行の高さを設定できます
dibandingkan tampilan teks reguler. Jadi, secara khusus, tinggi baris didukung.
テキストの外観で行の高さを設定できないのは
Jika mencoba menetapkan tinggi baris di tampilan teks
プラットフォームのテキストビューが
dan ternyata tidak bekerja,
未対応だからですが
ini karena tampilan teks di platform tidak mendukungnya.
マテリアルデザインは対応しています
Tapi jika menggunakan komponen desain material, platform mendukungnya.
以上がタイポグラフィです
Itulah tipografi.
最後はシェイプです
Pilar terakhir adalah bentuk.
マテリアルはシェイプをブランドの一部として
Jadi, material merekomendasikan penggunaan bentuk bermakna
意味ある形で使うことを推奨しています
di aplikasi Anda untuk menyampaikan makna yang menjadi bagian merek Anda.
使うウィジェットの種類に応じて
Dan material tahu kalau Anda mungkin
異なるシェイプを使えます
menggunakan jenis bentuk berbeda bergantung pada
シェイプには小、中、大があります
jenis widget yang dipakai. Jadi, ini terbagi ke dalam jenis bentuk kecil, menengah,
大きなBottomSheetと
dan besar-- karena ingin menetapkan bentuk berbeda
小さなチップでは
untuk komponen besar seperti sheet bawah
異なるシェイプを設定します
dibandingkan untuk komponen yang amat kecil, seperti chip. Jadi sekali lagi, ini..
これはShapeAppearanceで 定義します
sebenarnya kami menetapkannya menggunakan tampilan bentuk,
TextAppearanceに似ていて
yang merupakan analogi yang serupa dengan tampilan teks.
シェイプシステムの構成といえます
Ini adalah jenis konfigurasi untuk sistem bentuk.
最初のFamily要素には
Dan terbuat dari beberapa hal.
roundedやcutがあります
Pertama, kelompok... jadi kami mendukung pojok bulat dan lancip, serta ukuran sudut,
Sizeは半径、左上、右下など
seperti radius atau pembulatan,
どの角に適用するかを指定します
dan sudut mana yang harus diterapkan, misal, kiri atas, kanan bawah, dan sebagainya.
これもテーマで
Dan sekali lagi, Anda dapat melihatnya di tema
テーマ属性を設定して構成します
dengan menetapkan atribut tema ini.
shapeAppearanceSmall Componentなどで
Anda tunjuk tampilan bentuk ini, komponen kecil, menengah, dan besar,
shape.xmlの ShapeAppearanceを参照します
ke salah satu tampilan bentuk ini, yang telah Anda siapkan di XML bentuk.
シェイプシステムは オーバーレイもサポートします
Sistem bentuk juga mendukung gagasan overlay ini,
つまり ある画面上のカードを
yang artinya, jika Anda memiliki layar tertentu,
テーマのオーバーレイと異なる外観にするには
misalkan kartu di layar ini ingin terlihat berbeda dibandingkan overlay tema satu, yang Anda tetapkan di tema,
オーバーレイを使います
Anda bisa gunakan gagasan overlay ini untuk masuk
これにより ウィジェットや 適用したShapeAppearanceの
dan mengubah widget tertentu atau satu bagian
一部を変更できます
tampilan bentuk yang diterapkan.
一部のウィジェットは
Namun berhati-hatilah karena beberapa widget material
独自のシェイプ、外観、 オーバーレイなので注意が必要です
menentukan overlay tampilan bentuknya sendiri, sesuatu yang harus Anda waspadai.
たとえばマテリアルデザインの BottomSheetは
Jadi, misalnya, Anda melihat sheet bawah, yang datang dari komponen desain material,
テーマで設定した LargeComponentを継承する
Anda bisa melihatnya menetapkan tampilan bentuk yang diturunkan dari
shapeAppearanceになっていますが
komponen besar [? m-style ?] yang Anda tetapkan
オーバーレイは独自のもので
di tema Anda. Namun, ini menetapkan overlay sendiri. Pada dasarnya, jika Anda melihat overlay ini,
下の角の半径が０です
ini menetapkan pojok bagian bawah ke radius nol.
BottomSheetは下から表示するので
Overlay ini mengatakan, sheet bawah datang dari bawah,
下の角は丸くしない外観になっています
jadi tak seharusnya punya potongan dari bagian bawah. Jadi, penampilan dan nuansanya amat tergantung selera.
これは注意が必要です
Tapi Anda perlu hati-hati dengan ini,
BottomSheetのスタイルを
karena jika Anda membuat gaya sheet bawah dan mencoba
shapeAppearanceLarge Componentで設定すると
menetapkannya dengan mengatur tampilan bentuk komponen besar,
オーバーレイが上書きされてしまいます
ini akan mengganti, akan membuat hamparan,
一部のウィジェットやテキストフィールドには
dengan yang ada di sini. Hati-hatilah karena beberapa widget menetapkannya.
注意してください
Bidang teks juga melakukannya.
MaterialShapeシステムの基盤は
Tips profesionalnya adalah semua sistem bentuk material
MaterialShapeDrawableです
amat didukung oleh satu drawable yang disebut MaterialShapeDrawable ini. Sebenarnya ini cukup keren.
これを構築するには
Anda buat satu drawable, memberinya tampilan bentuk,
ShapeAppearanceを使用します
hanya dengan, pada dasarnya, [TIDAK TERDENGAR] ini dilakukan di pemuatan kode, yang kita lihat di sistem tampilan bentuk.
MaterialShapeDrawableで
Salah satu hal favorit saya pada MaterialShapeDrawable
気に入っているのは このinterpolationです
adalah dimilikinya properti yang disebut <i>interpolation</i>,
シェイプシステムをDrawableに
yakni seberapa banyak sistem bentuk
どのくらい適用するかを指定します
yang harus saya terapkan ke drawable?
０ならシェイプシステムは適用しない
Jadi, jika Anda menetapkan<i> interpolation</i> nol, tak akan ada penerapan sistem pembuatan bentuk.
１なら完全に適用です
Jika menetapkan satu, semua akan diterapkan.
この値を変化させてアニメーションも作れます
Dan Anda bisa mengubah-ubahnya, atau, sebutan saya, menganimasikannya.
こちらではBottomSheetに
Ini dia contoh tempat saya mendapatkan sheet bawah
ShapeAppearanceを適用し
untuk menerapkan tampilan bentuk.
ドラッグに応じて変化させています
Dan saya mengubah-ubahnya sesuai penyeretan sheet bawah di sini.
ご覧のように丸みを帯びた角ですが
Jadi, Anda bisa lihat bahwa pembulatan sudut berubah
拡張すると もっと角張った形に変化します
dari jenis pembentukan bulat menjadi sudut kotak saat membesar. Cukup keren.
以上がマテリアルデザインの３つの柱の
Jadi, itulah tiga pilar desain material.
色、シェイプ、タイプです
Warna, bentuk, dan jenis.
これらをいじって ウィジェットの振る舞いを理解できるツールが
Dan untuk membantu menggunakannya, atau memahami interaksi ketiganya
GitHubにあります
dengan rangkaian widget lain, kami punya project keren di GitHub, Material Theme Builder.
テーマ属性に値を設定すると
Pada dasarnya ini adalah sejenis aplikasi katalog yang
どの構成要素がどのように表示されるかが分かる
menunjukkan semua atribut tema dan nilai yang ditetapkan
カタログアプリのようなツールです
ke atribut tema itu, dan menunjukkan hasilnya, di komponen mana yang akan tampak untuk rangkaian nilai yang sudah ditentukan.
ダウンロードして試してみてください
Ini di sini agar Anda bisa mengunduh dan menggunakannya.
テーマ属性を確認したり変更したりできます
Dan Anda bisa lihat semua atribut tema yang ditetapkan.
テーマ属性をいくつか変更すると
Dapat diubah-ubah. Jadi saya hanya mengubah beberapa atribut tema.
このように外観が変化します
Dan Anda bisa lihat hasil berbeda pada tampilan atau nuansanya.
どれをどう変更すれば
Jadi, ini seperti proyek hobi,
満足のいく見栄えのウィジェットになるか 確かめたら
Anda bisa melihatnya, dan mengubah-ubahnya, mencari tahu yang perlu disesuaikan agar memperoleh rangkaian widget
設定したテーマ属性を アプリに移植しましょう
yang ingin Anda lihat, lalu mengambil atribut tema yang Anda siapkan ini dan menggunakannya di aplikasi Anda.
このアプリはGitHubのリポジトリにあります
Dan Anda bisa cek. Ini di repo GitHub komponen desain material,
リンクはこちらです
atau tautan pendek di sini.
また 色、シェイプ、タイプ、テーマの 理解を助ける２つのサンプルを 先日オープンソース化しました
Selain itu, untuk membantu Anda memahami cara menggunakan tema warna, bentuk, dan jenis ini, minggu ini saja kami sediakan open source
３つ目も近くGitHubで公開します
dari dua contoh ini, yang ketiga akan segera hadir
これらのマテリアルスタディは
di GitHub Anda. Jadi, kami telah membuat..
マテリアルデザインの応用方法を紹介するもので
Material punya studi material ini, yang menunjukkan cara untuk menerapkan desain material.
オープンソースのサンプルを追加しています
Jadi kini ada contoh open source lain
こちらのリンクから入手できます
tentang cara melakukannya. Anda dapat melihatnya di repo contoh desain material. Giliran Anda.
最後に取り上げるのはダークテーマです
Baiklah. Jadi, bagian akhir pembicaraan ini adalah tentang tema gelap.
ダークテーマはAndroid 10で
Tema gelap ditambahkan di, maksudnya dijadikan publik, di Android 10
新しいシステム設定として公開されました
sebagai setelan sistem baru. Dan [TIDAK TERDENGAR] untuk cara Anda bisa menerapkannya.
簡単なのはAppCompatで
Cara mudah melakukannya adalah dengan AppCompat.
DayNightがあるので
Kami punya DayNight di AppCompat untuk sejumlah rilis sekarang.
ナイトモードを指定できます
Anda bisa memintanya memakai mode malam yang mana.
いずれかのAPIでモードを指定すると
Gunakan satu dari dua API ini, minta untuk memakai mode yang mana,
リソース修飾子が自動で変更されます
ini akan mengubah pengkualifikasi resource untuk Anda.
次はテーマの変更です
Hal kedua yang perlu dilakukan, yakni mengubah tema.
ここではTheme.MaterialComponentsを 使っていますが
Jadi, di sini kita menggunakan Theme.MaterialComponents,
DayNightが簡単です
cara mudah melakukannya adalah menggunakan varian DayNight.
マテリアルデザインの長所ですね
Itulah yang diberikan komponen desain material.
使用するリソースに応じて
Varian itu akan otomatis beralih
ライトからダークに自動で切り替わります
antara terang dan gelap, bergantung pada kualitas resource yang [?sedang?] digunakan.
２つ作業をしたので
Anda mungkin merasa pekerjaan selesai.
あとはシステムが処理してくれると思いきや
Kita telah selesaikan dua tugas.
残念ながらそうはいきません
Sistem yang menangani sisanya. Sayangnya, bukan itu yang terjadi. [TERTAWA]
このライトアプリは
Jadi di sini ada aplikasi terang.
ダークなコンテンツとテキスト 白の背景ですが
Kita punya konten gelap, teks gelap, di atas latar belakang putih.
ダークテーマに入ると
Lalu kita masuk ke tema gelap,
暗いテキストに暗い背景で 文字が読めません
kadang ini terjadi, teks gelap di latar belakang gelap.
テキストは白が良いですね
Tidak keren. Yang kita inginkan adalah teks latar depan terang.
こうなるのは
Biasanya ini terjadi karena kita punya
色をスタイルやレイアウトに ハードコードしているからです
warna yang di-hardcode dalam gaya atau tata letak kita.
これは黒にハードコードしていて
Jadi, di sini kita punya hardcode gelap.
ダークテーマでは使えません
Jelas sekali tidak akan bekerja dengan baik di tema gelap.
そこで 必ずテーマ属性を参照します
Yang ingin kita lakukan adalah selalu merujuk
使える色のテーマ属性が
pada atribut tema. Jadi biasanya akan ada atribut tema warna di suatu tempat
どこかにあるはずです
yang dapat digunakan.
先に触れたように
Seperti yang sudah disebutkan tadi,
テーマは常に正義で
tema seharusnya tepat.
スタイルの基盤です
Tema-lah sumber ketepatan bagi penentuan gaya.
色のテーマ属性があるのでそれを使いましょう スタイルを決めるのはテーマです
Jadi, ada atribut tema untuk warna. Gunakanlah karena tema mengonfigurasi penentuan gaya aktual Anda.
ダークテーマをさっと見ていきます
Mari kita membahas tema gelap saat ini dengan cepat.
colorPrimaryと
Di sini ada contohnya.
colorSecondaryで
Ada colorPrimary dan colorSecondary.
色リソースを参照しています
Keduanya menunjuk pada dua resource warna.
ダークテーマのマテリアルガイドラインでは
Jadi, panduan material untuk tema gelap,
主色をミッドトーンにします
pada umumnya, misalkan warna primer Anda,
こちらは500トーンを使っています
harus memiliki corak sedang. Jadi kita gunakan corak 500. Tak harus angka itu, bisa sesuatu yang serupa.
さらに ガイドラインによれば
Panduan material juga menyebutkan bahwa di tema gelap,
ダークテーマは彩度を落とした 明るい主色を使って
warna primer harus jadi versi lebih terang dan di-desaturasi
コントラストを抑えます
sehingga tidak terlalu kontras.
これに役立つオンラインツールがあります
Alat warna material yang tersedia online
色を入力して
dapat membantu Anda melakukannya.
主色はどんな色が良いか確認できます
Anda bisa memberi warna, dan menyesuaikannya dengan warna primer yang seharusnya.
このテーマはDayNightですが テーマ属性はcolorPrimaryです
Jadi, di sini ada tema kita, kita gunakan DayNight. Tapi, kita punya atribut tema colorPrimary.
色は２つで ライト用とダーク用です
Dan ada dua warna. Satu warna untuk tema terang, satu warna untuk tema gelap.
どう使い分ければよいでしょうか?
Bagaimana kita akan mengubahnya?
どちらを参照すればよいでしょう
Faktanya, yang mana yang akan kita pilih?
２つの色のエイリアスを使います
Jadi, yang kita perlukan adalah sesuatu untuk menjadi alias
このように
di antara kedua warna.
colorPrimaryと色リソースを
Kita bisa lakukan hal seperti ini, tempat kita memiliki nilai,
valuesとvalues-nightに 設定して色を使い分けます
colorPrimary, resource warna, dalam nilai, dan juga satu lagi dalam nilai [? dash ?] malam. Dan ini menjadi alias antara dua warna itu.
しかし色の値が
Jika Anda masih ingat, kita tak perlu melakukannya.
セマンティック名になっていて 好ましくありません
Kita memberikan makna semantik pada nilai warna.
一番簡単なのは
Jadi, cara termudahnya adalah melakukannya seperti ini.
テーマを抽出してBase.Themeに格納し その上にレイヤーを追加し
Kita akan mencoba dan mengekstrak tema Anda, meletakkannya ke dalam tema dasar, lalu menambahkan lapisan di atasnya.
valuesとvalues-nightで テーマを変更します
Lalu kita bisa ubah tema itu dalam nilai kita dan nilai [? dash ?] malam, menunjuk ke varian apa pun.
ニックが触れていたテーマ属性です
Jadi, biasanya ini akan menghasilkan banyak atribut tema
マテリアルテーマでは
yang dibicarakan Nick dalam pembuatan tema material,
colorPrimary colorOnPrimaryなどが
colorPrimary, colorOnPrimary, dan semua hal itu.
テーマによって値が異なります
Semuanya itu cenderung bervariasi dalam tema yang berbeda.
次に必要な色を設定します
Dan kita sebenarnya dapat menetapkan warna apa pun yang kita perlukan.
ライトはindigo_500
Kita akan menunjuk ke indigo 500 untuk terang
ダークは200です
dan 200 untuk yang gelap.
次は主色の使用です
Selanjutnya, kita akan membicarakan penggunaan warna primer.
これはニックが話していたサンプルで
Ini adalah contoh Owl yang disebutkan Nick,
主色は明るい青を使っています
yang menggunakan warna primer biru amat terang untuk permukaannya.
ダークモードに入ると
Sekarang, saat masuk ke mode gelap, biru terang itu
青が少し明るすぎて ダークとは言えません
agak terlalu terang. Semacam mengalahkan objek tema gelap
夜に使うにしてはちょっと明るすぎます
karena biasanya digunakan malam hari. Agak terlalu terang.
マテリアルのガイドラインによれば
Jadi, material sebenarnya punya panduan tentang hal ini.
大きなサーフェスは明るくなりすぎるので
Disebutkan agar tidak menggunakan warna yang begitu terang
明るい色は避けるのが無難です
untuk permukaan besar karena terlalu terang bagi pengguna.
理想はこのように
Yang Anda inginkan adalah yang seperti ini,
ずっとダークで落ち着いた色調です
nuansa warna yang lebih gelap dan redup, yang sebenarnya
ダークテーマを使う目的に合っています
tidak sesuai dengan tujuan pengguna masuk ke tema gelap.
実際には ライトのcolorPrimaryと
Sekarang, yang akan kita lakukan di sini adalah beralih antara colorPrimary
ダークのcolorSurfaceを切り替えます
untuk tema terang dan colorSurface untuk tema gelap.
Androidライブラリの マテリアルデザインコンポーネントが
Untungnya, komponen desain material untuk library Android
標準でサポートしています
punya dukungan bawaan untuk hal ini.
colorPrimarySurfaceという
Ada atribut baru bernama colorPrimarySurface, yang
新しい属性がエイリアスの役目をします
melakukan pembuatan alias untuk Anda.
またビルトインのスタイルがいくつかあり
Juga ada sejumlah gaya bawaan,
ActionBarなどを使うと
ActionBar, semua yang dicantumkan di sini,
自動的にこのようになります
Anda bisa gunakan gaya ini dan semua akan dilakukan
既定のビュースタイル属性を使えます
otomatis untuk Anda. Kita dapat menggunakan atribut gaya tampilan default.
BottomNavigationViewで
Jadi, kita akan menetapkannya agar semua tampilan navigasi bawah
必ずPrimarySurfaceを使うように設定すると
menggunakan versi permukaan primer.
ライトでもダークでも 望み通りのスタイルになります
Lalu hasilnya seperti ini. Terlepas dari apakah dalam mode terang atau gelap, kita akan memperoleh gaya aktual yang kita mau.
ダークテーマを詳しく見ると
Mari kita gali tema gelap lebih dalam,
実は複数のサーフェスがあります
Anda bisa lihat di sini bahwa ada beberapa permukaan. [TIDAK TERDENGAR]
カードと BottomNavigationViewの２つがあり
Di sini ada dua permukaan, satu adalah kartu,
色が若干異なりますが
satunya tampilan navigasi bawah, dan warnanya sedikit berbeda.
共にcolorSurfaceを使っています
Tapi, saat kita amati gayanya, keduanya memakai atribut colorSurface sama.
これがElevation Overlayです
Kenapa? Itu karena overlay elevasi.
ライトテーマは明るいので影が見えますが
Jadi, di tema terang, bayangan sebenarnya menghilangkan ketiadaan cahaya sehingga dapat dilihat.
ダークテーマは暗いので影はよく見えません
Di tema gelap, Anda tidak dapat melihat bayangan, Anda tidak dapat melihat bayangan dengan cukup jelas karena gelap.
解決策としてマテリアルには
Jadi, material punya cara baru,
Elevation Overlayがあります
solusi baru untuk mengatasinya, yaitu overlay elevasi.
このように ダークなサーフェスが明るくなります
Saat permukaan gelap memperoleh cahaya, overlay elevasi mencerahkannya. Itulah efek elevasi.
これらがElevation Overlayを
Sejumlah widget, material, dan komponen
サポートしています
mendukung overlay elevasi, seperti yang satu ini.
時間がないのでこれは飛ばします
Dan kita akan melewatinya karena tak ada waktu lagi.
Githubに掲載しておきます
Tapi, Anda bisa lihat nanti.
Elevation Overlayを使った
Kami akan memposting [TIDAK TERDENGAR] ini di GitHub
カスタムビューです
agar Anda bisa membacanya, tampilan kustom untuk overlay elevasi.
ライトとダークで変化するテーマが
Dan tujuannya adalah saat Anda memiliki tema,
とてもコンパクトになります
tujuannya agar tema yang bervariasi antara terang dan gelap sangatlah kecil.
このサンプルには属性が７つあります
Kita sudah punya sampel tujuh atribut.
こういう風にできていれば大丈夫です
Anda melakukan hal yang benar jika mendapatkan sesuatu seperti ini.
時間がないのでまとめは飛ばします
Dan kita akan lewati bagian ringkasan karena tak ada waktu lagi. [TERTAWA]
これも飛ばします
Kita juga akan melewati ini. [TERTAWA]
ありがとうございました
Terima kasih. [BERSORAK, TEPUK TANGAN] [MUSIK DIPUTAR]
Similar videos:

The Complete COLOR GRADING Tutorial for Premiere Pro: CINEMATIC FILM LOOK | Cinecom.net
Cinecom.net
1.3M views 37.3K likes 298 dislikes 17 Feb 201732% match

Android Dev Summit 2019 - Watch all of the talks now!
Android Developers
3.6M views 103 likes -1 dislikes 26 Nov 201931% match

Learning Functional Programming with JavaScript - Anjana Vakil - JSUnconf
JSConf
2.2M views 47.5K likes 1.5K dislikes 14 Jun 201631% match



Which iPhone Should You Choose in 2019?
zollotech
3.2M views 32.8K likes -1 dislikes 08 Jan 201931% match

#1 Tip to Effective Melodic Guitar Soloing - Steve Stine Guitar Lessons
Steve Stine Guitar Lessons
834.6K views 19.3K likes 245 dislikes 20 Mar 201831% match

Nikon Z6 FULL FRAME RAW : Should you upgrade? How to grade it in FCPX
Barron Gaillard
641 views 27 likes 5 dislikes 10 Feb 202031% match

Patterns for privacy
Chrome for Developers
4.6K views 105 likes 10 dislikes 23 Dec 202031% match

✏️ How To Design A Modern Logo | Start To Finish
Will Paterson
1.9M views 30.2K likes 1.9K dislikes 06 Jun 201731% match

How to make TWITCH Panels - Blender View Layers Tutorial - Vlog Update - FREE Twitch Panels !
jenni
166 views 14 likes 3 dislikes 05 Apr 202030% match


"Painterly" Oil and Acrylic Brushes for Procreate - Complete Walkthrough and Brush Demos
Alaina Jensen
11.5K views 324 likes 0 dislikes 28 Jan 202130% match


The Sims Mobile Treasure Hunt COMPLETE WALKTHROUGH of NEW live event
RachybopGaming
4.1K views 124 likes 4 dislikes 22 Sep 202030% match

5 Tips to EDIT Better in LUMAFUSION 2.4
RobHK
8.7K views 352 likes 13 dislikes 07 Sep 202030% match


5,000 BTU Candle Camper Heater - UCO Candlelier Lantern, Heat your camper: RV Van Car SUV.
Tennessee Typewriter
988.5K views 13.1K likes 830 dislikes 31 Dec 201730% match

Material Design Components: Live Q&A - MAD Skills
Android Developers
9.5K views 264 likes 21 dislikes 10 Dec 202030% match

How I do Cinematic Color Grading in Shotcut the Easy and Lazy Way (FREE LUTS)
Ben Espanto
6.9K views 332 likes 6 dislikes 25 Aug 202030% match


Coding Challenge #31: Flappy Bird
The Coding Train
1.1M views 19.5K likes 537 dislikes 10 Aug 201629% match

21 Inch DIY Subwoofer build guide! The best GSG sub for your Home Theater.
Jiles McCoy
307.9K views 5K likes 340 dislikes 21 Dec 201929% match

2018 Jeep Wrangler JL vs Jeep Wrangler JK - Official Comparison & Review
ExtremeTerrain Jeep
763.5K views 5K likes 233 dislikes 18 Jan 201829% match

The Sims mobile HAUNTED HALLOWEEN UPDATE 2020 [Live events, packs, &more!]
RachybopGaming
8.3K views 205 likes 6 dislikes 24 Oct 202029% match

Data Types
CS50
61.8K views 185 likes 7 dislikes 07 Oct 201529% match










Power Query Defaults To Bankers Rounding Featuring Celia Alves - 2392
MrExcel.com
1.8K views 108 likes 2 dislikes 09 Mar 202129% match



Needle felting with flat felt - Full tutorial with Lisa Pay
PayItForward
7.7K views 659 likes 5 dislikes 22 Dec 202029% match


How to Get Early Kills - PUBG Tips
Otzdarva
1.7M views 47.6K likes 1.3K dislikes 14 Oct 201729% match

Tips to Learn the Notes on your Guitar | Fretboard Mastery | Steve Stine Guitar Lesson
Steve Stine Guitar Lessons
1.9M views 51.6K likes -1 dislikes 03 May 201929% match

DNA
Khan Academy
1.7M views 6.7K likes 293 dislikes 22 Sep 200929% match



Pointers
CS50
56.3K views 554 likes 12 dislikes 07 Oct 201529% match










Get PAID $1,000/Day Completely DONE FOR YOU To Make Money Online With No Effort! (5 Minute Setup)
Smart Money Tactics
26.2K views 1.5K likes 56 dislikes 12 Jan 202128% match









Raster/Vector Charts and NYC Harbor Tour
TimBatSea
4.8K views 440 likes 3 dislikes 27 Jul 202028% match

INSANE HEALING WINS! Sun Tzu Pairings Infantry Battle Guide | Rise of Kingdoms
Shinchi42
14.6K views 495 likes 25 dislikes 19 Nov 202028% match


The Sims Mobile Spring Cleaning March 2021 Update Schedule!
RachybopGaming
13.8K views 303 likes 0 dislikes 04 Mar 202128% match



Settings Privacy About Contact Donate