Fix some localization issues. Remove spurious pages at intl/lang/design/index.html that were dupes of intl/lang/design/material/index.html. Remove empty <lang>-lang attrs that caused display errors. Remove some unnecessary TOC items.
Bug: 26715261 Change-Id: Ibc841ae7e0aebfe36ff82efd95211527d0bf3871
This commit is contained in:
Dirk Dougherty
@@ -1,186 +0,0 @@
|
||||
page.title=Material Design para Android
|
||||
page.tags=Material,design
|
||||
page.type=diseño
|
||||
page.image=images/cards/design-material-for-android_2x.jpg
|
||||
|
||||
@jd:body
|
||||
|
||||
<!-- developer docs box -->
|
||||
<a class="notice-developers right" href="{@docRoot}training/material/index.html">
|
||||
<div>
|
||||
<h3>Documentos para desarrolladores</h3>
|
||||
<p>Creación de aplicaciones con Material Design</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
|
||||
<div>
|
||||
<h3>Video</h3>
|
||||
<p>Introducción a Material Design</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
|
||||
<div>
|
||||
<h3>Video</h3>
|
||||
<p>Papel y tinta: los materiales más importantes</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
|
||||
<div>
|
||||
<h3>Video</h3>
|
||||
<p>Material Design en la aplicación Google I/O</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<p itemprop="description">Material Design es una guía integral para el diseño visual, de movimientos y
|
||||
de interacción en distintas plataformas y dispositivos. Android ahora es compatible con las aplicaciones de
|
||||
Material Design. Para usar Material Design en tus aplicaciones de Android, sigue las pautas descritas
|
||||
en la <a href="http://www.google.com/design/spec">especificación de Material Design</a> y usa los
|
||||
nuevos componentes y funcionalidades disponibles en Android 5.0 (nivel de API 21) y versiones posteriores.</p>
|
||||
|
||||
<p>En Android, se proporcionan los siguientes elementos que te permitirán crear aplicaciones en Material Design:</p>
|
||||
|
||||
<ul>
|
||||
<li>un tema nuevo;</li>
|
||||
<li>nuevos widgets para vistas complejas;</li>
|
||||
<li>nuevas API (interfaces de programación de aplicaciones) para sombras y animaciones personalizadas.</li>
|
||||
</ul>
|
||||
|
||||
<p>Para obtener más información sobre la implementación de Material Design en Android, consulta
|
||||
<a href="{@docRoot}training/material/index.html">Creación de aplicaciones con Material Design</a>.</p>
|
||||
|
||||
|
||||
<h3>Tema Material</h3>
|
||||
|
||||
<p>El tema Material te ofrece un nuevo estilo para tu aplicación, widgets del sistema que te permiten configurar
|
||||
la paleta de colores y animaciones predeterminadas para información táctil y transiciones de actividades.</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">Tema Dark Material</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">Tema Light Material</p>
|
||||
</div>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>Para obtener más información, consulta <a href="{@docRoot}training/material/theme.html">Uso del tema
|
||||
Material</a>.</p>
|
||||
|
||||
|
||||
<h3>Listas y tarjetas</h3>
|
||||
|
||||
<p>Android proporciona dos widgets nuevos para mostrar listas y tarjetas con estilos y
|
||||
animaciones de Material Design:</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
|
||||
<p>El nuevo widget <code>RecyclerView</code> es una versión más acoplable de <code>ListView</code>
|
||||
que admite diferentes tipos de diseños y proporciona mejoras en el rendimiento.</p>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
|
||||
<p>El nuevo widget <code>CardView</code> te permite mostrar extractos de información importante dentro de
|
||||
tarjetas que tienen apariencia y estilo coherentes.</p>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>Para obtener más información, consulta <a href="{@docRoot}training/material/lists-cards.html">Creación de listas
|
||||
y tarjetas</a>.</p>
|
||||
|
||||
|
||||
<h3>Visualización de sombras</h3>
|
||||
|
||||
<p>Además de las propiedades X e Y, las vistas de Android ahora poseen una
|
||||
propiedad Z. Esta propiedad nueva representa la elevación de una vista, que determina lo siguiente:</p>
|
||||
|
||||
<ul>
|
||||
<li>El tamaño de la sombra: las vistas con valores Z más elevados proyectan sombras más grandes.</li>
|
||||
<li>El orden del dibujo: las vistas con valores Z más elevados aparecen sobre las otras vistas.</li>
|
||||
</ul>
|
||||
|
||||
<div style="width:290px;margin-left:35px;float:right">
|
||||
<div class="framed-nexus5-port-span-5">
|
||||
<video class="play-on-hover" autoplay>
|
||||
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.webm"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
|
||||
</video>
|
||||
</div>
|
||||
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
|
||||
<em>Para volver a reproducir la película, haz clic en la pantalla del dispositivo.</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Para obtener más información, consulta <a href="{@docRoot}training/material/shadows-clipping.html">Definición
|
||||
de vistas de recorte y sombras</a>.</p>
|
||||
|
||||
|
||||
<h3>Animaciones</h3>
|
||||
|
||||
<p>Las nuevas API de animaciones te permiten crear animaciones personalizadas para la información táctil en los controles de IU,
|
||||
además de realizar cambios en el estado de las vistas y transiciones entre actividades.</p>
|
||||
|
||||
<p>Estas API te permiten hacer lo siguiente:</p>
|
||||
|
||||
<ul>
|
||||
<li style="margin-bottom:15px">
|
||||
responder a los eventos táctiles de tus vistas mediante animaciones de <strong>información táctil</strong>;
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
ocultar y mostrar vistas con animaciones con <strong>efecto circular</strong>;
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
alternar entre actividades con animaciones personalizadas de <strong>transición de actividades</strong>;
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
crear animaciones más naturales con <strong>movimiento curvo</strong>;
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
animar los cambios en una o más propiedades de las vistas con las animaciones de <strong>cambio de estado de la vista</strong>;
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
mostrar animaciones en los <strong>elementos de diseño de la lista de estados</strong> entre los cambios de estado de las vistas.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Las animaciones de la información táctil se concentran en diferentes vistas estándar, como los botones. Las nuevas API
|
||||
te permiten personalizar estas animaciones y agregarlas a tus vistas personalizadas.</p>
|
||||
|
||||
<p>Para obtener más información, consulta <a href="{@docRoot}training/material/animations.html">Definición de animaciones
|
||||
personalizadas</a>.</p>
|
||||
|
||||
|
||||
<h3>Elementos de diseño</h3>
|
||||
|
||||
<p>Estas nuevas capacidades para los elementos de diseño te permiten implementar aplicaciones de Material Design:</p>
|
||||
|
||||
<ul>
|
||||
<li>Los <strong>dibujables en vector</strong> se pueden escalar sin perder definición y son perfectos
|
||||
para los iconos de las aplicaciones de un solo color.</li>
|
||||
<li>El <strong>teñido de los dibujables</strong> te permite definir mapas de bits como máscaras alfa y pintarlos con
|
||||
un color durante el tiempo de ejecución.</li>
|
||||
<li>La <strong>extracción de color</strong> te permite extraer automáticamente colores prominentes de una
|
||||
imagen del mapa de bits.</li>
|
||||
</ul>
|
||||
|
||||
<p>Para obtener más información, consulta <a href="{@docRoot}training/material/drawables.html">Trabajo con
|
||||
elementos de diseño</a>.</p>
|
||||
@@ -1,186 +0,0 @@
|
||||
page.title=Desain Bahan untuk Android
|
||||
page.tags=Material,design
|
||||
page.type=desain
|
||||
page.image=images/cards/design-material-for-android_2x.jpg
|
||||
|
||||
@jd:body
|
||||
|
||||
<!-- developer docs box -->
|
||||
<a class="notice-developers right" href="{@docRoot}training/material/index.html">
|
||||
<div>
|
||||
<h3>Dokumen Pengembang</h3>
|
||||
<p>Membuat Aplikasi dengan Desain Bahan</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
|
||||
<div>
|
||||
<h3>Video</h3>
|
||||
<p>Pengantar Desain Bahan</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
|
||||
<div>
|
||||
<h3>Video</h3>
|
||||
<p>Kertas dan Tinta: Bahan Penting</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
|
||||
<div>
|
||||
<h3>Video</h3>
|
||||
<p>Desain Bahan di Aplikasi Google I/O</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<p itemprop="description">Desain bahan adalah panduan komprehensif untuk desain visual, gerak, dan
|
||||
interaksi lintas platform dan perangkat. Android kini menyertakan dukungan untuk
|
||||
aplikasi desain bahan. Untuk menggunakan desain bahan di aplikasi Android, ikuti panduan yang didefinisikan
|
||||
dalam <a href="http://www.google.com/design/spec">spesifikasi desain bahan</a> dan gunakan
|
||||
komponen dan fungsionalitas baru yang tersedia di Android 5.0 (API level 21) ke atas.</p>
|
||||
|
||||
<p>Android menyediakan elemen berikut untuk membangun aplikasi desain bahan:</p>
|
||||
|
||||
<ul>
|
||||
<li>Tema baru</li>
|
||||
<li>Widget baru untuk tampilan yang kompleks</li>
|
||||
<li>API baru untuk animasi dan bayangan custom</li>
|
||||
</ul>
|
||||
|
||||
<p>Untuk informasi selengkapnya tentang mengimplementasikan desain bahan pada Android, lihat
|
||||
<a href="{@docRoot}training/material/index.html">Membuat Aplikasi dengan Desain Bahan</a>.</p>
|
||||
|
||||
|
||||
<h3>Tema Bahan</h3>
|
||||
|
||||
<p>Tema bahan menyediakan gaya baru untuk aplikasi Anda, widget sistem yang memungkinkan Anda mengatur
|
||||
palet warnanya, dan animasi default untuk umpan balik sentuh dan transisi aktivitas.</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">Tema bahan gelap</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">Tema bahan terang</p>
|
||||
</div>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/theme.html">Menggunakan Tema
|
||||
Bahan</a>.</p>
|
||||
|
||||
|
||||
<h3>Daftar dan Kartu</h3>
|
||||
|
||||
<p>Android menyediakan dua widget baru untuk menampilkan kartu dan daftar dengan gaya desain bahan
|
||||
dan animasi:</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
|
||||
<p>Widget <code>RecyclerView</code> baru adalah versi <code>ListView</code>
|
||||
yang lebih mudah dimasukkan dan mendukung beragam tipe layout serta memberikan peningkatan kinerja.</p>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
|
||||
<p>Widget <code>CardView</code> baru memungkinkan Anda menampilkan potongan informasi penting dalam
|
||||
kartu yang memiliki tampilan dan cara kerja yang konsisten.</p>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/lists-cards.html">Membuat Daftar
|
||||
dan Kartu</a>.</p>
|
||||
|
||||
|
||||
<h3>Bayangan Tampilan</h3>
|
||||
|
||||
<p>Selain properti X dan Y, tampilan di Android kini memiliki
|
||||
properti Z. Properti baru ini mewakili ketinggian tampilan, yang menentukan:</p>
|
||||
|
||||
<ul>
|
||||
<li>Ukuran bayangan: tampilan dengan nilai Z lebih tinggi menghasilkan bayangan lebih besar.</li>
|
||||
<li>Urutan penggambaran: tampilan dengan nilai Z lebih tinggi muncul di atas tampilan lainnya.</li>
|
||||
</ul>
|
||||
|
||||
<div style="width:290px;margin-left:35px;float:right">
|
||||
<div class="framed-nexus5-port-span-5">
|
||||
<video class="play-on-hover" autoplay>
|
||||
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.webm"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
|
||||
</video>
|
||||
</div>
|
||||
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
|
||||
<em>Untuk memutar ulang film, klik layar perangkat</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/shadows-clipping.html">Mendefinisikan
|
||||
Bayangan dan Memangkas Tampilan</a>.</p>
|
||||
|
||||
|
||||
<h3>Animasi</h3>
|
||||
|
||||
<p>API animasi baru memungkinkan Anda membuat animasi custom untuk umpan balik sentuh dalam kontrol UI,
|
||||
perubahan status tampilan, dan transisi aktivitas.</p>
|
||||
|
||||
<p>API ini memungkinkan Anda:</p>
|
||||
|
||||
<ul>
|
||||
<li style="margin-bottom:15px">
|
||||
Merespons kejadian sentuh dalam tampilan Anda dengan animasi <strong>umpan balik sentuh</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Menyembunyikan dan memperlihatkan tampilan dengan animasi <strong>membuka melingkar</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Peralihan antar aktivitas dengan animasi <strong>transisi aktivitas</strong> custom.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Membuat animasi yang lebih alami dengan <strong>gerak melengkung</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Menganimasikan perubahan dalam satu atau beberapa properti tampilan dengan animasi <strong>perubahan status tampilan</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Menampilkan animasi di <strong>drawable daftar status</strong> di antara perubahan status tampilan.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Animasi umpan balik sentuh dimasukkan ke dalam beberapa tampilan standar, misalnya tombol. API baru
|
||||
ini memungkinkan Anda menyesuaikan animasi ini dan menambahkannya ke tampilan custom Anda.</p>
|
||||
|
||||
<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/animations.html">Mendefinisikan Animasi
|
||||
Custom</a>.</p>
|
||||
|
||||
|
||||
<h3>Drawable</h3>
|
||||
|
||||
<p>Kemampuan baru untuk drawable ini membantu Anda mengimplementasikan aplikasi desain bahan:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Drawable vektor</strong> bisa diubah skalanya tanpa kehilangan definisi dan cocok
|
||||
untuk ikon satu-warna dalam-aplikasi.</li>
|
||||
<li><strong>Pewarnaan drawable</strong> memungkinkan Anda mendefinisikan bitmap sebagai alpha-mask dan mewarnainya
|
||||
saat runtime.</li>
|
||||
<li><strong>Ekstraksi warna</strong> memungkinkan Anda mengekstrak warna mencolok secara otomatis dari
|
||||
gambar bitmap.</li>
|
||||
</ul>
|
||||
|
||||
<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/drawables.html">Bekerja dengan
|
||||
Drawable</a>.</p>
|
||||
@@ -1,4 +1,4 @@
|
||||
page.title=Desain Bahan untuk Android
|
||||
page.title=Material Design for Android
|
||||
page.tags=Material,design
|
||||
page.type=design
|
||||
page.image=images/cards/design-material-for-android_2x.jpg
|
||||
@@ -25,11 +25,7 @@ page.image=images/cards/design-material-for-android_2x.jpg
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
|
||||
<div>
|
||||
<h3>Video</h3>
|
||||
<<<<<<< HEAD
|
||||
<p>Kertas dan Tinta: Bahan Penting</p>
|
||||
=======
|
||||
<p>Kertas dan Tinta: Bahan-Bahan Penting</p>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
</div>
|
||||
</a>
|
||||
|
||||
@@ -37,17 +33,12 @@ page.image=images/cards/design-material-for-android_2x.jpg
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
|
||||
<div>
|
||||
<h3>Video</h3>
|
||||
<<<<<<< HEAD
|
||||
<p>Desain Bahan di Aplikasi Google I/O</p>
|
||||
=======
|
||||
<p>Desain Bahan dalam Aplikasi Google I/O</p>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<<<<<<< HEAD
|
||||
<p itemprop="description">Desain bahan adalah panduan komprehensif untuk desain visual, gerak, dan
|
||||
interaksi lintas platform dan perangkat. Android kini menyertakan dukungan untuk
|
||||
aplikasi desain bahan. Untuk menggunakan desain bahan di aplikasi Android, ikuti panduan yang didefinisikan
|
||||
@@ -60,20 +51,6 @@ komponen dan fungsionalitas baru yang tersedia di Android 5.0 (API level 21) ke
|
||||
<li>Tema baru</li>
|
||||
<li>Widget baru untuk tampilan yang kompleks</li>
|
||||
<li>API baru untuk animasi dan bayangan custom</li>
|
||||
=======
|
||||
<p itemprop="description">Desain bahan adalah panduan komprehensif untuk desain visual, gerakan, dan
|
||||
interaksi lintas platform dan perangkat. Android sekarang memasukkan dukungan untuk
|
||||
aplikasi desain bahan. Untuk menggunakan desain bahan dalam aplikasi Android Anda, ikuti panduan yang didefinisikan
|
||||
dalam <a href="http://www.google.com/design/spec">spesifikasi desain bahan</a> dan gunakan
|
||||
komponen dan fungsionalitas baru yang tersedia dalam Android 5.0 (API level 21) dan yang di atasnya.</p>
|
||||
|
||||
<p>Android menyediakan elemen-elemen berikut bagi Anda untuk membuat aplikasi desain bahan:</p>
|
||||
|
||||
<ul>
|
||||
<li>Tema baru</li>
|
||||
<li>Widget baru untuk tampilan kompleks</li>
|
||||
<li>API baru untuk bayangan dan animasi custom</li>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
</ul>
|
||||
|
||||
<p>Untuk informasi selengkapnya tentang mengimplementasikan desain bahan pada Android, lihat
|
||||
@@ -83,11 +60,7 @@ komponen dan fungsionalitas baru yang tersedia dalam Android 5.0 (API level 21)
|
||||
<h3>Tema Bahan</h3>
|
||||
|
||||
<p>Tema bahan menyediakan gaya baru untuk aplikasi Anda, widget sistem yang memungkinkan Anda mengatur
|
||||
<<<<<<< HEAD
|
||||
palet warnanya, dan animasi default untuk umpan balik sentuh dan transisi aktivitas.</p>
|
||||
=======
|
||||
palet warna, dan animasi default untuk umpan balik sentuh serta transisi aktivitas.</p>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
@@ -119,7 +92,6 @@ dan animasi:</p>
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
|
||||
<<<<<<< HEAD
|
||||
<p>Widget <code>RecyclerView</code> baru adalah versi <code>ListView</code>
|
||||
yang lebih mudah dimasukkan dan mendukung beragam tipe layout serta memberikan peningkatan kinerja.</p>
|
||||
</div>
|
||||
@@ -127,15 +99,6 @@ dan animasi:</p>
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
|
||||
<p>Widget <code>CardView</code> baru memungkinkan Anda menampilkan potongan informasi penting dalam
|
||||
kartu yang memiliki tampilan dan cara kerja yang konsisten.</p>
|
||||
=======
|
||||
<p>Widget <code>RecyclerView</code> baru adalah versi yang lebih mudah dimasukkan untuk <code>ListView</code>
|
||||
yang mendukung tipe layout berbeda dan memberikan peningkatan kinerja.</p>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
|
||||
<p>Widget <code>CardView</code> baru memungkinkan Anda menampilkan bagian informasi penting di dalam
|
||||
kartu yang memiliki tampilan dan gaya konsisten.</p>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
@@ -146,21 +109,12 @@ dan Kartu</a>.</p>
|
||||
|
||||
<h3>Bayangan Tampilan</h3>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<p>Selain properti X dan Y, tampilan di Android kini memiliki
|
||||
properti Z. Properti baru ini mewakili ketinggian tampilan, yang menentukan:</p>
|
||||
|
||||
<ul>
|
||||
<li>Ukuran bayangan: tampilan dengan nilai Z lebih tinggi menghasilkan bayangan lebih besar.</li>
|
||||
<li>Urutan penggambaran: tampilan dengan nilai Z lebih tinggi muncul di atas tampilan lainnya.</li>
|
||||
=======
|
||||
<p>Selain properti X dan Y, tampilan dalam Android sekarang memiliki
|
||||
properti Z. Properti baru ini mewakili ketinggian pandangan, yang menentukan:</p>
|
||||
|
||||
<ul>
|
||||
<li>Ukuran bayangan: tampilan dengan nilai Z lebih tinggi membentuk bayangan yang lebih besar.</li>
|
||||
<li>Urutan penggambaran: tampilan dengan nilai Z lebih tinggi akan muncul di atas tampilan lain.</li>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
</ul>
|
||||
|
||||
<div style="width:290px;margin-left:35px;float:right">
|
||||
@@ -172,36 +126,23 @@ properti Z. Properti baru ini mewakili ketinggian pandangan, yang menentukan:</p
|
||||
</video>
|
||||
</div>
|
||||
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
|
||||
<<<<<<< HEAD
|
||||
<em>Untuk memutar ulang film, klik layar perangkat</em>
|
||||
=======
|
||||
<em>Untuk memutar ulang film, klik pada layar perangkat</em>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/shadows-clipping.html">Mendefinisikan
|
||||
<<<<<<< HEAD
|
||||
Bayangan dan Memangkas Tampilan</a>.</p>
|
||||
=======
|
||||
Bayangan dan Memotong Tampilan</a>.</p>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
|
||||
|
||||
<h3>Animasi</h3>
|
||||
|
||||
<p>API animasi baru memungkinkan Anda membuat animasi custom untuk umpan balik sentuh dalam kontrol UI,
|
||||
<<<<<<< HEAD
|
||||
perubahan status tampilan, dan transisi aktivitas.</p>
|
||||
=======
|
||||
perubahan dalam status tampilan, dan transisi aktivitas.</p>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
|
||||
<p>API ini memungkinkan Anda:</p>
|
||||
|
||||
<ul>
|
||||
<li style="margin-bottom:15px">
|
||||
<<<<<<< HEAD
|
||||
Merespons kejadian sentuh dalam tampilan Anda dengan animasi <strong>umpan balik sentuh</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
@@ -212,38 +153,17 @@ Peralihan antar aktivitas dengan animasi <strong>transisi aktivitas</strong> cus
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Membuat animasi yang lebih alami dengan <strong>gerak melengkung</strong>.
|
||||
=======
|
||||
Merespons terjadinya sentuhan dalam tampilan Anda dengan animasi <strong>umpan balik sentuh</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Menyembunyikan dan menampilkan tampilan dengan animasi <strong>penampakan sirkuler</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Beralih antar aktivitas dengan animasi <strong>transisi aktivitas</strong> custom.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Membuat animasi yang lebih alami dengan <strong>gerakan melingkar</strong>.
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Menganimasikan perubahan dalam satu atau beberapa properti tampilan dengan animasi <strong>perubahan status tampilan</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
<<<<<<< HEAD
|
||||
Menampilkan animasi di <strong>drawable daftar status</strong> di antara perubahan status tampilan.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Animasi umpan balik sentuh dimasukkan ke dalam beberapa tampilan standar, misalnya tombol. API baru
|
||||
ini memungkinkan Anda menyesuaikan animasi ini dan menambahkannya ke tampilan custom Anda.</p>
|
||||
=======
|
||||
Menampilkan animasi dalam <strong>drawable daftar status</strong> di antara perubahan status tampilan.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Animasi umpan balik sentuh dimasukkan ke dalam beberapa tampilan standar, misalnya tombol. API
|
||||
baru ini memungkinkan Anda menyesuaikan animasi ini dan menambahkannya ke tampilan custom.</p>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
|
||||
<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/animations.html">Mendefinisikan Animasi
|
||||
Custom</a>.</p>
|
||||
@@ -254,7 +174,6 @@ Custom</a>.</p>
|
||||
<p>Kemampuan baru untuk drawable ini membantu Anda mengimplementasikan aplikasi desain bahan:</p>
|
||||
|
||||
<ul>
|
||||
<<<<<<< HEAD
|
||||
<li><strong>Drawable vektor</strong> bisa diubah skalanya tanpa kehilangan definisi dan cocok
|
||||
untuk ikon satu-warna dalam-aplikasi.</li>
|
||||
<li><strong>Pewarnaan drawable</strong> memungkinkan Anda mendefinisikan bitmap sebagai alpha-mask dan mewarnainya
|
||||
@@ -264,15 +183,4 @@ gambar bitmap.</li>
|
||||
</ul>
|
||||
|
||||
<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/drawables.html">Bekerja dengan
|
||||
=======
|
||||
<li><strong>Drawable vektor</strong> dapat diskalakan tanpa kehilangan ketajaman dan cocok
|
||||
untuk ikon satu-warna dalam-aplikasi.</li>
|
||||
<li><strong>Pewarnaan drawable</strong> memungkinkan Anda mendefinisikan bitmap sebagai
|
||||
alpha-mask dan mewarnainya dengan satu warna saat runtime.</li>
|
||||
<li><strong>Ekstraksi warna</strong> memungkinkan Anda secara otomatis mengekstrak warna
|
||||
penting dari gambar bitmap.</li>
|
||||
</ul>
|
||||
|
||||
<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/drawables.html">Menggunakan
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
Drawable</a>.</p>
|
||||
|
||||
@@ -1,186 +0,0 @@
|
||||
page.title=Android のマテリアル デザイン
|
||||
page.tags=Material,design
|
||||
page.type=デザイン
|
||||
page.image=images/cards/design-material-for-android_2x.jpg
|
||||
|
||||
@jd:body
|
||||
|
||||
<!-- developer docs box -->
|
||||
<a class="notice-developers right" href="{@docRoot}training/material/index.html">
|
||||
<div>
|
||||
<h3>デベロッパー ドキュメント</h3>
|
||||
<p>マテリアル デザインを使用したアプリの作成</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
|
||||
<div>
|
||||
<h3>ビデオ</h3>
|
||||
<p>マテリアル デザインについて</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
|
||||
<div>
|
||||
<h3>ビデオ</h3>
|
||||
<p>紙とインク: 重要なマテリアル</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
|
||||
<div>
|
||||
<h3>ビデオ</h3>
|
||||
<p>Google I/O アプリのマテリアル デザイン</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<p itemprop="description">マテリアル デザインは、複数のプラットフォームや端末の視覚、モーション、インタラクション デザインの包括的な指針です。
|
||||
Android はマテリアル デザイン アプリに対応するようになりました。
|
||||
Android アプリでマテリアル デザインを使うには、<a href="http://www.google.com/design/spec">マテリアル デザインの仕様</a>で定義されているガイドラインに従い、Android 5.0（API レベル 21）以降の新しいコンポーネントや機能を使用します。
|
||||
|
||||
</p>
|
||||
|
||||
<p>Android にはマテリアル デザインのアプリのビルドに使用できる次の要素が用意されています。</p>
|
||||
|
||||
<ul>
|
||||
<li>新しいテーマ</li>
|
||||
<li>複雑なビューに対応した新しいウィジェット</li>
|
||||
<li>カスタムのシャドウとアニメーション用の新しい API</li>
|
||||
</ul>
|
||||
|
||||
<p>Android でのマテリアル デザインの実装については、<a href="{@docRoot}training/material/index.html">マテリアル デザインを使用したアプリの作成</a>をご覧ください。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>マテリアル テーマ</h3>
|
||||
|
||||
<p>マテリアル テーマには、アプリの新しいスタイルであるシステム ウィジェットがあります。このシステム ウィジェットを使うと、システム ウィジェットのカラーパレットを設定したり、タッチ フィードバックやアクティビティ遷移のためのデフォルトのアニメーションを設定したりできます。
|
||||
</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">暗い色のマテリアル テーマ</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">明るい色のマテリアル テーマ</p>
|
||||
</div>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>詳細については、<a href="{@docRoot}training/material/theme.html">マテリアル テーマの使用</a>をご覧ください。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>リストとカード</h3>
|
||||
|
||||
<p>Android はマテリアル デザインのスタイルとアニメーションを含むカードとリストを表示する、次のような新しい 2 つのウィジェットを提供しています。
|
||||
</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
|
||||
<p>新しい <code>RecyclerView</code> ウィジェットは <code>ListView</code>
|
||||
に比べてさらに柔軟に機能を追加できるようになっており、さまざまなレイアウト タイプをサポートしてパフォーマンスを向上させます。</p>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
|
||||
<p>新しい <code>CardView</code> ウィジェットではカードの外観や操作性が統一され、カード内の重要な情報を表示できるようになりました。
|
||||
</p>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>詳細については、<a href="{@docRoot}training/material/lists-cards.html">リストとカードの作成</a>をご覧ください。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>シャドウの表示</h3>
|
||||
|
||||
<p>Android のビューに、X と Y のプロパティに加えて Z プロパティが追加されました。
|
||||
この新しいプロパティはビューのエレベーションを表し、次の要素を指定します。</p>
|
||||
|
||||
<ul>
|
||||
<li>シャドウのサイズ: ビューの Z 値が高いほどシャドウのサイズが大きくなります。</li>
|
||||
<li>描画順序: ビューの Z 値が高いほど他のビューの前面に表示されます。</li>
|
||||
</ul>
|
||||
|
||||
<div style="width:290px;margin-left:35px;float:right">
|
||||
<div class="framed-nexus5-port-span-5">
|
||||
<video class="play-on-hover" autoplay>
|
||||
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.webm"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
|
||||
</video>
|
||||
</div>
|
||||
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
|
||||
<em>端末の画像をクリックすると動画を再生できます</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>詳細については、<a href="{@docRoot}training/material/shadows-clipping.html">シャドウとクリッピング ビューの定義</a>をご覧ください。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>アニメーション</h3>
|
||||
|
||||
<p>新しいアニメーション API を使って、UI コントロールのタッチ フィードバック、ビューの状態変化、アクティビティ間の遷移時のカスタム アニメーションを作成できます。
|
||||
</p>
|
||||
|
||||
<p>この API で次のようなことができます。</p>
|
||||
|
||||
<ul>
|
||||
<li style="margin-bottom:15px">
|
||||
<strong>タッチ フィードバック</strong> アニメーションでビューのタップ イベントに応答する。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
<strong>円形状の出現</strong>アニメーションを使ってビューを表示したり、非表示にしたりする。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
カスタムの<strong>アクティビティ遷移</strong>アニメーションを使ってアクティビティを切り替える。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
<strong>曲線モーション</strong>を使ってより自然なアニメーションを作成する。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
<strong>ビューの状態変化</strong>アニメーションを使って 1 つ以上のビュー プロパティを変化させるアニメーションを作成する。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
ビューの状態を変化させるアニメーションを<strong>状態リスト ドローアブル</strong>で表示します。
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>タッチ フィードバック アニメーションはボタンなどの複数の標準ビューに組み込まれています。新しい API を使うと、これらのアニメーションをカスタマイズして、カスタム ビューに追加できます。
|
||||
</p>
|
||||
|
||||
<p>詳細については、<a href="{@docRoot}training/material/animations.html">カスタム アニメーションの定義</a>をご覧ください。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>ドローアブル</h3>
|
||||
|
||||
<p>次の新しいドローアブル機能を使用してマテリアル デザイン アプリを実装できます。</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>ベクター型ドローアブル</strong>は定義を失わずにスケールできるので、単色のアプリ アイコンに最適です。
|
||||
</li>
|
||||
<li><strong>ドローアブルによる着色</strong>を使ってビットマップをアルファ マスクとして定義し、実行時にそのビットマップに色付けできます。
|
||||
</li>
|
||||
<li><strong>色の抽出</strong>を使ってビットマップ画像から代表色を自動的に抽出できます。
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>詳細については、<a href="{@docRoot}training/material/drawables.html">ドローアブルの使用</a>をご覧ください。
|
||||
</p>
|
||||
@@ -1,186 +0,0 @@
|
||||
page.title=Android용 머티리얼 디자인
|
||||
page.tags=Material,design
|
||||
page.type=design
|
||||
page.image=images/cards/design-material-for-android_2x.jpg
|
||||
|
||||
@jd:body
|
||||
|
||||
<!-- developer docs box -->
|
||||
<a class="notice-developers right" href="{@docRoot}training/material/index.html">
|
||||
<div>
|
||||
<h3>개발자 문서</h3>
|
||||
<p>머티리얼 디자인으로 앱 생성</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
|
||||
<div>
|
||||
<h3>비디오</h3>
|
||||
<p>머티리얼 디자인 소개</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
|
||||
<div>
|
||||
<h3>비디오</h3>
|
||||
<p>종이와 잉크: 중요한 머티리얼</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
|
||||
<div>
|
||||
<h3>비디오</h3>
|
||||
<p>Google I/O 앱 내 머티리얼 디자인</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<p itemprop="description">머티리얼 디자인은 플랫폼 및 기기 전반의 표현 방식, 모션 및
|
||||
상호 작용 디자인에 대한 종합적인 지침입니다. Android에는 이제
|
||||
머티리얼 디자인 앱에 대한 지원이 포함되었습니다. Android 앱에서 머티리얼 디자인을 사용하려면 <a href="http://www.google.com/design/spec">머티리얼 디자인 사양</a>에
|
||||
규정되어 있는 지침을 따르세요. 또한 Android 5.0(API 레벨 21) 이상에서 제공하는
|
||||
새 구성 요소 및 기능을 사용하세요.</p>
|
||||
|
||||
<p>Android는 머티리얼 디자인 앱을 구축하는 데 사용할 수 있는 다음 요소를 제공합니다.</p>
|
||||
|
||||
<ul>
|
||||
<li>새로운 테마</li>
|
||||
<li>복잡한 뷰를 위한 새로운 위젯</li>
|
||||
<li>사용자 지정 그림자 및 애니메이션을 위한 새로운 API</li>
|
||||
</ul>
|
||||
|
||||
<p>Android에서 머티리얼 디자인을 구현하는 방법에 대한 자세한 내용은
|
||||
<a href="{@docRoot}training/material/index.html">머티리얼 디자인으로 앱 생성</a>을 참조하세요.</p>
|
||||
|
||||
|
||||
<h3>머티리얼 테마</h3>
|
||||
|
||||
<p>머티리얼 테마는 앱에 사용할 수 있는 새로운 스타일, 색상표를
|
||||
설정할 수 있는 시스템 위젯, 그리고 터치 피드백 및 액티비티 전환을 위한 기본 애니메이션을 제공합니다.</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">어두운 머티리얼 테마</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">밝은 머티리얼 테마</p>
|
||||
</div>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>자세한 내용은 <a href="{@docRoot}training/material/theme.html">머티리얼
|
||||
테마 사용</a>을 참조하세요.</p>
|
||||
|
||||
|
||||
<h3>목록 및 카드</h3>
|
||||
|
||||
<p>Android는 머티리얼 디자인 스타일
|
||||
및 애니메이션으로 카드 및 목록을 표시하는 데 사용할 수 있는 두 개의 새로운 위젯을 제공합니다.</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
|
||||
<p>새로운 <code>RecyclerView</code> 위젯은 <code>ListView</code>의
|
||||
플러그 기능이 개선된 버전으로, 다양한 레이아웃 유형을 지원하고 향상된 성능을 제공합니다.</p>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
|
||||
<p>새로운 <code>CardView</code> 위젯은 일관적인 모양 및 느낌이 있는
|
||||
카드 내 정보의 중요한 부분을 표시할 수 있게 해줍니다.</p>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>자세한 내용은 <a href="{@docRoot}training/material/lists-cards.html">목록
|
||||
및 카드 생성</a>을 참조하세요.</p>
|
||||
|
||||
|
||||
<h3>뷰 그림자</h3>
|
||||
|
||||
<p>X 및 Y 속성과 더불어 이제 Android의 뷰에는 Z
|
||||
속성이 추가되었습니다. 이 새로운 속성은 다음을 결정하는 뷰의 엘리베이션을 나타냅니다.</p>
|
||||
|
||||
<ul>
|
||||
<li>그림자 크기: 뷰의 Z 값이 클수록 표시되는 그림자도 커집니다.</li>
|
||||
<li>그리기 순서: 뷰의 Z 값이 클수록 다른 뷰의 위에 표시됩니다.</li>
|
||||
</ul>
|
||||
|
||||
<div style="width:290px;margin-left:35px;float:right">
|
||||
<div class="framed-nexus5-port-span-5">
|
||||
<video class="play-on-hover" autoplay>
|
||||
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.webm"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
|
||||
</video>
|
||||
</div>
|
||||
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
|
||||
<em>영화를 재생하려면 기기 화면을 클릭하세요.</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>자세한 내용은 <a href="{@docRoot}training/material/shadows-clipping.html">그림자
|
||||
정의 및 뷰 클리핑</a>을 참조하세요.</p>
|
||||
|
||||
|
||||
<h3>애니메이션</h3>
|
||||
|
||||
<p>새 애니메이션 API는 UI 컨트롤 내의 터치 피드백, 뷰 상태
|
||||
변화, 그리고 액티비티 전환을 위한 사용자 지정 애니메이션을 생성할 수 있게 해줍니다.</p>
|
||||
|
||||
<p>이 API를 사용하면 다음 작업을 수행할 수 있습니다.</p>
|
||||
|
||||
<ul>
|
||||
<li style="margin-bottom:15px">
|
||||
<strong>터치 피드백</strong> 애니메이션으로 뷰 내 터치 이벤트에 응답하기.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
<strong>회전하며 나타나기</strong> 애니메이션으로 뷰 감추기 및 표시하기.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
사용자 지정 <strong>액티비티 전환</strong> 애니메이션으로 액티비티 간 전환하기.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
<strong>커브 모션</strong>으로 더 자연스러운 애니메이션 생성하기.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
<strong>뷰 상태 변경</strong> 애니메이션으로 하나 이상의 뷰 속성 변경 사항 애니메이션화하기.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
뷰 상태 변경 간에 <strong>상태 목록 드로어블</strong>에서 애니메이션 표시하기.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>터치 피드백 애니메이션은 버튼과 같은 여러 기본 뷰에 내장되어 있습니다. 새 API를 사용하면 이러한 애니메이션을 사용자 지정하고 사용자 지정 뷰에 추가할 수
|
||||
있습니다.</p>
|
||||
|
||||
<p>자세한 내용은 <a href="{@docRoot}training/material/animations.html">사용자지정
|
||||
애니메이션 정의</a>를 참조하세요.</p>
|
||||
|
||||
|
||||
<h3>드로어블</h3>
|
||||
|
||||
<p>드로어블에 대한 다음과 같은 새 기능을 통해 머티리얼 디자인 앱을 쉽게 구현할 수 있습니다.</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>벡터 드로어블</strong>은 단색 인앱 아이콘에
|
||||
적합하며, 정의 손실 없이 확장 가능합니다.</li>
|
||||
<li><strong>드로어블 색조</strong>를 사용하면 비트맵을 알파 마스크로 정의할 수 있으며, 런타임에
|
||||
색을 입힐 수 있습니다.</li>
|
||||
<li><strong>색상 추출</strong>은
|
||||
비트맵 이미지에서 주요 색상을 자동으로 추출할 수 있게 해줍니다.</li>
|
||||
</ul>
|
||||
|
||||
<p>자세한 내용은 <a href="{@docRoot}training/material/drawables.html">드로어블
|
||||
사용</a>을 참조하세요.</p>
|
||||
@@ -40,11 +40,7 @@ page.image=images/cards/design-material-for-android_2x.jpg
|
||||
|
||||
|
||||
<p itemprop="description">머티리얼 디자인은 플랫폼 및 기기 전반의 표현 방식, 모션 및
|
||||
<<<<<<< HEAD
|
||||
상호 작용 디자인에 대한 종합적인 지침입니다. Android에는 이제
|
||||
=======
|
||||
상호 작용 디자인에 대한 종합적인 지침입니다. Android에 이제
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
머티리얼 디자인 앱에 대한 지원이 포함되었습니다. Android 앱에서 머티리얼 디자인을 사용하려면 <a href="http://www.google.com/design/spec">머티리얼 디자인 사양</a>에
|
||||
규정되어 있는 지침을 따르세요. 또한 Android 5.0(API 레벨 21) 이상에서 제공하는
|
||||
새 구성 요소 및 기능을 사용하세요.</p>
|
||||
|
||||
@@ -1,186 +0,0 @@
|
||||
page.title=Material Design para Android
|
||||
page.tags=Material,design
|
||||
page.type=design
|
||||
page.image=images/cards/design-material-for-android_2x.jpg
|
||||
|
||||
@jd:body
|
||||
|
||||
<!-- developer docs box -->
|
||||
<a class="notice-developers right" href="{@docRoot}training/material/index.html">
|
||||
<div>
|
||||
<h3>Documentos do desenvolvedor</h3>
|
||||
<p>Criação de aplicativos com o Material Design</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
|
||||
<div>
|
||||
<h3>Vídeo</h3>
|
||||
<p>Introdução ao Material Design</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
|
||||
<div>
|
||||
<h3>Vídeo</h3>
|
||||
<p>Papel e tinta: Os materiais que importam</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
|
||||
<div>
|
||||
<h3>Vídeo</h3>
|
||||
<p>Material Design no aplicativo Google I/O</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<p itemprop="description">O Material Design é um guia abrangente para design visual, de movimento e de
|
||||
interação para diversas plataformas e dispositivos. O Android agora é compatível com
|
||||
aplicativos do Material Design. Para usar o Material Design nos aplicativos Android, siga as orientações definidas
|
||||
nas <a href="http://www.google.com/design/spec">especificações do Material Design</a> e use os novos
|
||||
componentes e funcionalidades disponíveis no Android 5.0 (API de nível 21) e em posteriores.</p>
|
||||
|
||||
<p>O Android fornece os seguintes elementos para criar aplicativos do Material Design:</p>
|
||||
|
||||
<ul>
|
||||
<li>Um novo tema</li>
|
||||
<li>Novos widgets para vistas complexas</li>
|
||||
<li>Novas APIs para sombras e animações personalizadas</li>
|
||||
</ul>
|
||||
|
||||
<p>Para obter mais informações sobre a implementação do Material Design no Android, consulte
|
||||
<a href="{@docRoot}training/material/index.html">Criação de aplicativos com o Material Design</a>.</p>
|
||||
|
||||
|
||||
<h3>Tema do Material</h3>
|
||||
|
||||
<p>O tema do Material fornece um novo estilo para o seu aplicativo, widgets de sistema que permitem
|
||||
definir a paleta de cores e as animações padrão para feedback de toque e transições de atividades.</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">Tema escuro do Material</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">Tema claro do Material</p>
|
||||
</div>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/theme.html">Como usar o tema
|
||||
do Material</a>.</p>
|
||||
|
||||
|
||||
<h3>Listas e cartões</h3>
|
||||
|
||||
<p>O Android fornece dois novos widgets para exibir cartões e listas com estilos e animações do
|
||||
Material Design:</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
|
||||
<p>O novo widget <code>RecyclerView</code> é uma versão mais completa de <code>ListView</code>
|
||||
com suporte para diferentes tipos de layout e melhorias no desempenho.</p>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
|
||||
<p>O novo widget <code>CardView</code> permite exibir informações importantes dentro de
|
||||
cartões que têm aparência consistente.</p>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/lists-cards.html">Como criar
|
||||
listas e cartões</a>.</p>
|
||||
|
||||
|
||||
<h3>Sombras de vistas</h3>
|
||||
|
||||
<p>Além das propriedades X e Y, vistas no Android agora têm uma propriedade
|
||||
Z. Essa nova propriedade representa a elevação de uma vista, que determina:</p>
|
||||
|
||||
<ul>
|
||||
<li>O tamanho da sombra: vistas com valores maiores de Z lançam sombras maiores.</li>
|
||||
<li>A ordem de desenho: vistas com valores maiores de Z aparecem sobre outras vistas.</li>
|
||||
</ul>
|
||||
|
||||
<div style="width:290px;margin-left:35px;float:right">
|
||||
<div class="framed-nexus5-port-span-5">
|
||||
<video class="play-on-hover" autoplay>
|
||||
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.webm"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
|
||||
</video>
|
||||
</div>
|
||||
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
|
||||
<em>Para reproduzir o filme, clique na tela do dispositivo</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Como
|
||||
definir sombras e recortar visualizações</a>.</p>
|
||||
|
||||
|
||||
<h3>Animações</h3>
|
||||
|
||||
<p>As novas APIs de animação permitem criar animações personalizadas para feedback de toque em controles de IU,
|
||||
mudanças no estado da vista e transições de atividades.</p>
|
||||
|
||||
<p>Essas APIs permitem:</p>
|
||||
|
||||
<ul>
|
||||
<li style="margin-bottom:15px">
|
||||
Responder a eventos de toque nas vistas com animações de <strong>feedback de toque</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Ocultar e exibir vistas com animações de <strong>revelação circular</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Alternar entre atividades com animações de <strong>transição de atividades</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Criar animações mais naturais com <strong>movimento curvado</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Animar mudanças em uma ou mais propriedades da vista com animações de <strong>mudança de estado da vista</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Exibir animações em <strong>desenháveis da lista de estado</strong> entre mudanças de estado da vista.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Animações de feedback de toque são integradas em várias vistas padrão, como botões. As novas APIs
|
||||
permitem personalizar essas animações e adicioná-las às vistas personalizadas.</p>
|
||||
|
||||
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/animations.html">Como definir
|
||||
animações personalizadas</a>.</p>
|
||||
|
||||
|
||||
<h3>Desenháveis</h3>
|
||||
|
||||
<p>Essas novas capacidades dos desenháveis ajudam na implementação de aplicativos do Material Design:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Desenháveis de vetor</strong> são dimensionáveis sem perder definição e são perfeitos
|
||||
para ícones de uma cor dentro do aplicativo.</li>
|
||||
<li><strong>Tingimento desenhável</strong> permite definir mapas de bits como uma máscara alfa e tingi-los com
|
||||
uma cor em tempo de execução.</li>
|
||||
<li><strong>Extração de cor</strong> permite extrair automaticamente cores proeminentes de uma
|
||||
imagem de mapa de bits.</li>
|
||||
</ul>
|
||||
|
||||
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/drawables.html">Como trabalhar
|
||||
com desenháveis</a>.</p>
|
||||
@@ -39,11 +39,7 @@ page.image=images/cards/design-material-for-android_2x.jpg
|
||||
|
||||
|
||||
|
||||
<<<<<<< HEAD
|
||||
<p itemprop="description">O Material Design é um guia abrangente para design visual, de movimento e de
|
||||
=======
|
||||
<p itemprop="description">O Material Design é um guia abrangente para projeto visual, de movimento e de
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
interação para diversas plataformas e dispositivos. O Android agora é compatível com
|
||||
aplicativos do Material Design. Para usar o Material Design nos aplicativos Android, siga as orientações definidas
|
||||
nas <a href="http://www.google.com/design/spec">especificações do Material Design</a> e use os novos
|
||||
@@ -102,11 +98,7 @@ Material Design:</p>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
|
||||
<p>O novo widget <code>CardView</code> permite exibir informações importantes dentro de
|
||||
<<<<<<< HEAD
|
||||
cartões que têm aparência consistente.</p>
|
||||
=======
|
||||
cartões que têm aparência consistente.</p>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
@@ -1,186 +0,0 @@
|
||||
page.title=Material Design для Android
|
||||
page.tags=Material,design
|
||||
page.type=разработка
|
||||
page.image=images/cards/design-material-for-android_2x.jpg
|
||||
|
||||
@jd:body
|
||||
|
||||
<!-- developer docs box -->
|
||||
<a class="notice-developers right" href="{@docRoot}training/material/index.html">
|
||||
<div>
|
||||
<h3>Документация для разработчиков</h3>
|
||||
<p>Создание приложений с помощью Material Design</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
|
||||
<div>
|
||||
<h3>Видеоролик</h3>
|
||||
<p>Введение в Material Design</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
|
||||
<div>
|
||||
<h3>Видеоролик</h3>
|
||||
<p>Бумага и чернила: материалы, имеющие первостепенное значение</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
|
||||
<div>
|
||||
<h3>Видеоролик</h3>
|
||||
<p>Material Design в приложениях для конференции Google I/O</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<p itemprop="description">Material Design представляет собой комплексную концепцию создания визуальных, движущихся и
|
||||
интерактивных элементов для различных платформ и устройств. Теперь Android включает в себя поддержку
|
||||
приложений с элементами Material Design. Чтобы использовать элементы Material Design в своих приложениях под Android, руководствуйтесь инструкциями
|
||||
в <a href="http://www.google.com/design/spec">спецификации Material Design</a>, а также воспользуйтесь
|
||||
новыми компонентами и функциями, доступными в Android 5.0 (уровень API 21) и выше.</p>
|
||||
|
||||
<p>Android предоставляет следующие элементы для построения приложений в соответствии с концепцией Material Design:</p>
|
||||
|
||||
<ul>
|
||||
<li>новую тему;</li>
|
||||
<li>новые виджеты для сложных представлений;</li>
|
||||
<li>новые API-интерфейсы для нестандартных теней и анимаций.</li>
|
||||
</ul>
|
||||
|
||||
<p>Дополнительные сведения о реализации Material Design в Android см. в разделе
|
||||
<a href="{@docRoot}training/material/index.html">Создание приложений с помощью Material Design</a>.</p>
|
||||
|
||||
|
||||
<h3>Тема Material Design</h3>
|
||||
|
||||
<p>Тема Material Design предоставляет новый стиль для ваших приложений, системные виджеты, для которых можно настраивать
|
||||
цветовую палитру, и анимации, выполняемые по умолчанию в качестве реакции на касание и при переходах между действиями.</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">Тема Material Design в темных тонах</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">Тема Material Design в светлых тонах</p>
|
||||
</div>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/theme.html">Использование темы
|
||||
Material Design</a>.</p>
|
||||
|
||||
|
||||
<h3>Списки и подсказки</h3>
|
||||
|
||||
<p>Android предоставляет два новых виджета для отображения подсказок и списков с использованием стилей
|
||||
и анимаций Material Design:</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
|
||||
<p>Виджет <code>RecyclerView</code> представляет собой более гибкую версию <code>ListView</code>,
|
||||
которая поддерживает различные типы макетов и способствует повышению производительности.</p>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
|
||||
<p>Виджет <code>CardView</code> позволяет отображать важные элементы информации внутри
|
||||
подсказок, имеющие согласованный внешний вид и поведение.</p>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/lists-cards.html">Создание списков
|
||||
и подсказок</a>.</p>
|
||||
|
||||
|
||||
<h3>Тени представлений</h3>
|
||||
|
||||
<p>Теперь, помимо свойств X и Y, представления в Android имеют свойство
|
||||
Z. Это новое свойство показывает, насколько представление "приподнято", иными словами, определяет</p>
|
||||
|
||||
<ul>
|
||||
<li>размер тени: чем больше Z, тем больше тени, отбрасываемые представлением;</li>
|
||||
<li>порядок рисования: представления с более высокими значениями Z отображаются поверх других.</li>
|
||||
</ul>
|
||||
|
||||
<div style="width:290px;margin-left:35px;float:right">
|
||||
<div class="framed-nexus5-port-span-5">
|
||||
<video class="play-on-hover" autoplay>
|
||||
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.webm"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
|
||||
</video>
|
||||
</div>
|
||||
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
|
||||
<em>Для воспроизведения фильма нажмите на экран устройства</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/shadows-clipping.html">Определение
|
||||
теней и обрезка представлений</a>.</p>
|
||||
|
||||
|
||||
<h3>Анимация</h3>
|
||||
|
||||
<p>Новые API-интерфейсы анимации позволяют создавать нестандартную анимацию для реакции на касание в элементах пользовательского интерфейса,
|
||||
изменения состояния представления и переходов между действиями.</p>
|
||||
|
||||
<p>Эти API-интерфейсы позволяют:</p>
|
||||
|
||||
<ul>
|
||||
<li style="margin-bottom:15px">
|
||||
реагировать на касание в представлениях, используя анимацию для <strong>реакции на касание</strong>;
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
скрывать и отображать представление с помощью анимации для <strong>кругового появления</strong>;
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
переключаться между действиями с помощью настраиваемой анимации для <strong>переходов между действиями</strong>;
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
создавать более естественное движение с помощью анимации для <strong>перемещения по кривой</strong>;
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
анимировать изменение одного или нескольких свойств представления с помощью анимации для <strong>изменения состояния представления</strong>;
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
отображать анимацию в <strong>графических элементах списков состояний</strong> в промежутке между изменением состояний представления.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Анимация для реакции на касание встроена в некоторые стандартные представления, например кнопки. Новые API-интерфейсы
|
||||
позволяют разработчику настраивать эти анимации и добавлять их в свои нестандартные представления.</p>
|
||||
|
||||
<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/animations.html">Определение настраиваемой
|
||||
анимации</a>.</p>
|
||||
|
||||
|
||||
<h3>Графические объекты</h3>
|
||||
|
||||
<p>Следующие возможности по работе с графическими объектами облегчают реализацию приложений с элементами Material Design:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>векторные объекты</strong> можно масштабировать без ущерба для четкости, и они отлично подходят
|
||||
в качестве одноцветных значков приложения;</li>
|
||||
<li><strong>тонирование графических объектов</strong> позволяет определять растровые изображения как альфа-маску и тонировать их
|
||||
нужным цветом во время выполнения;</li>
|
||||
<li><strong>извлечение цвета</strong> позволяет автоматически извлекать главные цвета из
|
||||
растровых изображений.</li>
|
||||
</ul>
|
||||
|
||||
<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/drawables.html">Работа с
|
||||
элементами дизайна</a>.</p>
|
||||
@@ -162,17 +162,10 @@ Z. Это новое свойство показывает, насколько
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<p>Анимация для реакции на касание встроена в некоторые стандартные представления, например кнопки. Новые API-интерфейсы
|
||||
позволяют разработчику настраивать эти анимации и добавлять их в свои нестандартные представления.</p>
|
||||
|
||||
<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/animations.html">Определение настраиваемой
|
||||
=======
|
||||
<p>Анимация для реакции на касание встроена в некоторые стандартные представления, например, кнопки. Новые API-интерфейсы
|
||||
позволяют разработчику настраивать эти анимации и добавлять их в свои нестандартные представления.</p>
|
||||
|
||||
<p>Дополнительные сведения, см. в разделе <a href="{@docRoot}training/material/animations.html">Определение настраиваемой
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
анимации</a>.</p>
|
||||
|
||||
|
||||
|
||||
@@ -1,186 +0,0 @@
|
||||
page.title=Material Design cho Android
|
||||
page.tags=Material,design
|
||||
page.type=thiết kế
|
||||
page.image=images/cards/design-material-for-android_2x.jpg
|
||||
|
||||
@jd:body
|
||||
|
||||
<!-- developer docs box -->
|
||||
<a class="notice-developers right" href="{@docRoot}training/material/index.html">
|
||||
<div>
|
||||
<h3>Tài liệu cho Nhà phát triển</h3>
|
||||
<p>Tạo ứng dụng với Material Design</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
|
||||
<div>
|
||||
<h3>Video</h3>
|
||||
<p>Giới thiệu Material Design</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
|
||||
<div>
|
||||
<h3>Video</h3>
|
||||
<p>Giấy và Mực: Những vật liệu quan trọng</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
|
||||
<div>
|
||||
<h3>Video</h3>
|
||||
<p>Material Design trong Google I/O App</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<p itemprop="description">Material design là một hướng dẫn toàn diện về thiết kế
|
||||
trực quan, chuyển động và tương tác giữa nhiều nền tảng và thiết bị. Hiện nay Android có hỗ trợ
|
||||
những ứng dụng theo phong cách material design. Để sử dụng material design trong ứng dụng Androi của mình, hãy làm theo hướng dẫn nêu
|
||||
trong <a href="http://www.google.com/design/spec">đặc tả material design</a> và sử dụng
|
||||
những thành phần và tính năng mới sẵn có trong Android 5.0 (API mức 21) trở lên.</p>
|
||||
|
||||
<p>Android cung cấp những phần tử sau để bạn dựng ứng dụng theo phong cách material design:</p>
|
||||
|
||||
<ul>
|
||||
<li>Một giao diện mới</li>
|
||||
<li>Widget mới cho các dạng xem phức tạp</li>
|
||||
<li>API mới cho đổ bóng và hoạt hình tùy chỉnh</li>
|
||||
</ul>
|
||||
|
||||
<p>Để biết thêm thông tin về triển khai material design trên Android, hãy xem
|
||||
<a href="{@docRoot}training/material/index.html">Tạo ứng dụng với Material Design</a>.</p>
|
||||
|
||||
|
||||
<h3>Giao diện Material</h3>
|
||||
|
||||
<p>Giao diện material mang đến một phong cách mới cho ứng dụng của bạn và các widget hệ thống, cho phép bạn đặt
|
||||
bảng màu của chúng và hoạt hình mặc định cho phản hồi chạm và chuyển tiếp hoạt động.</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">Giao diện material tối</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">Giao diện material sáng</p>
|
||||
</div>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>Để biết thêm thông tin, hãy xem phần <a href="{@docRoot}training/material/theme.html">Sử dụng Giao diện Material
|
||||
</a>.</p>
|
||||
|
||||
|
||||
<h3>Danh sách và Thẻ</h3>
|
||||
|
||||
<p>Android cung cấp hai loại widget mới để hiển thị thẻ và danh sách bằng phong cách
|
||||
và hoạt hình material design:</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
|
||||
<p>Widget <code>RecyclerView</code> mới là một phiên bản có thể ghép nối hơn của <code>ListView</code>
|
||||
có hỗ trợ nhiều kiểu bố trí khác nhau và cải thiện hiệu năng.</p>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
|
||||
<p>Widget <code>CardView</code> mới cho phép bạn hiển thị những mẩu thông tin quan trọng bên trong
|
||||
thẻ với diện mạo và cảm nhận nhất quán.</p>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>Để biết thêm thông tin, hãy xem phần <a href="{@docRoot}training/material/lists-cards.html">Tạo Danh sách
|
||||
và Thẻ</a>.</p>
|
||||
|
||||
|
||||
<h3>Đổ bóng Dạng xem</h3>
|
||||
|
||||
<p>Bên cạnh các thuộc tính X và Y, dạng xem trong Android nay có
|
||||
thêm thuộc tính Z. Thuộc tính mới này biểu diễn độ cao của một dạng xem và sẽ quyết định:</p>
|
||||
|
||||
<ul>
|
||||
<li>Kích cỡ của đổ bóng: dạng xem có giá trị Z cao hơn sẽ đặt đổ bóng lớn hơn.</li>
|
||||
<li>Thứ tự vẽ: dạng xem có giá trị Z cao hơn sẽ xuất hiện phía trên những dạng xem khác.</li>
|
||||
</ul>
|
||||
|
||||
<div style="width:290px;margin-left:35px;float:right">
|
||||
<div class="framed-nexus5-port-span-5">
|
||||
<video class="play-on-hover" autoplay>
|
||||
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.webm"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
|
||||
</video>
|
||||
</div>
|
||||
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
|
||||
<em>Để phát lại phim, nhấp vào màn hình thiết bị</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>Để biết thêm thông tin, hãy xem phần <a href="{@docRoot}training/material/shadows-clipping.html">Định nghĩa
|
||||
Đổ bóng và Dạng xem Cắt hình</a>.</p>
|
||||
|
||||
|
||||
<h3>Hoạt hình</h3>
|
||||
|
||||
<p>API hoạt hình mới cho phép bạn tạo hoạt hình tùy chỉnh cho phản hồi chạm trong điều khiển UI,
|
||||
thay đổi trạng thái xem và chuyển tiếp hoạt động.</p>
|
||||
|
||||
<p>Những API này cho phép bạn:</p>
|
||||
|
||||
<ul>
|
||||
<li style="margin-bottom:15px">
|
||||
Phản hồi lại sự kiện chạm trong dạng xem của mình bằng hoạt hình <strong>phản hồi chạm</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Ẩn và hiện dạng xem bằng hoạt hình <strong>hiện hình tròn</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Chuyển giữa các hoạt động bằng hoạt hình <strong>chuyển tiếp hoạt động</strong> tùy chỉnh.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Tạo hoạt hình tự nhiên hơn bằng <strong>chuyển động cong</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Tạo hoạt hình cho các thay đổi trong một hoặc nhiều thuộc tính dạng xem bằng hoạt hình <strong>thay đổi trạng thái dạng xem</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Thể hiện hoạt hình trong các <strong>nội dung vẽ được theo danh sách trạng thái</strong> giữa những thay đổi về trạng thái dạng xem.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>Hoạt hình phản hồi chạm được tích hợp vào một vài dạng xem tiêu chuẩn, ví dụ như các nút. Các API mới này
|
||||
cho phép bạn tùy biến những hoạt hình này và thêm chúng vào dạng xem tùy chỉnh của mình.</p>
|
||||
|
||||
<p>Để biết thêm thông tin, hãy xem phần <a href="{@docRoot}training/material/animations.html">Định nghĩa Hoạt hình
|
||||
Tùy chỉnh</a>.</p>
|
||||
|
||||
|
||||
<h3>Nội dung vẽ được</h3>
|
||||
|
||||
<p>Những khả năng mới này của nội dung vẽ được sẽ giúp bạn triển khai các ứng dụng theo phong cách material design:</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>Nội dung vẽ được véc-tơ</strong> có thể thay đổi kích cỡ mà không làm mất độ sắc nét và hoàn hảo
|
||||
cho các biểu tượng trong ứng dụng đơn sắc.</li>
|
||||
<li><strong>Nhuộm nội dung vẽ được</strong> cho phép bạn định nghĩa ảnh bitmap thành mặt nạ alpha và nhuộm
|
||||
màu cho chúng theo thời gian chạy.</li>
|
||||
<li><strong>Trích xuất màu</strong> cho phép bạn tự động trích xuất màu nổi bật từ
|
||||
hình ảnh bitmap.</li>
|
||||
</ul>
|
||||
|
||||
<p>Để biết thêm thông tin, hãy xem phần <a href="{@docRoot}training/material/drawables.html">Làm việc với
|
||||
Nội dung Vẽ được</a>.</p>
|
||||
@@ -39,13 +39,8 @@ page.image=images/cards/design-material-for-android_2x.jpg
|
||||
|
||||
|
||||
|
||||
<<<<<<< HEAD
|
||||
<p itemprop="description">Material design là một hướng dẫn toàn diện về thiết kế
|
||||
trực quan, chuyển động và tương tác giữa nhiều nền tảng và thiết bị. Hiện nay Android có hỗ trợ
|
||||
=======
|
||||
<p itemprop="description">Material Design là một hướng dẫn toàn diện về thiết kế
|
||||
trực quan, chuyển động và tương tác giữa nhiều nền tảng và thiết bị. Hiện nay, Android có hỗ trợ
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
những ứng dụng theo phong cách material design. Để sử dụng material design trong ứng dụng Androi của mình, hãy làm theo hướng dẫn nêu
|
||||
trong <a href="http://www.google.com/design/spec">đặc tả material design</a> và sử dụng
|
||||
những thành phần và tính năng mới sẵn có trong Android 5.0 (API mức 21) trở lên.</p>
|
||||
@@ -64,11 +59,7 @@ những thành phần và tính năng mới sẵn có trong Android 5.0 (API m
|
||||
|
||||
<h3>Giao diện Material</h3>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<p>Giao diện material mang đến một phong cách mới cho ứng dụng của bạn và các widget hệ thống, cho phép bạn đặt
|
||||
=======
|
||||
<p>Giao diện material mang đến một phong cách mới cho ứng dụng của bạn và widget hệ thống, cho phép bạn đặt
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
bảng màu của chúng và hoạt hình mặc định cho phản hồi chạm và chuyển tiếp hoạt động.</p>
|
||||
|
||||
<!-- two columns -->
|
||||
@@ -94,25 +85,15 @@ bảng màu của chúng và hoạt hình mặc định cho phản hồi chạm
|
||||
|
||||
<h3>Danh sách và Thẻ</h3>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<p>Android cung cấp hai loại widget mới để hiển thị thẻ và danh sách bằng phong cách
|
||||
và hoạt hình material design:</p>
|
||||
=======
|
||||
<p>Android cung cấp hai loại widget mới để hiển thị thẻ và danh sách bằng các kiểu dáng
|
||||
và hoạt hình theo phong cách material design:</p>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
|
||||
<<<<<<< HEAD
|
||||
<p>Widget <code>RecyclerView</code> mới là một phiên bản có thể ghép nối hơn của <code>ListView</code>
|
||||
có hỗ trợ nhiều kiểu bố trí khác nhau và cải thiện hiệu năng.</p>
|
||||
=======
|
||||
<p>Widget <code>RecyclerView</code> mới là một phiên bản dễ ghép nối hơn của <code>ListView</code>
|
||||
có hỗ trợ nhiều kiểu bố cục khác nhau và cải thiện hiệu năng.</p>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
|
||||
@@ -128,21 +109,12 @@ và Thẻ</a>.</p>
|
||||
|
||||
<h3>Đổ bóng Dạng xem</h3>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<p>Bên cạnh các thuộc tính X và Y, dạng xem trong Android nay có
|
||||
thêm thuộc tính Z. Thuộc tính mới này biểu diễn độ cao của một dạng xem và sẽ quyết định:</p>
|
||||
|
||||
<ul>
|
||||
<li>Kích cỡ của đổ bóng: dạng xem có giá trị Z cao hơn sẽ đặt đổ bóng lớn hơn.</li>
|
||||
<li>Thứ tự vẽ: dạng xem có giá trị Z cao hơn sẽ xuất hiện phía trên những dạng xem khác.</li>
|
||||
=======
|
||||
<p>Bên cạnh các thuộc tính X và Y, dạng xem trong Android nay có thêm thuộc tính Z
|
||||
. Thuộc tính mới này biểu diễn độ cao của một dạng xem và sẽ quyết định:</p>
|
||||
|
||||
<ul>
|
||||
<li>Kích cỡ của đổ bóng: dạng xem với giá trị Z cao hơn sẽ có đổ bóng lớn hơn.</li>
|
||||
<li>Thứ tự vẽ: dạng xem với giá trị Z cao hơn sẽ xuất hiện ở trên những dạng xem khác.</li>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
</ul>
|
||||
|
||||
<div style="width:290px;margin-left:35px;float:right">
|
||||
@@ -154,11 +126,7 @@ thêm thuộc tính Z. Thuộc tính mới này biểu diễn độ cao của m
|
||||
</video>
|
||||
</div>
|
||||
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
|
||||
<<<<<<< HEAD
|
||||
<em>Để phát lại phim, nhấp vào màn hình thiết bị</em>
|
||||
=======
|
||||
<em>Để phát lại phim, hãy nhấp vào màn hình thiết bị</em>
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -181,11 +149,7 @@ Phản hồi lại sự kiện chạm trong dạng xem của mình bằng hoạt
|
||||
Ẩn và hiện dạng xem bằng hoạt hình <strong>hiện hình tròn</strong>.
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
<<<<<<< HEAD
|
||||
Chuyển giữa các hoạt động bằng hoạt hình <strong>chuyển tiếp hoạt động</strong> tùy chỉnh.
|
||||
=======
|
||||
Chuyển giữa các hoạt động và hoạt hình <strong>chuyển tiếp hoạt động</strong> tùy chỉnh.
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
Tạo hoạt hình tự nhiên hơn bằng <strong>chuyển động cong</strong>.
|
||||
|
||||
@@ -1,186 +0,0 @@
|
||||
page.title=Android 材料设计
|
||||
page.tags=Material,design
|
||||
page.type=设计
|
||||
page.image=images/cards/design-material-for-android_2x.jpg
|
||||
|
||||
@jd:body
|
||||
|
||||
<!-- developer docs box -->
|
||||
<a class="notice-developers right" href="{@docRoot}training/material/index.html">
|
||||
<div>
|
||||
<h3>开发者文档</h3>
|
||||
<p>使用材料设计创建应用</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
|
||||
<div>
|
||||
<h3>视频</h3>
|
||||
<p>材料设计简介</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
|
||||
<div>
|
||||
<h3>视频</h3>
|
||||
<p>纸张和墨水：相关材料</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
|
||||
<div>
|
||||
<h3>视频</h3>
|
||||
<p>Google I/O 应用中的材料设计</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<p itemprop="description">材料设计是专为设计适用于多个平台和设备的视觉、运动与互动效果而制定的综合指南。
|
||||
Android 现在已支持材料设计应用。
|
||||
如果要在您的 Android 应用中使用材料设计，请遵循<a href="http://www.google.com/design/spec">材料设计规范</a>内定义的指导方针，并使用 Android 5.0（API 级别 21）及以上版本所提供的新组件和功能。
|
||||
|
||||
</p>
|
||||
|
||||
<p>Android 为您提供了以下元素来构建材料设计应用：</p>
|
||||
|
||||
<ul>
|
||||
<li>全新的风格主题</li>
|
||||
<li>用于设计复杂视图的全新小工具</li>
|
||||
<li>用于自定义阴影和动画的全新 API</li>
|
||||
</ul>
|
||||
|
||||
<p>有关在 Android 上实现材料设计的详细信息，请参阅<a href="{@docRoot}training/material/index.html">使用材料设计创建应用</a>。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>材料主题</h3>
|
||||
|
||||
<p>材料主题提供了新的应用样式和系统小工具，让您能够为触摸反馈以及 Activity 转换设置配色工具以及默认动画。
|
||||
</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">深色材料主题</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">浅色材料主题</p>
|
||||
</div>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>如需了解详细信息，请参阅<a href="{@docRoot}training/material/theme.html">使用材料主题
|
||||
</a>。</p>
|
||||
|
||||
|
||||
<h3>列表和卡片</h3>
|
||||
|
||||
<p>Android 提供了两个全新的小工具，用于显示采用材料设计样式和动画的卡片和列表：
|
||||
</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
|
||||
<p>全新的 <code>RecyclerView</code> 小工具是 <code>ListView</code>
|
||||
的可插入版本，支持不同的布局类型，并且具有更高性能。</p>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
|
||||
<p>全新的 <code>CardView</code> 小工具可让您展示卡片内的重要信息，并且有统一的观感。
|
||||
</p>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>如需了解详细信息，请参阅<a href="{@docRoot}training/material/lists-cards.html">创建列表和卡片</a>。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>视图阴影</h3>
|
||||
|
||||
<p>除了 X 和 Y 属性之外，Android 中的视图现在还提供了 Z
|
||||
属性。这一新属性用于展现视图的高度，从而确定：</p>
|
||||
|
||||
<ul>
|
||||
<li>阴影的大小：Z 值越高的视图投射的阴影越长。</li>
|
||||
<li>绘制顺序：Z 值较高的视图会显示在其他视图的上方。</li>
|
||||
</ul>
|
||||
|
||||
<div style="width:290px;margin-left:35px;float:right">
|
||||
<div class="framed-nexus5-port-span-5">
|
||||
<video class="play-on-hover" autoplay>
|
||||
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.webm"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
|
||||
</video>
|
||||
</div>
|
||||
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
|
||||
<em>如果要重新播放影片，请点击设备屏幕</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>如需了解详细信息，请参阅<a href="{@docRoot}training/material/shadows-clipping.html">定义阴影与裁剪视图</a>。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>动画</h3>
|
||||
|
||||
<p>动画 API 让您可为 UI 控件中的触摸反馈、视图状态更改以及 Activity 转换创建自定义动画。
|
||||
</p>
|
||||
|
||||
<p>这些 API 的作用是：</p>
|
||||
|
||||
<ul>
|
||||
<li style="margin-bottom:15px">
|
||||
使用<strong>触摸反馈</strong>动画响应视图中的触摸事件。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
使用<strong>循环显示</strong>动画隐藏和显示视图。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
使用自定义 <strong>Activity 转换</strong>动画切换 Activity。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
使用<strong>曲线运动</strong>创建更自然的动画。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
使用<strong>视图状态更改</strong>动画以动画形式呈现一个或多个视图属性的更改。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
在视图状态更改期间以<strong>可绘制状态列表</strong>显示动画。
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>触摸反馈动画内建于数个标准视图（例如按钮）中。全新的 API让您可以自定义这些动画并将其添加至自己的自定义视图中。
|
||||
</p>
|
||||
|
||||
<p>如需了解详细信息，请参阅<a href="{@docRoot}training/material/animations.html">定义自定义动画</a>。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>可绘制对象</h3>
|
||||
|
||||
<p>下列可绘制对象的新功能将帮助您实现材料设计应用：</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>可绘制矢量</strong>可在不影响清晰度的情况下进行缩放，非常适合单色应用内图标。
|
||||
</li>
|
||||
<li><strong>可绘制底色</strong>可让您将位图定义为 alpha 蒙板，并在运行时为其着色。
|
||||
</li>
|
||||
<li><strong>颜色提取</strong>可让您从位图图像自动提取突出色彩。
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>如需了解详细信息，请参阅<a href="{@docRoot}training/material/drawables.html">使用可绘制内容</a>。
|
||||
</p>
|
||||
@@ -1,6 +1,5 @@
|
||||
page.title=Android 材料设计
|
||||
page.tags=Material,design
|
||||
page.type=设计
|
||||
page.tags=Material,design,设计
|
||||
page.image=images/cards/design-material-for-android_2x.jpg
|
||||
|
||||
@jd:body
|
||||
|
||||
@@ -1,186 +0,0 @@
|
||||
page.title=Android 材料設計
|
||||
page.tags=Material,design
|
||||
page.type=設計
|
||||
page.image=images/cads/design-material-for-android_2x.jpg
|
||||
|
||||
@jd:body
|
||||
|
||||
<!-- developer docs box -->
|
||||
<a class="notice-developers right" href="{@docRoot}training/material/index.html">
|
||||
<div>
|
||||
<h3>開發人員文件</h3>
|
||||
<p>使用材料設計建立應用程式</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
|
||||
<div>
|
||||
<h3>影片</h3>
|
||||
<p>材料設計簡介</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
|
||||
<div>
|
||||
<h3>影片</h3>
|
||||
<p>紙張和墨水：重要的材料</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- video box -->
|
||||
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
|
||||
<div>
|
||||
<h3>影片</h3>
|
||||
<p>Google I/O 應用程式中的材料設計</p>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
|
||||
|
||||
<p itemprop="description">材料設計是一份內容廣泛的綜合性指南，引導您跨平台、跨裝置進行視覺、動態和互動的設計。
|
||||
Android 現已納入對材料設計應用程式的支援。
|
||||
如果要在 Android 應用程式中使用材料設計，請依照<a href="http://www.google.com/design/spec">材料設計規格</a>中定義的指示，並使用 Android 5.0 (API 級別 21) 或後續版本中的新元件和新功能。
|
||||
|
||||
</p>
|
||||
|
||||
<p>Android 提供下列元素，供您打造材料設計應用程式：</p>
|
||||
|
||||
<ul>
|
||||
<li>新的設計風格</li>
|
||||
<li>用於複雜視圖的小工具</li>
|
||||
<li>自訂陰影和動畫的新 API</li>
|
||||
</ul>
|
||||
|
||||
<p>如需取得如何在 Android 上實作材料設計的詳細資訊，請參閱<a href="{@docRoot}training/material/index.html">使用材料設計建立應用程式</a>。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>材料設計風格</h3>
|
||||
|
||||
<p>材料設計風格提供您應用程式使用的新樣式、可以讓您設定色板的系統小工具，並針對輕觸回饋與操作行為轉換提供預設動畫。
|
||||
</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">深色材料設計風格</p>
|
||||
</div>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" />
|
||||
<div style="width:140px;margin:0 auto">
|
||||
<p style="margin-top:8px">淺色材料設計風格</p>
|
||||
</div>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/theme.html">使用材料設計風格</a>。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>清單和卡片</h3>
|
||||
|
||||
<p>Android 提供兩個新的小工具，搭配材料設計樣式與動畫，可用來顯示清單和卡片：
|
||||
</p>
|
||||
|
||||
<!-- two columns -->
|
||||
<div style="width:700px;margin-top:25px;margin-bottom:20px">
|
||||
<div style="float:left;width:250px;margin-left:40px;margin-right:60px;">
|
||||
<img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" />
|
||||
<p>新的 <code>RecyclerView</code> 小工具是 <code>ListView</code> 更容易插入的版本，支援不同的版面配置類型，並提供效能改善。
|
||||
</p>
|
||||
</div>
|
||||
<div style="float:left;width:250px;margin-right:0px;">
|
||||
<img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" />
|
||||
<p>新的 <code>CardView</code> 小工具讓您可以顯示卡片內的重要資訊，並且該資訊都能擁有一致的外觀與風格。
|
||||
</p>
|
||||
</div>
|
||||
<br style="clear:left"/>
|
||||
</div>
|
||||
|
||||
<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/lists-cards.html">建立清單和卡片</a>。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>檢視陰影</h3>
|
||||
|
||||
<p>除了 X 和 Y 屬性外，Android 中的視圖現在也有 Z 屬性。
|
||||
這個新屬性代表視圖的高度，這會決定：</p>
|
||||
|
||||
<ul>
|
||||
<li>陰影大小：Z 值較高的視圖會投射更大的陰影。</li>
|
||||
<li>繪製順序：Z 值較高的視圖會顯示在其他視圖之上。</li>
|
||||
</ul>
|
||||
|
||||
<div style="width:290px;margin-left:35px;float:right">
|
||||
<div class="framed-nexus5-port-span-5">
|
||||
<video class="play-on-hover" autoplay>
|
||||
<source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.webm"/>
|
||||
<source src="{@docRoot}design/videos/ContactsAnim.ogv"/>
|
||||
</video>
|
||||
</div>
|
||||
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
|
||||
如要重播影片，請按一下裝置螢幕<em></em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/shadows-clipping.html">定義陰影和裁剪視圖</a>。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>動畫</h3>
|
||||
|
||||
<p>新的動畫 API 可針對 UI 控制項的輕觸回饋、視圖狀態中的變更，以及操作行為轉換，讓您建立自訂動畫。
|
||||
</p>
|
||||
|
||||
<p>這些 API 讓您可以：</p>
|
||||
|
||||
<ul>
|
||||
<li style="margin-bottom:15px">
|
||||
回應您視圖中有<strong>輕觸回饋</strong>動畫的輕觸事件。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
隱藏和顯示有<strong>循環顯示</strong>動畫的視圖。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
在包含自訂<strong>操作行為轉換</strong>動畫的行為間切換。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
使用<strong>曲線動作</strong>建立更自然的動畫。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
在包含<strong>視圖狀態變更</strong>動畫的一個或多個視圖屬性中變更動畫。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
在視圖狀態變更之間，顯示<strong>狀態清單可繪項目</strong>中的動畫。
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>輕觸回饋動畫會內建於數個標準視圖中，例如按鈕等。新 API 可讓您自訂這些動畫，並將其新增至您的自訂視圖中。
|
||||
</p>
|
||||
|
||||
<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/animations.html">定義自訂動畫</a>。
|
||||
</p>
|
||||
|
||||
|
||||
<h3>可繪項目</h3>
|
||||
|
||||
<p>可繪項目的這些新功能可以幫助您實作材料設計應用程式：</p>
|
||||
|
||||
<ul>
|
||||
<li><strong>矢量可繪項目</strong>可以調整大小，但又不會喪失定義，最適合於應用程式中的單色圖示。
|
||||
</li>
|
||||
<li><strong>繪製著色</strong>可讓您在執行階段將點陣圖定義為 Alpha 遮罩，並以一個顏色進行著色。
|
||||
</li>
|
||||
<li><strong>顏色提取</strong>可讓您自動從點陣圖影像中提取顯著顏色。
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/drawables.html">使用可繪項目</a>。
|
||||
</p>
|
||||
@@ -1,7 +1,6 @@
|
||||
page.title=Android 材料設計
|
||||
page.tags=Material,design
|
||||
page.type=設計
|
||||
page.image=mages/cards/design-material-for-android_2x.jpg
|
||||
page.tags=Material,design, 設計
|
||||
page.image=images/cards/design-material-for-android_2x.jpg
|
||||
|
||||
@jd:body
|
||||
|
||||
@@ -135,12 +134,7 @@ Android 現已納入對材料設計應用程式的支援。
|
||||
|
||||
|
||||
<h3>動畫</h3>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<p>新的動畫 API 可針對 UI 控制項的輕觸回饋、視圖狀態中的變更，以及操作行為轉換，讓您建立自訂動畫。
|
||||
=======
|
||||
<p>新的動畫 API 可針對 UI 控制項的輕觸回饋、視圖狀態中的變更，以及 Activity 轉換，讓您建立自訂動畫。
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
</p>
|
||||
|
||||
<p>這些 API 讓您可以：</p>
|
||||
@@ -153,11 +147,7 @@ Android 現已納入對材料設計應用程式的支援。
|
||||
隱藏和顯示有<strong>循環顯示</strong>動畫的視圖。
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
<<<<<<< HEAD
|
||||
在包含自訂<strong>操作行為轉換</strong>動畫的行為間切換。
|
||||
=======
|
||||
在包含自訂 <strong>Activity 轉換</strong>動畫的 Activity 間切換。
|
||||
>>>>>>> Docs: L10N update for design documentation
|
||||
</li>
|
||||
<li style="margin-bottom:15px">
|
||||
使用<strong>曲線動作</strong>建立更自然的動畫。
|
||||
|
||||
@@ -18,15 +18,10 @@
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/material/index.html"
|
||||
es-lang="Material Design"
|
||||
ja-lang="マテリアル デザイン"
|
||||
ko-lang="머티어리얼 디자인"
|
||||
pt-br-lang="Material Design"
|
||||
ru-lang="Material Design"
|
||||
zh-cn-lang="材料设计"
|
||||
zh-tw-lang="材料設計"
|
||||
in-lang="Desain Bahan"
|
||||
vi-lang="Material Design"
|
||||
>
|
||||
Material for Android</a></div>
|
||||
</li>
|
||||
|
||||
@@ -62,7 +62,6 @@
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header">
|
||||
<a href="<?cs var:toroot ?>training/basics/activity-lifecycle/index.html"
|
||||
es-lang=""
|
||||
ja-lang="アクティビティのライフサイクル 管理"
|
||||
ko-lang="액티비티 수명 주기 관리하기"
|
||||
pt-br-lang="Como gerenciar o ciclo de vida da atividade"
|
||||
@@ -76,7 +75,6 @@
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="<?cs var:toroot ?>training/basics/activity-lifecycle/starting.html"
|
||||
es-lang=""
|
||||
ja-lang="アクティビティを開始する"
|
||||
ko-lang="액티비티 시작하기"
|
||||
pt-br-lang="Iniciando uma atividade"
|
||||
@@ -87,18 +85,10 @@
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="<?cs var:toroot ?>training/basics/activity-lifecycle/pausing.html"
|
||||
es-lang=""
|
||||
ja-lang=""
|
||||
ko-lang=""
|
||||
pt-br-lang=""
|
||||
ru-lang=""
|
||||
zh-cn-lang=""
|
||||
zh-tw-lang="">
|
||||
Pausing and Resuming an Activity
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="<?cs var:toroot ?>training/basics/activity-lifecycle/stopping.html"
|
||||
es-lang=""
|
||||
ja-lang="アクティビティの一時停止と再開"
|
||||
ko-lang="액티비티 일시정지 및 재개하기"
|
||||
pt-br-lang="Pausando e reiniciando uma atividade"
|
||||
@@ -109,7 +99,6 @@
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="<?cs var:toroot ?>training/basics/activity-lifecycle/recreating.html"
|
||||
es-lang=""
|
||||
ja-lang="アクティビティを再作成する"
|
||||
ko-lang="액티비티 재생성하기"
|
||||
pt-br-lang="Recriando uma atividade"
|
||||
@@ -150,7 +139,6 @@
|
||||
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header"><a href="<?cs var:toroot?>training/basics/data-storage/index.html"
|
||||
es-lang=""
|
||||
ja-lang="データの保存"
|
||||
ko-lang="데이터 저장하기"
|
||||
pt-br-lang="Salvando dados"
|
||||
@@ -164,7 +152,6 @@
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="<?cs var:toroot ?>training/basics/data-storage/shared-preferences.html"
|
||||
es-lang=""
|
||||
ja-lang="キー値セットを保存する"
|
||||
ko-lang="키-값 세트 저장하기"
|
||||
pt-br-lang="Salvando conjuntos de valor-chave"
|
||||
@@ -175,7 +162,6 @@
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="<?cs var:toroot ?>training/basics/data-storage/files.html"
|
||||
es-lang=""
|
||||
ja-lang="ファイルを保存する"
|
||||
ko-lang="파일 저장하기"
|
||||
pt-br-lang="Salvando arquivos"
|
||||
@@ -186,7 +172,6 @@
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="<?cs var:toroot ?>training/basics/data-storage/databases.html"
|
||||
es-lang=""
|
||||
ja-lang="SQL データベースにデータを保存する"
|
||||
ko-lang="SQL 데이터베이스에 데이터 저장하기"
|
||||
pt-br-lang="Salvando dados em bancos de dados do SQL"
|
||||
@@ -202,7 +187,6 @@
|
||||
<li class="nav-section">
|
||||
<div class="nav-section-header">
|
||||
<a href="<?cs var:toroot ?>training/basics/intents/index.html"
|
||||
es-lang=""
|
||||
ja-lang="他のアプリとの相互操作"
|
||||
ko-lang="액티비티 수명 주기 관리하기"
|
||||
pt-br-lang="Interagindo com outros aplicativos"
|
||||
@@ -217,7 +201,6 @@
|
||||
</div>
|
||||
<ul>
|
||||
<li><a href="<?cs var:toroot ?>training/basics/intents/sending.html"
|
||||
es-lang=""
|
||||
ja-lang="別のアプリにユーザーを送る"
|
||||
ko-lang="다른 앱으로 사용자 보내기"
|
||||
pt-br-lang="Enviando o usuário para outro aplicativo"
|
||||
@@ -228,7 +211,6 @@
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="<?cs var:toroot ?>training/basics/intents/result.html"
|
||||
es-lang=""
|
||||
ja-lang="アクティビティから結果を取得する"
|
||||
ko-lang="액티비티로부터 결과 가져오기"
|
||||
pt-br-lang="Obtendo resultados de uma atividade"
|
||||
@@ -239,7 +221,6 @@
|
||||
</a>
|
||||
</li>
|
||||
<li><a href="<?cs var:toroot ?>training/basics/intents/filters.html"
|
||||
es-lang=""
|
||||
ja-lang="他のアプリからのアクティビティの開始を許可する"
|
||||
ko-lang="다른 앱이 자신의 액티비티를 시작하도록 허용하기"
|
||||
pt-br-lang="Permitindo que outros aplicativos iniciem sua atividade"
|
||||
|
||||
Reference in New Issue
Block a user