Android/frameworks_base
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Docs: Material Design L10N update. All languages except es, ja.

Browse Source 
Bug: 23090399
Change-Id: I0389fcff3b012a4ae4d92529574847e4a1685729
This commit is contained in:
David Friedman
2015-11-23 12:53:59 -08:00
parent 066b4acf78
commit dee655c406
66 changed files with 6025 additions and 1023 deletions
Download Patch File Download Diff File Expand all files Collapse all files

185
docs/html-intl/intl/in/design/material/index.jd Normal file
View File

@@ -0,0 +1,185 @@
page.title=Desain Bahan untuk Android
page.tags=Material,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>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>

550
docs/html-intl/intl/in/training/material/animations.jd Normal file
View File

@@ -0,0 +1,550 @@
page.title=Mendefinisikan Animasi Custom
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Pelajaran ini mengajarkan Anda cara</h2>
<ol>
<li><a href="#Touch">Menyesuaikan Umpan Balik Sentuh</a></li>
<li><a href="#Reveal">Menggunakan Reveal Effect</a></li>
<li><a href="#Transitions">Menyesuaikan Transisi Aktivitas</a></li>
<li><a href="#ViewState">Menganimasikan Perubahan Status Tampilan</a></li>
<li><a href="#AnimVector">Menganimasikan Drawable Vektor</a></li>
</ol>
<h2>Anda juga harus membaca</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Spesifikasi desain bahan</a></li>
<li><a href="{@docRoot}design/material/index.html">Desain bahan di Android</a></li>
</ul>
</div>
</div>
<p>Animasi dalam desain bahan memberi pengguna umpan balik tentang tindakannya dan menyediakan
kesinambungan visual saat pengguna berinteraksi dengan aplikasi Anda. Tema bahan menyediakan beberapa animasi default
untuk tombol dan transisi aktivitas, dan Android 5.0 (API level 21) ke atas memungkinkan Anda menyesuaikan
animasi ini dan membuat yang baru:</p>
<ul>
<li>Umpan balik sentuh</li>
<li>Singkap Melingkar</li>
<li>Transisi aktivitas</li>
<li>Gerakan melengkung</li>
<li>Perubahan status tampilan</li>
</ul>
<h2 id="Touch">Menyesuaikan Umpan Balik Sentuh</h2>
<p>Umpan balik sentuh dalam desain bahan menyediakan konfirmasi visual seketika pada
titik kontak bila pengguna berinteraksi dengan elemen UI. Animasi umpan balik sentuh default
untuk tombol menggunakan kelas {@link android.graphics.drawable.RippleDrawable} baru, yang bertransisi
di antara berbagai status dengan efek riak.</p>
<p>Di sebagian besar kasus, Anda harus menerapkan fungsionalitas ini dalam XML tampilan dengan menetapkan
latar belakang tampilan sebagai:</p>
<ul>
<li><code>?android:attr/selectableItemBackground</code> untuk riak berbatas.</li>
<li><code>?android:attr/selectableItemBackgroundBorderless</code> untuk riak yang meluas ke luar
tampilan. Latar belakang ini akan digambar di atas, dan dibatasi oleh, induk tampilan terdekat dengan
latar belakang non-null.</li>
</ul>
<p class="note"><strong>Catatan:</strong> <code>selectableItemBackgroundBorderless</code> adalah
atribut baru yang diperkenalkan di API level 21.</p>
<p>Atau, Anda bisa mendefinisikan {@link android.graphics.drawable.RippleDrawable}
sebagai sumber daya XML dengan menggunakan elemen <code>ripple</code>.</p>
<p>Anda bisa menetapkan warna ke objek-objek {@link android.graphics.drawable.RippleDrawable}. Untuk mengubah
warna default umpan balik sentuh, gunakan atribut <code>android:colorControlHighlight</code>
tema.</p>
<p>Untuk informasi selengkapnya, lihat referensi API bagi kelas {@link
android.graphics.drawable.RippleDrawable}.</p>
<h2 id="Reveal">Menggunakan Reveal Effect</h2>
<p>Animasi singkap memberi pengguna kesinambungan visual saat menampilkan atau menyembunyikan sekelompok
elemen UI. Metode {@link android.view.ViewAnimationUtils#createCircularReveal
ViewAnimationUtils.createCircularReveal()} memungkinkan Anda menganimasikan lingkaran terpangkas
untuk memperlihatkan atau menyembunyikan tampilan.</p>
<p>Untuk memperlihatkan tampilan yang sebelumnya tidak terlihat dengan menggunakan efek ini:</p>
<pre>
// previously invisible view
View myView = findViewById(R.id.my_view);
// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;
// get the final radius for the clipping circle
int finalRadius = Math.max(myView.getWidth(), myView.getHeight());
// create the animator for this view (the start radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
// make the view visible and start the animation
myView.setVisibility(View.VISIBLE);
anim.start();
</pre>
<p>Untuk menyembunyikan sebuah tampilan yang sebelumnya terlihat dengan menggunakan efek ini:</p>
<pre>
// previously visible view
final View myView = findViewById(R.id.my_view);
// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;
// get the initial radius for the clipping circle
int initialRadius = myView.getWidth();
// create the animation (the final radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);
// make the view invisible when the animation is done
anim.addListener(new AnimatorListenerAdapter() {
&#64;Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
myView.setVisibility(View.INVISIBLE);
}
});
// start the animation
anim.start();
</pre>
<h2 id="Transitions">Menyesuaikan Transisi Aktivitas</h2>
<!-- shared transition video -->
<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/material/videos/ContactsAnim.webm">
<source src="{@docRoot}design/material/videos/ContactsAnim.ogv">
</video>
</div>
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
<p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>Gambar 1</strong> - Transisi
dengan elemen bersama.</p>
<em>Untuk memutar ulang film, klik layar perangkat</em>
</div>
</div>
<p>Transisi aktivitas dalam aplikasi desain bahan memberikan koneksi visual antar berbagai status
melalui gerakan dan transformasi di antara elemen umum. Anda bisa menetapkan animasi custom untuk
masuk ke dan keluar dari transisi dan untuk transisi elemen bersama di antara aktivitas.</p>
<ul>
<li>Transisi <strong>masuk</strong> menentukan cara tampilan di aktivitas memasuki suatu babak.
misalnya, dalam transisi masuk <em>explode</em>, tampilan memasuki babak dari sisi luar
dan melayang masuk ke arah tengah layar.</li>
<li>Transisi <strong>keluar</strong> menentukan cara tampilan di aktivitas keluar dari suatu babak. Misalnya
, dalam transisi keluar <em>explode</em>, tampilan akan keluar dari babak dari bagian
tengahnya.</li>
<li>Transisi <strong>elemen bersama</strong> menentukan cara menggunakan bersama suatu tampilan
oleh dua transisi aktivitas di antara aktivitas-aktivitas ini. Misalnya, jika dua aktivitas memiliki
gambar yang sama dengan posisi dan ukuran berbeda, transisi elemen bersama <em>changeImageTransform</em>
mentransformasikan dan menskalakan gambar secara mulus di antara aktivitas-aktivitas ini.</li>
</ul>
<p>Android 5.0 (API level 21) mendukung transisi masuk dan transisi keluar ini:</p>
<ul>
<li><em>explode</em> - Memindahkan tampilan masuk ke atau keluar dari tengah babak.</li>
<li><em>slide</em> - Memindahkan tampilan masuk ke atau keluar dari salah satu tepi babak.</li>
<li><em>fade</em> - Menambahkan atau menghapus tampilan dari babak dengan mengubah opasitasnya.</li>
</ul>
<p>Transisi apa pun yang memperluas kelas {@link android.transition.Visibility} didukung
sebagai transisi masuk atau transisi keluar. Untuk informasi selengkapnya, lihat referensi API untuk kelas
{@link android.transition.Transition}.</p>
<p>Android 5.0 (API level 21) juga mendukung transisi elemen bersama ini:</p>
<ul>
<li><em>changeBounds</em> - Menganimasikan perubahan pada batas-batas layout tampilan target.</li>
<li><em>changeClipBounds</em> - Menganimasikan perubahan pada batas-batas pemangkasan tampilan target.</li>
<li><em>changeTransform</em> - Menganimasikan perubahan pada skala dan rotasi tampilan target.</li>
<li><em>changeImageTransform</em> - Menganimasikan perubahan pada ukuran dan skala gambar target.</li>
</ul>
<p>Bila Anda mengaktifkan transisi aktivitas dalam aplikasi, transisi memudar-silang default akan
diaktifkan di antara aktivitas masuk dan aktivitas keluar.</p>
<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
<p class="img-caption">
  <strong>Gambar 2</strong> - Transisi babak dengan satu elemen bersama.
</p>
<h3>Menetapkan transisi custom</h3>
<p>Pertama, aktifkan transisi konten jendela dengan atribut <code>android:windowContentTransitions</code>
bila Anda mendefinisikan gaya yang mewarisi tema bahan. Anda juga bisa menetapkan
transisi-transisi masuk, keluar, dan elemen bersama dalam definisi gaya:</p>
<pre>
&lt;style name="BaseAppTheme" parent="android:Theme.Material">
&lt;!-- enable window content transitions -->
&lt;item name="android:windowContentTransitions">true&lt;/item>
&lt;!-- specify enter and exit transitions -->
&lt;item name="android:windowEnterTransition">@transition/explode&lt;/item>
&lt;item name="android:windowExitTransition">@transition/explode&lt;/item>
&lt;!-- specify shared element transitions -->
&lt;item name="android:windowSharedElementEnterTransition">
&#64;transition/change_image_transform&lt;/item>
&lt;item name="android:windowSharedElementExitTransition">
&#64;transition/change_image_transform&lt;/item>
&lt;/style>
</pre>
<p>Transisi <code>change_image_transform</code> dalam contoh ini didefinisikan sebagai berikut:</p>
<pre>
&lt;!-- res/transition/change_image_transform.xml -->
&lt;!-- (see also Shared Transitions below) -->
&lt;transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
&lt;changeImageTransform/>
&lt;/transitionSet>
</pre>
<p>Elemen <code>changeImageTransform</code> menunjukkan
kelas {@link android.transition.ChangeImageTransform}. Untuk informasi selengkapnya, lihat referensi
API untuk {@link android.transition.Transition}.</p>
<p>Sebaliknya, untuk mengaktifkan transisi konten jendela dalam kode Anda, panggil
metode {@link android.view.Window#requestFeature Window.requestFeature()}:</p>
<pre>
// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
// set an exit transition
getWindow().setExitTransition(new Explode());
</pre>
<p>Untuk menetapkan transisi dalam kode Anda, panggil metode-metode ini dengan objek {@link
android.transition.Transition}:</p>
<ul>
<li>{@link android.view.Window#setEnterTransition Window.setEnterTransition()}</li>
<li>{@link android.view.Window#setExitTransition Window.setExitTransition()}</li>
<li>{@link android.view.Window#setSharedElementEnterTransition
Window.setSharedElementEnterTransition()}</li>
<li>{@link android.view.Window#setSharedElementExitTransition
Window.setSharedElementExitTransition()}</li>
</ul>
<p>Metode {@link android.view.Window#setExitTransition setExitTransition()} dan {@link
android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} mendefinisikan
transisi keluar untuk aktivitas yang memanggil. Metode {@link android.view.Window#setEnterTransition
setEnterTransition()} dan {@link android.view.Window#setSharedElementEnterTransition
setSharedElementEnterTransition()} mendefinisikan transisi masuk untuk aktivitas yang dipanggil.</p>
<p>Untuk mendapatkan efek penuh sebuah transisi, Anda harus mengaktifkan transisi konten jendela pada
aktivitas yang memanggil maupun aktivitas yang dipanggil. Jika tidak, aktivitas yang memanggil akan memulai transisi keluar,
namun kemudian Anda akan melihat transisi jendela (seperti mengelupas atau memudar).</p>
<p>Untuk memulai transisi masuk sesegera mungkin, gunakan metode
{@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()}
pada aktivitas yang dipanggil. Ini memungkinkan Anda mendapatkan transisi masuk yang lebih dramatis.</p>
<h3>Memulai aktivitas dengan menggunakan transisi</h3>
<p>Jika Anda mengaktifkan transisi dan mengatur transisi keluar untuk aktivitas, transisi itu akan diaktifkan
bila Anda menjalankan aktivitas lain sebagai berikut:</p>
<pre>
startActivity(intent,
ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
</pre>
<p>Jika Anda telah mengatur transisi masuk untuk aktivitas kedua, transisi juga akan diaktifkan
bila aktivitas dimulai. Untuk menonaktifkan transisi bila Anda memulai aktivitas lain, sediakan
bundel opsi <code>null</code>.</p>
<h3>Memulai aktivitas dengan satu elemen bersama</h3>
<p>Untuk membuat animasi transisi layar di antara dua aktivitas yang memiliki satu elemen bersama:</p>
<ol>
<li>Aktifkan transisi konten jendela dalam tema Anda.</li>
<li>Tetapkan transisi elemen bersama dalam gaya Anda.</li>
<li>Definisikan transisi Anda sebagai sumber daya XML.</li>
<li>Tetapkan nama umum pada elemen bersama dalam kedua layout dengan
atribut <code>android:transitionName</code>.</li>
<li>Gunakan metode {@link android.app.ActivityOptions#makeSceneTransitionAnimation
ActivityOptions.makeSceneTransitionAnimation()}.</li>
</ol>
<pre>
// get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);
// get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);
// define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
&#64;Override
public void onClick(View view) {
Intent intent = new Intent(this, Activity2.class);
// create the transition animation - the images in the layouts
// of both activities are defined with android:transitionName="robot"
ActivityOptions options = ActivityOptions
.makeSceneTransitionAnimation(this, androidRobotView, "robot");
// start the new activity
startActivity(intent, options.toBundle());
}
});
</pre>
<p>Untuk tampilan dinamis bersama yang Anda hasilkan dalam kode, gunakan
metode {@link android.view.View#setTransitionName View.setTransitionName()} untuk menetapkan
nama elemen umum di kedua aktivitas.</p>
<p>Untuk membalik animasi transisi babak bila Anda menyelesaikan aktivitas kedua, panggil metode
{@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()}
sebagai ganti {@link android.app.Activity#finish Activity.finish()}.</p>
<h3>Memulai aktivitas dengan beberapa elemen bersama</h3>
<p>Untuk membuat animasi transisi babak antara dua aktivitas yang memiliki lebih dari satu
elemen bersama, definisikan elemen bersama di kedua layout dengan atribut <code>android:transitionName</code>
(atau gunakan metode {@link android.view.View#setTransitionName View.setTransitionName()}
di kedua aktivitas), dan buat sebuah objek {@link android.app.ActivityOptions} sebagai berikut:</p>
<pre>
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
Pair.create(view1, "agreedName1"),
Pair.create(view2, "agreedName2"));
</pre>
<h2 id="CurvedMotion">Menggunakan Gerakan Melengkung</h2>
<p>Animasi dalam desain bahan mengandalkan kurva untuk pola interpolasi waktu dan
gerakan spasial. Dengan Android 5.0 (API level 21) ke atas, Anda bisa mendefinisikan kurva pewaktuan custom dan
pola gerakan melengkung untuk animasi.</p>
<p>Kelas {@link android.view.animation.PathInterpolator} adalah interpolator baru berdasarkan sebuah
kurva Bézier atau objek {@link android.graphics.Path}. Interpolator ini menetapkan kurva gerakan
dalam bujur sangkar 1x1, dengan titik-titik jangkar di (0,0) dan (1,1) dan titik-titik kontrol sebagaimana ditetapkan menggunakan
argumen konstruktor. Anda juga bisa mendefinisikan interpolator path sebagai sumber daya XML:</p>
<pre>
&lt;pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:controlX1="0.4"
android:controlY1="0"
android:controlX2="1"
android:controlY2="1"/>
</pre>
<p>Sistem menyediakan sumber daya XML untuk tiga kurva dasar dalam
spesifikasi desain bahan:</p>
<ul>
<li><code>&#64;interpolator/fast_out_linear_in.xml</code></li>
<li><code>&#64;interpolator/fast_out_slow_in.xml</code></li>
<li><code>&#64;interpolator/linear_out_slow_in.xml</code></li>
</ul>
<p>Anda bisa meneruskan objek {@link android.view.animation.PathInterpolator} ke metode {@link
android.animation.Animator#setInterpolator Animator.setInterpolator()}.</p>
<p>Kelas {@link android.animation.ObjectAnimator} memiliki konstruktor-konstruktor baru yang memungkinkan Anda menganimasikan
koordinat bersama sebuah path dengan menggunakan dua atau beberapa properti sekaligus. Misalnya, animator berikut
menggunakan objek {@link android.graphics.Path} untuk menganimasikan properti X dan Y sebuah tampilan:</p>
<pre>
ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();
</pre>
<h2 id="ViewState">Menganimasikan Perubahan Status Tampilan</h2>
<p>Kelas {@link android.animation.StateListAnimator} memungkinkan Anda mendefinisikan animator yang berjalan bila
status tampilan berubah. Contoh berikut menampilkan cara mendefinisikan {@link
android.animation.StateListAnimator} sebagai sumber daya XML:</p>
<pre>
&lt;!-- animate the translationZ property of a view when pressed -->
&lt;selector xmlns:android="http://schemas.android.com/apk/res/android">
&lt;item android:state_pressed="true">
&lt;set>
&lt;objectAnimator android:propertyName="translationZ"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="2dp"
android:valueType="floatType"/>
&lt;!-- you could have other objectAnimator elements
here for "x" and "y", or other properties -->
&lt;/set>
&lt;/item>
&lt;item android:state_enabled="true"
android:state_pressed="false"
android:state_focused="true">
&lt;set>
&lt;objectAnimator android:propertyName="translationZ"
android:duration="100"
android:valueTo="0"
android:valueType="floatType"/>
&lt;/set>
&lt;/item>
&lt;/selector>
</pre>
<p>Untuk menyertakan animasi status tampilan custom ke tampilan, definisikan animator menggunakan
elemen <code>selector</code> dalam sumber daya file XML sebagaimana dalam contoh ini, dan tetapkan ke
tampilan Anda dengan atribut <code>android:stateListAnimator</code>. Untuk menetapkan animator daftar status
ke sebuah tampilan dalam kode Anda, gunakan metode {@link android.animation.AnimatorInflater#loadStateListAnimator
AnimationInflater.loadStateListAnimator()}, dan tetapkan animator ke tampilan dengan
metode {@link android.view.View#setStateListAnimator View.setStateListAnimator()}.</p>
<p>Bila tema Anda memperluas tema bahan, tombol-tombol akan memiliki animasi Z secara default. Untuk menghindari
perilaku ini di tombol Anda, aturlah atribut <code>android:stateListAnimator</code> ke
<code>@null</code>.</p>
<p>Kelas {@link android.graphics.drawable.AnimatedStateListDrawable} memungkinkan Anda membuat drawable
yang menampilkan animasi di antara perubahan status tampilan terkait. Sebagian widget sistem di
Android 5.0 menggunakan animasi ini secara default. Contoh berikut menampilkan cara
mendefinisikan {@link android.graphics.drawable.AnimatedStateListDrawable} sebagai sumber daya XML:</p>
<pre>
&lt;!-- res/drawable/myanimstatedrawable.xml -->
&lt;animated-selector
xmlns:android="http://schemas.android.com/apk/res/android">
&lt;!-- provide a different drawable for each state-->
&lt;item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
android:state_pressed="true"/>
&lt;item android:id="@+id/focused" android:drawable="@drawable/drawableF"
android:state_focused="true"/>
&lt;item android:id="@id/default"
android:drawable="@drawable/drawableD"/>
&lt;!-- specify a transition -->
&lt;transition android:fromId="@+id/default" android:toId="@+id/pressed">
&lt;animation-list>
&lt;item android:duration="15" android:drawable="@drawable/dt1"/>
&lt;item android:duration="15" android:drawable="@drawable/dt2"/>
...
&lt;/animation-list>
&lt;/transition>
...
&lt;/animated-selector>
</pre>
<h2 id="AnimVector">Menganimasikan Drawable Vektor</h2>
<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">Drawable Vektor </a>
bisa diubah skalanya tanpa kehilangan definisi. Kelas {@link android.graphics.drawable.AnimatedVectorDrawable}
memungkinkan Anda menganimasikan properti drawable vektor.</p>
<p>Anda biasanya mendefinisikan drawable vektor yang dianimasikan dalam tiga file XML:</p>
<ul>
<li>Drawable vektor dengan elemen <code>&lt;vector&gt;</code> dalam
<code>res/drawable/</code></li>
<li>Drawable vektor animasi dengan elemen <code>&lt;animated-vector&gt;</code> dalam
<code>res/drawable/</code></li>
<li>Satu atau beberapa animator objek dengan elemen <code>&lt;objectAnimator&gt;</code> dalam
<code>res/anim/</code></li>
</ul>
<p>Drawable vektor yang dianimasikan bisa menganimasikan atribut elemen <code>&lt;group&gt;</code> dan
<code>&lt;path&gt;</code>. Elemen <code>&lt;group&gt;</code> mendefinisikan satu set
path atau subgrup, dan elemen <code>&lt;path&gt;</code> mendefinisikan path yang harus digambar.</p>
<p>Bila Anda mendefinisikan drawable vektor yang ingin dianimasikan, gunakan atribut <code>android:name</code>
untuk menetapkan nama unik ke grup dan path, sehingga Anda bisa merujuknya dari
definisi animator Anda. Misalnya:</p>
<pre>
&lt;!-- res/drawable/vectordrawable.xml -->
&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600">
&lt;group
<strong>android:name="rotationGroup"</strong>
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0" >
&lt;path
<strong>android:name="v"</strong>
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
&lt;/group>
&lt;/vector>
</pre>
<p>Definisi drawable vektor yang dianimasikan merujuk pada grup dan path dalam drawable vektor
berdasarkan namanya:</p>
<pre>
&lt;!-- res/drawable/animvectordrawable.xml -->
&lt;animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vectordrawable" >
&lt;target
android:name="rotationGroup"
android:animation="@anim/rotation" />
&lt;target
android:name="v"
android:animation="@anim/path_morph" />
&lt;/animated-vector>
</pre>
<p>Definisi animasi menyatakan objek {@link android.animation.ObjectAnimator} atau {@link
android.animation.AnimatorSet}. Animator pertama dalam contoh ini memutar
grup target sebanyak 360 derajat:</p>
<pre>
&lt;!-- res/anim/rotation.xml -->
&lt;objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
</pre>
<p>Animator kedua dalam contoh ini perlahan-lahan mengubah bentuk path drawable vektor dari satu bentuk ke
bentuk yang lain. Kedua path harus kompatibel untuk morphing: keduanya harus memiliki jumlah perintah yang sama
dan jumlah parameter yang sama untuk setiap perintah.</p>
<pre>
&lt;!-- res/anim/path_morph.xml -->
&lt;set xmlns:android="http://schemas.android.com/apk/res/android">
&lt;objectAnimator
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"
android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"
android:valueType="pathType" />
&lt;/set>
</pre>
<p>Untuk informasi selengkapnya, lihat referensi API bagi {@link
android.graphics.drawable.AnimatedVectorDrawable}.</p>

168
docs/html-intl/intl/in/training/material/compatibility.jd Normal file
View File

@@ -0,0 +1,168 @@
page.title=Mempertahankan Kompatibilitas
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Pelajaran ini mengajarkan Anda cara</h2>
<ol>
<li><a href="#Theme">Mendefinisikan Gaya Alternatif</a></li>
<li><a href="#Layouts">Menyediakan Layout Alternatif</a></li>
<li><a href="#SupportLib">Menggunakan Support Library</a></li>
<li><a href="#CheckVersion">Memeriksa Versi Sistem</a></li>
</ol>
<h2>Anda juga harus membaca</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Spesifikasi desain bahan</a></li>
<li><a href="{@docRoot}design/material/index.html">Desain bahan di Android</a></li>
</ul>
</div>
</div>
<p>Sebagian fitur desain bahan seperti tema bahan dan transisi aktivitas custom
hanya tersedia pada Android 5.0 (API level 21) ke atas. Akan tetapi, Anda bisa mendesain aplikasi untuk menggunakan
fitur-fitur ini saat dijalankan pada perangkat yang mendukung desain bahan dan tetap kompatibel
dengan perangkat yang menjalankan rilis Android sebelumnya.</p>
<h2 id="Theme">Mendefinisikan Gaya Alternatif</h2>
<p>Anda bisa mengonfigurasi aplikasi untuk menggunakan tema bahan pada perangkat yang mendukungnya dan mengembalikan
ke tema lama pada perangkat yang menjalankan versi Android terdahulu:</p>
<ol>
<li>Definisikan tema yang mewarisi tema lama (seperti Holo) di
<code>res/values/styles.xml</code>.</li>
<li>Definisikan tema bernama sama yang mewarisi tema bahan di
<code>res/values-v21/styles.xml</code>.</li>
<li>Atur tema ini sebagai tema aplikasi Anda dalam file manifes.</li>
</ol>
<p class="note"><strong>Catatan:</strong>
Jika aplikasi Anda menggunakan tema bahan namun tidak menyediakan tema alternatif dengan cara ini,
aplikasi itu tidak akan berjalan pada versi Android sebelum 5.0.
</p>
<h2 id="Layouts">Menyediakan Layout Alternatif</h2>
<p>Jika layout yang Anda desain sesuai dengan panduan desain bahan tidak menggunakan salah satu
atribut XML baru yang diperkenalkan di Android 5.0 (API level 21), layout itu akan berfungsi pada
versi Android sebelumnya. Jika tidak, Anda bisa menyediakan layout alternatif. Anda juga bisa menyediakan
layout alternatif untuk menyesuaikan cara aplikasi ditampilkan pada versi Android terdahulu.</p>
<p>Buatlah file layout untuk Android 5.0 (API level 21) dalam <code>res/layout-v21/</code> dan
file layout alternatif untuk versi Android terdahulu dalam <code>res/layout/</code>.
Misalnya, <code>res/layout/my_activity.xml</code> adalah layout alternatif untuk
<code>res/layout-v21/my_activity.xml</code>.</p>
<p>Untuk menghindari duplikasi kode, definisikan gaya dalam <code>res/values/</code>, modifikasi
gaya di <code>res/values-v21/</code> untuk API baru, dan gunakan pewarisan gaya, dengan mendefinisikan
gaya dasar di <code>res/values/</code> dan mewarisi gaya di <code>res/values-v21/</code>.</p>
<h2 id="SupportLib">Menggunakan Support Library</h2>
<p><a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Library</a>
r21 ke atas menyertakan fitur desain bahan berikut:</p>
<ul>
<li><a href="{@docRoot}training/material/theme.html">Gaya desain bahan</a> untuk beberapa widget sistem
bila Anda menerapkan salah satu tema <code>Theme.AppCompat</code>.</li>
<li><a href="{@docRoot}training/material/theme.html#ColorPalette">Atribut tema palet warna</a>
dalam tema <code>Theme.AppCompat</code>.</li>
<li>Widget {@link android.support.v7.widget.RecyclerView} untuk <a href="{@docRoot}training/material/lists-cards.html#RecyclerView">
menampilkan kumpulan data.</a></li>
<li>Widget {@link android.support.v7.widget.CardView} untuk <a href="{@docRoot}training/material/lists-cards.html#CardView">membuat kartu</a>.</li>
<li>Kelas {@link android.support.v7.graphics.Palette} untuk <a href="{@docRoot}training/material/drawables.html#ColorExtract">mengekstrak warna mencolok dari
gambar</a>.</li>
</ul>
<h3>Widget sistem</h3>
<p>Tema-tema <code>Theme.AppCompat</code> menyediakan gaya desain bahan untuk widget ini:</p>
<ul>
<li>{@link android.widget.EditText}</li>
<li>{@link android.widget.Spinner}</li>
<li>{@link android.widget.CheckBox}</li>
<li>{@link android.widget.RadioButton}</li>
<li>{@link android.support.v7.widget.SwitchCompat}</li>
<li>{@link android.widget.CheckedTextView}</li>
</ul>
<h3>Palet Warna</h3>
<p>Untuk memperoleh gaya desain bahan dan menyesuaikan palet warna dengan Android v7 Support
Library, terapkan salah satu tema <code>Theme.AppCompat</code>:</p>
<pre>
&lt;!-- extend one of the Theme.AppCompat themes -->
&lt;style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
&lt;!-- customize the color palette -->
&lt;item name="colorPrimary">@color/material_blue_500&lt;/item>
&lt;item name="colorPrimaryDark">@color/material_blue_700&lt;/item>
&lt;item name="colorAccent">@color/material_green_A200&lt;/item>
&lt;/style>
</pre>
<h3>Daftar dan Kartu</h3>
<p>Widget {@link android.support.v7.widget.RecyclerView} dan {@link
android.support.v7.widget.CardView} tersedia di versi Android terdahulu melalui
Android v7 Support Library dengan pembatasan ini:</p>
<ul>
<li>{@link android.support.v7.widget.CardView} memundurkan ke implementasi bayangan terprogram
dengan menggunakan pengisi tambahan.</li>
<li>{@link android.support.v7.widget.CardView} tidak memangkas tampilan anaknya yang berpotongan
dengan sudut melengkung.</li>
</ul>
<h3>Dependensi</h3>
<p>Untuk menggunakan fitur-fitur ini di versi Android sebelum 5.0 (API level 21), sertakan
Android v7 Support Library dalam proyek Anda sebagai <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">dependensi Gradle</a>:</p>
<pre>
dependencies {
compile 'com.android.support:appcompat-v7:21.0.+'
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}
</pre>
<h2 id="CheckVersion">Memeriksa Versi Sistem</h2>
<p>Fitur berikut hanya tersedia di Android 5.0 (API level 21) ke atas:</p>
<ul>
<li>Transisi aktivitas</li>
<li>Umpan balik sentuh</li>
<li>Animasi membuka</li>
<li>Animasi berbasis path</li>
<li>Drawable vektor</li>
<li>Pewarnaan drawable</li>
</ul>
<p>Untuk menjaga kompatibilitas dengan versi Android terdahulu, periksa {@link
android.os.Build.VERSION#SDK_INT version} sistem saat runtime sebelum Anda memanggil API untuk salah satu
fitur ini:</p>
<pre>
// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// Call some material design APIs here
} else {
// Implement this feature without material design
}
</pre>
<p class="note"><strong>Catatan:</strong> Untuk menetapkan versi Android yang didukung aplikasi Anda,
gunakan atribut <code>android:minSdkVersion</code> dan <code>android:targetSdkVersion</code>
dalam file manifes. Untuk menggunakan fitur desain bahan di Android 5.0, atur
atribut <code>android:targetSdkVersion</code> ke <code>21</code>. Untuk informasi selengkapnya, lihat
panduan <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">API
&lt;uses-sdk&gt;</a>.</p>

126
docs/html-intl/intl/in/training/material/drawables.jd Normal file
View File

@@ -0,0 +1,126 @@
page.title=Bekerja dengan Drawable
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Pelajaran ini mengajarkan Anda cara</h2>
<ol>
<li><a href="#DrawableTint">Mewarnai Sumber Daya Drawable</a></li>
<li><a href="#ColorExtract">Mengekstrak Warna Mencolok dari Gambar</a></li>
<li><a href="#VectorDrawables">Membuat Drawable Vektor</a></li>
</ol>
<h2>Anda juga harus membaca</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Spesifikasi desain bahan</a></li>
<li><a href="{@docRoot}design/material/index.html">Desain bahan di Android</a></li>
</ul>
</div>
</div>
<p>Kemampuan berikut untuk drawable membantu Anda mengimplementasikan desain bahan dalam aplikasi Anda:</p>
<ul>
<li>Pewarnaan drawable</li>
<li>Ekstraksi warna mencolok</li>
<li>Drawable vektor</li>
</ul>
<p>Pelajaran ini menampilkan cara menggunakan fitur-fitur ini dalam aplikasi Anda.</p>
<h2 id="DrawableTint">Mewarnai Sumber Daya Drawable</h2>
<p>Dengan Android 5.0 (API level 21) ke atas, Anda bisa mewarnai bitmap dan sembilan-tambalan yang didefinisikan sebagai
alpha-mask. Anda bisa mewarnainya dengan sumber daya warna atau atribut tema yang mencocokkan ke
sumber daya warna (misalnya, <code>?android:attr/colorPrimary</code>). Biasanya, Anda membuat aset ini
hanya sekali dan mewarnainya secara otomatis agar cocok dengan tema Anda.</p>
<p>Anda bisa menerapkan warna ke objek {@link android.graphics.drawable.BitmapDrawable} atau {@link
android.graphics.drawable.NinePatchDrawable} dengan metode {@code setTint()}. Anda juga bisa
mengatur warna dan mode dalam layout dengan atribut <code>android:tint</code> dan
<code>android:tintMode</code>.</p>
<h2 id="ColorExtract">Mengekstrak Warna Mencolok dari Gambar</h2>
<p>Android Support Library r21 ke atas menyertakan kelas {@link
android.support.v7.graphics.Palette}, yang memungkinkan Anda mengekstrak warna mencolok dari gambar.
Kelas ini mengekstrak warna mencolok berikut:</p>
<ul>
<li>Menyala</li>
<li>Menyala pekat</li>
<li>Menyala pucat</li>
<li>Pudar</li>
<li>Pudar pekat</li>
<li>Pudar pucat</li>
</ul>
<p>Untuk mengekstrak warna-warna ini, teruskan objek {@link android.graphics.Bitmap} ke
metode statis {@link android.support.v7.graphics.Palette#generate Palette.generate()} dalam
thread latar belakang tempat Anda memuat gambar. Jika Anda tidak bisa menggunakan thread itu, panggil metode
{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} dan
sediakan listener sebagai gantinya.</p>
<p>Anda bisa mengambil warna mencolok dari gambar dengan metode getter di kelas
<code>Palette</code>, misalnya <code>Palette.getVibrantColor</code>.</p>
<p>Untuk menggunakan kelas {@link android.support.v7.graphics.Palette} dalam proyek Anda, tambahkan
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">dependensi Gradle</a> berikut ke
modul aplikasi Anda:</p>
<pre>
dependencies {
...
compile 'com.android.support:palette-v7:21.0.0'
}
</pre>
<p>Untuk informasi selengkapnya, lihat referensi API untuk kelas {@link android.support.v7.graphics.Palette}.
</p>
<h2 id="VectorDrawables">Membuat Drawable Vektor</h2>
<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
<div>
<h3>Video</h3>
<p>Grafis Vektor Android</p>
</div>
</a>
<p>Di Android 5.0 (API Level 21) ke atas, Anda bisa mendefinisikan drawable vektor, yang berubah skala tanpa
kehilangan definisi. Anda hanya memerlukan satu file aset per gambar vektor, bukan file aset untuk
setiap densitas layar seperti pada gambar bitmap. Untuk membuat gambar vektor, Anda mendefinisikan detail
bentuknya dalam sebuah elemen XML <code>&lt;vector&gt;</code>.</p>
<p>Contoh berikut mendefinisikan gambar vektor berbentuk hati:</p>
<pre>
&lt;!-- res/drawable/heart.xml -->
&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
&lt;!-- intrinsic size of the drawable -->
android:height="256dp"
android:width="256dp"
&lt;!-- size of the virtual canvas -->
android:viewportWidth="32"
android:viewportHeight="32">
&lt;!-- draw a path -->
&lt;path android:fillColor="#8fff"
android:pathData="M20.5,9.5
c-1.955,0,-3.83,1.268,-4.5,3
c-0.67,-1.732,-2.547,-3,-4.5,-3
C8.957,9.5,7,11.432,7,14
c0,3.53,3.793,6.257,9,11.5
c5.207,-5.242,9,-7.97,9,-11.5
C25,11.432,23.043,9.5,20.5,9.5z" />
&lt;/vector>
</pre>
<p>Gambar vektor direpresentasikan di Android sebagai objek {@link android.graphics.drawable.VectorDrawable}.
Untuk informasi selengkapnya tentang sintaks <code>pathData</code>, lihat <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">Referensi Path SVG</a>. Untuk informasi selengkapnya
tentang menganimasikan properti drawable vektor, lihat
<a href="{@docRoot}training/material/animations.html#AnimVector">Menganimasikan Drawable Vektor</a>.</p>

171
docs/html-intl/intl/in/training/material/get-started.jd Normal file
View File

@@ -0,0 +1,171 @@
page.title=Memulai
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Pelajaran ini mengajarkan Anda cara</h2>
<ol>
<li><a href="#ApplyTheme">Menerapkan Tema Bahan</a></li>
<li><a href="#Layouts">Mendesain Layout Anda</a></li>
<li><a href="#Depth">Menetapkan Ketinggian di Tampilan Anda</a></li>
<li><a href="#ListsCards">Membuat Daftar dan Kartu</a></li>
<li><a href="#Animations">Menyesuaikan Animasi Anda</a></li>
</ol>
<h2>Anda juga harus membaca</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Spesifikasi desain bahan</a></li>
<li><a href="{@docRoot}design/material/index.html">Desain bahan di Android</a></li>
</ul>
</div>
</div>
<p>Untuk membuat aplikasi dengan desain bahan:</p>
<ol>
<li style="margin-bottom:10px">
Tinjaulah <a href="http://www.google.com/design/spec">spesifikasi desain bahan</a>.</li>
<li style="margin-bottom:10px">
Terapkan <strong>tema</strong> bahan ke aplikasi Anda.</li>
<li style="margin-bottom:10px">
Buat <strong>layout</strong> agar mengikuti panduan desain bahan.</li>
<li style="margin-bottom:10px">
Tetapkan <strong>ketinggian</strong> tampilan Anda untuk menghasilkan bayangan.</li>
<li style="margin-bottom:10px">
Gunakan <strong>widget</strong> sistem untuk daftar dan kartu.</li>
<li style="margin-bottom:10px">
Sesuaikan <strong>animasi</strong> di aplikasi Anda.</li>
</ol>
<h3>Mempertahankan kompatibilitas mundur</h3>
<p>Anda bisa menambahkan banyak fitur desain bahan ke aplikasi sekaligus mempertahankan kompatibilitas dengan
versi Android sebelum 5.0. Untuk informasi selengkapnya, lihat
<a href="{@docRoot}training/material/compatibility.html">Mempertahankan Kompatibilitas</a>.</p>
<h3>Memperbarui aplikasi dengan desain bahan</h3>
<p>Untuk memperbarui aplikasi yang ada guna memasukkan desain bahan, perbarui layout Anda dengan mengikuti
panduan desain bahan. Juga pastikan memasukkan kedalaman, umpan balik sentuh, dan
animasi.</p>
<h3>Membuat aplikasi baru dengan desain bahan</h3>
<p>Jika Anda sedang membuat aplikasi baru dengan fitur desain bahan, <a href="http://www.google.com/design/spec">panduan desain bahan</a> akan memberi Anda
kerangka kerja desain yang kohesif. Ikuti panduan itu dan gunakan fungsionalitas baru di
kerangka kerja Android untuk mendesain dan mengembangkan aplikasi Anda.</p>
<h2 id="ApplyTheme">Menerapkan Tema Bahan</h2>
<p>Untuk menerapkan tema bahan dalam aplikasi Anda, tetapkan gaya yang mewarisi
<code>android:Theme.Material</code>:</p>
<pre>
&lt;!-- res/values/styles.xml -->
&lt;resources>
&lt;!-- your theme inherits from the material theme -->
&lt;style name="AppTheme" parent="android:Theme.Material">
&lt;!-- theme customizations -->
&lt;/style>
&lt;/resources>
</pre>
<p>Tema bahan menyediakan widget sistem terbaru yang memungkinkan Anda mengatur palet warnanya dan
animasi default untuk umpan balik sentuh dan transisi aktivitas. Untuk detail selengkapnya, lihat
<a href="{@docRoot}training/material/theme.html">Menggunakan Tema Bahan</a>.</p>
<h2 id="Layouts">Mendesain Layout Anda</h2>
<p>Selain menerapkan dan menyesuaikan tema bahan, layout Anda harus mematuhi
<a href="http://www.google.com/design/spec">panduan desain bahan</a>. Bila Anda mendesain
layout, berikan perhatian khusus pada hal-hal berikut:</p>
<ul>
<li>Petak patokan</li>
<li>Garis utama</li>
<li>Pengaturan Jarak</li>
<li>Ukuran target sentuh</li>
<li>Struktur layout</li>
</ul>
<h2 id="Depth">Menetapkan Ketinggian di Tampilan Anda</h2>
<p>Tampilan bisa menghasilkan bayangan, dan nilai ketinggian tampilan
menentukan ukuran bayangan dan urutan penggambarannya. Untuk mengatur ketinggian tampilan, gunakan
atribut <code>android:elevation</code> dalam layout:</p>
<pre>
&lt;TextView
android:id="&#64;+id/my_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="&#64;string/next"
android:background="&#64;color/white"
android:elevation="5dp" />
</pre>
<p>Properti <code>translationZ</code> baru memungkinkan Anda membuat animasi yang mencerminkan
perubahan sementara pada ketinggian tampilan. Perubahan ketinggian bisa berguna saat
<a href="{@docRoot}training/material/animations.html#ViewState">merespons
gerakan sentuh</a>.</p>
<p>Untuk detail selengkapnya, lihat <a href="{@docRoot}training/material/shadows-clipping.html">Mendefinisikan
Bayangan dan Memangkas Tampilan</a>.</p>
<h2 id="ListsCards">Membuat Daftar dan Kartu</h2>
<p>{@link android.support.v7.widget.RecyclerView} adalah versi {@link
android.widget.ListView} yang lebih mudah dimasukkan dan mendukung beragam tipe layout serta memberikan peningkatan kinerja.
{@link android.support.v7.widget.CardView} memungkinkan Anda menampilkan potongan informasi dalam kartu dengan
tampilan konsisten di seluruh aplikasi. Contoh kode berikut memperagakan cara menyertakan
{@link android.support.v7.widget.CardView} dalam layout Anda:</p>
<pre>
&lt;android.support.v7.widget.CardView
android:id="&#64;+id/card_view"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="3dp">
...
&lt;/android.support.v7.widget.CardView>
</pre>
<p>Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/lists-cards.html">Membuat Daftar
dan Kartu</a>.</p>
<h2 id="Animations">Menyesuaikan Animasi Anda</h2>
<p>Android 5.0 (API level 21) menyertakan API baru untuk membuat animasi custom di aplikasi Anda.
Misalnya, Anda bisa mengaktifkan transisi aktivitas dan mendefinisikan transisi keluar di
aktivitas:</p>
<pre>
public class MyActivity extends Activity {
&#64;Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// enable transitions
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
setContentView(R.layout.activity_my);
}
public void onSomeButtonClicked(View view) {
getWindow().setExitTransition(new Explode());
Intent intent = new Intent(this, MyOtherActivity.class);
startActivity(intent,
ActivityOptions
.makeSceneTransitionAnimation(this).toBundle());
}
}
</pre>
<p>Bila Anda memulai aktivitas lain dari aktivitas ini, transisi keluar akan diaktifkan.</p>
<p>Untuk mengetahui selengkapnya tentang API animasi yang baru, lihat <a href="{@docRoot}training/material/animations.html">Mendefinisikan Animasi Custom</a>.</p>

61
docs/html-intl/intl/in/training/material/index.jd Normal file
View File

@@ -0,0 +1,61 @@
page.title=Desain Bahan untuk Pengembang
page.type=desain
page.image=gambar/kartu/material_2x.png
page.metaDescription=Pelajari cara menerapkan desain bahan pada aplikasi Anda.
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Dependensi dan Prasyarat</h2>
<ul>
<li>Android 5.0 (API Level 21)</li>
</ul>
</div>
</div>
<p>Desain bahan adalah panduan komprehensif untuk desain visual, gerak, dan interaksi di
berbagai platform dan perangkat. Untuk menggunakan desain bahan di aplikasi Android, ikuti panduan
yang dijelaskan dalam
<a href="http://www.google.com/design/spec/material-design/introduction.html">spesifikasi desain bahan
</a> dan gunakan komponen serta fungsionalitas baru yang tersedia di Android 5.0
(API level 21).</p>
<p>Kelas ini menampilkan kepada Anda cara membuat aplikasi desain bahan dengan elemen-elemen berikut:</p>
<ul>
<li>Tema bahan</li>
<li>Widget untuk kartu dan daftar</li>
<li>Bayangan custom dan pemangkasan tampilan</li>
<li>Drawable vektor</li>
<li>Animasi custom</li>
</ul>
<p>Kelas ini juga mengajarkan cara mempertahankan kompatibilitas dengan versi Android sebelum
5.0 (API level 21) bila Anda menggunakan fitur desain bahan dalam aplikasi.</p>
<h2>Pelajaran</h2>
<dl>
<dt><a href="{@docRoot}training/material/get-started.html">Memulai</a></dt>
<dd>Pelajari cara memperbarui aplikasi Anda dengan fitur desain bahan.</dd>
<dt><a href="{@docRoot}training/material/theme.html">Menggunakan Tema Bahan</a></dt>
<dd>Pelajari cara menerapkan gaya desain bahan pada aplikasi Anda.</dd>
<dt><a href="{@docRoot}training/material/lists-cards.html">Membuat Daftar dan Kartu</a></dt>
<dd>Pelajari cara membuat daftar dan kartu dengan tampilan dan cara kerja yang konsisten menggunakan widget sistem.</dd>
<dt><a href="{@docRoot}training/material/shadows-clipping.html">Mendefinisikan Bayangan dan Memangkas Tampilan</a></dt>
<dd>Pelajari cara mengatur elevasi tampilan Anda untuk membuat bayangan custom dan cara memangkas tampilan.</dd>
<dt><a href="{@docRoot}training/material/drawables.html">Bekerja dengan Drawable</a></dt>
<dd>Pelajari cara membuat drawable vektor dan cara mewarnai sumber daya drawable.</dd>
<dt><a href="{@docRoot}training/material/animations.html">Mendefinisikan Animasi Custom</a></dt>
<dd>Pelajari cara membuat animasi custom untuk tampilan dan transisi aktivitas dengan elemen bersama.</dd>
<dt><a href="{@docRoot}training/material/compatibility.html">Mempertahankan Kompatibilitas</a></dt>
<dd>Pelajari cara mempertahankan kompatibilitas dengan versi platform sebelum Android 5.0.</dd>
</dl>

266
docs/html-intl/intl/in/training/material/lists-cards.jd Normal file
View File

@@ -0,0 +1,266 @@
page.title=Membuat Daftar dan Kartu
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Pelajaran ini mengajarkan Anda cara</h2>
<ol>
<li><a href="#RecyclerView">Membuat Daftar</a></li>
<li><a href="#CardView">Membuat Kartu</a></li>
<li><a href="#Dependencies">Menambahkan Dependensi</a></li>
</ol>
<h2>Anda juga harus membaca</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Spesifikasi desain bahan</a></li>
<li><a href="{@docRoot}design/material/index.html">Desain bahan di Android</a></li>
</ul>
</div>
</div>
<p>Untuk membuat daftar dan kartu yang kompleks dengan gaya desain bahan di aplikasi, Anda bisa menggunakan widget
{@link android.support.v7.widget.RecyclerView} dan {@link android.support.v7.widget.CardView}.
</p>
<h2 id="RecyclerView">Membuat Daftar</h2>
<p>Widget {@link android.support.v7.widget.RecyclerView} adalah
versi {@link android.widget.ListView} yang lebih maju dan fleksibel. Widget ini adalah kontainer untuk menampilkan set data
besar yang bisa digulir secara sangat efisien dengan mempertahankan tampilan dalam jumlah terbatas. Gunakan
widget {@link android.support.v7.widget.RecyclerView} bila Anda memiliki kumpulan data dengan elemen
yang berubah saat runtime berdasarkan tindakan pengguna atau kejadian jaringan.</p>
<p>Kelas {@link android.support.v7.widget.RecyclerView} menyederhanakan penampilan dan penanganan
set data yang besar dengan menyediakan:</p>
<ul>
<li>Pengelola layout untuk memosisikan item</li>
<li>Animasi default untuk operasi item umum, misalnya penghapusan atau penambahan item</li>
</ul>
<p>Anda juga memiliki keluwesan untuk mendefinisikan pengelola layout custom dan animasi untuk widget {@link
android.support.v7.widget.RecyclerView}.</p>
<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" />
<p class="img-caption">
<strong>Gambar 1</strong>. Widget <code>RecyclerView</code>.
</p>
<p>Untuk menggunakan widget {@link android.support.v7.widget.RecyclerView}, Anda harus menetapkan
adaptor dan pengelola layout. Untuk membuat adaptor, perluas kelas {@link
android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter}. Detail
implementasi bergantung pada detail set data Anda dan tipe tampilan. Untuk informasi selengkapnya,
lihat <a href="#RVExamples">contoh-contoh</a> di bawah.</p>
<div style="float:right">
<img src="{@docRoot}design/material/images/list_mail.png" alt="" width="250" height="426" />
<p class="img-caption" style="margin-left:8px">
<strong>Gambar 2</strong> - Daftar berisi <code>RecyclerView</code>.
</p>
</div>
<p><strong>Pengelola layout</strong> memosisikan tampilan item dalam {@link
android.support.v7.widget.RecyclerView} dan menentukan waktu untuk menggunakan ulang tampilan item yang tidak
lagi terlihat oleh pengguna. Untuk menggunakan ulang (atau <em>mendaur ulang</em>) tampilan, pengelola layout bisa meminta
adaptor untuk mengganti konten tampilan dengan elemen lain dalam dataset. Mendaur ulang
tampilan dengan cara ini akan meningkatkan kinerja karena menghindari pembuatan tampilan yang tidak diperlukan atau
melakukan pencarian {@link android.app.Activity#findViewById findViewById()} yang mahal.</p>
<p>{@link android.support.v7.widget.RecyclerView} menyediakan semua pengelola layout bawaan ini:</p>
<ul>
<li>{@link android.support.v7.widget.LinearLayoutManager} menampilkan item dalam
daftar gulir vertikal atau horizontal.</li>
<li>{@link android.support.v7.widget.GridLayoutManager} menampilkan item dalam petak.</li>
<li>{@link android.support.v7.widget.StaggeredGridLayoutManager} menampilkan item dalam petak zigzag.</li>
</ul>
<p>Untuk membuat pengelola layout custom, perluas kelas {@link
android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager}.</p>
<h3>Animasi</h3>
<p>Animasi untuk menambahkan dan menghapus item diaktifkan secara default di {@link
android.support.v7.widget.RecyclerView}. Untuk menyesuaikan animasi ini, perluas kelas
{@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator}dan gunakan
metode {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}.
</p>
<h3 id="RVExamples">Contoh</h3>
<p>Contoh kode berikut memperagakan cara menambahkan
{@link android.support.v7.widget.RecyclerView} ke layout:</p>
<pre>
&lt;!-- A RecyclerView with some commonly used attributes -->
&lt;android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</pre>
<p>Begitu Anda menambahkan widget {@link android.support.v7.widget.RecyclerView} ke layout,
dapatkan pengatur atau handle objek itu, hubungkan dengan pengelola layout, dan sertakan adaptor untuk data
yang akan ditampilkan:</p>
<pre>
public class MyActivity extends Activity {
private RecyclerView mRecyclerView;
private RecyclerView.Adapter mAdapter;
private RecyclerView.LayoutManager mLayoutManager;
&#64;Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_activity);
mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
// use this setting to improve performance if you know that changes
// in content do not change the layout size of the RecyclerView
mRecyclerView.setHasFixedSize(true);
// use a linear layout manager
mLayoutManager = new LinearLayoutManager(this);
mRecyclerView.setLayoutManager(mLayoutManager);
// specify an adapter (see also next example)
mAdapter = new MyAdapter(myDataset);
mRecyclerView.setAdapter(mAdapter);
}
...
}
</pre>
<p>Adaptor menyediakan akses ke item dataset Anda, membuat tampilan untuk item, dan
mengganti konten sebagian tampilan dengan item data baru bila item semula tidak lagi
terlihat. Contoh kode berikut menampilkan implementasi sederhana untuk sebuah dataset yang terdiri dari
larik string yang ditampilkan dengan menggunakan widget {@link android.widget.TextView}:</p>
<pre>
public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
private String[] mDataset;
// Provide a reference to the views for each data item
// Complex data items may need more than one view per item, and
// you provide access to all the views for a data item in a view holder
public static class ViewHolder extends RecyclerView.ViewHolder {
// each data item is just a string in this case
public TextView mTextView;
public ViewHolder(TextView v) {
super(v);
mTextView = v;
}
}
// Provide a suitable constructor (depends on the kind of dataset)
public MyAdapter(String[] myDataset) {
mDataset = myDataset;
}
// Create new views (invoked by the layout manager)
&#64;Override
public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
int viewType) {
// create a new view
View v = LayoutInflater.from(parent.getContext())
.inflate(R.layout.my_text_view, parent, false);
// set the view's size, margins, paddings and layout parameters
...
ViewHolder vh = new ViewHolder(v);
return vh;
}
// Replace the contents of a view (invoked by the layout manager)
&#64;Override
public void onBindViewHolder(ViewHolder holder, int position) {
// - get element from your dataset at this position
// - replace the contents of the view with that element
holder.mTextView.setText(mDataset[position]);
}
// Return the size of your dataset (invoked by the layout manager)
&#64;Override
public int getItemCount() {
return mDataset.length;
}
}
</pre>
<div style="float:right;margin-top:15px;margin-left:30px">
<img src="{@docRoot}design/material/images/card_travel.png" alt="" width="225" height="383">
<p class="img-caption" style="margin-left:12px">
<strong>Gambar 3</strong>. Contoh kartu.
</p>
</div>
<h2 id="CardView">Membuat Kartu</h2>
<p>{@link android.support.v7.widget.CardView} memperluas kelas {@link android.widget.FrameLayout}
dan memungkinkan Anda menampilkan informasi dalam kartu yang memiliki tampilan konsisten lintas platform. Widget {@link
android.support.v7.widget.CardView} bisa memiliki bayangan dan sudut membulat.</p>
<p>Untuk membuat kartu dengan bayangan, gunakan atribut <code>card_view:cardElevation</code>.
{@link android.support.v7.widget.CardView} menggunakan elevasi nyata dan bayangan dinamis pada Android 5.0
(API level 21) ke atas dan memundurkan ke implementasi bayangan terprogram pada versi terdahulu.
Untuk informasi selengkapnya, lihat <a href="{@docRoot}training/material/compatibility.html">Mempertahankan
Kompatibilitas</a>.</p>
<p>Gunakan properti-properti ini untuk menyesuaikan penampilan
widget {@link android.support.v7.widget.CardView}:</p>
<ul>
<li>Untuk mengatur radius sudut pada layout Anda, gunakan atribut <code>card_view:cardCornerRadius</code>.
</li>
<li>Untuk mengatur radius sudut dalam kode Anda, gunakan metode <code>CardView.setRadius</code>.</li>
<li>Untuk mengatur warna latar belakang kartu, gunakan atribut <code>card_view:cardBackgroundColor</code>.
</li>
</ul>
<p>Contoh kode berikut menampilkan cara menyertakan widget {@link android.support.v7.widget.CardView}
dalam layout:</p>
<pre>
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
... >
&lt;!-- A CardView that contains a TextView -->
&lt;android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="4dp">
&lt;TextView
android:id="@+id/info_text"
android:layout_width="match_parent"
android:layout_height="match_parent" />
&lt;/android.support.v7.widget.CardView>
&lt;/LinearLayout>
</pre>
<p>Untuk informasi selengkapnya, lihat referensi API untuk {@link android.support.v7.widget.CardView}.</p>
<h2 id="Dependencies">Menambahkan Dependensi</h2>
<p>Widget {@link android.support.v7.widget.RecyclerView} dan {@link android.support.v7.widget.CardView}
adalah bagian dari <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support
Library</a>. Untuk menggunakan widget dalam proyek Anda, tambahkan
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">dependensi Gradle</a> ini ke
modul aplikasi Anda:</p>
<pre>
dependencies {
...
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}
</pre>

133
docs/html-intl/intl/in/training/material/shadows-clipping.jd Normal file
View File

@@ -0,0 +1,133 @@
page.title=Mendefinisikan Bayangan dan Memangkas Tampilan
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Pelajaran ini mengajarkan Anda cara</h2>
<ol>
<li><a href="#Elevation">Menetapkan Elevasi pada Tampilan Anda</a></li>
<li><a href="#Shadows">Menyesuaikan Bayangan dan Garis Luar Tampilan</a></li>
<li><a href="#Clip">Memangkas Tampilan</a></li>
</ol>
<h2>Anda juga harus membaca</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Spesifikasi desain bahan</a></li>
<li><a href="{@docRoot}design/material/index.html">Desain bahan di Android</a></li>
</ul>
</div>
</div>
<p>Desain bahan memperkenalkan elevasi untuk elemen-elemen UI. Elevasi membantu pengguna memahami
arti penting relatif masing-masing elemen dan memfokuskan perhatian pada tugas yang ada.</p>
<p>Elevasi tampilan, yang dinyatakan dengan properti Z, menentukan tampilan visual
bayangannya: tampilan dengan nilai Z lebih tinggi menghasilkan bayangan lebih besar dan lebih halus. Tampilan dengan nilai Z lebih tinggi menutupi
tampilan dengan nilai Z lebih rendah; akan tetapi, nilai Z tampilan tidak memengaruhi ukuran tampilan.</p>
<p>Bayangan digambar oleh induk tampilan yang dinaikkan, sehingga terkena pemangkasan standar tampilan,
yang dipangkas oleh induk secara default.</p>
<p>Elevasi juga berguna untuk membuat animasi tempat memunculkan widget untuk sementara di atas
bidang tampilan saat melakukan beberapa tindakan.</p>
<p>Untuk informasi selengkapnya tentang elevasi dalam desain bahan, lihat
<a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objek
di ruang 3D</a>.</p>
<h2 id="Elevation">Menetapkan Elevasi pada Tampilan Anda</h2>
<p>Nilai Z untuk tampilan memiliki dua komponen:
<ul>
<li>Elevasi: Komponen statis.</li>
<li>Transformasi: Komponen dinamis yang digunakan untuk animasi.</li>
</ul>
<p><code>Z = elevation + translationZ</code></p>
<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
<p class="img-caption"><strong>Gambar 1</strong> - Bayangan untuk berbagai elevasi tampilan.</p>
<p>Untuk mengatur elevasi tampilan dalam definisi layout, gunakan atribut <code>android:elevation</code>.
Untuk mengatur elevasi tampilan dalam kode aktivitas, gunakan
metode {@link android.view.View#setElevation View.setElevation()}.</p>
<p>Untuk mengatur transformasi tampilan, gunakan metode {@link android.view.View#setTranslationZ
View.setTranslationZ()}.</p>
<p>Metode {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} dan {@link
android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} yang baru memudahkan
Anda menganimasikan elevasi tampilan. Untuk informasi selengkapnya, lihat referensi API untuk
{@link android.view.ViewPropertyAnimator} dan panduan pengembang <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Animasi Properti</a>.
</p>
<p>Anda juga bisa menggunakan {@link android.animation.StateListAnimator}
untuk menetapkan animasi ini secara deklaratif. Ini khususnya berguna bila
perubahan status memicu animasi, seperti saat seorang pengguna menekan tombol. Untuk informasi selengkapnya, lihat
<a href="{@docRoot}training/material/animations.html#ViewState">Menganimasikan Perubahan Status Tampilan</a>.</p>
<p>Nilai Z diukur dengan satuan dp (density-independent pixel).</p>
<h2 id="Shadows">Menyesuaikan Bayangan dan Garis Luar Tampilan</h2>
<p>Batas-batas drawable latar belakang tampilan menentukan bentuk default bayangannya.
<strong>Garis luar</strong> menyatakan bentuk luar objek grafis dan mendefinisikan
bidang riak untuk umpan balik sentuh.</p>
<p>Perhatikan tampilan ini, yang didefinisikan dengan drawable latar belakang:</p>
<pre>
&lt;TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
</pre>
<p>Drawable latar belakang didefinisikan sebagai persegi panjang dengan sudut membulat:</p>
<pre>
&lt;!-- res/drawable/myrect.xml -->
&lt;shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
&lt;solid android:color="#42000000" />
&lt;corners android:radius="5dp" />
&lt;/shape>
</pre>
<p>Tampilan ini menghasilkan bayangan dengan sudut membulat, karena drawable latar belakang mendefinisikan
garis luar tampilan. Memberikan garis luar custom akan mengesampingkan bentuk default bayangan tampilan.</p>
<p>Untuk mendefinisikan garis luar custom suatu tampilan dalam kode Anda:<p>
<ol>
<li>Perluas kelas {@link android.view.ViewOutlineProvider}.</li>
<li>Kesampingkan metode {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li>
<li>Tetapkan penyedia garis luar baru untuk tampilan Anda dengan metode {@link
android.view.View#setOutlineProvider View.setOutlineProvider()}.</li>
</ol>
<p>Anda bisa membuat garis luar lonjong dan persegi panjang yang bersudut membulat dengan menggunakan metode dalam
kelas {@link android.graphics.Outline}. Penyedia garis luar default untuk tampilan memperoleh garis luar
dari latar belakang tampilan. Untuk mencegah tampilan menghasilkan bayangan, atur penyedia garis luarnya
ke <code>null</code>.</p>
<h2 id="Clip">Memangkas Tampilan</h2>
<p>Memangkas tampilan memudahkan Anda mengubah bentuk tampilan. Anda bisa memangkas tampilan agar
konsistensi dengan elemen desain lainnya atau mengubah bentuk tampilan untuk merespons input pengguna.
Anda bisa memangkas tampilan hingga area garis luarnya dengan menggunakan metode {@link android.view.View#setClipToOutline
View.setClipToOutline()} atau atribut <code>android:clipToOutline</code>. Hanya
garis-garis luar persegi panjang, lingkaran, dan persegi panjang bersudut bulat yang mendukung pemangkasan, seperti yang ditentukan oleh
metode {@link android.graphics.Outline#canClip Outline.canClip()}.</p>
<p>Untuk memangkas tampilan ke bentuk drawable, atur drawable sebagai latar belakang tampilan
(seperti yang ditampilkan di atas) dan panggil metode {@link android.view.View#setClipToOutline View.setClipToOutline()}.
</p>
<p>Memangkas tampilan adalah operasi yang mahal; jadi, jangan animasikan bentuk yang Anda gunakan
untuk memangkas tampilan. Untuk memperoleh efek ini, gunakan animasi <a href="{@docRoot}training/material/animations.html#Reveal">Reveal Effect</a>.</p>

131
docs/html-intl/intl/in/training/material/theme.jd Normal file
View File

@@ -0,0 +1,131 @@
page.title=Menggunakan Tema Bahan
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Pelajaran ini mengajarkan Anda cara</h2>
<ol>
<li><a href="#ColorPalette">Menyesuaikan Palet Warna</a></li>
<li><a href="#StatusBar">Menyesuaikan Baris Status</a></li>
<li><a href="#Inheritance">Tampilan Setiap Tema</a></li>
</ol>
<h2>Anda juga harus membaca</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Spesifikasi desain bahan</a></li>
<li><a href="{@docRoot}design/material/index.html">Desain bahan di Android</a></li>
</ul>
</div>
</div>
<p>Tema bahan yang baru menyediakan:</p>
<ul>
<li>Widget sistem yang memungkinkan Anda mengatur palet warnanya</li>
<li>Animasi umpan balik sentuh untuk widget sistem</li>
<li>Animasi transisi aktivitas</li>
</ul>
<p>Anda bisa menyesuaikan tampilan tema bahan
sesuai dengan identitas merek Anda dengan palet warna yang Anda kontrol. Anda bisa mewarnai action-bar dan
baris status dengan menggunakan atribut tema, seperti yang ditampilkan dalam <a href="#fig3">Gambar 3</a>.</p>
<p>Widget sistem memiliki desain baru dan animasi umpan balik sentuh. Anda bisa menyesuaikan
palet warna, animasi umpan balik sentuh, dan transisi aktivitas untuk aplikasi.</p>
<p>Tema bahan didefinisikan sebagai:</p>
<ul>
<li><code>@android:style/Theme.Material</code> (versi gelap)</li>
<li><code>@android:style/Theme.Material.Light</code> (versi terang)</li>
<li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
</ul>
<p>Untuk daftar gaya bahan yang bisa Anda gunakan, lihat referensi API untuk
{@link android.R.style R.style}.</p>
<!-- two columns, dark/light material theme example -->
<div style="width:700px;margin-top:25px;margin-bottom:10px">
<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:170px;margin:0 auto">
<p style="margin-top:8px;font-size:12px"><strong>Gambar 1</strong>. 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:170px;margin:0 auto">
<p style="margin-top:8px;font-size:12px"><strong>Gambar 2</strong>. Tema bahan terang</p>
</div>
</div>
<br style="clear:left">
</div>
<p class="note">
<strong>Catatan:</strong> Tema bahan hanya tersedia di Android 5.0 (API level 21)
ke atas. <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Library</a>
menyediakan tema dengan gaya desain bahan untuk beberapa widget dan dukungan untuk menyesuaikan
palet warna. Untuk informasi selengkapnya, lihat
<a href="{@docRoot}training/material/compatibility.html">Mempertahankan Kompatibilitas</a>.
</p>
<h2 id="ColorPalette">Menyesuaikan Palet Warna</h2>
<p style="margin-bottom:30px">Untuk menyesuaikan warna dasar tema agar cocok dengan merek Anda, definisikan
warna custom menggunakan atribut tema saat Anda mewariskan dari tema bahan:</p>
<pre>
&lt;resources>
&lt;!-- inherit from the material theme -->
&lt;style name="AppTheme" parent="android:Theme.Material">
&lt;!-- Main theme colors -->
&lt;!-- your app branding color for the app bar -->
&lt;item name="android:colorPrimary">@color/primary&lt;/item>
&lt;!-- darker variant for the status bar and contextual app bars -->
&lt;item name="android:colorPrimaryDark">@color/primary_dark&lt;/item>
&lt;!-- theme UI controls like checkboxes and text fields -->
&lt;item name="android:colorAccent">@color/accent&lt;/item>
&lt;/style>
&lt;/resources>
</pre>
<div style="float:right;margin-left:25px;margin-top:20px;margin-bottom:10px" id="fig3">
<img src="{@docRoot}training/material/images/ThemeColors.png" width="250" height="445" />
<p class="img-caption" style="margin-bottom:0px">
<strong>Gambar 3.</strong> Menyesuaikan tema bahan.</p>
</div>
<h2 id="StatusBar">Menyesuaikan Baris Status</h2>
<p>Tema bahan memungkinkan Anda menyesuaikan baris status dengan mudah; jadi Anda bisa menetapkan
warna yang cocok dengan merek Anda dan memberikan kontras yang cukup untuk menampilkan ikon status putih. Untuk
mengatur warna custom bagi baris status, gunakan atribut <code>android:statusBarColor</code> bila
Anda memperluas tema bahan. Secara default, <code>android:statusBarColor</code> mewarisi
nilai <code>android:colorPrimaryDark</code>.</p>
<p>Anda juga bisa menggambar sendiri di belakang baris status. Misalnya, jika Anda ingin menampilkan
baris status secara transparan di atas foto, dengan gradasi gelap yang halus untuk memastikan
ikon status putih tetap terlihat. Caranya, atur atribut <code>android:statusBarColor</code> ke
<code>&#64;android:color/transparent</code> dan sesuaikan flag jendela seperti yang diperlukan. Anda juga bisa
menggunakan metode {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} untuk
animasi atau pemudaran.</p>
<p class="note">
<strong>Catatan:</strong> Baris status harus selalu memiliki delineasi yang jelas dari
toolbar utama, kecuali bila Anda menampilkan gambar detail atau konten media tepi-ke-tepi di belakang
baris ini dan bila Anda menggunakan gradasi untuk memastikan ikon tetap terlihat.
</p>
<p>Bila Anda menyesuaikan baris navigasi dan baris status, jadikan keduanya transparan atau modifikasi
baris status saja. Baris navigasi harus tetap hitam di semua kasus lainnya.</p>
<h2 id="Inheritance">Tampilan Setiap Tema</h3>
<p>Elemen dalam definisi layout XML bisa menetapkan atribut <code>android:theme</code>,
yang merujuk sumber daya tema. Atribut ini memodifikasi tema untuk elemen itu dan setiap
elemen anak, yang berguna untuk mengubah palet warna tema dalam porsi tertentu
pada antarmuka.</p>

1
docs/html-intl/intl/ja/design/material/index.jd
View File

@@ -1,6 +1,5 @@
page.title=Android のマテリアル デザイン
page.tags=Material,design
page.type=デザイン
page.image=images/cards/design-material-for-android_2x.jpg
@jd:body

41
docs/html-intl/intl/ko/design/material/index.jd
View File

@@ -1,7 +1,6 @@
page.title=머티어리얼 디자인
page.title=Android용 머티리얼 디자인
page.tags=Material,design
page.type=design
page.image=design/material/images/MaterialLight.png
page.image=images/cards/design-material-for-android_2x.jpg
@jd:body
@@ -9,7 +8,7 @@ page.image=design/material/images/MaterialLight.png
<a class="notice-developers right" href="{@docRoot}training/material/index.html">
<div>
<h3>개발자 문서</h3>
<p>머티어리얼 디자인으로 앱 생성</p>
<p>머티리얼 디자인으로 앱 생성</p>
</div>
</a>
@@ -17,7 +16,7 @@ page.image=design/material/images/MaterialLight.png
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw">
<div>
<h3>비디오</h3>
<p>머티어리얼 디자인 소개</p>
<p>머티리얼 디자인 소개</p>
</div>
</a>
@@ -25,7 +24,7 @@ page.image=design/material/images/MaterialLight.png
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw">
<div>
<h3>비디오</h3>
<p>종이와 잉크: 중요한 머티어리얼</p>
<p>종이와 잉크: 중요한 머티리얼</p>
</div>
</a>
@@ -33,19 +32,19 @@ page.image=design/material/images/MaterialLight.png
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc">
<div>
<h3>비디오</h3>
<p>Google I/O 앱 내 머티어리얼 디자인</p>
<p>Google I/O 앱 내 머티리얼 디자인</p>
</div>
</a>
<p itemprop="description">머티어리얼 디자인은 플랫폼 및 기기 전반의 표현 방식, 모션 및
<p itemprop="description">머티리얼 디자인은 플랫폼 및 기기 전반의 표현 방식, 모션 및
상호 작용 디자인에 대한 종합적인 지침입니다. Android에는 이제
머티어리얼 디자인 앱에 대한 지원이 포함되었습니다. Android 앱에서 머티어리얼 디자인을 사용하려면 <a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a>에
머티리얼 디자인 앱에 대한 지원이 포함되었습니다. Android 앱에서 머티리얼 디자인을 사용하려면 <a href="http://www.google.com/design/spec">머티리얼 디자인 사양</a>에
규정되어 있는 지침을 따르세요. 또한 Android 5.0(API 레벨 21) 이상에서 제공하는
새 구성 요소 및 기능을 사용하세요.</p>
<p>Android는 머티어리얼 디자인 앱을 구축하는 데 사용할 수 있는 다음 요소를 제공합니다.</p>
<p>Android는 머티리얼 디자인 앱을 구축하는 데 사용할 수 있는 다음 요소를 제공합니다.</p>
<ul>
<li>새로운 테마</li>
@@ -53,13 +52,13 @@ page.image=design/material/images/MaterialLight.png
<li>사용자 지정 그림자 및 애니메이션을 위한 새로운 API</li>
</ul>
<p>Android에서 머티어리얼 디자인을 구현하는 방법에 대한 자세한 내용은
<a href="{@docRoot}training/material/index.html">머티어리얼 디자인으로 앱 생성</a>을 참조하세요.</p>
<p>Android에서 머티리얼 디자인을 구현하는 방법에 대한 자세한 내용은
<a href="{@docRoot}training/material/index.html">머티리얼 디자인으로 앱 생성</a>을 참조하세요.</p>
<h3>머티어리얼 테마</h3>
<h3>머티리얼 테마</h3>
<p>머티어리얼 테마는 앱에 사용할 수 있는 새로운 스타일, 색상표를
<p>머티리얼 테마는 앱에 사용할 수 있는 새로운 스타일, 색상표를
설정할 수 있는 시스템 위젯, 그리고 터치 피드백 및 액티비티 전환을 위한 기본 애니메이션을 제공합니다.</p>
<!-- two columns -->
@@ -67,25 +66,25 @@ page.image=design/material/images/MaterialLight.png
<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>
<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>
<p style="margin-top:8px">밝은 머티리얼 테마</p>
</div>
</div>
<br style="clear:left"/>
</div>
<p>자세한 내용은 <a href="{@docRoot}training/material/theme.html">머티어리얼
<p>자세한 내용은 <a href="{@docRoot}training/material/theme.html">머티리얼
테마 사용</a>을 참조하세요.</p>
<h3>목록 및 카드</h3>
<p>Android는 머티어리얼 디자인 스타일
<p>Android는 머티리얼 디자인 스타일
및 애니메이션으로 카드 및 목록을 표시하는 데 사용할 수 있는 두 개의 새로운 위젯을 제공합니다.</p>
<!-- two columns -->
@@ -126,7 +125,7 @@ page.image=design/material/images/MaterialLight.png
</video>
</div>
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
<em>영화를 재생하려면 기기 화면을 클릭합니다.</em>
<em>영화를 재생하려면 기기 화면을 클릭하세요.</em>
</div>
</div>
@@ -171,7 +170,7 @@ page.image=design/material/images/MaterialLight.png
<h3>드로어블</h3>
<p>드로어블에 대한 다음과 같은 새 기능을 통해 머티어리얼 디자인 앱을 쉽게 구현할 수 있습니다.</p>
<p>드로어블에 대한 다음과 같은 새 기능을 통해 머티리얼 디자인 앱을 쉽게 구현할 수 있습니다.</p>
<ul>
<li><strong>벡터 드로어블</strong>은 단색 인앱 아이콘에
@@ -182,5 +181,5 @@ page.image=design/material/images/MaterialLight.png
비트맵 이미지에서 주요 색상을 자동으로 추출할 수 있게 해줍니다.</li>
</ul>
<p>자세한 내용은 <a href="{@docRoot}training/material/drawables.html">Drawable
<p>자세한 내용은 <a href="{@docRoot}training/material/drawables.html">드로어블
사용</a>을 참조하세요.</p>

230
docs/html-intl/intl/ko/training/material/animations.jd
View File

@@ -1,4 +1,4 @@
page.title=사용자지정 애니메이션 정의
page.title=사용자지정 애니메이션의 정의
@jd:body
@@ -6,58 +6,75 @@ page.title=사용자지정 애니메이션 정의
<div id="tb">
<h2>이 과정에서 다루는 내용</h2>
<ol>
<li><a href="#Touch">터치 피드백 사용자지정</a></li>
<li><a href="#Reveal">Reveal Effect 사용</a></li>
<li><a href="#Transitions">액티비티 전환 사용자지정</a></li>
<li><a href="#Touch">사용자지정 터치 피드백</a></li>
<li><a href="#Reveal">표시 효과 사용</a></li>
<li><a href="#Transitions">사용자지정 액티비티 전환</a></li>
<li><a href="#ViewState">뷰 상태 변경 애니메이트</a></li>
<li><a href="#AnimVector">Vector Drawable 애니메이트</a></li>
<li><a href="#AnimVector">벡터 드로어블 애니메이트</a></li>
</ol>
<h2>필독 항목</h2>
<ul>
<li><a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티어리얼 디자인</a></li>
<li><a href="http://www.google.com/design/spec">머티리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티리얼 디자인</a></li>
</ul>
</div>
</div>
<p>머티어리얼 디자인에서 애니메이션은 동작에 대한 사용자 피드백을 제공하며, 사용자가 앱과 상호작용할 때 시각적 연속성을 제공합니다. 머티어리얼 테마는 버튼 및 액티비티 전환을 위한 몇 가지 기본 애니메이션을 제공합니다. Android 5.0(API 레벨 21) 이상에서는 다음과 같은 애니메이션을 사용자지정하거나 새로운 애니메이션을 만들 수 있도록 지원합니다.</p>
<p>머티리얼 디자인에서 애니메이션은 사용자에게 자신의 동작에 대한 피드백을 제공하고, 앱과 상호작용할 때 시각적 연속성을 제공합니다.
머티리얼 테마는 버튼 및 액티비티 전환을 위한 몇 가지 기본 애니메이션을 제공합니다. Android 5.0(API 레벨 21) 이상에서는 이러한 애니메이션을 사용자가 지정하거나 새로운 애니메이션을 만들 수 있습니다.
</p>
<ul>
<li>터치 피드백</li>
<li>Circular Reveal</li>
<li>회전하며 나타나기</li>
<li>액티비티 전환</li>
<li>커브 모션</li>
<li>뷰 상태 변경</li>
</ul>
<h2 id="Touch">터치 피드백 사용자지정</h2>
<h2 id="Touch">사용자지정 터치 피드백</h2>
<p>머티어리얼 디자인의 터치 피드백은 사용자가 UI 요소와 상호작용하는 시점에서 즉시 시각적으로 확인할 수 있습니다. 버튼의 기본 터치 피드백 애니메이션은 물결 효과를 통해 서로 다른 상태 간에 전환하는 새 {@link android.graphics.drawable.RippleDrawable} 클래스를 사용합니다.</p>
<p>머티리얼 디자인의 터치 피드백은 사용자가 UI 요소와 상호작용하는 시점에서 즉시 시각적으로 확인할 수 있습니다.
버튼의 기본 터치 피드백 애니메이션은 물결 효과를 통해 서로 다른 상태 간에 전환하는 새 {@link android.graphics.drawable.RippleDrawable} 클래스를 사용합니다.
<p>대부분의 경우, 다음과 같이 뷰 배경을 지정하는 방식으로 뷰 XML에서 이 기능을 적용해야 합니다.</p>
</p>
<p>대부분의 경우, 다음과 같이 뷰 배경을 지정하는 방식으로 뷰 XML에서 이 기능을 적용해야 합니다.
</p>
<ul>
<li>제한된 물결의 경우, <code>?android:attr/selectableItemBackground</code></li>
<li>뷰를 넘어 확장되는 물결의 경우, <code>?android:attr/selectableItemBackgroundBorderless</code></li>
<li>뷰를 넘어 확장되는 물결의 경우, <code>?android:attr/selectableItemBackgroundBorderless</code>
이 경우 물결이 null이 아닌 배경을 가진 뷰의 가장 가까운 상위 요소 위에 그려지고 해당 상위 요소까지로 제한됩니다.
</li>
</ul>
<p class="note"><strong>참고:</strong> <code>selectableItemBackgroundBorderless</code>는 API 레벨 21에서 새로 도입된 특성입니다.</p>
<p class="note"><strong>참고:</strong> <code>selectableItemBackgroundBorderless</code>는 API 레벨 21에서 새로 도입된 특성입니다.
</p>
<p>또는 <code>ripple</code> 요소를 사용하여 {@link android.graphics.drawable.RippleDrawable}을 XML 리소스로 정의할 수 있습니다.</p>
<p>또는 <code>ripple</code> 요소를 사용하여 {@link android.graphics.drawable.RippleDrawable}
을 XML 리소스로 정의할 수 있습니다.</p>
<p>{@link android.graphics.drawable.RippleDrawable} 개체에 색상을 지정할 수 있습니다. 기본 터치 피드백 색상을 변경하려면 테마의 <code>android:colorControlHighlight</code> 특성을 사용합니다.</p>
<p>{@link android.graphics.drawable.RippleDrawable} 객체에 색상을 지정할 수 있습니다. 기본 터치 피드백 색상을 변경하려면 테마의 <code>android:colorControlHighlight</code>
특성을 사용합니다.
</p>
<p>자세한 내용은 {@link android.graphics.drawable.RippleDrawable} 클래스의 API 레퍼런스를 참조하세요.</p>
<p>자세한 내용은 {@link
android.graphics.drawable.RippleDrawable} 클래스의 API 레퍼런스를 참조하세요.</p>
<h2 id="Reveal">Reveal Effect 사용</h2>
<h2 id="Reveal">표시 효과 사용</h2>
<p>Reveal 애니메이션은 UI 요소 그룹을 표시하거나 숨길 때 사용자에게 시각적 연속성을 제공합니다. {@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} 메서드를 사용하면 클리핑 서클을 애니메이트하여 뷰를 표시하거나 숨길 수 있습니다.</p>
<p>표시 애니메이션은 UI 요소 그룹을 표시하거나 숨길 때 사용자에게 시각적 연속성을 제공합니다.
{@link android.view.ViewAnimationUtils#createCircularReveal
ViewAnimationUtils.createCircularReveal()} 메서드를 사용하면 클리핑 서클을 애니메이트하여 뷰를 표시하거나 숨길 수 있습니다.
</p>
<p>이전에 보이지 않았던 뷰를 표시하려면 아래의 효과를 사용합니다.</p>
<p>이 효과를 사용하여 이전에 보이지 않았던 뷰를 표시하려면:</p>
<pre>
// previously invisible view
@@ -79,7 +96,7 @@ myView.setVisibility(View.VISIBLE);
anim.start();
</pre>
<p>이전에 보였던 뷰를 숨기려면 아래의 효과를 사용합니다.</p>
<p>이 효과를 사용하여 이전에 보였던 뷰를 숨기려면:</p>
<pre>
// previously visible view
@@ -110,7 +127,7 @@ anim.start();
</pre>
<h2 id="Transitions">액티비티 전환 사용자지정</h2>
<h2 id="Transitions">사용자지정 액티비티 전환</h2>
<!-- shared transition video -->
<div style="width:290px;margin-left:35px;float:right">
@@ -122,19 +139,29 @@ anim.start();
</video>
</div>
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
<p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>그림 1</strong> - 공유 요소를 이용한 전환.</p>
<em>영화를 재생하려면 기기 화면을 클릭합니다</em>
<p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>그림 1</strong> -
공유 요소를 이용한 전환.</p>
<em>영화를 재생하려면 기기 화면을 클릭하세요.</em>
</div>
</div>
<p>머티어리얼 디자인 앱의 액티비티 전환은 공통 요소 간의 모션 및 변환을 통해 서로 다른 상태 간에 시각적 연결을 제공합니다. 들어가기 및 나가기 전환과 액티비티 간 공유 요소의 전환을 위한 사용자지정 애니메이션을 지정할 수 있습니다.</p>
<p>머티리얼 디자인 앱의 액티비티 전환은 공통 요소 간의 모션 및 변환을 통해 서로 다른 상태 간에 시각적 연결을 제공합니다.
들어가기 및 나가기 전환과 액티비티 간 공유 요소의 전환을 위한 사용자지정 애니메이션을 지정할 수 있습니다.
</p>
<ul>
<li><strong>들어가기</strong> 전환은 액티비티의 뷰가 장면에 들어가는 방식을 결정합니다. 예를 들어 <em>explode</em> 들어가기 전환의 경우, 뷰가 밖에서 장면 속으로 들어가며 화면의 중앙으로 향합니다.</li>
<li><strong>들어가기</strong> 전환은 액티비티에서 뷰가 장면 속으로 들어가는 방식을 결정합니다. 예를 들어, <em>explode</em> 들어가기 전환의 경우, 뷰가 밖에서 장면 속으로 들어가며 화면의 중앙으로 향합니다.
<li><strong>나가기</strong> 전환은 액티비티의 뷰가 장면을 나가는 방식을 결정합니다. 예를 들어 <em>explode</em> 나가기 전환의 경우, 뷰가 화면의 중앙에서 장면을 벗어납니다.</li>
</li>
<li><strong>공유 요소</strong> 전환은 두 액티비티 간에 공유되는 뷰가 이 두 액티비티 간에 전환되는 방식을 결정합니다. 예를 들어 두 액티비티에서 사용하는 동일한 이미지가 다른 위치에 있고 크기도 다를 경우, <em>changeImageTransform</em> 공유 요소 전환은 두 액티비티 간에 이미지를 매끄럽게 변환하고 배율을 조정합니다.</li>
<li><strong>나가기</strong> 전환은 액티비티의 뷰가 장면을 나가는 방식을 결정합니다. 예를 들어, 나가기 전환으로 <em>explode</em>를 지정하면 뷰가 중앙에서부터 화면을 벗어납니다.
</li>
<li><strong>공유 요소</strong> 전환은 두 액티비티 간에 공유되는 뷰가 이 두 액티비티 간에 전환되는 방식을 결정합니다.
예를 들어 두 액티비티에서 사용하는 동일한 이미지가 다른 위치에 있고 크기도 다를 경우, <em>changeImageTransform</em> 공유 요소 전환은 두 액티비티 간에 이미지를 매끄럽게 변환하고 배율을 조정합니다.
</li>
</ul>
<p>Android 5.0(API 레벨 21)은 다음 들어가기 및 나가기 전환을 지원합니다.</p>
@@ -145,7 +172,9 @@ anim.start();
<li><em>fade</em> - 불투명도를 변경하여 뷰를 추가하거나 장면에서 제거합니다.</li>
</ul>
<p>{@link android.transition.Visibility} 클래스를 확장하는 모든 전환은 들어가기 또는 나가기 전환으로 지원됩니다. 자세한 내용은 {@link android.transition.Transition} 클래스의 API 레퍼런스를 참조하세요.</p>
<p>{@link android.transition.Visibility} 클래스를 확장하는 모든 전환은 들어가기 또는 나가기 전환으로 지원됩니다.
자세한 내용은
{@link android.transition.Transition} 클래스의 API 레퍼런스를 참조하세요.</p>
<p>Android 5.0(API 레벨 21)은 다음의 공유 요소 전환도 지원합니다.</p>
@@ -156,7 +185,8 @@ anim.start();
<li><em>changeImageTransform</em> - 대상 이미지의 크기 및 배율 변경을 애니메이트합니다.</li>
</ul>
<p>앱에서 액티비티 전환을 활성화할 경우, 들어가기 및 나가기 액티비티 간에 기본 크로스페이딩(cross-fading) 전환이 활성화됩니다.</p>
<p>앱에서 액티비티 전환을 활성화할 경우, 들어가기 및 나가기 액티비티 간에 기본 크로스페이딩(cross-fading) 전환이 활성화됩니다.
</p>
<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
<p class="img-caption">
@@ -165,7 +195,9 @@ anim.start();
<h3>사용자지정 전환 지정</h3>
<p>먼저 머티어리얼 테마에서 상속한 스타일을 정의할 때, <code>android:windowContentTransitions</code> 특성을 통해 창 콘텐츠 전환을 활성화합니다. 들어가기, 나가기 및 공유 요소 전환도 스타일 정의에서 지정할 수 있습니다.</p>
<p>먼저 머티리얼 테마에서 상속하는 스타일을 정의할 때, <code>android:windowContentTransitions</code>
특성을 통해 창 콘텐츠 전환을 활성화합니다. 들어가기, 나가기 및 공유 요소 전환도 스타일 정의에서 지정할 수 있습니다.
</p>
<pre>
&lt;style name="BaseAppTheme" parent="android:Theme.Material">
@@ -194,9 +226,12 @@ anim.start();
&lt;/transitionSet>
</pre>
<p><code>changeImageTransform</code> 요소는 {@link android.transition.ChangeImageTransform} 클래스에 해당합니다. 자세한 내용은 {@link android.transition.Transition}의 API 레퍼런스를 참조하세요.</p>
<p><code>changeImageTransform</code> 요소는
{@link android.transition.ChangeImageTransform} 클래스에 해당합니다. 자세한 내용은 {@link android.transition.Transition}의 API 레퍼런스를 참조하세요.
</p>
<p>코드에서 창 콘텐츠 전환을 활성화할 경우,{@link android.view.Window#requestFeature Window.requestFeature()} 메서드를 호출합니다.</p>
<p>코드에서 창 콘텐츠 전환을 활성화하려면
{@link android.view.Window#requestFeature Window.requestFeature()} 메서드를 호출합니다.</p>
<pre>
// inside your activity (if you did not enable transitions in your theme)
@@ -206,33 +241,47 @@ getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setExitTransition(new Explode());
</pre>
<p>코드에서 전환을 지정하려면, {@link android.transition.Transition} 개체를 사용하여 다음과 같은 메서드를 호출합니다.</p>
<p>코드에서 전환을 지정하려면 {@link
android.transition.Transition} 객체를 사용하여 다음과 같은 메서드를 호출합니다.</p>
<ul>
<li>{@link android.view.Window#setEnterTransition Window.setEnterTransition()}</li>
<li>{@link android.view.Window#setExitTransition Window.setExitTransition()}</li>
<li>{@link android.view.Window#setSharedElementEnterTransition Window.setSharedElementEnterTransition()}</li>
<li>{@link android.view.Window#setSharedElementExitTransition Window.setSharedElementExitTransition()}</li>
<li>{@link android.view.Window#setSharedElementEnterTransition
Window.setSharedElementEnterTransition()}</li>
<li>{@link android.view.Window#setSharedElementExitTransition
Window.setSharedElementExitTransition()}</li>
</ul>
<p>{@link android.view.Window#setExitTransition setExitTransition()} 및 {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} 메서드는 호출하는 액티비티의 나가기 전환을 정의합니다. {@link android.view.Window#setEnterTransition setEnterTransition()} 및 {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} 메서드는 호출되는 액티비티의 들어가기 전환을 정의합니다.</p>
<p>{@link android.view.Window#setExitTransition setExitTransition()} 및 {@link
android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} 메서드는 호출하는 액티비티의 나가기 전환을 정의합니다.
{@link android.view.Window#setEnterTransition
setEnterTransition()} 및 {@link android.view.Window#setSharedElementEnterTransition
setSharedElementEnterTransition()} 메서드는 호출되는 액티비티의 들어가기 전환을 정의합니다.</p>
<p>전환 효과를 극대화하려면 호출하는 액티비티와 호출되는 액티비티 모두에서 창 콘텐츠 전환을 활성화해야 합니다. 그렇지 않으면 호출하는 액티비티가 나가기 전환을 시작하지만, 배율 또는 페이드와 같은 창 전환이 나타납니다.</p>
<p>전환 효과를 극대화하려면 호출하는 액티비티와 호출되는 액티비티 모두에서 창 콘텐츠 전환을 활성화해야 합니다.
그렇지 않으면 호출하는 액티비티가 나가기 전환을 시작하지만, 배율 또는 페이드와 같은 창 전환이 나타납니다.
</p>
<p>들어가기 전환을 최대한 빨리 시작하려면 호출되는 액티비티에서 {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} 메서드를 사용하세요. 그러면 더욱 인상적인 들어가기 전환이 가능합니다.</p>
<p>들어가기 전환을 최대한 빨리 시작하려면 호출되는 액티비티에서
{@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()}
메서드를 사용하세요. 그러면 더욱 인상적인 들어가기 전환이 가능합니다.</p>
<h3>전환을 사용하여 액티비티 시작</h3>
<p>전환을 활성화하고 액티비티에 대해 나가기 전환을 설정한 경우, 다음과 같이 다른 액티비티를 시작하면 전환이 활성화됩니다.</p>
<p>전환을 활성화하고 액티비티에 대해 나가기 전환을 설정한 경우, 다음과 같이 다른 액티비티를 시작하면 전환이 활성화됩니다.
</p>
<pre>
startActivity(intent,
ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
</pre>
<p>두 번째 액티비티에 대해 들어가기 전환을 설정한 경우, 액티비티가 시작되면 전환도 활성화됩니다. 다른 액티비티를 시작할 때 전환을 비활성화하려면 <code>null</code> 옵션 번들을 제공하세요.</p>
<p>두 번째 액티비티에 대해 들어가기 전환을 설정한 경우, 액티비티가 시작되면 전환도 활성화됩니다.
다른 액티비티를 시작할 때 전환을 비활성화하려면 <code>null</code> 옵션 번들을 제공하십시오.
</p>
<h3>공유 요소가 있는 액티비티 시작</h3>
<h3>공유 요소를 가진 액티비티 시작</h3>
<p>공유 요소를 가진 두 액티비티 간에 화면 전환 애니메이션을 만들려면:</p>
@@ -240,8 +289,10 @@ startActivity(intent,
<li>테마에서 창 콘텐츠 전환을 활성화합니다.</li>
<li>스타일에서 공유 요소 전환을 지정합니다.</li>
<li>전환을 XML 리소스로 정의합니다.</li>
<li><code>android:transitionName</code> 특성을 사용하여 두 레이아웃의 공유 요소에 공통 이름을 지정합니다.</li>
<li>{@link android.app.ActivityOptions#makeSceneTransitionAnimation ActivityOptions.makeSceneTransitionAnimation()} 메서드를 사용합니다.</li>
<li>
<code>android:transitionName</code> 특성을 사용하여 두 레이아웃의 공유 요소에 공통 이름을 지정합니다.</li>
<li>{@link android.app.ActivityOptions#makeSceneTransitionAnimation
ActivityOptions.makeSceneTransitionAnimation()} 메서드를 사용합니다.</li>
</ol>
<pre>
@@ -266,13 +317,20 @@ imgContainerView.setOnClickListener(new View.OnClickListener() {
});
</pre>
<p>코드에서 생성하는 공유된 동적 뷰의 경우, {@link android.view.View#setTransitionName View.setTransitionName()} 메서드를 사용하여 두 액티비티의 공통 요소 이름을 지정합니다.</p>
<p>코드에서 생성하는 공유된 동적 뷰의 경우,
{@link android.view.View#setTransitionName View.setTransitionName()} 메서드를 사용하여 두 액티비티의 공통 요소 이름을 지정합니다.
</p>
<p>두 번째 액티비티 종료 시, 장면 전환 애니메이션을 되돌리려면 {@link android.app.Activity#finish Activity.finish()} 대신 {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} 메서드를 호출합니다.</p>
<p>두 번째 액티비티 종료 시, 장면 전환 애니메이션을 되돌리려면 {@link android.app.Activity#finish Activity.finish()} 대신
{@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()}
메서드를 호출합니다.</p>
<h3>여러 공유 요소를 가진 액티비티 시작</h3>
<p>2개 이상의 공유 요소를 가진 두 액티비티 간에 적용할 장면 전환 애니메이션을 만들려면 <code>android:transitionName</code> 특성으로(또는 두 액티비티에서 {@link android.view.View#setTransitionName View.setTransitionName()} 메서드를 사용하여) 두 레이아웃의 공유 요소를 정의하고 다음과 같이 {@link android.app.ActivityOptions} 개체를 생성합니다.</p>
<p>2개 이상의 공유 요소를 가진 두 액티비티 간에 적용할 장면 전환 애니메이션을 만들려면 <code>android:transitionName</code>
특성으로 (또는 두 액티비티에서{@link android.view.View#setTransitionName View.setTransitionName()} 메서드를 사용하여) 두 레이아웃의 공유 요소를 정의하고 다음과 같이 {@link android.app.ActivityOptions} 개체를 생성합니다.
</p>
<pre>
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
@@ -283,9 +341,14 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
<h2 id="CurvedMotion">커브 모션 사용</h2>
<p>머티어리얼 디자인의 애니메이션은 시간 보간 및 공간 이동 패턴에서 커브를 사용합니다. Android 5.0(API 레벨 21) 이상에서 애니메이션의 사용자지정 타이밍 커브 및 커브 모션 패턴을 정의할 수 있습니다.</p>
<p>머티리얼 디자인의 애니메이션은 시간 보간 및 공간 이동 패턴에서 커브를 사용합니다.
Android 5.0(API 레벨 21) 이상에서 애니메이션의 사용자지정 타이밍 커브 및 커브 모션 패턴을 정의할 수 있습니다.
</p>
<p>{@link android.view.animation.PathInterpolator} 클래스는 베지어 커브나 {@link android.graphics.Path} 개체를 기반으로 하는 새 보간기(interpolator)입니다. 보간기는 생성자 인수를 사용하여 지정된 기준점 (0,0) 및 (1,1)과 제어점으로 모션 커브를 1x1 정사각형 안에 지정합니다. 또한 경로 보간기를 XML 리소스로 정의할 수도 있습니다.</p>
<p>{@link android.view.animation.PathInterpolator} 클래스는 베지어 곡선 또는 {@link android.graphics.Path} 개체를 기반으로 하는 새 보간기입니다.
이 보간기는 생성자 인수를 사용하여 지정된 기준점 (0,0) 및 (1,1)과 제어점으로 모션 커브를 1x1 정사각형 안에 지정합니다.
또한 경로 보간기를 XML 리소스로 정의할 수도 있습니다.</p>
<pre>
&lt;pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
@@ -295,7 +358,8 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
android:controlY2="1"/>
</pre>
<p>시스템은 머티어리얼 디자인 사양에서 세 가지 기본 커브에 대한 XML 리소스를 제공합니다.</p>
<p>시스템은 머티리얼 디자인 사양에서 세 가지 기본 커브에 대한 XML 리소스를 제공합니다.
</p>
<ul>
<li><code>&#64;interpolator/fast_out_linear_in.xml</code></li>
@@ -303,9 +367,12 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
<li><code>&#64;interpolator/linear_out_slow_in.xml</code></li>
</ul>
<p>{@link android.view.animation.PathInterpolator} 개체를 {@link android.animation.Animator#setInterpolator Animator.setInterpolator()} 메서드에 전달할 수 있습니다.</p>
<p>{@link android.view.animation.PathInterpolator} 객체를 {@link
android.animation.Animator#setInterpolator Animator.setInterpolator()} 메서드에 전달할 수 있습니다.</p>
<p>{@link android.animation.ObjectAnimator} 클래스에는 한 번에 2개 이상의 속성을 사용하여 경로를 따라 좌표를 애니메이트할 수 있는 새 생성자가 있습니다. 예를 들어 다음 애니메이터는 뷰의 X 및 Y 속성을 애니메이트하기 위해 {@link android.graphics.Path} 개체를 사용합니다.</p>
<p>{@link android.animation.ObjectAnimator} 클래스에는 한 번에 2개 이상의 속성을 사용하여 경로를 따라 좌표를 애니메이트할 수 있는 새 생성자가 있습니다.
예를 들어 다음 애니메이터는 뷰의 X 및 Y 속성을 애니메이트하기 위해 {@link android.graphics.Path} 객체를 사용합니다.
</p>
<pre>
ObjectAnimator mAnimator;
@@ -317,7 +384,9 @@ mAnimator.start();
<h2 id="ViewState">뷰 상태 변경 애니메이트</h2>
<p>{@link android.animation.StateListAnimator} 클래스를 사용하면 뷰의 상태가 변경될 때 실행되는 애니메이터를 정의할 수 있습니다. 다음 예는 {@link android.animation.StateListAnimator}를 XML 리소스로 정의하는 방법을 보여줍니다.</p>
<p>{@link android.animation.StateListAnimator} 클래스를 사용하면 뷰의 상태가 변경될 때 실행되는 애니메이터를 정의할 수 있습니다.
다음 예는 {@link
android.animation.StateListAnimator}를 XML 리소스로 정의하는 방법을 보여줍니다.</p>
<pre>
&lt;!-- animate the translationZ property of a view when pressed -->
@@ -345,11 +414,21 @@ mAnimator.start();
&lt;/selector>
</pre>
<p>사용자지정 뷰 상태 애니메이션을 뷰에 첨부하려면 이 예와 같이 XML 리소스 파일의 <code>selector</code> 요소를 사용하여 애니메이터를 정의한 후에 <code>android:stateListAnimator</code> 특성을 통해 뷰에 할당합니다. 코드에서 뷰에 상태 목록 애니메이터를 할당하려면 {@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()} 메서드를 사용하고, {@link android.view.View#setStateListAnimator View.setStateListAnimator()} 메서드로 애니메이터를 뷰에 할당합니다.</p>
<p>사용자지정 뷰 상태 애니메이션을 뷰에 첨부하려면 이 예와 같이 XML 리소스 파일의
<code>selector</code> 요소를 사용하여 애니메이터를 정의한 후에 <code>android:stateListAnimator</code> 특성을 통해 뷰에 할당합니다.
코드에서 뷰에 상태 목록 애니메이터를 할당하려면 {@link android.animation.AnimatorInflater#loadStateListAnimator
AnimationInflater.loadStateListAnimator()} 메서드를 사용하고,
{@link android.view.View#setStateListAnimator View.setStateListAnimator()} 메서드로 애니메이터를 뷰에 할당합니다.
</p>
<p>머티어리얼 테마를 확장하는 테마의 경우, 버튼은 기본적으로 Z 애니메이션을 가집니다. 버튼에서 이러한 동작을 피하려면 <code>android:stateListAnimator</code> 특성을 <code>@null</code>로 설정합니다.</p>
<p>머티리얼 테마를 확장하는 테마의 경우, 버튼은 기본적으로 Z 애니메이션을 가집니다. 버튼에서 이러한 동작을 피하려면 <code>android:stateListAnimator</code> 특성을
<code>@null</code>로 설정합니다.
</p>
<p>{@link android.graphics.drawable.AnimatedStateListDrawable} 클래스를 사용하면 연관된 뷰의 상태 변경 사이에 애니메이션을 보여주는 Drawable을 생성할 수 있습니다. Android 5.0의 일부 시스템 위젯은 이러한 애니메이션을 기본적으로 사용합니다. 다음 예는 {@link android.graphics.drawable.AnimatedStateListDrawable}을 XML 리소스로 정의하는 방법을 보여줍니다.</p>
<p>{@link android.graphics.drawable.AnimatedStateListDrawable} 클래스를 사용하면 연관된 뷰의 상태 변경 사이에 애니메이션을 보여주는 Drawable을 생성할 수 있습니다.
Android 5.0의 일부 시스템 위젯은 이러한 애니메이션을 기본적으로 사용합니다.
다음 예는 {@link android.graphics.drawable.AnimatedStateListDrawable}를 XML 리소스로 정의하는 방법을 보여줍니다.
</p>
<pre>
&lt;!-- res/drawable/myanimstatedrawable.xml -->
@@ -377,21 +456,30 @@ mAnimator.start();
</pre>
<h2 id="AnimVector">Vector Drawable 애니메이트</h2>
<h2 id="AnimVector">벡터 드로어블 애니메이트</h2>
<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">Vector Drawable</a>은 정의를 잃지 않고 확대할 수 있습니다. {@link android.graphics.drawable.AnimatedVectorDrawable} 클래스를 사용하면 Vector Drawable의 속성을 애니메이트할 수 있습니다.</p>
<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">벡터 드로어블</a>은 정의를 잃지 않고 확대할 수 있습니다.
{@link android.graphics.drawable.AnimatedVectorDrawable}
클래스를 사용하면 Vector Drawable의 속성을 애니메이트할 수 있습니다.</p>
<p>일반적으로 애니메이트된 Vector Drawable은 다음 3개의 XML 파일에서 정의합니다.</p>
<p>일반적으로 애니메이트된 벡터 드로어블은 다음 3개의 XML 파일에서 정의합니다.</p>
<ul>
<li><code>res/drawable/</code>의 <code>&lt;vector&gt;</code> 요소를 가진 Vector Drawable</li>
<li><code>res/drawable/</code>의 <code>&lt;animated-vector&gt;</code> 요소를 가진 애니메이트된 Vector Drawable</li>
<li><code>res/anim/</code>의 <code>&lt;objectAnimator&gt;</code> 요소를 가진 하나 이상의 개체 애니메이터</li>
<li>
<code>res/drawable/</code>의 <code>&lt;vector&gt;</code> 요소를 가진 벡터 드로어블</li>
<li>
<code>res/drawable/</code>의 <code>&lt;animated-vector&gt;</code> 요소를 가진 애니메이트된 벡터 드로어블</li>
<li>
<code>res/anim/</code>의 <code>&lt;objectAnimator&gt;</code> 요소를 가진 하나 이상의 객체 애니메이터</li>
</ul>
<p>애니메이트된 Vector Drawable은 <code>&lt;group&gt;</code> 및 <code>&lt;path&gt;</code> 요소의 특성을 애니메이트할 수 있습니다. <code>&lt;group&gt;</code> 요소는 경로 또는 하위 그룹 집합을 정의하며, <code>&lt;path&gt;</code> 요소는 그릴 경로를 정의합니다.</p>
<p>애니메이트된 벡터 드로어블은 <code>&lt;group&gt;</code> 및
<code>&lt;path&gt;</code> 요소의 특성을 애니메이트할 수 있습니다. <code>&lt;group&gt;</code> 요소는 경로 또는 하위 그룹 집합을 정의하며, <code>&lt;path&gt;</code> 요소는 그릴 경로를 정의합니다.
</p>
<p>애니메이트할 Vector Drawable을 정의하는 경우, 애니메이터 정의에서 참조할 수 있도록 <code>android:name</code> 특성을 사용하여 그룹 및 경로에 고유한 이름을 할당합니다. 예:</p>
<p>애니메이트할 벡터 드로어블을 정의하는 경우, 애니메이터 정의에서 참조할 수 있도록 <code>android:name</code>
특성을 사용하여 그룹 및 경로에 고유한 이름을 할당합니다.
예:</p>
<pre>
&lt;!-- res/drawable/vectordrawable.xml -->
@@ -413,7 +501,8 @@ mAnimator.start();
&lt;/vector>
</pre>
<p>애니메이트된 Vector Drawable 정의는 Vector Drawable의 그룹 및 경로를 이름으로 참조합니다.</p>
<p>애니메이트된 벡터 드로어블 정의는 벡터 드로어블의 그룹 및 경로를 이름으로 참조합니다.
</p>
<pre>
&lt;!-- res/drawable/animvectordrawable.xml -->
@@ -428,7 +517,9 @@ mAnimator.start();
&lt;/animated-vector>
</pre>
<p>애니메이션 정의는 {@link android.animation.ObjectAnimator} 또는 {@link android.animation.AnimatorSet} 개체를 나타냅니다. 이 예의 첫 번째 애니메이터는 대상 그룹을 360도 회전합니다.</p>
<p>애니메이션 정의는 {@link android.animation.ObjectAnimator} 또는 {@link
android.animation.AnimatorSet} 객체를 나타냅니다. 이 예의 첫 번째 애니메이터는 대상 그룹을 360도 회전합니다.
</p>
<pre>
&lt;!-- res/anim/rotation.xml -->
@@ -439,7 +530,9 @@ mAnimator.start();
android:valueTo="360" />
</pre>
<p>두 번째 애니메이터는 Vector Drawable의 경로를 다른 모양으로 모핑합니다. 두 경로 모두 모핑이 가능해야 하며, 같은 수의 명령어와 각 명령어에 대해 같은 수의 매개변수가 있어야 합니다.</p>
<p>두 번째 애니메이터는 벡터 드로어블의 경로를 다른 모양으로 모핑합니다.
두 경로 모두 모핑이 가능해야 하며, 같은 수의 명령어와 각 명령어에 대해 같은 수의 매개변수가 있어야 합니다.
</p>
<pre>
&lt;!-- res/anim/path_morph.xml -->
@@ -453,4 +546,5 @@ mAnimator.start();
&lt;/set>
</pre>
<p>자세한 내용은 {@link android.graphics.drawable.AnimatedVectorDrawable}의 API 레퍼런스를 참조하세요.</p>
<p>자세한 내용은 {@link
android.graphics.drawable.AnimatedVectorDrawable}의 API 레퍼런스를 참조하세요.</p>

88
docs/html-intl/intl/ko/training/material/compatibility.jd
View File

@@ -13,54 +13,75 @@ page.title=호환성 유지
</ol>
<h2>필독 항목</h2>
<ul>
<li><a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티어리얼 디자인</a></li>
<li><a href="http://www.google.com/design/spec">머티리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티리얼 디자인</a></li>
</ul>
</div>
</div>
<p>머티어리얼 테마 및 사용자지정 액티비티 전환과 같은 일부 머티어리얼 디자인 기능은 Android 5.0(API 레벨 21) 이상에서만 이용할 수 있습니다. 그러나 머티어리얼 디자인을 지원하는 기기에서 실행할 경우 이러한 기능을 사용하면서도 이전 버전의 Android를 실행하는 기기와도 호환되도록 앱을 디자인할 수 있습니다.</p>
<p>머티리얼 테마 및 사용자지정 액티비티 전환과 같은 일부 머티리얼 디자인 기능은 Android 5.0(API 레벨 21) 이상에서만 이용할 수 있습니다.
그러나 머티리얼 디자인을 지원하는 기기에서 실행할 경우 이러한 기능을 사용하면서도 이전 버전의 Android를 실행하는 기기와도 호환되도록 앱을 디자인할 수 있습니다.
</p>
<h2 id="Theme">대체 스타일 정의</h2>
<p>머티어리얼 테마를 지원하는 기기에서 해당 테마를 사용하고, 이전 버전의 Android를 실행하는 기기에서 구버전의 테마로 되돌리도록 앱을 구성할 수 있습니다.</p>
<p>머티리얼 테마를 지원하는 기기에서 해당 테마를 사용하고, 이전 버전의 Android를 실행하는 기기에서 구버전의 테마로 되돌리도록 앱을 구성할 수 있습니다.
</p>
<ol>
<li><code>res/values/styles.xml</code>에서 구버전의 테마에서 상속된 테마(Holo 등)를 정의합니다.</li>
<li><code>res/values-v21/styles.xml</code>에서 머티어리얼 테마에서 상속된 같은 이름을 가진 테마를 정의합니다.</li>
<li>
<code>res/values/styles.xml</code>에서 구버전의 테마에서 상속된 테마(Holo 등)를 정의합니다.</li>
<li>
<code>res/values-v21/styles.xml</code>에서 머티리얼 테마에서 상속된, 같은 이름을 가진 테마를 정의합니다.</li>
<li>매니페스트 파일에서 이 테마를 앱의 테마로 설정합니다.</li>
</ol>
<p class="note"><strong>참고:</strong> 앱이 머티어리얼 테마를 사용하지만 이러한 방식으로 대체 테마를 제공하지 않으면 Android 5.0 이전 버전에서는 앱이 실행되지 않습니다.
<p class="note"><strong>참고:</strong>
앱이 머티리얼 테마를 사용하지만 이러한 방식으로 대체 테마를 제공하지 않으면 Android 5.0 이전 버전에서는 앱이 실행되지 않습니다.
</p>
<h2 id="Layouts">대체 레이아웃 제공</h2>
<p>머티어리얼 디자인 지침에 따라 디자인한 레이아웃이 Android 5.0(API 레벨 21)에서 새로 도입된 XML 특성을 사용하지 않는 경우, 해당 레이아웃은 이전 버전의 Android에서 실행됩니다. 그렇지 않은 경우 대체 레이아웃을 제공할 수 있습니다. 또한 이전 버전의 Android에서 앱이 표시되는 방식을 사용자지정할 수 있는 대체 레이아웃을 제공할 수도 있습니다.</p>
<p>머티리얼 디자인 지침에 따라 디자인한 레이아웃이 Android 5.0(API 레벨 21)에서 새로 도입된 XML 특성을 사용하지 않는 경우, 해당 레이아웃은 이전 버전의 Android에서 실행됩니다.
<p><code>res/layout-v21/</code> 안에서 Android 5.0(API 레벨 21)의 레이아웃 파일을 생성하고, <code>res/layout/</code> 안에서 이전 버전의 Android를 위한 대체 레이아웃 파일을 생성합니다. 예를 들어, <code>res/layout/my_activity.xml</code>은 <code>res/layout-v21/my_activity.xml</code>의 대체 레이아웃입니다.</p>
그렇지 않은 경우 대체 레이아웃을 제공할 수 있습니다. 또한 이전 버전의 Android에서 앱이 표시되는 방식을 사용자가 지정할 수 있는 대체 레이아웃을 제공할 수도 있습니다.
</p>
<p>코드의 중복을 피하기 위해 <code>res/values/</code> 안에서 스타일을 정의하고, 새 API에 대해 <code>res/values-v21/</code>에서 스타일을 수정하고, 스타일 상속을 사용하여 <code>res/values/</code>에서 기본 스타일을 정의하고 <code>res/values-v21/</code>에서 해당 스타일로부터 상속합니다.</p>
<p><code>res/layout-v21/</code> 안에서 Android 5.0(API 레벨 21)의 레이아웃 파일을 생성하고, <code>res/layout/</code> 안에서 이전 버전의 Android를 위한 대체 레이아웃 파일을 생성합니다.
예를 들어, <code>res/layout/my_activity.xml</code>은
<code>res/layout-v21/my_activity.xml</code>의 대체 레이아웃입니다.
</p>
<p>코드의 중복을 피하기 위해 <code>res/values/</code> 안에서 스타일을 정의하고, 새 API에 대해 <code>res/values-v21/</code>에서 스타일을 수정하고, 스타일 상속을 사용하여 <code>res/values/</code>에서 기본 스타일을 정의하고 <code>res/values-v21/</code>에서 해당 스타일로부터 상속합니다.
</p>
<h2 id="SupportLib">지원 라이브러리 사용</h2>
<p><a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Libraries</a> r21 이상에는 다음과 같은 머티어리얼 디자인 기능이 포함되어 있습니다.</p>
<p><a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Libraries</a>
r21 이상에는 다음과 같은 머티리얼 디자인 기능이 포함되어 있습니다.</p>
<ul>
<li><code>Theme.AppCompat</code> 테마 중 하나를 적용할 때 일부 시스템 위젯에 대한 <a href="{@docRoot}training/material/theme.html">머티어리얼 디자인 스타일</a></li>
<li><code>Theme.AppCompat</code> 테마의 <a href="{@docRoot}training/material/theme.html#ColorPalette">색상표 테마 특성</a></li>
<li><a href="{@docRoot}training/material/lists-cards.html#RecyclerView">데이터 컬렉션 표시</a>를 위한 {@link android.support.v7.widget.RecyclerView} 위젯</li>
<li> <a href="{@docRoot}training/material/lists-cards.html#CardView">카드 생성</a>을 위한 {@link android.support.v7.widget.CardView} 위젯</li>
<li><a href="{@docRoot}training/material/drawables.html#ColorExtract">이미지에서 주요 색상을 추출</a>하기 위한 {@link android.support.v7.graphics.Palette} 클래스</li>
<li><code>Theme.AppCompat</code> 테마 중 하나를 적용할 때 일부 시스템 위젯에
대한 <a href="{@docRoot}training/material/theme.html">머티리얼 디자인 스타일</a></li>
<li><code>Theme.AppCompat</code> 테마의 <a href="{@docRoot}training/material/theme.html#ColorPalette">색상표 테마 특성</a>
</li>
<li><a href="{@docRoot}training/material/lists-cards.html#RecyclerView">데이터 컬렉션 표시</a>를 위한 {@link android.support.v7.widget.RecyclerView} 위젯
</li>
<li><a href="{@docRoot}training/material/lists-cards.html#CardView">카드 생성</a>을 위한 {@link android.support.v7.widget.CardView} 위젯</li>
<li><a href="{@docRoot}training/material/drawables.html#ColorExtract">이미지에서 주요 색상을 추출</a>하기 위한 {@link android.support.v7.graphics.Palette} 클래스
</li>
</ul>
<h3>시스템 위젯</h3>
<p><code>Theme.AppCompat</code> 테마는 다음 위젯에 대한 머티어리얼 디자인 스타일을 제공합니다.</p>
<p><code>Theme.AppCompat</code> 테마는 다음 위젯에 대한 머티리얼 디자인 스타일을 제공합니다.</p>
<ul>
<li>{@link android.widget.EditText}</li>
@@ -73,7 +94,8 @@ page.title=호환성 유지
<h3>색상표</h3>
<p>Android v7 Support Library에서 머티어리얼 디자인 스타일을 가져와서 색상표를 사용자지정하려면 <code>Theme.AppCompat</code> 테마 중 하나를 적용합니다.</p>
<p>Android v7 지원 라이브러리에서 머티리얼 디자인 스타일을 가져와서 색상표를 사용자지정하려면 <code>Theme.AppCompat</code> 테마 중 하나를 적용합니다.
</p>
<pre>
&lt;!-- extend one of the Theme.AppCompat themes -->
@@ -87,16 +109,21 @@ page.title=호환성 유지
<h3>목록 및 카드</h3>
<p>{@link android.support.v7.widget.RecyclerView} 및 {@link android.support.v7.widget.CardView} 위젯은 Android v7 Support Library를 통해 이전 버전의 Android에서 사용할 수 있지만, 다음과 같은 제약이 있습니다.</p>
<p>{@link android.support.v7.widget.RecyclerView} 및 {@link
android.support.v7.widget.CardView} 위젯은 Android v7 지원 라이브러리를 통해 이전 버전의 Android에서 사용할 수 있지만, 다음과 같은 제약이 있습니다.
</p>
<ul>
<li>{@link android.support.v7.widget.CardView}는 추가 패딩을 사용하여 프로그래밍 방식의 그림자 구현으로 환원됩니다.</li>
<li>{@link android.support.v7.widget.CardView}는 둥근 모서리와 교차하는 하위 뷰를 클리핑하지 않습니다.</li>
<li>{@link android.support.v7.widget.CardView}는 추가 패딩을 사용하여 프로그래밍 방식의 그림자 구현으로 환원됩니다.
</li>
<li>{@link android.support.v7.widget.CardView}는 둥근 모서리와 교차하는 하위 뷰를 클리핑하지 않습니다.
</li>
</ul>
<h3>종속관계</h3>
<h3>종속 사항</h3>
<p>Android 5.0(API 레벨 21) 이전 버전에서 다음 기능을 사용하려면 프로젝트에 Android v7 Support Library를 <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Gradle 종속관계</a>로 포함하세요.</p>
<p>Android 5.0(API 레벨 21) 이전 버전에서 이러한 기능을 사용하려면 프로젝트에 Android v7 지원 라이브러리를 <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Gradle 종속 사항</a>으로 포함합니다.
</p>
<pre>
dependencies {
@@ -116,11 +143,13 @@ dependencies {
<li>터치 피드백</li>
<li>애니메이션 표시</li>
<li>경로기반 애니메이션</li>
<li>Vector Drawable</li>
<li>Drawable 색조 적용</li>
<li>벡터 드로어블</li>
<li>드로어블 색조 적용</li>
</ul>
<p>이전 버전 Android와 호환성을 유지하려면, 이러한 기능을 위한 API를 호출하기 전에 런타임에 시스템 {@link android.os.Build.VERSION#SDK_INT version}을 확인하세요.</p>
<p>이전 버전 Android와 호환성을 유지하려면, 이러한 기능을 위한 API를 호출하기 전에 런타임에 시스템 {@link
android.os.Build.VERSION#SDK_INT version}을 확인하세요.
</p>
<pre>
// Check if we're running on Android 5.0 or higher
@@ -131,4 +160,9 @@ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
}
</pre>
<p class="note"><strong>참고:</strong> 앱에서 어떤 버전의 Android를 지원할지 지정하려면 매니페스트 파일에서 <code>android:minSdkVersion</code> 및 <code>android:targetSdkVersion</code> 특성을 사용하세요. Android 5.0에서 머티어리얼 디자인 기능을 사용하려면 <code>android:targetSdkVersion</code> 특성을 <code>21</code>로 설정하세요. 자세한 내용은 <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">&lt;uses-sdk&gt; API 가이드</a>를 참조하세요.</p>
<p class="note"><strong>참고:</strong> 앱에서 어떤 버전의 Android를 지원할지 지정하려면 매니페스트 파일에서 <code>android:minSdkVersion</code> 및 <code>android:targetSdkVersion</code>
특성을 사용하세요.
Android 5.0에서 머티어리얼 디자인 기능을 사용하려면 <code>android:targetSdkVersion</code> 특성을 <code>21</code>로 설정하세요.
자세한 내용은 <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">&lt;uses-sdk&gt; API 가이드</a>를 참조하세요.
</p>

67
docs/html-intl/intl/ko/training/material/drawables.jd
View File

@@ -1,4 +1,4 @@
page.title=Drawable 사용
page.title=드로어블 사용
@jd:body
@@ -6,39 +6,47 @@ page.title=Drawable 사용
<div id="tb">
<h2>이 과정에서 다루는 내용</h2>
<ol>
<li><a href="#DrawableTint">Drawable 리소스 색조 적용</a></li>
<li><a href="#DrawableTint">드로어블 리소스 색조 적용</a></li>
<li><a href="#ColorExtract">이미지에서 주요 색상 추출</a></li>
<li><a href="#VectorDrawables">Vector Drawable 생성</a></li>
<li><a href="#VectorDrawables">벡터 드로어블 생성</a></li>
</ol>
<h2>필독 항목</h2>
<ul>
<li><a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티어리얼 디자인</a></li>
<li><a href="http://www.google.com/design/spec">머티리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티리얼 디자인</a></li>
</ul>
</div>
</div>
<p>Drawable의 다음 기능은 앱에서 머티어리얼 디자인을 구현하는 데 도움이 됩니다.</p>
<p>드로어블의 다음 기능은 앱에서 머티리얼 디자인을 구현하는 데 도움이 됩니다.</p>
<ul>
<li>Drawable 색조 적용</li>
<li>드로어블 색조 적용</li>
<li>주요 색상 추출</li>
<li>Vector Drawable</li>
<li>벡터 드로어블</li>
</ul>
<p>이 과정은 앱에서 이러한 기능을 사용하는 방법을 보여줍니다.</p>
<h2 id="DrawableTint">Drawable 리소스 색조 적용</h2>
<h2 id="DrawableTint">드로어블 리소스 색조 적용</h2>
<p>Android 5.0(API 레벨 21) 이상에서는 알파 마스크로 정의된 비트맵 및 나인패치에 색조를 적용할 수 있습니다. 색상 리소스 또는 색상 리소스로 변환되는 테마 특성(예: <code>?android:attr/colorPrimary</code>)을 사용하여 색조를 적용할 수 있습니다. 일반적으로 이러한 에셋은 한 번만 생성하며 자동으로 채색되어 테마와 일치하게 됩니다.</p>
<p>Android 5.0(API 레벨 21) 이상에서는 알파 마스크로 정의된 비트맵 및 나인패치에 색조를 적용할 수 있습니다.
색상 리소스 또는 색상 리소스로 변환되는 테마 특성(예: <code>?android:attr/colorPrimary</code>)을 사용하여 색조를 적용할 수 있습니다.
일반적으로 이러한 자산은 한 번만 생성하며 자동으로 채색되어 테마와 일치하게 됩니다.
</p>
<p>{@code setTint()} 메서드를 사용하여 {@link android.graphics.drawable.BitmapDrawable} 또는 {@link android.graphics.drawable.NinePatchDrawable} 개체에 색조를 적용할 수 있습니다. 또한 <code>android:tint</code> 및 <code>android:tintMode</code> 특성으로 레이아웃에 색조 색상과 모드를 설정할 수 있습니다.</p>
<p>{@code setTint()} 메서드를 사용하여 {@link android.graphics.drawable.BitmapDrawable} 또는 {@link
android.graphics.drawable.NinePatchDrawable} 객체에 색조를 적용할 수 있습니다. 또한
<code>android:tint</code> 및 <code>android:tintMode</code> 특성으로 레이아웃에 색조 색상과 모드를 설정할 수 있습니다.
</p>
<h2 id="ColorExtract">이미지에서 주요 색상 추출</h2>
<p>Android Support Library r21 이상에는 이미지에서 주요 색상을 추출할 수 있는 {@link android.support.v7.graphics.Palette} 클래스가 있습니다. 이 클래스는 다음과 같은 주요 색상을 추출합니다.</p>
<p>Android 지원 라이브러리 r21 이상에는 이미지에서 주요 색상을 추출할 수 있는 {@link
android.support.v7.graphics.Palette} 클래스가 있습니다. 이 클래스는 다음과 같은 주요 색상을 추출합니다.
</p>
<ul>
<li>생생한 색상</li>
@@ -49,34 +57,44 @@ page.title=Drawable 사용
<li>차분하고 밝은 색상</li>
</ul>
<p>이러한 색상을 추출하려면, 이미지를 불러올 배경 스레드에서 {@link android.support.v7.graphics.Palette#generate Palette.generate()} 정적 메서드로 {@link android.graphics.Bitmap} 개체를 전달합니다. 스레드를 사용할 수 없는 경우, 대신 {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} 메서드를 호출하고 Listener를 제공합니다.</p>
<p>이러한 색상을 추출하려면, 이미지를 불러올 배경 스레드에서
{@link android.support.v7.graphics.Palette#generate Palette.generate()} 정적 메서드로 {@link android.graphics.Bitmap} 객체를 전달합니다.
스레드를 사용할 수 없는 경우, 대신
{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} 메서드를 호출하고 Listener를 제공합니다.
</p>
<p><code>Palette.getVibrantColor</code>와 같은 <code>Palette</code> 클래스의 getter 메서드를 사용하여 이미지에서 주요 색상을 추출할 수 있습니다.</p>
<p><code>Palette.getVibrantColor</code>와 같은
<code>Palette</code> 클래스의 getter 메서드를 사용하여 이미지에서 주요 색상을 추출할 수 있습니다.</p>
<p>프로젝트에서 {@link android.support.v7.graphics.Palette} 클래스를 사용하려면 다음 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 종속관계</a>를 앱의 모듈에 추가합니다.</p>
<p>프로젝트에서 {@link android.support.v7.graphics.Palette} 클래스를 사용하려면 다음
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 종속 사항을</a>를 앱의 모듈에 추가합니다.
</p>
<pre>
dependencies {
...
compile 'com.android.support:palette-v7:21.0.+'
compile 'com.android.support:palette-v7:21.0.0'
}
</pre>
<p>자세한 내용은 {@link android.support.v7.graphics.Palette} 클래스의 API 레퍼런스를 참조하세요.</p>
<p>자세한 내용은 {@link android.support.v7.graphics.Palette}
클래스의 API 레퍼런스를 참조하세요.</p>
<h2 id="VectorDrawables">Vector Drawable 생성</h2>
<h2 id="VectorDrawables">벡터 드로어블 생성</h2>
<!-- video box -->
<a class="notice-developers-video"
href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
<div>
<h3>비디오</h3>
<p>Android Vector Graphics</p>
<p>Android 벡터 그래픽</p>
</div>
</a>
<p>Android 5.0(API 레벨 21) 이상에서는 정의를 잃지 않고 배율을 조정하는 Vector Drawable을 정의할 수 있습니다. 비트맵 이미지의 경우 각 화면 밀도마다 에셋 파일이 필요한 반면, 벡터 이미지의 경우에는 하나의 에셋 파일만 필요로 합니다. 벡터 이미지를 생성하려면 <code>&lt;vector&gt;</code> XML 요소 안에 모양의 세부정보를 정의합니다.</p>
<p>Android 5.0(API 레벨 21) 이상에서는 정의를 잃지 않고 배율을 조정하는 벡터 드로어블을 정의할 수 있습니다.
비트맵 이미지의 경우 각 화면 밀도마다 자산 파일이 필요한 반면, 벡터 이미지의 경우에는 하나의 자산 파일만 필요합니다.
벡터 이미지를 생성하려면 <code>&lt;vector&gt;</code> XML 요소 안에 모양의 세부정보를 정의합니다.
</p>
<p>다음 예에서는 하트 모양을 가진 벡터 이미지를 정의합니다.</p>
@@ -102,4 +120,7 @@ href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
&lt;/vector>
</pre>
<p>벡터 이미지는 Android에서 {@link android.graphics.drawable.VectorDrawable} 개체로 나타납니다. <code>pathData</code> 구문에 대한 자세한 내용은 <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG 경로 레퍼런스</a>를 참조하세요. Vector Drawable의 속성 애니메이트에 대한 자세한 내용은 <a href="{@docRoot}training/material/animations.html#AnimVector">Vector Drawable 애니메이트</a>를 참조하세요.</p>
<p>벡터 이미지는 Android에서 {@link android.graphics.drawable.VectorDrawable}
객체로 나타납니다. <code>pathData</code> 구문에 대한 자세한 내용은 <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG Path reference</a>를 참조하세요. 벡터 드로어블의 속성 애니메이트에 대한 자세한 내용은
<a href="{@docRoot}training/material/animations.html#AnimVector">벡터 드로어블 애니메이트</a>를 참조하세요.
</p>

70
docs/html-intl/intl/ko/training/material/get-started.jd
View File

@@ -6,7 +6,7 @@ page.title=시작하기
<div id="tb">
<h2>이 과정에서 다루는 내용</h2>
<ol>
<li><a href="#ApplyTheme">머티어리얼 테마 적용</a></li>
<li><a href="#ApplyTheme">머티리얼 테마 적용</a></li>
<li><a href="#Layouts">레이아웃 디자인</a></li>
<li><a href="#Depth">뷰에서 엘리베이션 지정</a></li>
<li><a href="#ListsCards">목록 및 카드 생성</a></li>
@@ -14,22 +14,22 @@ page.title=시작하기
</ol>
<h2>필독 항목</h2>
<ul>
<li><a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티어리얼 디자인</a></li>
<li><a href="http://www.google.com/design/spec">머티리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티리얼 디자인</a></li>
</ul>
</div>
</div>
<p>머티어리얼 디자인으로 앱을 생성하려면:</p>
<p>머티리얼 디자인으로 앱을 생성하려면:</p>
<ol>
<li style="margin-bottom:10px">
<a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a>을 검토합니다.</li>
<a href="http://www.google.com/design/spec">머티리얼 디자인 사양</a>을 검토합니다.</li>
<li style="margin-bottom:10px">
앱에 머티어리얼 <strong>테마</strong>를 적용합니다.</li>
앱에 머티리얼 <strong>테마</strong>를 적용합니다.</li>
<li style="margin-bottom:10px">
머티어리얼 디자인 지침에 따라 <strong>레이아웃</strong>을 생성합니다.</li>
머티리얼 디자인 지침에 따라 <strong>레이아웃</strong>을 생성합니다.</li>
<li style="margin-bottom:10px">
그림자를 드리우기 위한 뷰의 <strong>엘리베이션</strong>을 지정합니다.</li>
<li style="margin-bottom:10px">
@@ -40,20 +40,27 @@ page.title=시작하기
<h3>이전 버전과의 호환성 유지</h3>
<p>Android 5.0 이전 버전과의 호환성을 유지하면서 다양한 머티어리얼 디자인 기능을 앱에 추가할 수 있습니다. 자세한 내용은 <a href="{@docRoot}training/material/compatibility.html">호환성 유지</a>를 참조하세요.</p>
<p>Android 5.0 이전 버전과의 호환성을 유지하면서 다양한 머티리얼 디자인 기능을 앱에 추가할 수 있습니다.
자세한 내용은
<a href="{@docRoot}training/material/compatibility.html">호환성 유지</a>를 참조하세요.</p>
<h3>머티어리얼 디자인으로 앱 업데이트</h3>
<h3>머티리얼 디자인으로 앱 업데이트</h3>
<p>머티어리얼 디자인을 통합하기 위해 기존 앱을 업데이트하려면 머티어리얼 디자인 지침에 따라 레이아웃을 업데이트하세요. 또한 깊이, 터치 피드백, 애니메이션도 통합하세요.</p>
<p>머티리얼 디자인을 통합하기 위해 기존 앱을 업데이트하려면 머티리얼 디자인 지침에 따라 레이아웃을 업데이트하세요.
또한 깊이, 터치 피드백, 애니메이션도 통합하세요.
</p>
<h3>머티어리얼 디자인으로 새 앱 생성</h3>
<h3>머티리얼 디자인으로 새 앱 생성</h3>
<p>머티어리얼 디자인 기능으로 새 앱을 생성하는 경우, <a href="http://www.google.com/design/spec">머티어리얼 디자인 지침</a>은 효율적인 디자인 프레임워크를 제공합니다. 앱 디자인 및 개발 시 이 지침을 따르고 Android 프레임워크의 새로운 기능을 사용하세요.</p>
<p>머티리얼 디자인 기능으로 새 앱을 생성하는 경우, <a href="http://www.google.com/design/spec">머티리얼 디자인 지침</a>은 효율적인 디자인 프레임워크를 제공합니다.
앱 디자인 및 개발 시 이 지침을 따르고 Android 프레임워크의 새로운 기능을 사용하세요.
</p>
<h2 id="ApplyTheme">머티어리얼 테마 적용</h2>
<h2 id="ApplyTheme">머티리얼 테마 적용</h2>
<p>머티어리얼 테마를 앱에 적용하려면 <code>android:Theme.Material</code>에서 상속하는 스타일을 지정하세요.</p>
<p>머티리얼 테마를 앱에 적용하려면
<code>android:Theme.Material</code>에서 상속하는 스타일을 지정합니다.</p>
<pre>
&lt;!-- res/values/styles.xml -->
@@ -65,12 +72,16 @@ page.title=시작하기
&lt;/resources>
</pre>
<p>머티어리얼 테마는 터치 피드백 및 액티비티 전환을 위한 색상표 및 기본 애니메이션을 설정할 수 있는 업데이트된 시스템 위젯을 제공합니다. 자세한 내용은<a href="{@docRoot}training/material/theme.html">머티어리얼 테마 사용</a>을 참조하세요.</p>
<p>머티리얼 테마는 터치 피드백 및 액티비티 전환을 위한 색상표 및 기본 애니메이션을 설정할 수 있는 업데이트된 시스템 위젯을 제공합니다.
자세한 내용은
<a href="{@docRoot}training/material/theme.html">머티리얼 테마 사용</a>을 참조하세요.</p>
<h2 id="Layouts">레이아웃 디자인</h2>
<p>머티어리얼 테마를 적용하고 사용자지정하는 것과 더불어, 레이아웃이 <a href="http://www.google.com/design/spec">머티어리얼 디자인 지침</a>을 따라야 합니다. 레이아웃 디자인 시 다음 사항에 특히 주의하세요.</p>
<p>머티리얼 테마를 적용하고 사용자지정하는 것과 더불어, 레이아웃이 <a href="http://www.google.com/design/spec">머티리얼 디자인 지침</a>을 따라야 합니다.
레이아웃 디자인 시 다음 사항에 특히 주의하세요.
</p>
<ul>
<li>기준선 그리드</li>
@@ -83,7 +94,9 @@ page.title=시작하기
<h2 id="Depth">뷰에서 엘리베이션 지정</h2>
<p>뷰는 그림자를 드리울 수 있으며 뷰의 엘리베이션 값은 그림자 크기 및 그리는 순서를 결정합니다. 뷰의 엘리베이션을 설정하려면 레이아웃에서 <code>android:elevation</code> 특성을 사용하세요.</p>
<p>뷰는 그림자를 드리울 수 있으며 뷰의 엘리베이션 값은 그림자 크기 및 그리는 순서를 결정합니다.
뷰의 엘리베이션을 설정하려면 레이아웃에서
<code>android:elevation</code> 특성을 사용하세요.</p>
<pre>
&lt;TextView
@@ -95,14 +108,22 @@ page.title=시작하기
android:elevation="5dp" />
</pre>
<p>새 <code>translationZ</code> 속성을 사용하여 뷰 엘리베이션의 일시적 변경을 반영하는 애니메이션을 생성할 수 있습니다. 엘리베이션 변경은 <a href="{@docRoot}training/material/animations.html#ViewState">터치 제스처에 반응</a>할 때 유용합니다.</p>
<p>새 <code>translationZ</code> 속성을 사용하여 뷰 엘리베이션의 일시적 변경을 반영하는 애니메이션을 생성할 수 있습니다.
엘리베이션 변경은
<a href="{@docRoot}training/material/animations.html#ViewState">터치
제스처에 반응</a>할 때 유용하게 쓰일 수 있습니다.</p>
<p>자세한 내용은 <a href="{@docRoot}training/material/shadows-clipping.html">그림자 정의 및 뷰 클리핑</a>을 참조하세요.</p>
<p>자세한 내용은 <a href="{@docRoot}training/material/shadows-clipping.html">그림자 정의 및 뷰 클리핑</a>을 참조하세요.
</p>
<h2 id="ListsCards">목록 및 카드 생성</h2>
<p>{@link android.support.v7.widget.RecyclerView}는 {@link android.widget.ListView}의 플러그 기능이 개선된 버전으로, 다양한 레이아웃 유형을 지원하고 향상된 성능을 제공합니다. {@link android.support.v7.widget.CardView}를 사용하면 모든 앱에서 일관된 모습으로 카드 안의 정보를 표시할 수 있습니다. 다음 코드 예는 {@link android.support.v7.widget.CardView}를 레이아웃에 포함시키는 방법을 보여줍니다.</p>
<p>{@link android.support.v7.widget.RecyclerView}는 {@link
android.widget.ListView}의 플러그 기능이 개선된 버전으로, 다양한 레이아웃 유형을 지원하고 향상된 성능을 제공합니다.
{@link android.support.v7.widget.CardView}를 사용하면 모든 앱에서 일관된 모습으로 카드 안의 정보를 표시할 수 있습니다.
다음 코드 예는 {@link android.support.v7.widget.CardView}를 레이아웃에
포함시키는 방법을 보여줍니다.</p>
<pre>
&lt;android.support.v7.widget.CardView
@@ -114,12 +135,15 @@ page.title=시작하기
&lt;/android.support.v7.widget.CardView>
</pre>
<p>자세한 내용은 <a href="{@docRoot}training/material/lists-cards.html">목록 및 카드 생성</a>을 참조하세요.</p>
<p>자세한 내용은 <a href="{@docRoot}training/material/lists-cards.html">목록 및 카드 생성</a>을 참조하세요.
</p>
<h2 id="Animations">애니메이션 사용자지정</h2>
<p>Android 5.0(API 레벨 21)은 앱에서 사용자지정 애니메이션 생성을 위한 새 API가 포함되어 있습니다. 예를 들어, 액티비티 전환을 활성화하고 액티비티 내부에서 나가기 전환을 정의할 수 있습니다.</p>
<p>Android 5.0(API 레벨 21)에는 앱에서 사용자지정 애니메이션 생성을 위한 새 API가 포함되어 있습니다. 예를 들어, 액티비티 전환을 활성화하고 액티비티 내부에서 나가기 전환을 정의할 수 있습니다.
</p>
<pre>
public class MyActivity extends Activity {
@@ -144,4 +168,4 @@ public class MyActivity extends Activity {
<p>이 액티비티에서 다른 액티비티를 시작하면 나가기 전환이 활성화됩니다.</p>
<p>새 애니메이션 API에 대한 자세한 내용은 <a href="{@docRoot}training/material/animations.html">사용자지정 애니메이션 정의</a>를 참조하세요.</p>
<p>새 애니메이션 API에 대한 자세한 내용은 <a href="{@docRoot}training/material/animations.html">사용자지정 애니메이션 정의</a>를 참조하세요.</p>

38
docs/html-intl/intl/ko/training/material/index.jd
View File

@@ -1,42 +1,48 @@
page.title=머티어리얼 디자인으로 앱 생성
page.title=개발자를 위한 머티리얼 디자인
page.type=design
page.image=images/material.png
page.metaDescription=앱에 머티어리얼 디자인을 적용하는 방법을 배웁니다.
page.image=images/cards/material_2x.png
page.metaDescription=Learn how to apply material design to your apps.
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>종속관계 및 전제조건</h2>
<h2>종속 사항 및 전제조건</h2>
<ul>
<li>Android 5.0(API 레벨 21)</li>
<li>Android Studio 0.8</li>
</ul>
</div>
</div>
<p>머티어리얼 디자인은 플랫폼 및 기기 전반의 표현 방식, 모션 및 상호작용 디자인에 대한 종합적인 지침입니다. Android 앱에서 머티어리얼 디자인을 사용하려면 <a href="http://www.google.com/design/spec/material-design/introduction.html">머티어리얼 디자인 사양</a>에 설명된 지침을 따르세요. 또한 Android 5.0 (API 레벨 21)에 있는 새 구성요소 및 기능을 사용하세요.</p>
<p>머티리얼 디자인은 플랫폼 및 기기 전반의 표현 방식, 모션 및 상호 작용 디자인에 대한 종합적인 지침입니다.
Android 앱에서 머티리얼 디자인을 사용하려면
<a href="http://www.google.com/design/spec/material-design/introduction.html">머티리얼 디자인 사양</a>에 설명된 지침을 따르고 Android 5.0(API 레벨 21)에서 제공되는 새 구성 요소 및 기능들을 활용하세요.
<p>이 클래스에서는 다음 요소를 사용하여 머티어리얼 디자인 앱을 만드는 방법을 보여줍니다.</p>
</p>
<p>이 클래스에서는 다음 요소를 사용하여 머티리얼 디자인 앱을 만드는 방법을 보여줍니다.</p>
<ul>
<li>머티어리얼 테마</li>
<li>머티리얼 테마</li>
<li>목록 및 카드용 위젯</li>
<li>사용자지정 그림자 및 뷰 클리핑</li>
<li>Vector Drawable</li>
<li>벡터 드로어블</li>
<li>사용자지정 애니메이션</li>
</ul>
<p>또한 이 클래스에서는 앱에서 머티어리얼 디자인 기능을 사용할 때 Android 5.0(API 레벨 21) 이전 버전과의 호환성을 유지하는 방법도 배웁니다.</p>
<p>또한 이 클래스에서는 앱에서 머티리얼 디자인 기능을 사용할 때
Android 5.0(API 레벨 21) 이전 버전과의 호환성을 유지하는 방법도 배웁니다.</p>
<h2>과정</h2>
<dl>
<dt><a href="{@docRoot}training/material/get-started.html">시작하기</a></dt>
<dd>머티어리얼 디자인 기능을 사용하여 앱을 업데이트하는 방법을 배웁니다.</dd>
<dd>머티리얼 디자인 기능을 사용하여 앱을 업데이트하는 방법을 배웁니다.</dd>
<dt><a href="{@docRoot}training/material/theme.html">머티어리얼 테마 사용</a></dt>
<dd>앱에 머티어리얼 디자인 스타일을 적용하는 방법을 배웁니다.</dd>
<dt><a href="{@docRoot}training/material/theme.html">머티리얼 테마 사용</a></dt>
<dd>앱에 머티리얼 디자인 스타일을 적용하는 방법을 배웁니다.</dd>
<dt><a href="{@docRoot}training/material/lists-cards.html">목록 및 카드 생성</a></dt>
<dd>시스템 위젯을 사용하여 일관된 모양과 느낌을 가진 목록과 카드를 만드는 방법을 배웁니다.</dd>
@@ -44,12 +50,12 @@ page.metaDescription=앱에 머티어리얼 디자인을 적용하는 방법을
<dt><a href="{@docRoot}training/material/shadows-clipping.html">그림자 정의 및 뷰 클리핑</a></dt>
<dd>뷰에 대한 엘리베이션을 설정하여 사용자지정 그림자를 생성하는 방법과 뷰를 클리핑하는 방법을 배웁니다.</dd>
<dt><a href="{@docRoot}training/material/drawables.html">Drawable 사용</a></dt>
<dd>Vector Drawable을 생성하는 방법과 Drawable 리소스를 채색하는 방법을 배웁니다.</dd>
<dt><a href="{@docRoot}training/material/drawables.html">드로어블 사용</a></dt>
<dd>벡터 드로어블을 생성하는 방법과 드로어블 리소스를 채색하는 방법을 배웁니다.</dd>
<dt><a href="{@docRoot}training/material/animations.html">사용자지정 애니메이션 정의</a></dt>
<dd>공유 요소를 사용하여 뷰 및 액티비티 전환을 위한 사용자지정 애니메이션을 생성하는 방법을 배웁니다.</dd>
<dt><a href="{@docRoot}training/material/compatibility.html">호환성 유지</a></dt>
<dd>Android 5.0 이전 버전 플랫폼과의 호환성을 유지하는 방법을 배웁니다.</dd>
</dl>
</dl>

97
docs/html-intl/intl/ko/training/material/lists-cards.jd
View File

@@ -8,39 +8,51 @@ page.title=목록 및 카드 생성
<ol>
<li><a href="#RecyclerView">목록 생성</a></li>
<li><a href="#CardView">카드 생성</a></li>
<li><a href="#Dependencies">종속관계 추가</a></li>
<li><a href="#Dependencies">종속 사항 추가</a></li>
</ol>
<h2>필독 항목</h2>
<ul>
<li><a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티어리얼 디자인</a></li>
<li><a href="http://www.google.com/design/spec">머티리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티리얼 디자인</a></li>
</ul>
</div>
</div>
<p>앱에서 머티어리얼 디자인 스타일로 복잡한 목록과 카드를 생성하려면 {@link android.support.v7.widget.RecyclerView} 및 {@link android.support.v7.widget.CardView} 위젯을 사용하세요.</p>
<p>앱에서 머티리얼 디자인 스타일로 복잡한 목록과 카드를 생성하려면
{@link android.support.v7.widget.RecyclerView} 및 {@link android.support.v7.widget.CardView}
위젯을 사용하세요.</p>
<h2 id="RecyclerView">목록 생성</h2>
<p>{@link android.support.v7.widget.RecyclerView} 위젯은 {@link android.widget.ListView}의 더욱 향상되고 유연해진 버전입니다. 이 위젯은 한정된 수의 뷰를 유지함으로써 매우 효율적으로 스크롤할 수 있는 큰 데이터 집합을 표시하기 위한 컨테이너입니다. 사용자 작업 또는 네트워크 이벤트를 기반으로 런타임에 요소가 변경되는 데이터 컬렉션이 있는 경우 {@link android.support.v7.widget.RecyclerView} 위젯을 사용하세요.</p>
<p>{@link android.support.v7.widget.RecyclerView} 위젯은 {@link android.widget.ListView}의 더욱 향상되고 유연해진 버전입니다.
이 위젯은 한정된 수의 뷰를 유지함으로써 매우 효율적으로 스크롤할 수 있는 큰 데이터 집합을 표시하기 위한 컨테이너입니다.
사용자 작업 또는 네트워크 이벤트에 따라 런타임에 요소가 변경되는 데이터 컬렉션이 있는 경우
{@link android.support.v7.widget.RecyclerView} 위젯을 사용하세요.
</p>
<p>{@link android.support.v7.widget.RecyclerView} 클래스는 다음 기능을 제공하여 큰 데이터 집합의 표시 및 취급 작업을 단순화합니다.</p>
<p>{@link android.support.v7.widget.RecyclerView} 클래스는 다음 기능을 제공하여 큰 데이터 집합의 표시 및 취급 작업을 단순화합니다.
</p>
<ul>
<li>항목 위치지정을 위한 레이아웃 관리자</li>
<li>항목 제거 및 추가와 같은 일반 항목 작업을 위한 기본 애니메이션</li>
<li>항목 위치 지정을 위한 레이아웃 관리자</li>
<li>항목 제거 및 추가와 같은 공통 항목 작업을 위한 기본 애니메이션</li>
</ul>
<p>또한 필요에 따라 {@link android.support.v7.widget.RecyclerView} 위젯을 위한 사용자지정 레이아웃 관리자 및 애니메이션을 정의할 수도 있습니다.</p>
<p>또한 필요에 따라 {@link
android.support.v7.widget.RecyclerView} 위젯을 위한 사용자지정 레이아웃 관리자 및 애니메이션을 정의할 수도 있습니다.</p>
<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" />
<p class="img-caption">
<strong>그림 1</strong>. <code>RecyclerView</code> 위젯.
</p>
<p>{@link android.support.v7.widget.RecyclerView} 위젯을 사용하려면 어댑터와 레이아웃 관리자를 지정해야 합니다. 어댑터를 생성하려면 {@link android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} 클래스를 확장하세요. 구현 세부사항은 데이터 집합의 사양 및 뷰 유형에 의해 결정됩니다. 자세한 내용은 아래의 <a href="#RVExamples">예</a>를 참조하세요.</p>
<p>{@link android.support.v7.widget.RecyclerView} 위젯을 사용하려면 어댑터와 레이아웃 관리자를 지정해야 합니다.
어댑터를 생성하려면 {@link
android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} 클래스를 확장하세요. 구현 세부사항은 데이터 집합의 사양 및 뷰 유형에 의해 결정됩니다.
자세한 내용은 아래의 <a href="#RVExamples">예</a>를 참조하세요.
</p>
<div style="float:right">
<img src="{@docRoot}design/material/images/list_mail.png" alt="" width="250" height="426" />
@@ -49,25 +61,37 @@ page.title=목록 및 카드 생성
</p>
</div>
<p><strong>레이아웃 관리자</strong>는 항목 뷰를 {@link android.support.v7.widget.RecyclerView} 내에 배치하고 사용자에게 더 이상 보이지 않는 항목 뷰를 언제 재사용할지 결정합니다. 뷰를 재사용(또는 <em>재활용</em>)하기 위해, 레이아웃 관리자는 어댑터에게 뷰의 콘텐츠를 데이터 집합의 다른 요소로 교체하도록 요청할 수 있습니다. 이런 방식으로 뷰를 재활용하면 불필요한 뷰 생성이나 리소스를 많이 소모하는 {@link android.app.Activity#findViewById findViewById()} 룩업을 수행하지 않아도 되므로 성능이 개선됩니다.</p>
<p><strong>레이아웃 관리자</strong>는 항목 뷰를 {@link
android.support.v7.widget.RecyclerView}내에 배치하고, 사용자에게는 더 이상 보이지 않는 항목 뷰를 언제 재사용할지 결정합니다.
뷰를 재사용 (또는 <em>재활용</em>)하기 위해, 레이아웃 관리자는 어댑터에게 뷰의 콘텐츠를 데이터 집합의 다른 요소로 교체하도록 요청할 수 있습니다.
이런 방식으로 뷰를 재활용하면 불필요한 뷰 생성이나 리소스를 많이 소모하는 {@link android.app.Activity#findViewById findViewById()} 조회를 수행하지 않아도 되므로 성능이 개선됩니다.
</p>
<p>{@link android.support.v7.widget.RecyclerView}는 다음과 같은 내장 레이아웃 관리자를 제공합니다.</p>
<ul>
<li>{@link android.support.v7.widget.LinearLayoutManager}는 항목을 가로 또는 세로 스크롤 목록에 표시합니다.</li>
<li>{@link android.support.v7.widget.LinearLayoutManager}는 항목을 가로 또는 세로 스크롤 목록으로 표시합니다.
</li>
<li>{@link android.support.v7.widget.GridLayoutManager}는 그리드 형식으로 항목을 표시합니다.</li>
<li>{@link android.support.v7.widget.StaggeredGridLayoutManager}는 지그재그형의 그리드 형식으로 항목을 표시합니다.</li>
</ul>
<p>사용자지정 레이아웃 관리자를 생성하려면 {@link android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} 클래스를 확장하세요.</p>
<p>사용자지정 레이아웃 관리자를 생성하려면 {@link
android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} 클래스를 확장하십시오.</p>
<h3>애니메이션</h3>
<p>항목 추가 및 제거를 위한 애니메이션은 {@link android.support.v7.widget.RecyclerView}에서 기본적으로 활성화됩니다. 이러한 애니메이션을 사용자지정하려면 {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} 클래스를 확장하고 {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()} 메서드를 사용하세요.</p>
<p>항목 추가 및 제거를 위한 애니메이션은 {@link
android.support.v7.widget.RecyclerView}에서 기본적으로 활성화됩니다. 이러한 애니메이션을 사용자지정하려면
{@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} 클래스를
확장하고 {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}
메서드를 사용하세요.</p>
<h3 id="RVExamples">예</h3>
<h3 id="RVExamples">예:</h3>
<p>다음 코드 예는 {@link android.support.v7.widget.RecyclerView}를 레이아웃에 추가하는 방법을 보여줍니다.</p>
<p>다음 코드 예는
{@link android.support.v7.widget.RecyclerView}를 레이아웃에 추가하는 방법을 보여줍니다.</p>
<pre>
&lt;!-- A RecyclerView with some commonly used attributes -->
@@ -78,7 +102,9 @@ page.title=목록 및 카드 생성
android:layout_height="match_parent"/>
</pre>
<p>{@link android.support.v7.widget.RecyclerView} 위젯을 레이아웃에 추가한 후, 개체 핸들을 얻어 레이아웃 관리자에 연결하고, 표시할 데이터의 어댑터를 첨부합니다.</p>
<p>{@link android.support.v7.widget.RecyclerView} 위젯을 레이아웃에 추가한 후, 객체 핸들을 얻어 레이아웃 관리자에 연결하고, 표시할 데이터의 어댑터를 첨부합니다.
</p>
<pre>
public class MyActivity extends Activity {
@@ -108,7 +134,10 @@ public class MyActivity extends Activity {
}
</pre>
<p>어댑터는 데이터 집합의 항목에 액세스할 수 있게 해주며, 항목 뷰를 생성하고, 원래의 항목이 더 이상 보이지 않을 경우 일부 뷰의 콘텐츠를 새 데이터 항목으로 교체합니다. 다음 코드 예는 {@link android.widget.TextView} 위젯을 사용하여 표시된 문자열 배열로 이루어진 데이터 집합의 간단한 구현을 보여줍니다.</p>
<p>어댑터는 데이터 집합의 항목에 액세스할 수 있게 해주며, 항목 뷰를 생성하고, 원래의 항목이 더 이상 보이지 않을 경우 일부 뷰의 콘텐츠를 새 데이터 항목으로 교체합니다.
다음 코드 예는 {@link android.widget.TextView} 위젯을 사용하여 표시된 문자열 배열로 이루어진 데이터 집합의 간단한 구현을 보여줍니다.
</p>
<pre>
public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
@@ -171,19 +200,29 @@ public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
<h2 id="CardView">카드 생성</h2>
<p>{@link android.support.v7.widget.CardView}는 {@link android.widget.FrameLayout} 클래스를 확장하고 카드 내의 정보를 플랫폼에서 일관된 모습으로 표시할 수 있도록 합니다. {@link android.support.v7.widget.CardView} 위젯은 그림자와 둥근 모서리를 가질 수 있습니다.</p>
<p>{@link android.support.v7.widget.CardView}는 {@link android.widget.FrameLayout} 클래스를
확장하고 카드 내의 정보를 플랫폼에서 일관된 모습으로 표시할 수 있도록 합니다. {@link
android.support.v7.widget.CardView} 위젯은 그림자와 둥근 모서리를 가질 수 있습니다.</p>
<p>그림자가 있는 카드를 생성하려면 <code>card_view:cardElevation</code> 특성을 사용합니다. {@link android.support.v7.widget.CardView}는 Android 5.0(API 레벨 21) 이상에서 실제 엘리베이션 및 동적 그림자를 사용하며, 이전 버전에서는 이전의 프로그래밍 방식의 그림자 구현으로 환원됩니다. 자세한 내용은 <a href="{@docRoot}training/material/compatibility.html">호환성 유지</a>를 참조하세요.</p>
<p>그림자가 있는 카드를 생성하려면 <code>card_view:cardElevation</code> 특성을 사용합니다.
{@link android.support.v7.widget.CardView}는 Android 5.0(API 레벨 21) 이상에서 실제 엘리베이션 및 동적 그림자를 사용하며, 이전 버전에서는 이전의 프로그래밍 방식의 그림자 구현으로 환원됩니다. 자세한 내용은 <a href="{@docRoot}training/material/compatibility.html">호환성 유지</a>를 참조하세요.
<p>이러한 속성을 사용하여 {@link android.support.v7.widget.CardView} 위젯의 모습을 사용자지정합니다.</p>
</p>
<p>이러한 속성을 사용하여
{@link android.support.v7.widget.CardView} 위젯의 모습을 사용자지정합니다.</p>
<ul>
<li>레이아웃에 모서리 반지름을 설정하려면 <code>card_view:cardCornerRadius</code> 특성을 사용합니다.</li>
<li>레이아웃에 모서리 반지름을 설정하려면 <code>card_view:cardCornerRadius</code>
특성을 사용합니다.</li>
<li>코드에서 모서리 반지름을 설정하려면 <code>CardView.setRadius</code> 메서드를 사용합니다.</li>
<li>카드의 배경색을 설정하려면 <code>card_view:cardBackgroundColor</code> 특성을 사용합니다.</li>
<li>카드의 배경색을 설정하려면 <code>card_view:cardBackgroundColor</code>
특성을 사용합니다.</li>
</ul>
<p>다음 코드 예는 {@link android.support.v7.widget.CardView} 위젯을 레이아웃에 포함시키는 방법을 보여줍니다.</p>
<p>다음 코드 예는 {@link android.support.v7.widget.CardView}
위젯을 레이아웃에 포함시키는 방법을 보여줍니다.</p>
<pre>
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
@@ -210,9 +249,13 @@ public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
<p>자세한 내용은 {@link android.support.v7.widget.CardView}의 API 레퍼런스를 참조하세요.</p>
<h2 id="Dependencies">종속관계 추가</h2>
<h2 id="Dependencies">종속 사항 추가</h2>
<p>{@link android.support.v7.widget.RecyclerView} 및 {@link android.support.v7.widget.CardView} 위젯은 <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Libraries</a>의 일부입니다. 이러한 위젯을 프로젝트에서 사용하려면 다음 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 종속관계</a>를 앱 모듈에 추가하세요.</p>
<p>{@link android.support.v7.widget.RecyclerView} 및 {@link android.support.v7.widget.CardView}
위젯은 <a href="{@docRoot}tools/support-library/features.html#v7">v7 지원 라이브러리</a>의 일부입니다.
이러한 위젯을 프로젝트에서 사용하려면 다음
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 종속 사항</a>을 앱의 모듈에 추가하세요.
</p>
<pre>
dependencies {
@@ -220,4 +263,4 @@ dependencies {
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}
</pre>
</pre>

78
docs/html-intl/intl/ko/training/material/shadows-clipping.jd
View File

@@ -12,26 +12,35 @@ page.title=그림자 정의 및 뷰 클리핑
</ol>
<h2>필독 항목</h2>
<ul>
<li><a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티어리얼 디자인</a></li>
<li><a href="http://www.google.com/design/spec">머티리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티리얼 디자인</a></li>
</ul>
</div>
</div>
<p>머티어리얼 디자인은 UI 요소에 엘리베이션을 도입합니다. 엘리베이션은 사용자가 각 요소의 상대적 중요성을 이해하고 현재 직면한 작업에 집중할 수 있도록 도와줍니다.</p>
<p>머티어리얼 디자인은 UI 요소에 엘리베이션을 도입합니다. 엘리베이션은 사용자가 각 요소의 상대적 중요성을 이해하고 현재 직면한 작업에 집중할 수 있도록 도와줍니다.
</p>
<p>Z 속성으로 표현되는 뷰의 엘리베이션은 그림자의 시각적인 모양을 결정합니다. 예를 들어, 더 높은 Z값을 가진 뷰는 더 크고 부드러운 그림자를 드리웁니다. 높은 Z값을 가진 뷰는 낮은 Z값을 가진 뷰를 가립니다. 하지만 뷰의 Z값이 뷰의 크기에 영향을 주지는 않습니다.</p>
<p>Z 속성으로 표현되는 뷰의 엘리베이션은 그림자의 시각적인 모양을 결정합니다. 예를 들어, 더 높은 Z값을 가진 뷰는 더 크고 부드러운 그림자를 드리웁니다.
높은 Z값을 가진 뷰는 낮은 Z값을 가진 뷰를 가립니다. 하지만 뷰의 Z값이 뷰의 크기에 영향을 주지는 않습니다.
</p>
<p>그림자는 엘리베이트된 뷰의 상위 요소에 의해 그려지며, 따라서 기본적으로 상위 요소에 의해 클리핑되는 표준 뷰 클리핑이 적용됩니다.</p>
<p>그림자는 엘리베이트된 뷰의 상위 요소에 의해 그려지며, 따라서 기본적으로 상위 요소에 의해 클리핑되는 표준 뷰 클리핑이 적용됩니다.
</p>
<p>엘리베이션은 특정 작업 수행 시 위젯이 일시적으로 뷰 평면 위로 올라오는 애니메이션을 생성하는 경우에도 유용합니다.</p>
<p>엘리베이션은 특정 작업 수행 시 위젯이 일시적으로 뷰 평면 위로 올라오는 애니메이션을 생성하는 경우에도 유용합니다.
</p>
<p>머티어리얼 디자인의 엘리베이션에 대한 자세한 내용은 <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">3D 공간의 개체</a>를 참조하세요.</p>
<p>머티리얼 디자인의 엘리베이션에 대한 자세한 내용은
<a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">3D 공간의 개체</a>를 참조하세요.
</p>
<h2 id="Elevation">뷰에 엘리베이션 지정</h2>
<p>뷰의 Z 값은 2개의 구성요소를 가집니다. <ul>
<p>뷰의 Z 값은 2개의 구성요소를 가집니다.
<ul>
<li>엘리베이션: 정적 구성요소.</li>
<li>변환: 애니메이션에 사용되는 동적 구성요소.</li>
</ul>
@@ -41,22 +50,34 @@ page.title=그림자 정의 및 뷰 클리핑
<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
<p class="img-caption"><strong>그림 1</strong> - 서로 다른 뷰 엘리베이션의 그림자.</p>
<p>레이아웃 정의에서 뷰의 엘리베이션을 설정하려면 <code>android:elevation</code> 특성을 사용하세요. 액티비티의 코드에서 뷰의 엘리베이션을 설정하려면 {@link android.view.View#setElevation View.setElevation()} 메서드를 사용하세요.</p>
<p>레이아웃 정의에서 뷰의 엘리베이션을 설정하려면 <code>android:elevation</code>
특성을 사용합니다. 액티비티의 코드에서 뷰의 엘리베이션을 설정하려면
{@link android.view.View#setElevation View.setElevation()} 메서드를 사용합니다.</p>
<p>뷰의 변환을 설정하려면 {@link android.view.View#setTranslationZ View.setTranslationZ()} 메서드를 사용하세요.</p>
<p>뷰의 변환을 설정하려면 {@link android.view.View#setTranslationZ
View.setTranslationZ()} 메서드를 사용합니다.</p>
<p>새 {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} 및 {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} 메서드를 사용하면 뷰의 엘리베이션을 손쉽게 애니메이트할 수 있습니다. 자세한 내용은 {@link android.view.ViewPropertyAnimator}의 API 레퍼런스와 <a href="{@docRoot}guide/topics/graphics/prop-animation.html">속성 애니메이션</a> 개발자 가이드를 참조하세요.</p>
<p>새 {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} 및 {@link
android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} 메서드를 사용하면 뷰의 엘리베이션을 손쉽게 애니메이트할 수 있습니다.
자세한 내용은
{@link android.view.ViewPropertyAnimator}의 API 레퍼런스와 <a href="{@docRoot}guide/topics/graphics/prop-animation.html">속성 애니메이션</a> 개발자 가이드를 참조하세요.
</p>
<p>{@link android.animation.StateListAnimator}를 사용해서 이러한 애니메이션을 선언적 방식으로 지정할 수도 있습니다. 이는 사용자가 버튼을 누를 때와 같이 상태 변경이 애니메이션을 트리거하는 경우에 특히 유용합니다. 자세한 내용은 <a href="{@docRoot}training/material/animations.html#ViewState">뷰 상태 변경 애니메이트</a>를 참조하세요.</p>
<p>{@link android.animation.StateListAnimator}를 사용해서 이러한 애니메이션을 선언적 방식으로 지정할 수도 있습니다.
이는 사용자가 버튼을 누를 때와 같이 상태 변경이 애니메이션을 트리거하는 경우에 특히 유용합니다.
자세한 내용은
<a href="{@docRoot}training/material/animations.html#ViewState">뷰 상태 변경 애니메이트</a>를 참조하세요.</p>
<p>Z 값은 dp(밀도-독립 화소)로 측정됩니다.</p>
<p>Z 값은 dp(밀도 독립적 픽셀)로 측정됩니다.</p>
<h2 id="Shadows">뷰 그림자 및 윤곽선 사용자지정</h2>
<p>뷰의 배경 Drawable의 경계는 그림자의 기본 모양을 결정합니다. <strong>윤곽선</strong>은 그래픽 개체의 바깥쪽 모양을 나타내고 터치 피드백의 물결 영역을 정의합니다.</p>
<p>뷰의 배경 드로어블의 경계는 해당 그림자의 기본 모양을 결정합니다.
<strong>윤곽선</strong>은 그래픽 객체의 바깥쪽 모양을 나타내고 터치 피드백의 물결 영역을 정의합니다.
</p>
<p>배경 Drawable을 사용하여 정의된 다음 뷰를 살펴봅시다.</p>
<p>배경 드로어블을 사용하여 정의된 다음 뷰를 살펴봅시다.</p>
<pre>
&lt;TextView
@@ -66,7 +87,7 @@ page.title=그림자 정의 및 뷰 클리핑
android:background="@drawable/myrect" />
</pre>
<p>배경 Drawable은 둥근 모서리를 가진 직사각형으로 정의됩니다.</p>
<p>배경 드로어블은 둥근 모서리를 가진 직사각형으로 정의됩니다.</p>
<pre>
&lt;!-- res/drawable/myrect.xml -->
@@ -77,23 +98,36 @@ page.title=그림자 정의 및 뷰 클리핑
&lt;/shape>
</pre>
<p>배경 Drawable이 뷰의 윤곽선을 정의하기 때문에 뷰는 둥근 모서리를 가진 그림자를 드리웁니다. 사용자지정 윤곽선을 제공하면 뷰 그림자의 기본 모양이 재정의됩니다.</p>
<p>배경 드로어블이 뷰의 윤곽선을 정의하기 때문에 뷰는 둥근 모서리를 가진 그림자를 드리웁니다.
사용자지정 윤곽선을 제공하면 뷰 그림자의 기본 모양이 재정의됩니다.</p>
<p>코드에서 뷰의 사용자지정 윤곽선을 정의하려면:<p>
<ol>
<li>{@link android.view.ViewOutlineProvider} 클래스를 확장합니다.</li>
<li>{@link android.view.ViewOutlineProvider#getOutline getOutline()} 메서드를 재정의합니다.</li>
<li>{@link android.view.View#setOutlineProvider View.setOutlineProvider()} 메서드를 사용하여 새로운 윤곽선 공급자를 뷰에 할당합니다.</li>
<li>{@link
android.view.View#setOutlineProvider View.setOutlineProvider()} 메서드를 사용하여 새로운 윤곽선 공급자를 뷰에 할당합니다.</li>
</ol>
<p>{@link android.graphics.Outline} 클래스의 메서드를 사용해서 둥근 모서리를 가진 타원형 및 직사각형 윤곽선을 생성할 수 있습니다. 뷰의 기본 윤곽선 공급자는 뷰의 배경에서 윤곽선을 가져옵니다. 뷰에 그림자가 드리우는 것을 원치 않으면 뷰의 윤곽선 공급자를 <code>null</code>로 설정합니다.</p>
<p>{@link android.graphics.Outline} 클래스의 메서드를 사용하여 둥근 모서리를 가진 타원형 및 직사각형 윤곽선을 생성할 수 있습니다.
뷰의 기본 윤곽선 공급자는 뷰의 배경에서 윤곽선을 가져옵니다.
뷰에 그림자가 드리우는 것을 원치 않으면 뷰의 윤곽선 공급자를 <code>null</code>로 설정하세요.
</p>
<h2 id="Clip">뷰 클리핑</h2>
<p>뷰를 클리핑하면 뷰의 모양을 손쉽게 바꿀 수 있습니다. 다른 디자인 요소와의 일관성을 위해, 또는 사용자 입력에 응답하여 뷰의 모양을 바꾸기 위해 뷰를 클리핑할 수 있습니다. {@link android.view.View#setClipToOutline View.setClipToOutline()} 메서드 또는 <code>android:clipToOutline</code> 특성을 사용하여 윤곽선 영역으로 뷰를 클리핑할 수 있습니다. {@link android.graphics.Outline#canClip Outline.canClip()} 메서드에서 결정된 대로 정사각형, 원형 그리고 둥근 사각형의 윤곽선만 클리핑을 지원합니다.</p>
<p>뷰를 클리핑하면 뷰의 모양을 손쉽게 바꿀 수 있습니다. 다른 디자인 요소와의 일관성을 위해, 또는 사용자 입력에 응답하여 뷰의 모양을 바꾸기 위해 뷰를 클리핑할 수 있습니다. {@link android.view.View#setClipToOutline
View.setClipToOutline()} 메서드나 <code>android:clipToOutline</code> 특성을 사용하여 뷰를 해당 윤곽선 영역까지 클리핑할 수 있습니다.
<p>Drawable 모양으로 뷰를 클리핑하려면 위와 같이 Drawable을 뷰의 배경으로 설정하고 {@link android.view.View#setClipToOutline View.setClipToOutline()} 메서드를 호출합니다.</p>
{@link android.graphics.Outline#canClip Outline.canClip()} 메서드에서 결정된 대로 사각형, 원형 및 둥근 사각형의 윤곽선만 클리핑을 지원합니다.
</p>
<p>뷰 클리핑은 리소스 소모가 많은 작업이므로, 뷰를 클리핑하는 데 사용하는 모양을 애니메이트하지 마십시오. 이 효과를 얻으려면 <a href="{@docRoot}training/material/animations.html#Reveal">Reveal Effect</a> 애니메이션을 사용하세요.</p>
<p>드로어블 모양으로 뷰를 클리핑하려면 위와 같이 드로어블을 뷰의 배경으로
설정하고 {@link android.view.View#setClipToOutline View.setClipToOutline()}
메서드를 호출합니다.</p>
<p>뷰 클리핑은 리소스 소모가 많은 작업이므로,뷰를 클리핑하는 데 사용하는 모양을 애니메이트하지 마세요.
이 효과를 얻으려면 <a href="{@docRoot}training/material/animations.html#Reveal">표시 효과</a> 애니메이션을 사용하세요.</p>

58
docs/html-intl/intl/ko/training/material/theme.jd
View File

@@ -1,4 +1,4 @@
page.title=머티어리얼 테마 사용
page.title=머티리얼 테마 사용
@jd:body
@@ -12,14 +12,14 @@ page.title=머티어리얼 테마 사용
</ol>
<h2>필독 항목</h2>
<ul>
<li><a href="http://www.google.com/design/spec">머티어리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티어리얼 디자인</a></li>
<li><a href="http://www.google.com/design/spec">머티리얼 디자인 사양</a></li>
<li><a href="{@docRoot}design/material/index.html">Android의 머티리얼 디자인</a></li>
</ul>
</div>
</div>
<p>새 머티어리얼 테마는 다음과 같은 기능을 제공합니다.</p>
<p>새 머티리얼 테마는 다음과 같은 기능을 제공합니다.</p>
<ul>
<li>색상표를 설정할 수 있는 시스템 위젯</li>
@@ -27,11 +27,14 @@ page.title=머티어리얼 테마 사용
<li>액티비티 전환 애니메이션</li>
</ul>
<p>제어 중인 색상표로 브랜드 ID에 따라 머티어리얼 테마의 모습을 사용자지정할 수 있습니다. <a href="#fig3">그림 3</a>과 같이 테마 특성을 사용하여 작업 표시줄 및 상태 표시줄에 색조를 적용할 수 있습니다.</p>
<p>제어 중인 색상표로 브랜드 ID에 따라 머티리얼 테마의 모습을 사용자지정할 수 있습니다.
<a href="#fig3">그림 3</a>과 같이 테마 특성을 사용하여 작업 표시줄 및 상태 표시줄에 색조를 적용할 수 있습니다.
</p>
<p>시스템 위젯에는 새 디자인 및 터치 피드백 애니메이션이 있습니다. 앱에서 색상표, 터치 피드백 애니메이션, 액티비티 전환을 사용자지정할 수 있습니다.</p>
<p>시스템 위젯에는 새 디자인 및 터치 피드백 애니메이션이 있습니다. 앱에서 색상표, 터치 피드백 애니메이션, 액티비티 전환을 사용자지정할 수 있습니다.
</p>
<p>머티어리얼 테마는 다음과 같이 정의됩니다.</p>
<p>머티리얼 테마는 다음과 같이 정의됩니다.</p>
<ul>
<li><code>@android:style/Theme.Material</code> (어두운 버전)</li>
@@ -39,33 +42,39 @@ page.title=머티어리얼 테마 사용
<li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
</ul>
<p>사용가능한 머티어리얼 스타일 목록은 {@link android.R.style R.style}의 API 레퍼런스를 참조하세요.</p>
<p>사용가능한 머티리얼 스타일 목록은
{@link android.R.style R.style}의 API 레퍼런스를 참조하세요.</p>
<!-- two columns, dark/light material theme example -->
<div style="width:700px;margin-top:25px;margin-bottom:10px">
<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:170px;margin:0 auto">
<p style="margin-top:8px;font-size:12px"><strong>그림 1</strong>. 어두운 머티어리얼 테마</p>
<p style="margin-top:8px;font-size:12px"><strong>그림 1</strong>. 어두운 머티리얼 테마</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:170px;margin:0 auto">
<p style="margin-top:8px;font-size:12px"><strong>그림 2</strong>. 밝은 머티어리얼 테마</p>
<p style="margin-top:8px;font-size:12px"><strong>그림 2</strong>. 밝은 머티리얼 테마</p>
</div>
</div>
<br style="clear:left">
</div>
<p class="note">
<strong>참고:</strong> 머티어리얼 테마는 Android 5.0(API 레벨 21) 이상에서만 사용할 수 있습니다. <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support Libraries</a>는 일부 위젯에 머티어리얼 디자인 스타일의 테마를 제공하고 색상표 사용자지정을 지원합니다. 자세한 내용은 <a href="{@docRoot}training/material/compatibility.html">호환성 유지</a>를 참조하세요.
<strong>참고:</strong> 머티리얼 테마는 Android 5.0(API 레벨 21) 이상에서만 사용할 수 있습니다.
<a href="{@docRoot}tools/support-library/features.html#v7">v7 지원 라이브러리</a>
는 일부 위젯에 머티리얼 디자인 스타일의 테마를 제공하고 색상표 사용자지정을 지원합니다.
자세한 내용은
<a href="{@docRoot}training/material/compatibility.html">호환성 유지</a>를 참조하세요.
</p>
<h2 id="ColorPalette">색상표 사용자지정</h2>
<p style="margin-bottom:30px">테마의 기본 색상을 브랜드에 맞게 사용자지정하려면 머티어리얼 테마에서 상속 시 테마 특성을 사용하여 사용자지정 색상을 정의하세요.</p>
<p style="margin-bottom:30px">테마의 기본 색상을 브랜드에 맞게 사용자지정하려면 머티리얼 테마에서 상속 시 테마 특성을 사용하여 사용자지정 색상을 정의합니다.
</p>
<pre>
&lt;resources>
@@ -85,23 +94,38 @@ page.title=머티어리얼 테마 사용
<div style="float:right;margin-left:25px;margin-top:20px;margin-bottom:10px" id="fig3">
<img src="{@docRoot}training/material/images/ThemeColors.png" width="250" height="445" />
<p class="img-caption" style="margin-bottom:0px">
<strong>그림 3.</strong> 머티어리얼 테마 사용자자정</p>
<strong>그림 3.</strong> 머티리얼 테마 사용자자정</p>
</div>
<h2 id="StatusBar">상태 표시줄 사용자지정</h2>
<p>머티어리얼 테마를 사용하면 손쉽게 상태 표시줄을 사용자지정할 수 있습니다. 따라서 브랜드에 맞는 색상을 지정하고 흰색 상태 아이콘이 보이도록 충분한 대비를 제공할 수 있습니다. 상태 표시줄의 사용자지정 색상을 설정하려면 머티어리얼 테마를 확장할 때 <code>android:statusBarColor</code> 특성을 사용합니다. 기본적으로 <code>android:statusBarColor</code>는 <code>android:colorPrimaryDark</code>의 값을 상속합니다.</p>
<p>머티리얼 테마를 사용하면 손쉽게 상태 표시줄을 사용자지정할 수 있습니다. 따라서 브랜드에 맞는 색상을 지정하고 흰색 상태 아이콘이 보이도록 충분한 대비를 제공할 수 있습니다.
상태 표시줄의 사용자지정 색상을 설정하려면 머티리얼 테마를 확장할 때 <code>android:statusBarColor</code> 특성을 사용합니다.
<p>직접 상태 표시줄 뒤에 그릴 수도 있습니다. 예를 들어 사진 위에 상태 표시줄이 투명하게 표시되도록 하려면, 희미하게 어두운 그라데이션으로 흰색 상태 아이콘이 보이게 합니다. 그러기 위해서는 <code>android:statusBarColor</code> 특성을 <code>&#64;android:color/transparent</code>에 설정하고 필요한 만큼 창 플래그를 조정합니다. 또한 {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} 메서드를 사용하여 애니메이션 또는 페이드 효과를 줄 수도 있습니다.</p>
기본적으로 <code>android:statusBarColor</code>는 <code>android:colorPrimaryDark</code>의 값을 상속합니다.
</p>
<p>직접 상태 표시줄 뒤에 그릴 수도 있습니다. 예를 들어 사진 위에 상태 표시줄이 투명하게 표시되도록 하려면, 희미하게 어두운 그라데이션으로 흰색 상태 아이콘이 보이게 합니다.
그렇게 하려면 <code>android:statusBarColor</code> 특성을
<code>&#64;android:color/transparent</code>로 설정하고 필요한 경우 창 플래그를 조정합니다. 또한 {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} 메서드를 사용하여 애니메이션 또는 페이드 효과를 줄 수도 있습니다.
</p>
<p class="note">
<strong>참고:</strong> 상태 표시줄은 거의 언제나 기본 도구모음과 경계가 분명히 식별되어야 합니다. 단, 이러한 표시줄 뒤에 다채로운 가장자리 이미지 또는 미디어 콘텐츠를 표시하는 경우나 아이콘이 계속 보이도록 그라데이션을 사용하는 경우는 제외됩니다.
</p>
<p>탐색 표시줄과 상태 표시줄을 사용자지정하는 경우, 둘 다 투명하게 만들거나 상태 표시줄만 수정합니다. 그 밖의 경우 탐색 표시줄은 항상 검은색을 유지합니다.</p>
<p>탐색 표시줄과 상태 표시줄을 사용자지정하는 경우, 둘 다 투명하게 만들거나 상태 표시줄만 수정합니다.
그 밖의 경우 탐색 표시줄은 항상 검은색을 유지해야 합니다.</p>
<h2 id="Inheritance">개별 뷰의 테마 지정</h3>
<p>XML 레이아웃 정의에 있는 요소는 테마 리소스를 참조하는 <code>android:theme</code> 특성을 지정할 수 있습니다. 이 특성은 요소와 모든 하위 요소의 테마를 수정하며, 인터페이스의 특정 부분에서 테마 색상표를 바꿀 때 유용합니다.</p>
<p>XML 레이아웃 정의에 있는 요소는 테마 리소스를 참조하는 <code>android:theme</code> 특성을 지정할 수 있습니다.
이 특성은 요소와 모든 하위 요소의 테마를 수정하며, 인터페이스의 특정 부분에서 테마 색상표를 바꿀 때 유용합니다.
</p>

31
docs/html-intl/intl/pt-br/design/material/index.jd
View File

@@ -1,7 +1,6 @@
page.title=Material Design
page.title=Material Design para Android
page.tags=Material,design
page.type=design
page.image=design/material/images/MaterialLight.png
page.image=images/cards/design-material-for-android_2x.jpg
@jd:body
@@ -39,10 +38,10 @@ page.image=design/material/images/MaterialLight.png
<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 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
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>
@@ -59,7 +58,7 @@ componentes e funcionalidades disponíveis no Android 5.0 (API de nível 21) e e
<h3>Tema do Material</h3>
<p>O tema do Material fornece um novo estilo para o seu aplicativo, widgets de sistema que permitem
<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 -->
@@ -79,13 +78,13 @@ definir a paleta de cores e as animações padrão para feedback de toque e tran
<br style="clear:left"/>
</div>
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/theme.html">Como usar o tema
<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
<p>O Android fornece dois novos widgets para exibir cartões e listas com estilos e animações do
Material Design:</p>
<!-- two columns -->
@@ -97,19 +96,19 @@ Material Design:</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
<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
<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
<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>
@@ -130,7 +129,7 @@ Z. Essa nova propriedade representa a elevação de uma vista, que determina:</p
</div>
</div>
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Como
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Como
definir sombras e recortar visualizações</a>.</p>
@@ -162,10 +161,10 @@ Exibir animações em <strong>desenháveis da lista de estado</strong> entre mud
</li>
</ul>
<p>Animações de feedback de toque são integradas em várias vistas padrões, como botões. As novas APIs
<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
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/animations.html">Como definir
animações personalizadas</a>.</p>
@@ -182,5 +181,5 @@ uma cor em tempo de execução.</li>
imagem de mapa de bits.</li>
</ul>
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/drawables.html">Como trabalhar
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/drawables.html">Como trabalhar
com desenháveis</a>.</p>

200
docs/html-intl/intl/pt-br/training/material/animations.jd
View File

@@ -1,4 +1,4 @@
page.title=Como definir animações personalizadas
page.title=Como definir animações personalizadas
@jd:body
@@ -21,7 +21,10 @@ page.title=Como definir animações personalizadas
</div>
<p>As animações no Material Design dão feedback aos usuários sobre as ações deles e fornecem continuidade visual à medida que interagem com o seu aplicativo. O tema do Material fornece algumas animações padrão para botões e transições de atividades e o Android 5.0 (API de nível 21) e posteriores permitem a personalização dessas animações e a criação de novas:</p>
<p>As animações no Material Design dão feedback aos usuários sobre as ações deles e fornecem
continuidade visual à medida que interagem com o seu aplicativo. O tema do Material fornece algumas animações padrão para
botões e transições de atividades e o Android 5.0 (API de nível 21) e posteriores permitem a personalização
dessas animações e a criação de novas:</p>
<ul>
<li>Feedback de toque</li>
@@ -34,28 +37,42 @@ page.title=Como definir animações personalizadas
<h2 id="Touch">Personalizar feedback de toque</h2>
<p>Os feedbacks de toque no Material Design fornecem confirmação visual instantânea no ponto de contato quando os usuários interagem com elementos da IU. As animações de feedback de toque padrão para botões usam a nova classe {@link android.graphics.drawable.RippleDrawable}, que passa por transições entre diferentes estados com um efeito de ondulação.</p>
<p>Os feedbacks de toque no Material Design fornecem confirmação visual instantânea no
ponto de contato quando os usuários interagem com elementos da interface do usuário. As animações de feedback de toque padrão
para botões usam a nova classe {@link android.graphics.drawable.RippleDrawable}, que passa por transições
entre diferentes estados com um efeito de ondulação.</p>
<p>Na maioria dos casos, você deve aplicar essa funcionalidade no XML de visualização especificando o plano de fundo da visualização como:</p>
<p>Na maioria dos casos, você deve aplicar essa funcionalidade no XML de visualização especificando o segundo plano da
visualização como:</p>
<ul>
<li><code>?android:attr/selectableItemBackground</code> para uma ondulação delimitada</li>
<li><code>?android:attr/selectableItemBackgroundBorderless</code> para uma ondulação que se estenda além da visualização</li>
<li><code>?android:attr/selectableItemBackground</code> para uma ondulação delimitada.</li>
<li><code>?android:attr/selectableItemBackgroundBorderless</code> para uma ondulação que se estenda além
da visualização. Ele será desenhado sobre e delimitado pelo pai mais próximo da visualização com um segundo plano
não nulo.</li>
</ul>
<p class="note"><strong>Observação:</strong> <code>selectableItemBackgroundBorderless</code> é um novo atributo inserido na API de nível 21.</p>
<p class="note"><strong>Observação:</strong> <code>selectableItemBackgroundBorderless</code> é um novo
atributo introduzido na API de nível 21.</p>
<p>Alternativamente, você pode definir um {@link android.graphics.drawable.RippleDrawable} como um recurso XML usando o elemento <code>ripple</code>.</p>
<p>Alternativamente, você pode definir um {@link android.graphics.drawable.RippleDrawable}
como um recurso XML usando o elemento <code>ripple</code>.</p>
<p>Você pode atribuir uma cor para objetos {@link android.graphics.drawable.RippleDrawable}. Para alterar a cor do feedback de toque padrão, use o atributo <code>android:colorControlHighlight</code> do tema.</p>
<p>Você pode atribuir uma cor para objetos {@link android.graphics.drawable.RippleDrawable}. Para alterar
a cor do feedback de toque padrão, use o atributo <code>android:colorControlHighlight</code>
do tema.</p>
<p>Para obter mais informações, consulte a referência de API para a classe {@link android.graphics.drawable.RippleDrawable}.</p>
<p>Para obter mais informações, consulte a referência de API para a classe {@link
android.graphics.drawable.RippleDrawable}.</p>
<h2 id="Reveal">Usar o efeito de revelação</h2>
<p>Revelar animações fornece continuidade visual aos usuários ao exibir ou esconder um grupo de elementos da IU. O método {@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} permite animar um círculo de recorte para revelar ou esconder uma visualização.</p>
<p>Revelar animações fornece continuidade visual aos usuários ao exibir ou esconder um grupo
de elementos da interface do usuário. O método {@link android.view.ViewAnimationUtils#createCircularReveal
ViewAnimationUtils.createCircularReveal()} permite animar um círculo de recorte para
revelar ou ocultar uma visualização.</p>
<p>Para revelar uma visualização anteriormente invisível usando esse efeito:</p>
@@ -122,19 +139,29 @@ anim.start();
</video>
</div>
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
<p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>Figura 1</strong> - uma transição com elementos compartilhados.</p>
<p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>Figura 1</strong> - uma
transição com elementos compartilhados.</p>
<em>Para reproduzir o filme, clique na tela do dispositivo</em>
</div>
</div>
<p>As transições de atividades em aplicativos com Material Design fornecem conexões visuais entre estados diferentes por meio de movimentos e transformações entre elementos comuns. Você pode especificar animações personalizadas para transições de entrada e de saída e para transições de elementos compartilhados entre atividades.</p>
<p>As transições de atividades em aplicativos com Material Design fornecem conexões visuais
entre estados diferentes por meio de movimentos e transformações entre elementos comuns. Você pode especificar animações personalizadas para
transições de entrada e de saída e para transições de elementos compartilhados entre atividades.</p>
<ul>
<li>Uma transição de <strong>entrada</strong> determina como as visualizações em uma atividade entram em cena. Por exemplo, na transição de entrada <em>explodir</em>, as visualizações entram em cena por fora e voam em direção ao centro da tela.</li>
<li>Uma transição de <strong>entrada</strong> determina como as visualizações em uma atividade entram em cena.
Por exemplo, na transição de entrada <em>explodir</em>, as visualizações entram em cena por fora
e voam em direção ao centro da tela.</li>
<li>Uma transição de <strong>saída</strong> determina como as visualizações em uma atividade saem de cena. Por exemplo, na transição de saída <em>explodir</em>, as visualizações saem de cena a partir do centro.</li>
<li>Uma transição de <strong>saída</strong> determina como as visualizações em uma atividade saem de cena. Por
exemplo, na transição de saída <em>explodir</em>, as visualizações saem de cena a partir do
centro.</li>
<li>Uma transição de <strong>elementos compartilhados</strong> determina como as visualizações compartilhadas entre duas atividades fazem transição entre essas atividades. Por exemplo, se duas atividades têm a mesma imagem em posições e tamanhos diferentes, a transição de elemento compartilhado <em>changeImageTransform</em> movimenta e dimensiona a imagem suavemente entre essas atividades.</li>
<li>Uma transição de <strong>elementos compartilhados</strong> determina como as visualizações compartilhadas
entre duas atividades fazem transição entre essas atividades. Por exemplo, se duas atividades têm a mesma
imagem em posições e tamanhos diferentes, a transição de elemento compartilhado <em>changeImageTransform</em> converte
e dimensiona a imagem suavemente entre essas atividades.</li>
</ul>
<p>O Android 5.0 (API de nível 21) é compatível com estas transições de entrada e de saída:</p>
@@ -145,7 +172,9 @@ anim.start();
<li><em>esmaecer</em> - adiciona ou remove uma visualização de uma cena alterando a opacidade.</li>
</ul>
<p>Qualquer transição que amplie a classe {@link android.transition.Visibility} é compatibilizada como uma transição de entrada ou de saída. Para obter mais informações, consulte a referência de API para a classe {@link android.transition.Transition}.</p>
<p>Qualquer transição que amplie a classe {@link android.transition.Visibility} é suportada
como uma transição de entrada ou de saída. Para obter mais informações, consulte a referência de API para a classe
{@link android.transition.Transition}.</p>
<p>O Android 5.0 (API de nível 21) também é compatível com estas transições de elementos compartilhados:</p>
@@ -156,7 +185,8 @@ anim.start();
<li><em>changeImageTransform</em> - anima as mudanças das imagens desejadas em tamanho e escala.</li>
</ul>
<p>Ao habilitar as transições de atividade no seu aplicativo, a transição de esmaecimento cruzado padrão é ativada entre as atividades de entrada e saída.</p>
<p>Ao habilitar as transições de atividades no seu aplicativo, a transição de esmaecimento cruzado padrão é
ativada entre as atividades de entrada e saída.</p>
<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
<p class="img-caption">
@@ -165,7 +195,9 @@ anim.start();
<h3>Especificar transições de atividades</h3>
<p>Primeiramente, habilite as transições de conteúdo da janela com o atributo <code>android:windowContentTransitions</code> ao definir um estilo herdado do tema do Material. Você também pode especificar transições de entrada, saída e elemento compartilhado na definição de estilo:</p>
<p>Primeiro, habilite as transições de conteúdo da janela com o atributo <code>android:windowContentTransitions</code>
ao definir um estilo herdado do tema do Material. Você também pode especificar
transições de entrada, saída e elemento compartilhado na definição de estilo:</p>
<pre>
&lt;style name="BaseAppTheme" parent="android:Theme.Material">
@@ -194,9 +226,12 @@ anim.start();
&lt;/transitionSet>
</pre>
<p>O elemento <code>changeImageTransform</code> corresponde à classe {@link android.transition.ChangeImageTransform}. Para obter mais informações, consulte a referência de API para {@link android.transition.Transition}.</p>
<p>O elemento <code>changeImageTransform</code> corresponde à classe
{@link android.transition.ChangeImageTransform}. Para obter mais informações, consulte a referência de
API para {@link android.transition.Transition}.</p>
<p>Para habilitar transições de conteúdo da janela no código como alternativa, chame o método {@link android.view.Window#requestFeature Window.requestFeature()}:</p>
<p>Para habilitar transições de conteúdo da janela no código como alternativa, chame o método
{@link android.view.Window#requestFeature Window.requestFeature()}:</p>
<pre>
// inside your activity (if you did not enable transitions in your theme)
@@ -206,31 +241,45 @@ getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setExitTransition(new Explode());
</pre>
<p>Para especificar transições no código, chame os métodos a seguir com um objeto {@link android.transition.Transition}:</p>
<p>Para especificar transições no código, chame os métodos a seguir com um objeto {@link
android.transition.Transition}:</p>
<ul>
<li>{@link android.view.Window#setEnterTransition Window.setEnterTransition()}</li>
<li>{@link android.view.Window#setExitTransition Window.setExitTransition()}</li>
<li>{@link android.view.Window#setSharedElementEnterTransition Window.setSharedElementEnterTransition()}</li>
<li>{@link android.view.Window#setSharedElementExitTransition Window.setSharedElementExitTransition()}</li>
<li>{@link android.view.Window#setSharedElementEnterTransition
Window.setSharedElementEnterTransition()}</li>
<li>{@link android.view.Window#setSharedElementExitTransition
Window.setSharedElementExitTransition()}</li>
</ul>
<p>Os métodos {@link android.view.Window#setExitTransition setExitTransition()} e {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} definem a transição de saída para a atividade de chamada. Os métodos {@link android.view.Window#setEnterTransition setEnterTransition()} e {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} definem a transição de entrada para a atividade chamada.</p>
<p>Os métodos {@link android.view.Window#setExitTransition setExitTransition()} e {@link
android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} definem
a transição de saída para a atividade de chamada. Os métodos {@link android.view.Window#setEnterTransition
setEnterTransition()} e {@link android.view.Window#setSharedElementEnterTransition
setSharedElementEnterTransition()} definem a transição de entrada para a atividade chamada.</p>
<p>Para obter o efeito completo de uma transição, você deve habilitar as transições de conteúdo da janela tanto na atividade chamada quanto na atividade de chamada. Caso contrário, a atividade de chamada acionará a transição de saída, mas você verá uma transição de janela (como dimensionamento ou esmaecimento).</p>
<p>Para obter o efeito completo de uma transição, você deve habilitar as transições de conteúdo da janela tanto na atividade
chamada quanto na atividade de chamada. Caso contrário, a atividade de chamada acionará a transição de saída,
mas você verá uma transição de janela (como dimensionamento ou esmaecimento).</p>
<p>Para iniciar uma transição de entrada o mais cedo possível, use o método {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} na atividade chamada. Isso faz com que haja transições de entrada mais dramáticas.</p>
<p>Para iniciar uma transição de entrada o mais cedo possível, use o método
{@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()}
na atividade chamada. Isso faz com que haja transições de entrada mais dramáticas.</p>
<h3>Iniciar uma atividade usando transições</h3>
<p>Se você habilita as transições e define uma transição de saída para uma atividade, a transição será ativada ao iniciar outra atividade, como a seguir:</p>
<p>Se você habilita as transições e define uma transição de saída para uma atividade, a transição
será ativada ao iniciar outra atividade, como a seguir:</p>
<pre>
startActivity(intent,
ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
</pre>
<p>Se você configurou uma transição de entrada para a segunda atividade, a transição também será ativada quando a atividade for iniciada. Para desabilitar as transições ao iniciar outra atividade, forneça um pacote de opções <code>null</code>.</p>
<p>Se você configurou uma transição de entrada para a segunda atividade, a transição também
será ativada quando a atividade for iniciada. Para desabilitar as transições ao iniciar outra atividade, forneça um pacote de
opções <code>null</code>.</p>
<h3>Iniciar uma atividade com um elemento compartilhado</h3>
@@ -240,8 +289,10 @@ startActivity(intent,
<li>Habilite transições de conteúdo da janela no tema.</li>
<li>Especifique uma transição de elementos compartilhados no estilo.</li>
<li>Defina a transição como um recurso XML.</li>
<li>Atribua um nome comum aos elementos compartilhados em ambos os layouts com o atributo <code>android:transitionName</code>.</li>
<li>Use o método {@link android.app.ActivityOptions#makeSceneTransitionAnimation ActivityOptions.makeSceneTransitionAnimation()}.</li>
<li>Atribua um nome comum aos elementos compartilhados em ambos os layouts com o atributo
<code>android:transitionName</code>.</li>
<li>Use o método {@link android.app.ActivityOptions#makeSceneTransitionAnimation
ActivityOptions.makeSceneTransitionAnimation()}.</li>
</ol>
<pre>
@@ -266,13 +317,20 @@ imgContainerView.setOnClickListener(new View.OnClickListener() {
});
</pre>
<p>Para obter visualizações dinâmicas compartilhadas geradas no código, use o método {@link android.view.View#setTransitionName View.setTransitionName()} para especificar um nome de elemento comum em ambas as atividades.</p>
<p>Para obter visualizações dinâmicas compartilhadas geradas no código, use o método
{@link android.view.View#setTransitionName View.setTransitionName()} para especificar um nome de
elemento comum em ambas as atividades.</p>
<p>Para reverter a animação de transição de cena ao finalizar a segunda atividade, chame o método {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} em vez de {@link android.app.Activity#finish Activity.finish()}.</p>
<p>Para reverter a animação de transição de cena ao finalizar a segunda atividade, chame o método
{@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()}
em vez de {@link android.app.Activity#finish Activity.finish()}.</p>
<h3>Iniciar uma atividade com diversos elementos compartilhados</h3>
<p>Para criar uma animação de transição de cena entre duas atividades que têm mais de um elemento compartilhado, defina os elementos compartilhados em ambos os layouts com o atributo <code>android:transitionName</code> (ou use o método {@link android.view.View#setTransitionName View.setTransitionName()} em ambas as atividades), e crie um objeto {@link android.app.ActivityOptions}, como a seguir:</p>
<p>Para criar uma animação de transição de cena entre duas atividades que têm mais de um elemento
compartilhado, defina os elementos compartilhados em ambos os layouts com o atributo <code>android:transitionName</code>
(ou use o método {@link android.view.View#setTransitionName View.setTransitionName()} em ambas
as atividades) e crie um objeto {@link android.app.ActivityOptions}, como a seguir:</p>
<pre>
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
@@ -283,9 +341,14 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
<h2 id="CurvedMotion">Usar movimento curvado</h2>
<p>As animações no Material Design dependem das curvas para obter padrões de interpolação de tempo e de movimentos espaciais. Com o Android 5.0 (API de nível 21) e posteriores, você pode definir padrões de curvas de temporização personalizada e de movimentos curvados para animações.</p>
<p>As animações no Material Design dependem das curvas para obter padrões de interpolação
de tempo e de movimentos espaciais. Com o Android 5.0 (API de nível 21) e posteriores, você pode definir padrões de curvas de
temporização personalizada e de movimentos curvados para animações.</p>
<p>A classe {@link android.view.animation.PathInterpolator} é um novo interpolador baseado em uma curve Bézier ou em um objeto {@link android.graphics.Path}. Esse interpolador especifica uma curva de movimento em um quadrado de 1x1, com pontos de ancoragem em (0,0) e (1,1) e pontos de controle conforme o especificado, usando os argumentos do construtor. Você também pode definir um interpolador de caminho como um recurso XML:</p>
<p>A classe {@link android.view.animation.PathInterpolator} é um novo interpolador baseado em uma
curva Bézier ou em um objeto {@link android.graphics.Path}. Esse interpolador especifica uma curva de movimento em
um quadrado de 1x1, com pontos de ancoragem em (0,0) e (1,1) e pontos de controle conforme especificado usando
os argumentos do construtor. Você também pode definir um interpolador de caminho como um recurso XML:</p>
<pre>
&lt;pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
@@ -295,7 +358,8 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
android:controlY2="1"/>
</pre>
<p>O sistema fornece recursos XML para três curvas básicas na especificação do Material Design:</p>
<p>O sistema fornece recursos XML para três curvas básicas na especificação do
Material Design:</p>
<ul>
<li><code>&#64;interpolator/fast_out_linear_in.xml</code></li>
@@ -303,9 +367,12 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
<li><code>&#64;interpolator/linear_out_slow_in.xml</code></li>
</ul>
<p>Você pode passar um objeto {@link android.view.animation.PathInterpolator} ao método {@link android.animation.Animator#setInterpolator Animator.setInterpolator()}.</p>
<p>Você pode passar um objeto {@link android.view.animation.PathInterpolator} para o método {@link
android.animation.Animator#setInterpolator Animator.setInterpolator()}.</p>
<p>A classe {@link android.animation.ObjectAnimator} tem novos construtores que habilitam a animação de coordenadas ao longo de um caminho usando duas ou mais propriedades simultaneamente. Por exemplo, o animador a seguir usa um objeto {@link android.graphics.Path} para animar as propriedades X e Y de uma visualização:</p>
<p>A classe {@link android.animation.ObjectAnimator} tem novos construtores que permitem a animação de
coordenadas ao longo de um caminho usando duas ou mais propriedades simultaneamente. Por exemplo, o animador a seguir usa um
objeto {@link android.graphics.Path} para animar as propriedades X e Y de uma visualização:</p>
<pre>
ObjectAnimator mAnimator;
@@ -317,7 +384,9 @@ mAnimator.start();
<h2 id="ViewState">Animar mudança de estado da visualização</h2>
<p>A classe {@link android.animation.StateListAnimator} permite a definição de animadores que são executados quando o estado de uma visualização muda. O exemplo a seguir mostra como definir uma {@link android.animation.StateListAnimator} como um recurso XML:</p>
<p>A classe {@link android.animation.StateListAnimator} permite a definição de animadores que são executados
quando o estado de uma visualização muda. O exemplo a seguir mostra como definir um {@link
android.animation.StateListAnimator} como um recurso XML:</p>
<pre>
&lt;!-- animate the translationZ property of a view when pressed -->
@@ -345,11 +414,21 @@ mAnimator.start();
&lt;/selector>
</pre>
<p>Para anexar animações de estado de visualização personalizadas a uma visualização, defina um animador usando o elemento <code>selector</code> em um arquivo de recurso XML, como nesse exemplo, e atribua-o à visualização com o atributo <code>android:stateListAnimator</code>. Para atribuir um animador de lista de estado a uma visualização no código, use o método {@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()} e atribua o animador à visualização com o método {@link android.view.View#setStateListAnimator View.setStateListAnimator()}.</p>
<p>Para anexar animações de estado de visualização personalizadas a uma visualização, defina um animador usando o elemento
<code>selector</code> em um arquivo de recurso XML, como nesse exemplo, e
atribua-o à visualização com o atributo <code>android:stateListAnimator</code>. Para atribuir um animador de lista de estado
a uma visualização no código, use o método {@link android.animation.AnimatorInflater#loadStateListAnimator
AnimationInflater.loadStateListAnimator()} e atribua o animador à visualização com o método
{@link android.view.View#setStateListAnimator View.setStateListAnimator()}.</p>
<p>Quando o tema amplia o tema do Material, os botões têm uma animação Z por padrão. Para evitar esse comportamento nos botões, defina o atributo <code>android:stateListAnimator</code> como <code>@null</code>.</p>
<p>Quando o tema amplia o tema do Material, os botões têm uma animação Z por padrão. Para evitar esse
comportamento nos botões, defina o atributo <code>android:stateListAnimator</code> como
<code>@null</code>.</p>
<p>A classe {@link android.graphics.drawable.AnimatedStateListDrawable} permite a criação de desenháveis que exibem animações entre mudanças de estado da visualização associada. Alguns dos widgets de sistema no Android 5.0 usam essas animações por padrão. O exemplo a seguir mostra como definir uma {@link android.graphics.drawable.AnimatedStateListDrawable} como um recurso XML:</p>
<p>A classe {@link android.graphics.drawable.AnimatedStateListDrawable} permite a criação de
desenháveis que exibem animações entre mudanças de estado da visualização associada. Alguns dos widgets de sistema no
Android 5.0 usam essas animações por padrão. O exemplo a seguir mostra como
definir um {@link android.graphics.drawable.AnimatedStateListDrawable} como um recurso XML:</p>
<pre>
&lt;!-- res/drawable/myanimstatedrawable.xml -->
@@ -379,19 +458,28 @@ mAnimator.start();
<h2 id="AnimVector">Animar desenháveis de vetor</h2>
<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">Desenháveis de vetor</a> são dimensionáveis sem perder definição. A classe {@link android.graphics.drawable.AnimatedVectorDrawable} permite a animação de propriedades de um desenhável de vetor.</p>
<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">Desenháveis de vetor</a> são
dimensionáveis sem perder definição. A classe {@link android.graphics.drawable.AnimatedVectorDrawable}
permite a animação de propriedades de um desenhável de vetor.</p>
<p>Você normalmente define desenháveis de vetor animados em três arquivos XML:</p>
<ul>
<li>Um desenhável de vetor com o elemento <code>&lt;vector&gt;</code> em <code>res/drawable/</code></li>
<li>Um desenhável de vetor animado com o elemento <code>&lt;animated-vector&gt;</code> em <code>res/drawable/</code></li>
<li>Um ou mais animadores de objeto com o elemento <code>&lt;objectAnimator&gt;</code> em <code>res/anim/</code></li>
<li>Um desenhável de vetor com o elemento <code>&lt;vector&gt;</code> em
<code>res/drawable/</code></li>
<li>Um desenhável de vetor animado com o elemento <code>&lt;animated-vector&gt;</code> em
<code>res/drawable/</code></li>
<li>Um ou mais animadores de objeto com o elemento <code>&lt;objectAnimator&gt;</code> em
<code>res/anim/</code></li>
</ul>
<p>Desenháveis de vetor animados podem animar os atributos dos elementos <code>&lt;group&gt;</code> e <code>&lt;path&gt;</code>. Os elementos <code>&lt;group&gt;</code> definem um conjunto de caminhos ou subgrupos e o elemento <code>&lt;path&gt;</code> define caminhos a serem desenhados.</p>
<p>Desenháveis de vetor animados podem animar os atributos dos elementos <code>&lt;group&gt;</code> e
<code>&lt;path&gt;</code>. Os elementos <code>&lt;group&gt;</code> definem um conjunto de
caminhos ou subgrupos e o elemento <code>&lt;path&gt;</code> define caminhos a serem desenhados.</p>
<p>Ao definir um desenhável de vetor que você queira animar, use o atributo <code>android:name</code> para atribuir um nome único a grupos e caminhos para poder referenciá-los nas definições do animador. Por exemplo:</p>
<p>Ao definir um desenhável de vetor que você queira animar, use o atributo <code>android:name</code>
para atribuir um nome único a grupos e caminhos para poder referenciá-los nas definições
do animador. Por exemplo:</p>
<pre>
&lt;!-- res/drawable/vectordrawable.xml -->
@@ -413,7 +501,8 @@ mAnimator.start();
&lt;/vector>
</pre>
<p>O desenhável de vetor animado refere-se a grupos e caminhos no desenhável de vetor pelos respectivos nomes:</p>
<p>A definição de desenhável de vetor animado se refere a grupos e caminhos no desenhável de vetor
pelos respectivos nomes:</p>
<pre>
&lt;!-- res/drawable/animvectordrawable.xml -->
@@ -428,7 +517,9 @@ mAnimator.start();
&lt;/animated-vector>
</pre>
<p>As definições da animação representam os objetos {@link android.animation.ObjectAnimator} ou {@link android.animation.AnimatorSet}. O primeiro animador nesse exemplo gira o grupo desejado em 360º:</p>
<p>As definições de animação representam objetos {@link android.animation.ObjectAnimator} ou {@link
android.animation.AnimatorSet}. O primeiro animador nesse exemplo gira o grupo
desejado em 360º:</p>
<pre>
&lt;!-- res/anim/rotation.xml -->
@@ -439,7 +530,9 @@ mAnimator.start();
android:valueTo="360" />
</pre>
<p>O segundo animador nesse exemplo transforma a forma do caminho do desenhável de vetor. Ambos os caminhos devem ser compatíveis com a transformação: eles precisam ter o mesmo número de comandos e de parâmetros para cada comando.</p>
<p>O segundo animador nesse exemplo transforma a forma do caminho do desenhável
de vetor. Ambos os caminhos devem ser compatíveis com a transformação: eles precisam ter o mesmo
número de comandos e de parâmetros para cada comando.</p>
<pre>
&lt;!-- res/anim/path_morph.xml -->
@@ -453,4 +546,5 @@ mAnimator.start();
&lt;/set>
</pre>
<p>Para obter mais informações, consulte a referência de API para {@link android.graphics.drawable.AnimatedVectorDrawable}.</p>
<p>Para obter mais informações, consulte a referência de API para {@link
android.graphics.drawable.AnimatedVectorDrawable}.</p>

78
docs/html-intl/intl/pt-br/training/material/compatibility.jd
View File

@@ -1,4 +1,4 @@
page.title=Como manter a compatibilidade
page.title=Como manter a compatibilidade
@jd:body
@@ -20,42 +20,63 @@ page.title=Como manter a compatibilidade
</div>
<p>Alguns recursos do Material Design, como o tema do Material e transições personalizadas de atividades, estão disponíveis apenas no Android 5.0 (API de nível 21) e em posteriores. Contudo, você pode projetar os aplicativos para usar esses recursos ao executá-los em dispositivos compatíveis com o Material Design e ainda mantê-los compatíveis com dispositivos que funcionam com versões anteriores do Android.</p>
<p>Alguns recursos do Material Design, como o tema do Material e transições personalizadas de atividades, estão
disponíveis apenas no Android 5.0 (API de nível 21) e posteriores. Contudo, você pode projetar os aplicativos
para usar esses recursos ao executá-los em dispositivos compatíveis com o Material Design e ainda mantê-los
compatíveis com dispositivos executando versões anteriores do Android.</p>
<h2 id="Theme">Definir estilos alternativos</h2>
<p>Você pode configurar o aplicativo para usar o tema do Material em dispositivos compatíveis com ele e regressar a um tema antigo em dispositivos que funcionam com versões anteriores do Android:</p>
<p>Você pode configurar o aplicativo para usar o tema do Material em dispositivos compatíveis
com ele e reverter para um tema antigo em dispositivos que executem versões anteriores do Android:</p>
<ol>
<li>Defina um tema herdado de um tema antigo (como Holo) em <code>res/values/styles.xml</code>.</li>
<li>Defina um tema com o mesmo nome herdado do tema do Material em <code>res/values-v21/styles.xml</code>.</li>
<li>Defina um tema herdado de um tema antigo (como Holo) em
<code>res/values/styles.xml</code>.</li>
<li>Defina um tema com o mesmo nome herdado do tema do Material em
<code>res/values-v21/styles.xml</code>.</li>
<li>Defina esse tema como o tema do seu aplicativo no arquivo de manifesto.</li>
</ol>
<p class="note"><strong>Observação:</strong> Se o seu aplicativo usa o tema do Material mas não fornece um tema alternativo dessa maneira, o aplicativo não rodará em verões mais antigas do que o Android 5.0.
<p class="note"><strong>Observação:</strong>
se o seu aplicativo usa o tema do Material mas não fornece um tema alternativo dessa maneira,
o aplicativo não rodará em versões mais antigas do que o Android 5.0.
</p>
<h2 id="Layouts">Fornecer layouts alternativos</h2>
<p>Se os layouts que você projetou de acordo com as orientações do Material Design não usarem quaisquer dos novos atributos XML introduzidos no Android 5.0 (API de nível 21), funcionarão em versões antigas do Android. Caso contrário, você pode fornecer layouts alternativos. Você também pode fornecer layouts alternativos para personalizar a aparência do seu aplicativo em versões anteriores do Android.</p>
<p>Se os layouts que você projetou de acordo com as orientações do Material Design não usarem
quaisquer dos novos atributos XML introduzidos no Android 5.0 (API de nível 21), eles funcionarão em
versões antigas do Android. Caso contrário, você pode fornecer layouts alternativos. Você também pode fornecer
layouts alternativos para personalizar a aparência do seu aplicativo em versões anteriores do Android.</p>
<p>Crie arquivos de layout para Android 5.0 (API de nível 21) dentro de <code>res/layout-v21/</code> e arquivos de layout alternativo para versões anteriores do Android dentro de <code>res/layout/</code>. Por exemplo, <code>res/layout/my_activity.xml</code> é um layout alternativo para <code>res/layout-v21/my_activity.xml</code>.</p>
<p>Crie arquivos de layout para Android 5.0 (API de nível 21) dentro de <code>res/layout-v21/</code> e arquivos de
layout alternativo para versões anteriores do Android dentro de <code>res/layout/</code>.
Por exemplo, <code>res/layout/my_activity.xml</code> é um layout alternativo de
<code>res/layout-v21/my_activity.xml</code>.</p>
<p>Para evitar duplicação do código, defina os estilos dentro de <code>res/values/</code>, modifique-os em <code>res/values-v21/</code> para as novas APIs e use herança de estilo, definindo estilos de base em <code>res/values/</code> e herdando daqueles em <code>res/values-v21/</code>.</p>
<p>Para evitar duplicação do código, defina os estilos dentro de <code>res/values/</code>, modifique-os
em <code>res/values-v21/</code> para as novas APIs e use herança de estilo, definindo
estilos de base em <code>res/values/</code> e herdando daqueles em <code>res/values-v21/</code>.</p>
<h2 id="SupportLib">Usar a Biblioteca de Suporte</h2>
<p>A <a href="{@docRoot}tools/support-library/features.html#v7">v7 da Biblioteca de Suporte</a> r21 e posteriores incluem os seguintes recursos do Material Design:</p>
<p>A <a href="{@docRoot}tools/support-library/features.html#v7">v7 da Biblioteca de Suporte</a>
r21 e posteriores incluem os seguintes recursos do Material Design:</p>
<ul>
<li><a href="{@docRoot}training/material/theme.html">Estilos do Material Design</a> para alguns widgets do sistema quando se aplica um dos temas <code>Theme.AppCompat</code>.</li>
<li><a href="{@docRoot}training/material/theme.html#ColorPalette">Atributos de tema da paleta de cores</a> nos temas <code>Theme.AppCompat</code>.</li>
<li>O widget {@link android.support.v7.widget.RecyclerView} para <a href="{@docRoot}training/material/lists-cards.html#RecyclerView">coletar dados do visor</a>.</li>
<li><a href="{@docRoot}training/material/theme.html">Estilos do Material Design</a> para alguns widgets do
sistema quando se aplica um dos temas <code>Theme.AppCompat</code>.</li>
<li><a href="{@docRoot}training/material/theme.html#ColorPalette">Atributos de tema da paleta de cores</a>
nos temas <code>Theme.AppCompat</code>.</li>
<li>O widget {@link android.support.v7.widget.RecyclerView} para <a href="{@docRoot}training/material/lists-cards.html#RecyclerView">exibir coleções
de dados</a>.</li>
<li>O widget {@link android.support.v7.widget.CardView} para <a href="{@docRoot}training/material/lists-cards.html#CardView">criar cartões</a>.</li>
<li>A classe {@link android.support.v7.graphics.Palette} para <a href="{@docRoot}training/material/drawables.html#ColorExtract">extrair cores proeminentes de imagens</a>.</li>
<li>A classe {@link android.support.v7.graphics.Palette} para <a href="{@docRoot}training/material/drawables.html#ColorExtract">extrair cores proeminentes de
imagens</a>.</li>
</ul>
<h3>Widgets de sistema</h3>
@@ -73,7 +94,8 @@ page.title=Como manter a compatibilidade
<h3>Paleta de cores</h3>
<p>Para obter estilos do Material Design e personalizar a paleta de cores com a v7 da Biblioteca de Suporte do Android, aplique um dos temas <code>Theme.AppCompat</code>:</p>
<p>Para obter estilos do Material Design e personalizar a paleta de cores com a v7 da Biblioteca de Suporte
do Android, aplique um dos temas <code>Theme.AppCompat</code>:</p>
<pre>
&lt;!-- extend one of the Theme.AppCompat themes -->
@@ -87,16 +109,21 @@ page.title=Como manter a compatibilidade
<h3>Listas e cartões</h3>
<p>Os widgets {@link android.support.v7.widget.RecyclerView} e {@link android.support.v7.widget.CardView} estão disponíveis em versões anteriores do Android na Biblioteca de Suporte v7 do Android com as seguintes limitações:</p>
<p>Os widgets {@link android.support.v7.widget.RecyclerView} e {@link
android.support.v7.widget.CardView} estão disponíveis em versões anteriores do Android na
Biblioteca de Suporte v7 do Android com as seguintes limitações:</p>
<ul>
<li>{@link android.support.v7.widget.CardView} volta a uma implementação de sombra programática usando preenchimento adicional.</li>
<li>{@link android.support.v7.widget.CardView} não recorta as visualizações filhas que cortam as bordas arredondadas.</li>
<li>{@link android.support.v7.widget.CardView} volta a uma implementação de sombra programática
usando preenchimento adicional.</li>
<li>{@link android.support.v7.widget.CardView} não recorta as visualizações filhas que cortam
as bordas arredondadas.</li>
</ul>
<h3>Dependências</h3>
<p>Para usar esses recursos em versões anteriores ao Android 5.0 (API de nível 21), inclua a Biblioteca de Suporte v7 do Android no projeto como uma <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">dependência de Gradle</a>:</p>
<p>Para usar esses recursos em versões anteriores ao Android 5.0 (API de nível 21), inclua a
Biblioteca de Suporte v7 do Android no projeto como uma <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">dependência de Gradle</a>:</p>
<pre>
dependencies {
@@ -117,10 +144,12 @@ dependencies {
<li>Animações de revelação</li>
<li>Animações com base em caminhos</li>
<li>Desenháveis de vetor</li>
<li>Tingimento desenhável.</li>
<li>Tingimento desenhável</li>
</ul>
<p>Para preservar a compatibilidade com versões anteriores do Android, verifique a {@link android.os.Build.VERSION#SDK_INT version} do sistema em execução que chama as APIs para quaisquer destes recursos:</p>
<p>Para preservar a compatibilidade com versões anteriores do Android, verifique a {@link
android.os.Build.VERSION#SDK_INT version} do sistema em tempo de execução antes de chamar as APIs para quaisquer
destes recursos:</p>
<pre>
// Check if we're running on Android 5.0 or higher
@@ -131,4 +160,9 @@ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
}
</pre>
<p class="note"><strong>Observação:</strong> Para especificar quais versões do Android são compatíveis com o seu aplicativo, use os atributos <code>android:minSdkVersion</code> e <code>android:targetSdkVersion</code> no arquivo de manifesto. Para usar os recursos do Material Design no Android 5.0, defina o atributo <code>android:targetSdkVersion</code> como <code>21</code>. Para obter mais informações, consulte o <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">guia de API &lt;uses-sdk&gt;</a>.</p>
<p class="note"><strong>Observação:</strong> Para especificar quais versões do Android são compatíveis com o seu aplicativo,
use os atributos <code>android:minSdkVersion</code> e <code>android:targetSdkVersion</code>
no arquivo de manifesto. Para usar os recursos do Material Design no Android 5.0, defina o
atributo <code>android:targetSdkVersion</code> como <code>21</code>. Para obter mais informações, consulte
o <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">guia de API
&lt;uses-sdk&gt;</a>.</p>

49
docs/html-intl/intl/pt-br/training/material/drawables.jd
View File

@@ -1,4 +1,4 @@
page.title=Como trabalhar com desenháveis
page.title=Como trabalhar com desenháveis
@jd:body
@@ -23,7 +23,7 @@ page.title=Como trabalhar com desenháveis
<ul>
<li>Tingimento desenhável</li>
<li>Extração de cor proeminente</li>
<li>Desenháveis de vetor.</li>
<li>Desenháveis de vetor</li>
</ul>
<p>Esta lição mostra como usar esses recursos no seu aplicativo.</p>
@@ -31,14 +31,22 @@ page.title=Como trabalhar com desenháveis
<h2 id="DrawableTint">Colorir recursos desenháveis</h2>
<p>Com o Android 5.0 (API de nível 21) e posteriores, você pode colorir bitmaps e nine-patches definidos como máscaras alfa. Você pode colori-los com recursos de cor ou atributos de tema que determinam os recursos de cor (por exemplo, <code>?android:attr/colorPrimary</code>). Normalmente, você cria esses ativos somente uma vez e colore-os automaticamente para combinar com seu tema.</p>
<p>Com o Android 5.0 (API de nível 21) e posteriores, você pode colorir bitmaps e nine-patches definidos como
máscaras alfa. Você pode colori-los com recursos de cor ou atributos de tema que determinam os recursos
de cor (por exemplo, <code>?android:attr/colorPrimary</code>). Normalmente, você cria esses ativos
somente uma vez e colore-os automaticamente para combinar com seu tema.</p>
<p>Você pode aplicar um tingimento aos objetos {@link android.graphics.drawable.BitmapDrawable} ou {@link android.graphics.drawable.NinePatchDrawable} com o método {@code setTint()}. Você também pode configurar a cor do tingimento e modelar os layouts com os atributos <code>android:tint</code> e <code>android:tintMode</code>.</p>
<p>Você pode aplicar um tingimento aos objetos {@link android.graphics.drawable.BitmapDrawable} ou {@link
android.graphics.drawable.NinePatchDrawable} com o método {@code setTint()}. Você também
pode configurar a cor e o modo do tingimento nos layouts com os atributos <code>android:tint</code> e
<code>android:tintMode</code>.</p>
<h2 id="ColorExtract">Extrair cores proeminentes de uma imagem</h2>
<p>A Biblioteca de Suporte r21 do Android e posteriores incluem a classe {@link android.support.v7.graphics.Palette}, que permite a extração de cores proeminentes de uma imagem. Essa classe extrai as seguintes cores proeminentes:</p>
<p>A Biblioteca de Suporte r21 do Android e posteriores incluem a classe {@link
android.support.v7.graphics.Palette}, que permite a extração de cores proeminentes de uma imagem.
Essa classe extrai as seguintes cores proeminentes:</p>
<ul>
<li>Vibrante</li>
@@ -49,34 +57,44 @@ page.title=Como trabalhar com desenháveis
<li>Claro suave</li>
</ul>
<p>Para extrair essas cores, passe um objeto {@link android.graphics.Bitmap} para o método estático {@link android.support.v7.graphics.Palette#generate Palette.generate()} na linha do segundo plano em que você carrega as imagens. Se você não puder usar aquela linha, chame o método {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} e forneça um ouvinte como alternativa.</p>
<p>Para extrair essas cores, passe um objeto {@link android.graphics.Bitmap} para o método estático
{@link android.support.v7.graphics.Palette#generate Palette.generate()} no encadeamento do segundo
plano em que você carrega as imagens. Se você não puder usar aquele encadeamento, chame o método
{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} e forneça um escutador
como alternativa.</p>
<p>Você pode recuperar as cores proeminentes da imagem usando métodos de obtenção na classe <code>Palette</code>, como <code>Palette.getVibrantColor</code>.</p>
<p>Você pode recuperar as cores proeminentes da imagem usando métodos de obtenção na classe
<code>Palette</code>, como <code>Palette.getVibrantColor</code>.</p>
<p>Para usar a classe {@link android.support.v7.graphics.Palette} no projeto, adicione a seguinte <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">dependência do Gradle</a> ao módulo do aplicativo:</p>
<p>Para usar a classe {@link android.support.v7.graphics.Palette} no projeto, adicione a seguinte
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">dependência do Gradle</a> ao
módulo do aplicativo:</p>
<pre>
dependencies {
...
compile 'com.android.support:palette-v7:21.0.+'
compile 'com.android.support:palette-v7:21.0.0'
}
</pre>
<p>Para obter mais informações, consulte a referência de API para a classe {@link android.support.v7.graphics.Palette}.</p>
<p>Para obter mais informações, consulte a referência de API para a classe {@link android.support.v7.graphics.Palette}
.</p>
<h2 id="VectorDrawables">Criar desenháveis de vetor</h2>
<!-- video box -->
<a class="notice-developers-video"
href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
<div>
<h3>Vídeos</h3>
<p>Gráficos de vetor do Android</p>
</div>
</a>
<p>No Android 5.0 (API de nível 21) e em posteriores, você pode definir desenháveis de vetor que são dimensionáveis sem perder definição. Você precisa somente de um arquivo de ativo para uma imagem de vetor, em vez de um arquivo de ativos para cada densidade de tela no caso de imagens de bitmap. Para criar uma imagem de vetor, defina os detalhes da forma dentro de um elemento XML <code>&lt;vector&gt;</code>.</p>
<p>No Android 5.0 (API de nível 21) e posteriores, você pode definir desenháveis de vetor que são dimensionáveis
sem perder definição. Você precisa apenas de um arquivo de ativos para uma imagem de vetor, em vez de um arquivo de ativos
para cada densidade de tela no caso de imagens de bitmap. Para criar uma imagem de vetor, defina os detalhes
da forma dentro de um elemento XML <code>&lt;vector&gt;</code>.</p>
<p>O exemplo a seguir define uma imagem de vetor com a forma de um coração:</p>
@@ -102,4 +120,7 @@ href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
&lt;/vector>
</pre>
<p>Imagens de vetor são representadas no Android por objetos {@link android.graphics.drawable.VectorDrawable}. Para obter mais informações sobre a sintaxe <code>pathData</code>, consulte a <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">Referência do caminho SVG</a>. Para obter informações sobre animação de propriedades de desenháveis de vetor, consulte <a href="{@docRoot}training/material/animations.html#AnimVector">Animar desenháveis de vetor</a>.</p>
<p>Imagens de vetor são representadas no Android como objetos {@link android.graphics.drawable.VectorDrawable}
. Para obter mais informações sobre a sintaxe <code>pathData</code>, consulte a <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">Referência do caminho SVG</a>. Para obter informações sobre
como animar propriedades de desenháveis de vetor, consulte
<a href="{@docRoot}training/material/animations.html#AnimVector">Animar desenháveis de vetor</a>.</p>

52
docs/html-intl/intl/pt-br/training/material/get-started.jd
View File

@@ -1,4 +1,4 @@
page.title=Fundamentos
page.title=Como iniciar
@jd:body
@@ -40,20 +40,27 @@ page.title=Fundamentos
<h3>Manter compatibilidade com versões anteriores</h3>
<p>Você pode adicionar muitos recursos do Material Design ao aplicativo e, ao mesmo tempo, manter a compatibilidade com versões anteriores ao Android 5.0. Para obter mais informações, consulte <a href="{@docRoot}training/material/compatibility.html">Como manter a compatibilidade</a>.</p>
<p>Você pode adicionar muitos recursos do Material Design ao aplicativo e, ao mesmo tempo, manter
a compatibilidade com versões anteriores ao Android 5.0. Para obter mais informações, consulte
<a href="{@docRoot}training/material/compatibility.html">Como manter a compatibilidade</a>.</p>
<h3>Atualizar o aplicativo com o Material Design</h3>
<p>Para atualizar um aplicativo existente para incorporar o Material Design, atualize os layouts de acordo com as orientações do Material Design. Certifique-se também de incorporar profundidade, feedbacks de toque e animações.</p>
<p>Para atualizar um aplicativo existente para incorporar o Material Design, atualize os layouts
de acordo com as orientações do Material Design. Certifique-se também de incorporar profundidade, feedbacks de toque e
animações.</p>
<h3>Criar novos aplicativos com o Material Design</h3>
<p>Se você está criando um novo aplicativo com recursos do Material Design, as <a href="http://www.google.com/design/spec">orientações do Material Design</a> fornecem uma estrutura de projeto coesa. Siga tais orientações e use a nova funcionalidade na estrutura do Android para projetar e desenvolver o aplicativo.</p>
<p>Se você está criando um novo aplicativo com recursos do Material Design, as <a href="http://www.google.com/design/spec">orientações do Material Design</a> fornecem uma
estrutura de projeto coesa. Siga tais orientações e use a nova funcionalidade na estrutura do Android para
projetar e desenvolver o aplicativo.</p>
<h2 id="ApplyTheme">Aplicar o tema do Material</h2>
<p>Para aplicar o tema do Material no aplicativo, especifique um estilo herdado de <code>android:Theme.Material</code>:</p>
<p>Para aplicar o tema do Material no aplicativo, especifique um estilo herdado de
<code>android:Theme.Material</code>:</p>
<pre>
&lt;!-- res/values/styles.xml -->
@@ -65,12 +72,16 @@ page.title=Fundamentos
&lt;/resources>
</pre>
<p>O tema do Material fornece widgets do sistema atualizados que permitem definir a paleta de cores e as animações padrão para feedback de toque e transições de atividades. Para obter mais detalhes, consulte <a href="{@docRoot}training/material/theme.html">Como usar o tema do Material</a>.</p>
<p>O tema do Material fornece widgets do sistema atualizados que permitem definir a paleta de cores e as animações
padrão para feedback de toque e transições de atividades. Para obter mais detalhes, consulte
<a href="{@docRoot}training/material/theme.html">Como usar o tema do Material</a>.</p>
<h2 id="Layouts">Projetar layouts</h2>
<p>Além de aplicar e personalizar o tema do Material, os layouts devem estar em conformidade com as <a href="http://www.google.com/design/spec">orientações do Material Design</a>. Ao projetar os layouts, dê atenção especial ao seguinte:</p>
<p>Além de aplicar e personalizar o tema do Material, os layouts devem estar em conformidade
com as <a href="http://www.google.com/design/spec">orientações do Material Design</a>. Ao projetar os
layouts, dê atenção especial ao seguinte:</p>
<ul>
<li>Grades das linhas de base</li>
@@ -83,7 +94,9 @@ page.title=Fundamentos
<h2 id="Depth">Especificar a elevação em visualizações</h2>
<p>As visualizações podem lançar sombras e o valor da elevação delas determina o tamanho da sombra e da ordem dos desenhos. Para definir a elevação de uma visualização, use o atributo <code>android:elevation</code> nos layouts:</p>
<p>As visualizações podem lançar sombras e o valor da elevação delas
determina o tamanho da sombra e a ordem dos desenhos. Para definir a elevação de uma visualização, use o atributo
<code>android:elevation</code> nos layouts:</p>
<pre>
&lt;TextView
@@ -95,14 +108,22 @@ page.title=Fundamentos
android:elevation="5dp" />
</pre>
<p>A nova propriedade <code>translationZ</code> permite a criação de animações que refletem mudanças temporárias na elevação de uma visualização. As mudanças de elevação podem ser úteis ao <a href="{@docRoot}training/material/animations.html#ViewState">responder a gestos de toque</a>.</p>
<p>A nova propriedade <code>translationZ</code> permite a criação de animações que refletem mudanças
temporárias na elevação de uma visualização. As mudanças de elevação podem ser úteis ao
<a href="{@docRoot}training/material/animations.html#ViewState">responder a gestos
de toque</a>.</p>
<p>Para obter mais detalhes, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Como definir sombras e recortar visualizações</a>.</p>
<p>Para obter mais detalhes, consulte <a href="{@docRoot}training/material/shadows-clipping.html">Como definir
sombras e recortar visualizações</a>.</p>
<h2 id="ListsCards">Criar listas e cartões</h2>
<p>{@link android.support.v7.widget.RecyclerView} é uma versão mais completa de {@link android.widget.ListView} compatível com diferentes tipos de layout e que fornece melhor desempenho. {@link android.support.v7.widget.CardView} permite a exibição de informações dentro dos cartões com uma aparência consistente nos aplicativos. O exemplo de código a seguir mostra como incluir um {@link android.support.v7.widget.CardView} no layout:</p>
<p>{@link android.support.v7.widget.RecyclerView} é uma versão mais completa de {@link
android.widget.ListView} compatível com diferentes tipos de layout e que fornece melhor desempenho.
{@link android.support.v7.widget.CardView} permite a exibição de informações dentro dos cartões com uma
aparência consistente nos aplicativos. O exemplo de código a seguir mostra como incluir um
{@link android.support.v7.widget.CardView} no layout:</p>
<pre>
&lt;android.support.v7.widget.CardView
@@ -114,12 +135,15 @@ page.title=Fundamentos
&lt;/android.support.v7.widget.CardView>
</pre>
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/lists-cards.html">Como criar listas e cartões</a>.</p>
<p>Para obter mais informações, consulte <a href="{@docRoot}training/material/lists-cards.html">Como criar
listas e cartões</a>.</p>
<h2 id="Animations">Personalizar animações</h2>
<p>O Android 5.0 (API de nível 21) inclui novas APIs para criar animações personalizadas no aplicativo. Por exemplo, você pode habilitar transições de atividades e definir uma transição de saída dentro de uma atividade:</p>
<p>O Android 5.0 (API de nível 21) inclui novas APIs para criar animações personalizadas no aplicativo.
Por exemplo, você pode habilitar transições de atividades e definir uma transição de saída dentro
de uma atividade:</p>
<pre>
public class MyActivity extends Activity {
@@ -144,4 +168,4 @@ public class MyActivity extends Activity {
<p>Ao iniciar outra atividade a partir desta, a transição de saída é ativada.</p>
<p>Para saber mais sobre as novas APIs de animação, consulte <a href="{@docRoot}training/material/animations.html">Como definir animações personalizadas</a>.</p>
<p>Para saber mais sobre as novas APIs de animação, consulte <a href="{@docRoot}training/material/animations.html">Como definir animações personalizadas</a>.</p>

20
docs/html-intl/intl/pt-br/training/material/index.jd
View File

@@ -1,7 +1,8 @@
page.title=Como criar aplicativos com o Material Design
page.title=Material Design para desenvolvedores
page.type=design
page.image=images/material.png
page.metaDescription=Saiba como aplicar o Material Design aos seus aplicativos.
page.image=images/cards/material_2x.png
page.metaDescription=Saiba como aplicar o Material Design em seus aplicativos.
@jd:body
@@ -10,12 +11,16 @@ page.metaDescription=Saiba como aplicar o Material Design aos seus aplicativos.
<h2>Dependências e pré-requisitos</h2>
<ul>
<li>Android 5.0 (API de nível 21)</li>
<li>Android Studio 0.8</li>
</ul>
</div>
</div>
<p>O Material Design é um guia abrangente para design visual, de movimento e de interação para diversas plataformas e dispositivos. Para usar o Material Design nos aplicativos Android, siga as orientações descritas nas <a href="http://www.google.com/design/spec/material-design/introduction.html">especificações do Material Design</a> e use os novos componentes e funcionalidades disponíveis no Android 5.0 (API de nível 21).</p>
<p>O Material Design é um guia abrangente para design visual, de movimento e de interação para
diversas plataformas e dispositivos. Para usar o Material Design nos aplicativos Android, siga as orientações
descritas nas
<a href="http://www.google.com/design/spec/material-design/introduction.html">especificações do
Material Design</a> e use os novos componentes e funcionalidades disponíveis no Android 5.0
(API de nível 21).</p>
<p>Essa lição mostra como criar aplicativos do Material Design com os seguintes elementos:</p>
@@ -27,7 +32,8 @@ page.metaDescription=Saiba como aplicar o Material Design aos seus aplicativos.
<li>Animações personalizadas</li>
</ul>
<p>Essa lição também ensina a manter a compatibilidade com versões anteriores ao Android 5.0 (API de nível 21) ao usar recursos do Material Design no aplicativo.</p>
<p>Esta lição também ensina a manter a compatibilidade com versões anteriores ao Android
5.0 (API de nível 21) ao usar recursos do Material Design no aplicativo.</p>
<h2>Lições</h2>
@@ -52,4 +58,4 @@ page.metaDescription=Saiba como aplicar o Material Design aos seus aplicativos.
<dt><a href="{@docRoot}training/material/compatibility.html">Como manter a compatibilidade</a></dt>
<dd>Aprenda a manter a compatibilidade com versões de plataforma anteriores ao Android 5.0.</dd>
</dl>
</dl>

85
docs/html-intl/intl/pt-br/training/material/lists-cards.jd
View File

@@ -1,4 +1,4 @@
page.title=Como criar listas e cartões
page.title=Como criar listas e cartões
@jd:body
@@ -19,28 +19,40 @@ page.title=Como criar listas e cartões
</div>
<p>Para criar listas e cartões complexos com estilos do Material Design no seu aplicativo, você pode usar os widgets {@link android.support.v7.widget.RecyclerView} e {@link android.support.v7.widget.CardView}.</p>
<p>Para criar listas e cartões complexos com estilos do Material Design no seu aplicativo, você pode usar os widgets
{@link android.support.v7.widget.RecyclerView} e {@link android.support.v7.widget.CardView}
.</p>
<h2 id="RecyclerView">Criar listas</h2>
<p>O widget {@link android.support.v7.widget.RecyclerView} é uma versão mais avançada e flexível do {@link android.widget.ListView}. Essa widget é um contêiner para exibir grandes conjuntos de dados que podem ser rolados com muita eficiência ao manter um número limitado de visualizações. Use o widget {@link android.support.v7.widget.RecyclerView} quando tiver coletas de dados cujos elementos mudam durante a execução baseados na ação do usuário ou em eventos de rede.</p>
<p>O widget {@link android.support.v7.widget.RecyclerView} é uma versão mais avançada e flexível
do {@link android.widget.ListView}. Esse widget é um contêiner para exibir grandes conjuntos
de dados que podem ser rolados com muita eficiência ao manter um número limitado de visualizações. Use o widget
{@link android.support.v7.widget.RecyclerView} quando tiver coletas de dados cujos elementos mudam
durante a execução baseados na ação do usuário ou em eventos de rede.</p>
<p>A classe {@link android.support.v7.widget.RecyclerView} simplifica a exibição e o tratamento de grandes conjuntos de dados oferecendo:</p>
<p>A classe {@link android.support.v7.widget.RecyclerView} simplifica a exibição e o tratamento de
grandes conjuntos de dados oferecendo:</p>
<ul>
<li>Gerenciadores de layout para posicionar itens</li>
<li>Animações padrão para operações de item comuns, como remoção ou adição de itens</li>
</ul>
<p>Você também tem a flexibilidade de definir gerenciadores de layout e animações personalizadas para widgets {@link android.support.v7.widget.RecyclerView}.</p>
<p>Você também tem a flexibilidade de definir gerenciadores de layout e animações personalizadas para widgets {@link
android.support.v7.widget.RecyclerView}.</p>
<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" />
<p class="img-caption">
<strong>Figura 1</strong>. O widget <code>RecyclerView</code>.
</p>
<p>Para usar o widget {@link android.support.v7.widget.RecyclerView}, você deve especificar um adaptador e um gerenciador de layout. Para criar um adaptador, amplie a classe {@link android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter}. Os detalhes da implementação dependem das especificações do conjunto de dados e do tipo de visualizações. Para obter mais informações, veja os <a href="#RVExamples">exemplos</a> abaixo.</p>
<p>Para usar o widget {@link android.support.v7.widget.RecyclerView}, você deve especificar um
adaptador e um gerenciador de layout. Para criar um adaptador, amplie a classe {@link
android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter}. Os detalhes
da implementação dependem das especificações do conjunto de dados e do tipo de visualização. Para obter
mais informações, veja os <a href="#RVExamples">exemplos</a> abaixo.</p>
<div style="float:right">
<img src="{@docRoot}design/material/images/list_mail.png" alt="" width="250" height="426" />
@@ -49,25 +61,37 @@ page.title=Como criar listas e cartões
</p>
</div>
<p>Um <strong>gerenciador de layout</strong> posiciona as visualizações de item dentro de um {@link android.support.v7.widget.RecyclerView} e determina quando reutilizar visualizações de item que não estão mais visíveis ao usuário. Para reutilizar (ou <em>reciclar</em>) uma visualização, o gerenciador de layout pode solicitar ao adaptador a substituição do conteúdo da visualização com um elemento diferente do conjunto de dados. Visualizações recicladas dessa maneira aprimoram o desempenho ao evitar a criação de visualizações desnecessárias ou a realização de pesquisas {@link android.app.Activity#findViewById findViewById()} dispendiosas.</p>
<p>Um <strong>gerenciador de layout</strong> posiciona as visualizações de item dentro de um {@link
android.support.v7.widget.RecyclerView} e determina quando reutilizar visualizações de item que não
estão mais visíveis ao usuário. Para reutilizar (ou <em>reciclar</em>) uma visualização, um gerenciador de layout pode solicitar
ao adaptador a substituição do conteúdo da visualização com um elemento diferente do conjunto de dados. Visualizações
recicladas dessa maneira aprimoram o desempenho ao evitar a criação de visualizações desnecessárias ou a
realização de pesquisas {@link android.app.Activity#findViewById findViewById()} caras.</p>
<p>{@link android.support.v7.widget.RecyclerView} fornece esses gerenciadores de layout embutidos:</p>
<ul>
<li>{@link android.support.v7.widget.LinearLayoutManager} exibe itens em uma lista de rolagem vertical ou horizontal.</li>
<li>{@link android.support.v7.widget.LinearLayoutManager} exibe itens em uma lista de rolagem
vertical ou horizontal.</li>
<li>{@link android.support.v7.widget.GridLayoutManager} exibe itens em uma grade.</li>
<li>{@link android.support.v7.widget.StaggeredGridLayoutManager} exibe itens em uma grade escalonada.</li>
</ul>
<p>Para criar um gerenciador de layout personalizado, amplie a classe {@link android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager}.</p>
<p>Para criar um gerenciador de layout personalizado, amplie a classe {@link
android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager}.</p>
<h3>Animações</h3>
<p>As animações para a adição e remoção de itens são habilitadas, por padrão, em {@link android.support.v7.widget.RecyclerView}. Para personalizá-las, amplie a classe {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} e use o método {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}.</p>
<p>As animações para a adição e a remoção de itens são habilitadas, por padrão, em {@link
android.support.v7.widget.RecyclerView}. Para personalizá-las, amplie a classe
{@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} e use o
método {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}
.</p>
<h3 id="RVExamples">Exemplos</h3>
<p>O exemplo de código a seguir demonstra como adicionar o {@link android.support.v7.widget.RecyclerView} a um layout:</p>
<p>O exemplo de código a seguir demonstra como adicionar o
{@link android.support.v7.widget.RecyclerView} a um layout:</p>
<pre>
&lt;!-- A RecyclerView with some commonly used attributes -->
@@ -78,7 +102,9 @@ page.title=Como criar listas e cartões
android:layout_height="match_parent"/>
</pre>
<p>Ao adicionar um widget {@link android.support.v7.widget.RecyclerView} ao seu layout, obtenha um identificador para o objeto, conecte-o em um gerenciador de layout e anexe um adaptador aos dados que serão exibidos:</p>
<p>Depois de adicionar um widget {@link android.support.v7.widget.RecyclerView} ao seu layout,
obtenha um identificador para o objeto, conecte-o a um gerenciador de layout e anexe um adaptador para que os
dados sejam exibidos:</p>
<pre>
public class MyActivity extends Activity {
@@ -108,7 +134,10 @@ public class MyActivity extends Activity {
}
</pre>
<p>O adaptador dá acesso aos itens no conjunto de dados, cria visualizações para os itens e substitui o conteúdo de algumas das visualizações por novos itens de dados quando o item original não está mais visível. O exemplo de código a seguir mostra uma implementação simples para um conjunto de dados que consiste em uma matriz de strings exibidas usando widgets {@link android.widget.TextView}:</p>
<p>O adaptador dá acesso aos itens no conjunto de dados, cria visualizações para os itens e
substitui o conteúdo de algumas das visualizações por novos itens de dados quando o item original não está
mais visível. O exemplo de código a seguir mostra uma implementação simples para um conjunto de dados
que consiste em uma matriz de strings exibidas usando widgets {@link android.widget.TextView}:</p>
<pre>
public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
@@ -171,19 +200,29 @@ public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
<h2 id="CardView">Criar cartões</h2>
<p>{@link android.support.v7.widget.CardView} amplia a classe {@link android.widget.FrameLayout} e permite que você exiba informações dentro dos cartões, que têm uma aparência consistente nas diversas plataformas. Os widgets {@link android.support.v7.widget.CardView} podem ter sombras e bordas arredondadas.</p>
<p>{@link android.support.v7.widget.CardView} amplia a classe {@link android.widget.FrameLayout} e
permite que você exiba informações dentro dos cartões que têm uma aparência consistente em toda a plataforma. Os widgets {@link
android.support.v7.widget.CardView} podem ter sombras e bordas arredondadas.</p>
<p>Para criar um cartão com sombra, use o atributo <code>card_view:cardElevation</code>. {@link android.support.v7.widget.CardView} usa elevação real e sombras dinâmicas no Android 5.0 (API de nível 21) e em posteriores e volta para uma implementação de sombra programática em versões anteriores. Para obter mais informações, consulte <a href="{@docRoot}training/material/compatibility.html">Como manter a compatibilidade</a>.</p>
<p>Para criar um cartão com sombra, use o atributo <code>card_view:cardElevation</code>.
{@link android.support.v7.widget.CardView} usa elevação real e sombras dinâmicas no Android 5.0
(API de nível 21) e posteriores e volta para uma implementação de sombra programática em versões anteriores.
Para obter mais informações, consulte <a href="{@docRoot}training/material/compatibility.html">Como manter
a compatibilidade</a>.</p>
<p>Use essas propriedades para personalizar a aparência do widget {@link android.support.v7.widget.CardView}:</p>
<p>Use estas propriedades para personalizar a aparência do widget
{@link android.support.v7.widget.CardView}:</p>
<ul>
<li>Para definir o raio do canto nos layouts, use o atributo <code>card_view:cardCornerRadius</code>.</li>
<li>Para definir o raio do canto nos layouts, use o atributo <code>card_view:cardCornerRadius</code>
.</li>
<li>Para definir o raio do canto no seu código, use o método <code>CardView.setRadius</code>.</li>
<li>Para definir a cor de segundo plano de um cartão, use o atributo <code>card_view:cardBackgroundColor</code>.</li>
<li>Para definir a cor de segundo plano de um cartão, use o atributo <code>card_view:cardBackgroundColor</code>
.</li>
</ul>
<p>O exemplo de código a seguir mostra como incluir um widget {@link android.support.v7.widget.CardView} no layout:</p>
<p>O exemplo de código a seguir mostra como incluir um widget {@link android.support.v7.widget.CardView}
no layout:</p>
<pre>
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
@@ -212,7 +251,11 @@ public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
<h2 id="Dependencies">Adicionar dependências</h2>
<p>Os widgets {@link android.support.v7.widget.RecyclerView} e {@link android.support.v7.widget.CardView} são parte da <a href="{@docRoot}tools/support-library/features.html#v7">Biblioteca de Suporte v7</a>. Para usar esses widgets no projeto, adicione essas <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">dependências do Gradle</a> ao módulo do aplicativo:</p>
<p>Os widgets {@link android.support.v7.widget.RecyclerView} e {@link android.support.v7.widget.CardView}
são parte da <a href="{@docRoot}tools/support-library/features.html#v7">Biblioteca de
Suporte v7</a>. Para usar esses widgets no projeto, adicione estas
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">dependências do Gradle</a> ao módulo
do aplicativo:</p>
<pre>
dependencies {
@@ -220,4 +263,4 @@ dependencies {
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}
</pre>
</pre>

74
docs/html-intl/intl/pt-br/training/material/shadows-clipping.jd
View File

@@ -1,4 +1,4 @@
page.title=Como definir sombras e recortar visualizações
page.title=Como definir sombras e recortar visualizações
@jd:body
@@ -18,20 +18,29 @@ page.title=Como definir sombras e recortar visualizações
</div>
</div>
<p>O Material Design introduz a elevação em elementos da IU. A elevação ajuda os usuários a entender a importância relativa de cada elemento e concentra a atenção deles nas tarefas à mão.</p>
<p>O Material Design introduz a elevação em elementos da interface do usuário. A elevação ajuda os usuários a entender
a importância relativa de cada elemento e concentrar a atenção deles nas tarefas à mão.</p>
<p>A elevação de uma visualização, representada pela propriedade Z, determina a aparência visual das sombras: visualizações com valores de Z mais altos lançam sombras maiores e mais suaves. Visualizações com valores de Z mais altos ocultam visualizações com valores de Z mais baixos, contudo, o valor de Z de uma visualização não afeta o tamanho dela.</p>
<p>A elevação de uma visualização, representada pela propriedade Z, determina a aparência visual das
sombras: visualizações com valores de Z mais altos lançam sombras maiores e mais suaves. Visualizações com valores de Z mais altos ocultam
visualizações com valores de Z mais baixos, mas o valor de Z de uma visualização não afeta o tamanho dela.</p>
<p>As sombras são desenhadas pelo parente da visualização elevada e, por isso, estão sujeitas a recortes padrão de visualização, recortadas pelo parente por padrão.</p>
<p>As sombras são desenhadas pelo pai da visualização elevada e, por isso, estão sujeitas a recortes padrão de
visualização, recortadas pelo pai por padrão.</p>
<p>A elevação também é útil para criar animações em que os widgets se elevam temporariamente sobre o plano da visualização ao realizar alguma ação.</p>
<p>A elevação também é útil para criar animações em que os widgets se elevam temporariamente
sobre o plano de visualização ao realizar alguma ação.</p>
<p>Para obter mais informações sobre elevação no Material Design, consulte <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objetos em espaço 3D</a>.</p>
<p>Para obter mais informações sobre elevação no Material Design, consulte
<a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objetos
no espaço 3D</a>.</p>
<h2 id="Elevation">Atribuir elevação a visualizações</h2>
<p>O valor de Z para uma visualização tem dois componentes: <ul>
<p>O valor de Z para uma visualização tem dois componentes:
<ul>
<li>Elevação: o componente estático.</li>
<li>Movimentação: o componente dinâmico usado para animações.</li>
</ul>
@@ -41,22 +50,34 @@ page.title=Como definir sombras e recortar visualizações
<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
<p class="img-caption"><strong>Figura 1</strong> - sombras para diferentes elevações de visualização.</p>
<p>Para definir a elevação de uma visualização em uma definição de layout, use o atributo <code>android:elevation</code>. Para definir a elevação de uma visualização no código de uma atividade, use o método {@link android.view.View#setElevation View.setElevation()}.</p>
<p>Para definir a elevação de uma visualização em uma definição de layout, use o atributo <code>android:elevation</code>
. Para definir a elevação de uma visualização no código de uma atividade, use o método
{@link android.view.View#setElevation View.setElevation()}.</p>
<p>Para definir a movimentação de uma visualização, use o método {@link android.view.View#setTranslationZ View.setTranslationZ()}.</p>
<p>Para definir a conversão de uma visualização, use o método {@link android.view.View#setTranslationZ
View.setTranslationZ()}.</p>
<p>Os novos métodos {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} e {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} permitem animar facilmente a elevação de visualizações. Para obter mais informações, consulte a referência de API para {@link android.view.ViewPropertyAnimator} e o guia do desenvolvedor <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Animação de propriedade</a>.</p>
<p>Os novos métodos {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} e {@link
android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} permitem
animar facilmente a elevação de visualizações. Para obter mais informações, consulte a referência de API para
{@link android.view.ViewPropertyAnimator} e o guia do desenvolvedor <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Animação de
propriedade</a>.</p>
<p>Você também pode usar um {@link android.animation.StateListAnimator} para especificar essas animações de um modo declarativo, o que é especialmente útil para casos em que o estado muda as animações de acionamento, como quando um usuário pressiona um botão. Para obter mais informações, consulte <a href="{@docRoot}training/material/animations.html#ViewState">Mudanças de estado de visualização da animação</a>.</p>
<p>Você também pode usar um {@link android.animation.StateListAnimator} para
especificar essas animações de um modo declarativo, o que é especialmente útil para casos em que o estado muda
as animações de acionamento, como quando um usuário pressiona um botão. Para obter mais informações, consulte
<a href="{@docRoot}training/material/animations.html#ViewState">Mudanças de estado de visualização da animação</a>.</p>
<p>Os valores de Z são medidos em dp (pixels independentes de densidade).</p>
<h2 id="Shadows">Personalizar sombras e contornos de visualizações</h2>
<p>Os limites de um desenhável do plano de fundo da visualização determinam a forma padrão da sombra. <strong>Contornos</strong> representam a forma externa de um objeto gráfico e definem a área de ondulação para o feedback de toque.</p>
<p>Os limites de um desenhável do segundo plano da visualização determinam a forma padrão da sombra.
<strong>Contornos</strong> representam a forma externa de um objeto gráfico e definem a área
de ondulação para o feedback de toque.</p>
<p>Analise esta visualização, definida com um desenhável de plano de fundo:</p>
<p>Analise esta visualização, definida com um desenhável de segundo plano:</p>
<pre>
&lt;TextView
@@ -66,7 +87,7 @@ page.title=Como definir sombras e recortar visualizações
android:background="@drawable/myrect" />
</pre>
<p>O desenhável do plano de fundo é definido como um retângulo com bordas arredondadas:</p>
<p>O desenhável do segundo plano é definido como um retângulo com bordas arredondadas:</p>
<pre>
&lt;!-- res/drawable/myrect.xml -->
@@ -77,23 +98,36 @@ page.title=Como definir sombras e recortar visualizações
&lt;/shape>
</pre>
<p>A visualização lança uma sombra com bordas arredondadas, uma vez que o desenhável de plano de fundo define o contorno da visualização. Fornecer um contorno personalizado neutraliza a forma padrão de uma sombra da visualização.</p>
<p>A visualização lança uma sombra com bordas arredondadas, uma vez que o desenhável de segundo plano
define o contorno da visualização. Fornecer um contorno personalizado neutraliza a forma padrão de uma sombra da visualização.</p>
<p>Para definir um contorno personalizado para uma visualização no seu código:<p>
<ol>
<li>Amplie a classe {@link android.view.ViewOutlineProvider}.</li>
<li>Neutralize o método {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li>
<li>Atribua o novo fornecedor de contorno à visualização com o método {@link android.view.View#setOutlineProvider View.setOutlineProvider()}.</li>
<li>Atribua o novo fornecedor de contorno à visualização com o método {@link
android.view.View#setOutlineProvider View.setOutlineProvider()}.</li>
</ol>
<p>Você pode criar contornos ovais e retangulares com bordas arredondadas usando os métodos na classe {@link android.graphics.Outline}. O fornecedor de contorno padrão para visualizações obtém o contorno a partir do plano de fundo da visualização. Para evitar que uma visualização lance uma sombra, defina o fornecedor de contorno dela como <code>null</code>.</p>
<p>Você pode criar contornos ovais e retangulares com bordas arredondadas usando os métodos na classe
{@link android.graphics.Outline}. O fornecedor de contorno padrão para visualizações obtém o contorno
do segundo plano da visualização. Para evitar que uma visualização lance uma sombra, defina o fornecedor de contorno
dela como <code>null</code>.</p>
<h2 id="Clip">Recortar visualizações</h2>
<p>Recortar visualizações permite mudar facilmente a forma de uma visualização. Você pode recortar visualizações para obter consistência com outros elementos de design ou para mudar a forma de uma visualização em resposta à interação do usuário. Você pode recortar uma visualização na área do contorno usando o método {@link android.view.View#setClipToOutline View.setClipToOutline()} ou o atributo <code>android:clipToOutline</code>. Somente contornos retangulares, circulares e retangulares redondos são compatíveis com recorte, conforme determinado pelo método {@link android.graphics.Outline#canClip Outline.canClip()}.</p>
<p>Recortar visualizações permite mudar facilmente a forma de uma visualização. Você pode recortar visualizações
para obter consistência com outros elementos de design ou para mudar a forma de uma visualização em resposta à interação do usuário.
É possível recortar uma visualização na área do contorno usando o método {@link android.view.View#setClipToOutline
View.setClipToOutline()} ou o atributo <code>android:clipToOutline</code>. Somente
contornos retangulares, circulares e retangulares redondos são compatíveis com recorte, conforme determinado pelo método
{@link android.graphics.Outline#canClip Outline.canClip()}.</p>
<p>Para recortar uma visualização na forma de um desenhável, defina o desenhável como o plano de fundo da visualização (conforme exibido acima) e chame o método {@link android.view.View#setClipToOutline View.setClipToOutline()}.</p>
<p>Para recortar uma visualização na forma de um desenhável, defina o desenhável como o segundo plano da visualização
(conforme exibido acima) e chame o método {@link android.view.View#setClipToOutline View.setClipToOutline()}
.</p>
<p>O recorte de visualizações é uma operação dispendiosa, por isso, não anime a forma que você usa para recortar uma visualização. Para atingir esse efeito, use a animação de <a href="{@docRoot}training/material/animations.html#Reveal">Efeito de Revelação</a>.</p>
<p>O recorte de visualizações é uma operação cara, por isso, não anime a forma que você
usa para recortar uma visualização. Para atingir esse efeito, use a animação <a href="{@docRoot}training/material/animations.html#Reveal">Efeito de Revelação</a>.</p>

46
docs/html-intl/intl/pt-br/training/material/theme.jd
View File

@@ -1,4 +1,4 @@
page.title=Como usar o tema do Material
page.title=Como usar o tema do Material
@jd:body
@@ -27,9 +27,12 @@ page.title=Como usar o tema do Material
<li>Animações de transição de atividades</li>
</ul>
<p>É possível personalizar a aparência do tema do Material com uma paleta de cores que você controla, de acordo com a identidade da sua marca. Você pode atribuir cor à barra de ações e à barra de status usando atributos de tema, conforme exibido na <a href="#fig3">Figura 3</a>.</p>
<p>É possível personalizar a aparência do tema do Material com
uma paleta de cores que você controla, de acordo com a identidade da sua marca. Você pode atribuir cor à barra de ações e
à barra de status usando atributos de tema, conforme exibido na <a href="#fig3">Figura 3</a>.</p>
<p>Os widgets de sistema têm um novo design e animações de feedback de toque. Você pode personalizar a paleta de cores, as animações de feedback de toque e as transições de atividades do aplicativo.</p>
<p>Os widgets de sistema têm um novo design e animações de feedback de toque. Você pode personalizar a
paleta de cores, as animações de feedback de toque e as transições de atividades do aplicativo.</p>
<p>O tema do Material é definido como:</p>
@@ -39,7 +42,8 @@ page.title=Como usar o tema do Material
<li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
</ul>
<p>Para obter uma lista de estilos do Material que podem ser usados, consulte a referência de API para {@link android.R.style R.style}.</p>
<p>Para obter uma lista de estilos do Material que podem ser usados, consulte a referência de API para
{@link android.R.style R.style}.</p>
<!-- two columns, dark/light material theme example -->
<div style="width:700px;margin-top:25px;margin-bottom:10px">
@@ -59,13 +63,18 @@ page.title=Como usar o tema do Material
</div>
<p class="note">
<strong>Observação:</strong> O tema do Material só está disponível no Android 5.0 (API de nível 21) e em posteriores. A <a href="{@docRoot}tools/support-library/features.html#v7">Biblioteca de Suporte v7</a> fornece temas com estilos do Material Design para alguns widgets e compatibilidade com a personalização da paleta de cores. Para obter mais informações, consulte <a href="{@docRoot}training/material/compatibility.html">Como manter a compatibilidade</a>.
<strong>Observação:</strong> o tema do Material só está disponível no Android 5.0 (API de nível 21) e
posteriores. A <a href="{@docRoot}tools/support-library/features.html#v7">Biblioteca de Suporte v7</a>
fornece temas com estilos do Material Design para alguns widgets e compatibilidade com a personalização da
paleta de cores. Para obter mais informações, consulte
<a href="{@docRoot}training/material/compatibility.html">Como manter a compatibilidade</a>.
</p>
<h2 id="ColorPalette">Personalizar a paleta de cores</h2>
<p style="margin-bottom:30px">Para personalizar as cores de base do tema para adequá-lo a sua marca, defina as cores personalizadas usando os atributos de tema ao herdar do tema do Material:</p>
<p style="margin-bottom:30px">Para personalizar as cores de base do tema para adequá-lo à sua marca, defina
as cores personalizadas usando os atributos de tema ao herdar do tema do Material:</p>
<pre>
&lt;resources>
@@ -91,17 +100,32 @@ page.title=Como usar o tema do Material
<h2 id="StatusBar">Personalizar a barra de status</h2>
<p>O tema do Material permite a fácil personalização da barra de status, para você poder especificar uma cor adequada a sua marca, e fornece contraste suficiente para exibir os ícones de status brancos. Para definir uma cor personalizada para a barra de status, use o atributo <code>android:statusBarColor</code> ao ampliar o tema do Material. Por padrão, <code>android:statusBarColor</code> herda o valor de <code>android:colorPrimaryDark</code>.</p>
<p>O tema do Material permite a fácil personalização da barra de status, para você poder
especificar uma cor adequada à sua marca, e fornece contraste suficiente para exibir os ícones de status brancos. Para
definir uma cor personalizada para a barra de status, use o atributo <code>android:statusBarColor</code> ao
ampliar o tema do Material. Por padrão, <code>android:statusBarColor</code> herda o
valor de <code>android:colorPrimaryDark</code>.</p>
<p>Você também pode personalizar a parte de trás da barra de status. Por exemplo, se você quiser mostrar uma barra de status transparente sobre uma foto, com um degradê escuro sutil, para garantir que os ícones de status brancos sejam visíveis, defina o atributo <code>android:statusBarColor</code> como <code>&#64;android:color/transparent</code> e ajuste os marcadores de janela conforme o necessário. Você também pode usar o método {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} para animações ou esmaecimento.</p>
<p>Você também pode personalizar a parte de trás da barra de status. Por exemplo, se você quiser mostrar
uma barra de status transparente sobre uma foto, com um degradê escuro sutil, para garantir que os ícones de status
brancos sejam visíveis, defina o atributo <code>android:statusBarColor</code> como
<code>&#64;android:color/transparent</code> e ajuste os marcadores de janela conforme necessário. Você também
pode usar o método {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} para
animações ou esmaecimento.</p>
<p class="note">
<strong>Observação:</strong> A barra de status deve ter, quase sempre, um traçado distante da barra de ferramentas principal, exceto em casos em que haja imagens ricas de ponta a ponta, conteúdo de mídia por trás dessas barras e quando se usa degradê, para garantir que os ícones continuem visíveis.
<strong>Observação:</strong> a barra de status deve ter, quase sempre, um traçado distante da barra de ferramentas
principal, exceto em casos em que haja imagens ricas de ponta a ponta, conteúdo de mídia por trás
dessas barras e quando se usa degradê, para garantir que os ícones continuem visíveis.
</p>
<p>Ao personalizar as barras de navegação e de status, deixe-as transparentes ou modifique somente a barra de status. A barra de navegação deve permanecer preta em todos os outros casos.</p>
<p>Ao personalizar as barras de navegação e de status, deixe-as transparentes ou modifique
somente a barra de status. A barra de navegação deve permanecer preta em todos os outros casos.</p>
<h2 id="Inheritance">Atribuir tema a visualizações individuais</h3>
<p>Elementos nas definições do layout XML podem especificar o atributo <code>android:theme</code>, que referencia um recurso do tema. Essa atributo modifica o tema do elemento e quaisquer elementos-filho, o que é útil para alterar as paletas de cores do tema em uma parte específica da interface.</p>
<p>Elementos nas definições do layout XML podem especificar o atributo <code>android:theme</code>,
que referencia um recurso do tema. Esse atributo modifica o tema do elemento e quaisquer
elementos-filho, o que é útil para alterar as paletas de cores do tema em uma parte específica
de uma interface.</p>

23
docs/html-intl/intl/ru/design/material/index.jd
View File

@@ -1,7 +1,6 @@
page.title=Material Design
page.tags=Material Design
page.type=design
page.image=design/material/images/MaterialLight.png
page.title=Material Design для Android
page.tags=Material,design
page.image=images/cards/design-material-for-android_2x.jpg
@jd:body
@@ -92,7 +91,7 @@ Material Design</a>.</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" />
<p>Виджет <code>RecyclerView</code> Представляет собой более гибкую версию <code>ListView</code>,
<p>Виджет <code>RecyclerView</code> представляет собой более гибкую версию <code>ListView</code>,
которая поддерживает различные типы макетов и способствует повышению производительности.</p>
</div>
<div style="float:left;width:250px;margin-right:0px;">
@@ -137,9 +136,9 @@ Z. Это новое свойство показывает, насколько
<h3>Анимация</h3>
<p>Новые API-интерфейсы анимации позволяют создавать нестандартную анимацию для реакции на касание в элементах пользовательского интерфейса,
изменения состояниия представления и переходов между действиями.</p>
изменения состояния представления и переходов между действиями.</p>
<p>Эти API-интерфейсы позволяют</p>
<p>Эти API-интерфейсы позволяют:</p>
<ul>
<li style="margin-bottom:15px">
@@ -149,7 +148,7 @@ Z. Это новое свойство показывает, насколько
скрывать и отображать представление с помощью анимации для <strong>кругового появления</strong>;
</li>
<li style="margin-bottom:15px">
переключаться меду действиями с помощью настраиваемой анимации для <strong>переходов между действиями</strong>;
переключаться между действиями с помощью настраиваемой анимации для <strong>переходов между действиями</strong>;
</li>
<li style="margin-bottom:15px">
создавать более естественное движение с помощью анимации для <strong>перемещения по кривой</strong>;
@@ -158,14 +157,14 @@ Z. Это новое свойство показывает, насколько
анимировать изменение одного или нескольких свойств представления с помощью анимации для <strong>изменения состояния представления</strong>;
</li>
<li style="margin-bottom:15px">
отображать анимацию в <strong>графических элементах списков состояний</strong> в помежутке между изменением состояний представления.
отображать анимацию в <strong>графических элементах списков состояний</strong> в промежутке между изменением состояний представления.
</li>
</ul>
<p>Анимация для реакции на касание встроена а некоторые стандартные представления, например, кнопки. Новые API-интерфейсы
<p>Анимация для реакции на касание встроена в некоторые стандартные представления, например кнопки. Новые API-интерфейсы
позволяют разработчику настраивать эти анимации и добавлять их в свои нестандартные представления.</p>
<p>Дополнительные сведения, см. в разделе <a href="{@docRoot}training/material/animations.html">Определение настраиваемой
<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/animations.html">Определение настраиваемой
анимации</a>.</p>
@@ -182,5 +181,5 @@ Z. Это новое свойство показывает, насколько
растровых изображений.</li>
</ul>
<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/drawables.html">Работа с
<p>Дополнительные сведения см. в разделе <a href="{@docRoot}training/material/drawables.html">Работа с
элементами дизайна</a>.</p>

228
docs/html-intl/intl/ru/training/material/animations.jd
View File

@@ -21,7 +21,10 @@ page.title=Определение настраиваемой анимации
</div>
<p>Благодаря анимации в Material Design пользователи получают реакцию на выполняемые действия. Кроме того, анимация обеспечивает визуальную связанность при взаимодействии с приложением. Тема Material Design содержит ряд анимаций по умолчанию для кнопок и переходов, а в Android 5.0 (уровень API 21) и более поздних версиях можно настраивать эти анимации и создавать новые:</p>
<p>Благодаря анимациям в Material Design пользователи получают отклик на выполняемые
действия. Кроме того, анимации обеспечивают зрительную связь при взаимодействии с приложением. Тема Material Design содержит ряд анимаций
по умолчанию для кнопок и переходов, а в Android 5.0 (уровень API 21) и более поздних версиях можно настраивать эти анимации
и создавать новые:</p>
<ul>
<li>реакция на касание;</li>
@@ -34,30 +37,44 @@ page.title=Определение настраиваемой анимации
<h2 id="Touch">Настройка реакции на касание</h2>
<p>Реакция на касание в Material Design обеспечивает моментальное визуальное подтверждение взаимодействия пользователя с элементами интерфейса в точке касания. В анимации по умолчанию для реакции на нажатие кнопок используется новый класс {@link android.graphics.drawable.RippleDrawable}, обеспечивающий переход между разными состояниями с созданием эффекта ряби.</p>
<p>Реакция на касание в Material Design обеспечивает моментальное визуальное подтверждение взаимодействия пользователя с элементами интерфейса в точке касания.
В стандартной анимации
для реакции на нажатие кнопок используется новый класс {@link android.graphics.drawable.RippleDrawable}, обеспечивающий переход между разными состояниями с созданием эффекта ряби.
</p>
<p>В большинстве случаев эту возможность следует применять в XML-файле представления, указав фон представления следующим образом:</p>
<p>В большинстве случаев эту возможность следует применять в XML-файле представления, указав фон представления следующим образом:
</p>
<ul>
<li><code>?android:attr/selectableItemBackground</code> для ограниченной области ряби;</li>
<li><code>?android:attr/selectableItemBackgroundBorderless</code> для ряби, распространяемой за границы представления.</li>
<li><code>?android:attr/selectableItemBackgroundBorderless</code> для ряби, распространяемой за границы представления.
При отрисовке она будет ограничиваться ближайшим родительским элементом представления со значением фона, отличным от null.
</li>
</ul>
<p class="note"><strong>Примечание.</strong> <code>selectableItemBackgroundBorderless</code> – это новый атрибут, представленный в уровне API 21.</p>
<p class="note"><strong>Примечание.</strong> <code>selectableItemBackgroundBorderless</code> — это новый атрибут, представленный в уровне API 21.
</p>
<p>Также можно определить {@link android.graphics.drawable.RippleDrawable} в качестве XML-ресурса с помощью элемента <code>ripple</code>.</p>
<p>Также можно определить {@link android.graphics.drawable.RippleDrawable}
в качестве XML-ресурса с помощью элемента <code>ripple</code>.</p>
<p>Можно назначить цвет для объектов {@link android.graphics.drawable.RippleDrawable}. Чтобы изменить цвет реакции на касание, который используется по умолчанию, воспользуйтесь атрибутом темы <code>android:colorControlHighlight</code>.</p>
<p>Можно назначить цвет для объектов {@link android.graphics.drawable.RippleDrawable}. Чтобы
изменить стандартный цвет отклика на касание, воспользуйтесь атрибутом темы <code>android:colorControlHighlight</code>
.</p>
<p>Дополнительные сведения представлены в справке по API для класса {@link android.graphics.drawable.RippleDrawable}.</p>
<p>Дополнительные сведения представлены в справке по API для класса {@link
android.graphics.drawable.RippleDrawable}.</p>
<h2 id="Reveal">Применение эффекта появления</h2>
<p>Анимация эффекта появления обеспечивает визуальную связанность в действиях пользователя, когда отображается или скрывается группа элементов интерфейса. С помощью метода {@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} можно анимировать ограничивающий круг для скрытия или отображения представления.</p>
<p>Анимация эффекта появления обеспечивает зрительную связь с действиями пользователя, когда отображается или скрывается группа элементов интерфейса.
С помощью метода {@link android.view.ViewAnimationUtils#createCircularReveal
ViewAnimationUtils.createCircularReveal()} можно анимировать ограничивающий круг, чтобы отобразить или скрыть с экрана представление.
</p>
<p>Отображение ранее скрытого представления с помощью этого эффекта:</p>
<p>Как отобразить ранее скрытое представление с помощью этого эффекта:</p>
<pre>
// previously invisible view
@@ -79,7 +96,7 @@ myView.setVisibility(View.VISIBLE);
anim.start();
</pre>
<p>Скрытие ранее отображавшегося представления с помощью этого эффекта:</p>
<p>Как скрыть ранее отображавшееся представление с помощью этого эффекта:</p>
<pre>
// previously visible view
@@ -122,50 +139,65 @@ anim.start();
</video>
</div>
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
<p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>Рисунок 1.</strong> Переход с общими элементами.</p>
<em>Чтобы заново воспроизвести ролик, коснитесь экрана мобильного устройства</em>
<p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>Рисунок 1.</strong> Переход с общими элементами.
</p>
<em>Для воспроизведения фильма нажмите экран устройства</em>
</div>
</div>
<p>Переходы в приложениях Material Design обеспечивают визуальные связи между различными состояниями путем движения элементов и преобразований между общими элементами. Можно выбрать настраиваемые анимации для начальных и конечных переходов, а также для переходов общих элементов между операциями.</p>
<p>Переходы в приложениях Material Design обеспечивают зрительные связи между различными состояниями путем движения элементов и преобразований между общими элементами.
Можно выбрать настраиваемые анимации для начальных и конечных переходов, а также для переходов общих элементов между операциями.
</p>
<ul>
<li><strong>Начальный</strong> переход определяет порядок появления представлений в операции на экране. Например, в начальном переходе <em>взрыв</em> представления появляются на экране извне и перемещаются по направлению к центру экрана.</li>
<li><strong>Начальный</strong> переход определяет порядок появления на экране представлений в операции.
Например, в начальном переходе <em>explode</em> представления появляются на экране извне и перемещаются к центру экрана.
</li>
<li><strong>Конечный</strong> переход определяет порядок исчезновения представлений с экрана в операции. Например, в конечном переходе <em>взрыв</em> представления исчезают с экрана в направлении из центра к краям.</li>
<li><strong>Конечный</strong> переход определяет порядок исчезновения с экрана представлений в операции. Например, в конечном переходе <em>explode</em> представления исчезают
с экрана в направлении из центра к краям.
</li>
<li>Переход <strong>общих элементов</strong> определяет порядок перехода представлений, которые используются в обеих операциях, между этими операциями. Например, если в двух операциях используется одно и то же изображение, но в разных позициях и с разными размерами, в случае применения перехода общего элемента <em>changeImageTransform</em> выполняется плавное перемещение и масштабирование изображения между этими операциями.</li>
<li>Переход <strong>общих элементов</strong> определяет порядок перехода между операциями представлений, используемых в обеих операциях.
Например, если в двух
операциях используется одно и то же изображение, но в разных позициях и с разными размерами, в случае применения перехода общего элемента <em>changeImageTransform</em> выполняется плавное перемещение и масштабирование изображения между этими операциями.
</li>
</ul>
<p>В Android 5.0 (уровень API 21) поддерживаются следующие начальные и конечные переходы:</p>
<ul>
<li><em>взрыв</em> – перемещение представлений в центр экрана или из центра;</li>
<li><em>скольжение</em> – перемещение представлений к одному из краев представления или от него;</li>
<li><em>наплыв</em> – отображение или скрытие представления на экране путем изменения его прозрачности.</li>
<li><em>explode</em> — перемещение представлений в центр экрана или из центра;</li>
<li><em>slide</em> — перемещение представлений к одному из краев экрана или от него;</li>
<li><em>fade</em> — отображение или скрытие представления на экране путем изменения его прозрачности.</li>
</ul>
<p>Любой переход, являющийся расширением класса {@link android.transition.Visibility}, поддерживается как начальный или конечный переход. Дополнительные сведения представлены в справке по API для класса {@link android.transition.Transition}.</p>
<p>Любой переход, являющийся наследованием класса {@link android.transition.Visibility}, поддерживается как начальный или конечный переход.
Дополнительные сведения представлены в справке по API для класса
{@link android.transition.Transition}.</p>
<p>В Android 5.0 (уровень API 21) также поддерживаются следующие переходы общих элементов:</p>
<ul>
<li><em>changeBounds</em> – анимация изменений границ макетов целевых представлений.</li>
<li><em>changeClipBounds</em> – анимация изменений границ обрезки целевых представлений.</li>
<li><em>changeTransform</em> – анимация изменений параметров масштабирования и поворота целевых представлений.</li>
<li><em>changeImageTransform</em> – анимация изменений размеров и параметров масштабирования целевых изображений.</li>
<li><em>changeBounds</em> — анимация изменений границ макетов целевых представлений;</li>
<li><em>changeClipBounds</em> — анимация изменений границ обрезки целевых представлений;</li>
<li><em>changeTransform</em> — анимация изменений параметров масштабирования и поворота целевых представлений;</li>
<li><em>changeImageTransform</em> — анимация изменений размеров и параметров масштабирования целевых изображений.</li>
</ul>
<p>Если активировать переходы в приложении, то между начальной и конечной операциями активируется переход «Угасание», используемый по умолчанию.</p>
<p>Если активировать переходы в приложении, то между начальной и конечной операциями активируется стандартный переход методом плавной замены.
</p>
<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
<p class="img-caption">
  <strong>Рисунок 2.</strong> Переход с одним общим элементом.
</p>
<h3>Настраиваемые переходы</h3>
<h3>Определение настраиваемых переходов</h3>
<p>Сначала необходимо активировать переходы содержимого окна с помощью атрибута <code>android:windowContentTransitions</code> при определении стиля, наследуемого из темы Material Design. В определении стиля можно указать начальный и конечный переходы, а также переходы общих элементов:</p>
<p>Сначала необходимо активировать переходы содержимого окна с помощью атрибута <code>android:windowContentTransitions</code>
при определении стиля, наследуемого из темы Material Design. В определении стиля можно указать начальный и конечный переходы, а также переходы общих элементов:
</p>
<pre>
&lt;style name="BaseAppTheme" parent="android:Theme.Material">
@@ -194,9 +226,12 @@ anim.start();
&lt;/transitionSet>
</pre>
<p>Элемент <code>changeImageTransform</code> соответствует классу {@link android.transition.ChangeImageTransform}. Дополнительные сведения представлены в справке по API для {@link android.transition.Transition}.</p>
<p>Элемент <code>changeImageTransform</code> соответствует классу
{@link android.transition.ChangeImageTransform}. Дополнительные сведения представлены в справке по API для {@link android.transition.Transition}.
</p>
<p>Чтобы активировать в своем коде переходы содержимого окна, вызовите метод {@link android.view.Window#requestFeature Window.requestFeature()}:</p>
<p>Чтобы активировать в своем коде переходы содержимого окна, вызовите метод
{@link android.view.Window#requestFeature Window.requestFeature()}:</p>
<pre>
// inside your activity (if you did not enable transitions in your theme)
@@ -206,31 +241,45 @@ getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setExitTransition(new Explode());
</pre>
<p>Чтобы задать переходы в своем коде, вызовите следующие методы с использованием объекта {@link android.transition.Transition}:</p>
<p>Чтобы задать переходы в своем коде, вызовите следующие методы с использованием объекта {@link
android.transition.Transition}:</p>
<ul>
<li>{@link android.view.Window#setEnterTransition Window.setEnterTransition()}</li>
<li>{@link android.view.Window#setExitTransition Window.setExitTransition()}</li>
<li>{@link android.view.Window#setSharedElementEnterTransition Window.setSharedElementEnterTransition()}</li>
<li>{@link android.view.Window#setSharedElementExitTransition Window.setSharedElementExitTransition()}</li>
<li>{@link android.view.Window#setEnterTransition Window.setEnterTransition()};</li>
<li>{@link android.view.Window#setExitTransition Window.setExitTransition()};</li>
<li>{@link android.view.Window#setSharedElementEnterTransition
Window.setSharedElementEnterTransition()};</li>
<li>{@link android.view.Window#setSharedElementExitTransition
Window.setSharedElementExitTransition()}.</li>
</ul>
<p>Методы {@link android.view.Window#setExitTransition setExitTransition()} и {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} задают конечный переход для вызывающей операции. Методы {@link android.view.Window#setEnterTransition setEnterTransition()} и {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} задают начальный переход для вызываемой операции.</p>
<p>Методы {@link android.view.Window#setExitTransition setExitTransition()} и {@link
android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} задают конечный переход для вызывающей операции.
Методы {@link android.view.Window#setEnterTransition
setEnterTransition()} и {@link android.view.Window#setSharedElementEnterTransition
setSharedElementEnterTransition()} задают начальный переход для вызываемой операции.</p>
<p>Чтобы в полной мере использовать переход, необходимо активировать переходы содержимого окна как в вызывающей, так и в вызываемой операции. В противном случае вызывающая операция запустит конечный переход, однако будет выполнен переход окна (например, масштабирование или затемнение).</p>
<p>Чтобы в полной мере реализовать возможности перехода, необходимо активировать переходы содержимого окна как в вызывающей, так и в вызываемой операции.
В противном случае вызывающая операция запустит конечный переход, однако будет выполнен переход окна (например, масштабирование или затемнение).
</p>
<p>Чтобы запустить начальный переход как можно раньше, используйте в вызываемой операции метод {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()}. Это позволит сделать начальные переходы более эффектными.</p>
<p>Чтобы запустить начальный переход как можно раньше, используйте в вызываемой операции метод
{@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()}
. Это позволит сделать начальные переходы более эффектными.</p>
<h3>Запуск операции с помощью переходов</h3>
<p>Если в приложении активированы переходы и для операции задан конечный переход, переход активируется при запуске другой операции следующим образом:</p>
<p>Если в приложении разрешены переходы и для операции задан конечный переход, переход активируется при запуске другой операции следующим образом:
</p>
<pre>
startActivity(intent,
ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
</pre>
<p>Если для второй операции задан начальный переход, переход также активируется при запуске операции. Чтобы отключить переходы при запуске другой операции, укажите набор параметров <code>null</code>.</p>
<p>Если для второй операции задан начальный переход, он также активируется при запуске операции.
Чтобы отключить переходы при запуске другой операции, укажите
значение <code>null</code> для набора параметров.</p>
<h3>Запуск операции с помощью общего элемента</h3>
@@ -240,8 +289,10 @@ startActivity(intent,
<li>Активируйте в своей теме переходы содержимого окна.</li>
<li>В определении стиля укажите переходы общих элементов.</li>
<li>Определите свой переход как XML-ресурс.</li>
<li>Присвойте общим элементам общее имя в обоих макетах, используя для этого атрибут <code>android:transitionName</code>.</li>
<li>Воспользуйтесь методом {@link android.app.ActivityOptions#makeSceneTransitionAnimation ActivityOptions.makeSceneTransitionAnimation()}.</li>
<li>Присвойте одинаковое имя общим элементам в обоих макетах, используя для этого атрибут
<code>android:transitionName</code>.</li>
<li>Воспользуйтесь методом {@link android.app.ActivityOptions#makeSceneTransitionAnimation
ActivityOptions.makeSceneTransitionAnimation()}.</li>
</ol>
<pre>
@@ -266,13 +317,20 @@ imgContainerView.setOnClickListener(new View.OnClickListener() {
});
</pre>
<p>Для общих динамических представлений, сгенерированных в коде, используйте метод{@link android.view.View#setTransitionName View.setTransitionName()} для задания общего имени элемента в обеих операциях.</p>
<p>Для общих динамических представлений, создаваемых в коде, используйте метод
{@link android.view.View#setTransitionName View.setTransitionName()} для определения одинакового имени элемента в обеих операциях.
</p>
<p>Чтобы обратить анимацию перехода по завершении второй операции, вместо {@link android.app.Activity#finish Activity.finish()} вызовите метод {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()}.</p>
<p>Чтобы выполнить анимацию обратного перехода по завершении второй операции, вызовите метод
{@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()}
вместо{@link android.app.Activity#finish Activity.finish()}.</p>
<h3>Запуск операции с несколькими общими элементами</h3>
<p>Чтобы создать анимацию перехода на экране между двумя операциями с несколькими общими элементами, определите общие элементы в обоих макетах с помощью атрибута <code>android:transitionName</code> (или воспользуйтесь методом {@link android.view.View#setTransitionName View.setTransitionName()} в обеих операциях), а затем создайте объект {@link android.app.ActivityOptions}, как указано ниже.</p>
<p>Чтобы создать анимацию перехода на экране между двумя операциями с несколькими общими
элементами, определите общие элементы в обоих макетах с помощью атрибута <code>android:transitionName</code>
(или воспользуйтесь методом {@link android.view.View#setTransitionName View.setTransitionName()} в обеих
операциях), а затем создайте объект {@link android.app.ActivityOptions}, как указано ниже.</p>
<pre>
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
@@ -283,9 +341,14 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
<h2 id="CurvedMotion">Использование перемещения по кривой</h2>
<p>При анимации в Material Design используются кривые для интерполяции по времени и схемы перемещения в пространстве. В Android 5.0 (уровень API 21) и более поздних версиях имеется возможность определить для анимаций настраиваемые кривые синхронизации и схемы перемещения по кривой.</p>
<p>При анимации в Material Design используются кривые для интерполяции по времени и создания схем перемещения в пространстве.
В Android 5.0 (уровень API 21) и более поздних версиях имеется возможность определить для анимаций настраиваемые кривые синхронизации и схемы перемещения по кривой.
</p>
<p>Класс {@link android.view.animation.PathInterpolator} – это новый интерполятор на основе кривой Безье или объекта {@link android.graphics.Path}. Данный интерполятор определяет перемещение по кривой в квадрате 1 x 1 с привязкой в точках (0,0) и (1,1), а также с контрольными точками, задаваемыми с помощью аргументов конструктора. Также можно определить интерполятор траектории в качестве XML-ресурса:</p>
<p>Класс {@link android.view.animation.PathInterpolator} — это новый интерполятор на
основе кривой Безье или объекта {@link android.graphics.Path}. Данный интерполятор определяет перемещение по кривой в квадрате 1 x 1 с привязкой в точках (0,0) и (1,1), а также с контрольными точками, задаваемыми с помощью аргументов конструктора.
Также можно определить интерполятор траектории в качестве XML-ресурса:</p>
<pre>
&lt;pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
@@ -295,17 +358,21 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
android:controlY2="1"/>
</pre>
<p>В системе имеются XML-ресурсы для трех основных кривых в спецификации Material Design:</p>
<p>В системе имеются XML-ресурсы для трех основных кривых в спецификации Material Design:
</p>
<ul>
<li><code>&#64;interpolator/fast_out_linear_in.xml</code></li>
<li><code>&#64;interpolator/fast_out_slow_in.xml</code></li>
<li><code>&#64;interpolator/linear_out_slow_in.xml</code></li>
<li><code>&#64;interpolator/fast_out_linear_in.xml</code>;</li>
<li><code>&#64;interpolator/fast_out_slow_in.xml</code>;</li>
<li><code>&#64;interpolator/linear_out_slow_in.xml</code>.</li>
</ul>
<p>Можно передать объект {@link android.view.animation.PathInterpolator} в метод {@link android.animation.Animator#setInterpolator Animator.setInterpolator()}.</p>
<p>Можно передать объект {@link android.view.animation.PathInterpolator} в метод {@link
android.animation.Animator#setInterpolator Animator.setInterpolator()}.</p>
<p>Класс {@link android.animation.ObjectAnimator} имеет новые конструкторы, с помощью которых можно анимировать координаты вдоль траектории перемещения, используя для этого сразу два или более свойств. Например, следующий аниматор использует объект {@link android.graphics.Path} для анимации свойств представления по осям X и Y:</p>
<p>Класс {@link android.animation.ObjectAnimator} имеет новые конструкторы, с помощью которых можно анимировать координаты вдоль траектории перемещения, используя для этого не менее двух свойств.
Например, следующий аниматор
использует объект {@link android.graphics.Path} для анимации свойств представления по осям X и Y:</p>
<pre>
ObjectAnimator mAnimator;
@@ -317,7 +384,9 @@ mAnimator.start();
<h2 id="ViewState">Анимация изменений состояния представления</h2>
<p>С помощью класса {@link android.animation.StateListAnimator} можно определить аниматоры, которые запускаются при изменении состояния представления. В примере ниже показан порядок определения {@link android.animation.StateListAnimator} в качестве XML-ресурса:</p>
<p>С помощью класса {@link android.animation.StateListAnimator} можно определить аниматоры, которые запускаются при изменении состояния представления.
В следующем примере показан порядок определения {@link
android.animation.StateListAnimator} в качестве XML-ресурса:</p>
<pre>
&lt;!-- animate the translationZ property of a view when pressed -->
@@ -345,11 +414,21 @@ mAnimator.start();
&lt;/selector>
</pre>
<p>Чтобы присоединить к представлению настраиваемые анимации состояния представления, определите аниматор, используя элемент <code>selector</code> в файле XML-ресурса (как в этом примере), а затем назначьте его своему представлению с помощью атрибута <code>android:stateListAnimator</code>. Чтобы в своем коде назначить представлению аниматор списка состояний, используйте метод {@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()}, а затем назначьте аниматор своему представлению с помощью метода {@link android.view.View#setStateListAnimator View.setStateListAnimator()}.</p>
<p>Чтобы присоединить к представлению настраиваемые анимации состояния представления, определите аниматор, используя элемент
<code>selector</code> в файле XML-ресурса (как в этом примере), а затем назначьте его своему представлению
с помощью атрибута <code>android:stateListAnimator</code>. Чтобы в своем коде назначить представлению аниматор
списка состояний, используйте метод {@link android.animation.AnimatorInflater#loadStateListAnimator
AnimationInflater.loadStateListAnimator()}, а затем назначьте аниматор своему представлению с помощью метода
{@link android.view.View#setStateListAnimator View.setStateListAnimator()}.</p>
<p>Когда ваша тема является расширением темы Material Design, по умолчанию у кнопок имеется возможность анимации по оси Z. Чтобы отключить такое поведение для кнопок, задайте для атрибута <code>android:stateListAnimator</code> значение <code>@null</code>.</p>
<p>Если ваша тема является расширением темы Material Design, по умолчанию у кнопок имеется возможность анимации по оси Z. Чтобы отключить
такое поведение кнопок, задайте для атрибута <code>android:stateListAnimator</code> значение
<code>@null</code>.</p>
<p>С помощью класса {@link android.graphics.drawable.AnimatedStateListDrawable} можно создавать элементы, которые служат для отображения анимации между изменениями состояния связанного представления. В Android 5.0 в некоторых системных виджетах такая анимация используется по умолчанию. В примере ниже показан порядок определения {@link android.graphics.drawable.AnimatedStateListDrawable} в качестве XML-ресурса:</p>
<p>С помощью класса {@link android.graphics.drawable.AnimatedStateListDrawable} можно создавать элементы, которые служат для отображения анимации между изменениями состояния связанного представления.
В Android 5.0 в некоторых системных виджетах такая анимация используется по умолчанию.
В следующем примере показан порядок
определения {@link android.graphics.drawable.AnimatedStateListDrawable} в качестве XML-ресурса:</p>
<pre>
&lt;!-- res/drawable/myanimstatedrawable.xml -->
@@ -379,19 +458,28 @@ mAnimator.start();
<h2 id="AnimVector">Анимация векторных элементов</h2>
<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">Векторные элементы</a> можно масштабировать без ущерба четкости. Класс {@link android.graphics.drawable.AnimatedVectorDrawable} позволяет анимировать свойства векторного элемента.</p>
<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">Векторные элементы</a> можно масштабировать без ущерба четкости.
Класс {@link android.graphics.drawable.AnimatedVectorDrawable}
позволяет анимировать свойства векторного элемента.</p>
<p>Анимированные векторные элементы обычно определяются в трех XML-файлах:</p>
<ul>
<li>векторный элемент с элементом <code>&lt;vector&gt;</code> в <code>res/drawable/</code>;</li>
<li>анимированный векторный элемент с элементом <code>&lt;animated-vector&gt;</code> в <code>res/drawable/</code>;</li>
<li>один или несколько аниматоров объектов с элементом <code>&lt;objectAnimator&gt;</code> в <code>res/anim/</code>.</li>
<li>векторный элемент с элементом <code>&lt;vector&gt;</code> в
<code>res/drawable/</code>;</li>
<li>анимированный векторный элемент с элементом <code>&lt;animated-vector&gt;</code> в
<code>res/drawable/</code>;</li>
<li>один или несколько аниматоров для объектов с элементом <code>&lt;objectAnimator&gt;</code> в
<code>res/anim/</code>.</li>
</ul>
<p>С помощью анимированных векторных элементов можно анимировать атрибуты элементов <code>&lt;group&gt;</code> и <code>&lt;path&gt;</code>. Элемент<code>&lt;group&gt;</code> определяет набор траекторий или подгрупп, а элемент <code>&lt;path&gt;</code> – траектории для создания.</p>
<p>С помощью анимированных векторных элементов можно анимировать атрибуты элементов <code>&lt;group&gt;</code> и
<code>&lt;path&gt;</code>. Элемент<code>&lt;group&gt;</code> определяет набор траекторий
или подгрупп, а элемент <code>&lt;path&gt;</code> — траектории для прорисовки.</p>
<p>При определении векторного элемента, который требуется анимировать, используйте атрибут <code>android:name</code> для назначения уникальных имен группам или траекториям, чтобы на них можно было сослаться в определениях аниматора. Пример:</p>
<p>При определении векторного элемента, который требуется анимировать, используйте атрибут <code>android:name</code>
для назначения уникальных имен группам или траекториям, чтобы на них можно было сослаться в определениях аниматора.
Например:</p>
<pre>
&lt;!-- res/drawable/vectordrawable.xml -->
@@ -413,7 +501,8 @@ mAnimator.start();
&lt;/vector>
</pre>
<p>Определение анимированного векторного элемента ссылается на группы и траектории в векторном элементе, используя их имена:</p>
<p>Определение анимированного векторного элемента ссылается на группы и траектории в векторном элементе, используя их имена:
</p>
<pre>
&lt;!-- res/drawable/animvectordrawable.xml -->
@@ -428,7 +517,9 @@ mAnimator.start();
&lt;/animated-vector>
</pre>
<p>Определения анимации представляют объекты {@link android.animation.ObjectAnimator} или {@link android.animation.AnimatorSet}. Первый аниматор в этом примере поворачивает целевую группу на 360 градусов:</p>
<p>Определения анимации представляются объектами {@link android.animation.ObjectAnimator} или {@link
android.animation.AnimatorSet}. Первый аниматор в этом примере поворачивает целевую группу на 360 градусов:
</p>
<pre>
&lt;!-- res/anim/rotation.xml -->
@@ -439,7 +530,9 @@ mAnimator.start();
android:valueTo="360" />
</pre>
<p>Второй аниматор в этом примере преобразует траекторию векторного элемента из одной формы в другую. Для преобразования траектории должны быть совместимы: они должны содержать одинаковое количество команд, а также одинаковое количество параметров для каждой команды.</p>
<p>Второй аниматор в этом примере преобразует траекторию векторного элемента из одной формы в другую.
Для преобразования обе траектории должны быть совместимы: они должны содержать одинаковое количество команд, а также одинаковое количество параметров для каждой команды.
</p>
<pre>
&lt;!-- res/anim/path_morph.xml -->
@@ -453,4 +546,5 @@ mAnimator.start();
&lt;/set>
</pre>
<p>Дополнительные сведения представлены в справке по API для {@link android.graphics.drawable.AnimatedVectorDrawable}.</p>
<p>Дополнительные сведения представлены в справке по API для {@link
android.graphics.drawable.AnimatedVectorDrawable}.</p>

80
docs/html-intl/intl/ru/training/material/compatibility.jd
View File

@@ -20,42 +20,63 @@ page.title=Обеспечение совместимости
</div>
<p>Некоторые возможности Material Design, такие как тема Material Design и настраиваемые переходы, доступны только в Android 5.0 (уровень API 21) и более поздних версиях. Однако приложения можно разработать таким образом, чтобы эти функции были доступны при запуске на устройствах, поддерживающих Material Design, сохранив при этом совместимость приложений с устройствами под управлением более ранних выпусков Android.</p>
<p>Некоторые возможности Material Design, такие как "материальные" темы и настраиваемые переходы между операциями,
доступны только в Android 5.0 (уровень API 21) и более поздних версиях. Однако приложения можно разработать таким образом,
чтобы эти функции были доступны при запуске на устройствах, поддерживающих Material Design, сохранив при этом
совместимость приложений с устройствами под управлением более ранних выпусков Android.</p>
<h2 id="Theme">Определение альтернативных стилей</h2>
<p>Приложение можно настроить на использование темы Material Design на поддерживающих ее устройствах, а также на переключение на более старую тему при запуске этого приложения на устройствах под управлением более ранних версий ОС Android. Ниже описан порядок такой настройки.</p>
<p>Приложение можно настроить так, чтобы тема Material Design использовалась при работе на поддерживающих эту технологию устройствах,
а при запуске приложения на устройствах с более ранними версиями Android происходило переключение на старые варианты тем. Ниже описан порядок такой настройки.</p>
<ol>
<li>В файле <code>res/values/styles.xml</code> определите тему, наследующую более старую тему (например, Holo).</li>
<li>В файле <code>res/values-v21/styles.xml</code> определите тему с таким же именем, наследующую тему Material Design.</li>
<li>В файле
<code>res/values/styles.xml</code> определите тему, наследующую более старой теме (например, Holo).</li>
<li>В файле
<code>res/values-v21/styles.xml</code> определите тему с таким же именем, наследующую теме Material Design.</li>
<li>В файле манифеста укажите эту тему как тему приложения.</li>
</ol>
<p class="note"><strong>Примечание.</strong> Если в приложении используется тема Material Design, однако в нем отсутствует альтернативная тема, как предлагается выше, ваше приложение не будет запускаться на устройствах под управлением версий Android, предшествующих 5.0.
<p class="note"><strong>Примечание.</strong>
Если в приложении используется тема Material Design, но отсутствует определенная описанным способом альтернативная тема,
это приложение не будет запускаться на устройствах под управлением версий Android, предшествующих 5.0.
</p>
<h2 id="Layouts">Предоставление альтернативных макетов</h2>
<p>Если в создаваемых согласно рекомендациям Material Design макетах отсутствуют новые атрибуты XML, представленные в Android 5.0 (уровень API 21), такие макеты поддерживаются в предыдущих версиях ОС Android. В противном случае необходимо предоставить альтернативные макеты. Можно также предоставить альтернативные макеты для настройки внешнего вида приложения в более ранних версиях Android.</p>
<p>Если в создаваемых согласно рекомендациям Material Design макетах отсутствуют новые
атрибуты XML, представленные в Android 5.0 (уровень API 21),
такие макеты поддерживаются в предыдущих версиях ОС Android. В противном случае необходимо предоставить альтернативные макеты. Можно также предоставить
альтернативные макеты для настройки внешнего вида приложения в более ранних версиях Android.</p>
<p>Создайте файлы макета для Android 5.0 (уровень API 21) в <code>res/layout-v21/</code>, а также файлы альтернативного макета для более ранних версий Android (в <code>res/layout/</code>). Например, <code>res/layout/my_activity.xml</code> – это альтернативный макет для <code>res/layout-v21/my_activity.xml</code>.</p>
<p>Создайте файлы макета для Android 5.0 (уровень API 21) в <code>res/layout-v21/</code>,
а также файлы альтернативного макета для более ранних версий Android (в <code>res/layout/</code>).
Например, <code>res/layout/my_activity.xml</code> — это альтернативный макет для
<code>res/layout-v21/my_activity.xml</code>.</p>
<p>Чтобы сделать код более компактным, определите стили в <code>res/values/</code>, измените стили в <code>res/values-v21/</code> для новых API, а также используйте наследование стилей, определив основные стили в <code>res/values/</code> и задав наследование из них в <code>res/values-v21/</code>.</p>
<p>Чтобы сделать код более компактным, определите стили в <code>res/values/</code>, измените
стили в <code>res/values-v21/</code> для новых API, а также используйте наследование стилей,
определив основные стили в <code>res/values/</code> и задав наследование из них в <code>res/values-v21/</code>.</p>
<h2 id="SupportLib">Использование вспомогательной библиотеки</h2>
<p><a href="{@docRoot}tools/support-library/features.html#v7">Вспомогательные библиотеки v7</a> r21 и более поздних версий включают следующие функции Material Design:</p>
<p><a href="{@docRoot}tools/support-library/features.html#v7">Вспомогательные библиотеки v7</a>
r21 и более поздних версий включают следующие функции Material Design:</p>
<ul>
<li><a href="{@docRoot}training/material/theme.html">стили Material Design</a> для некоторых системных виджетов в случае применения одной из тем <code>Theme.AppCompat</code>;</li>
<li><a href="{@docRoot}training/material/theme.html#ColorPalette">атрибуты цветовой палитры темы</a> в темах <code>Theme.AppCompat</code>;</li>
<li>виджет {@link android.support.v7.widget.RecyclerView} для <a href="{@docRoot}training/material/lists-cards.html#RecyclerView">отображения коллекций данных</a>;</li>
<li>виджет {@link android.support.v7.widget.CardView} для <a href="{@docRoot}training/material/lists-cards.html#CardView">создания подсказок</a>;</li>
<li>класс {@link android.support.v7.graphics.Palette} для <a href="{@docRoot}training/material/drawables.html#ColorExtract">извлечения главных цветов на изображениях</a>.</li>
<li><a href="{@docRoot}training/material/theme.html">стили Material Design</a> для некоторых
системных виджетов в случае применения одной из тем <code>Theme.AppCompat</code>;</li>
<li><a href="{@docRoot}training/material/theme.html#ColorPalette">атрибуты цветовой палитры темы</a>
в темах <code>Theme.AppCompat</code>;</li>
<li>виджет {@link android.support.v7.widget.RecyclerView} для <a href="{@docRoot}training/material/lists-cards.html#RecyclerView">отображения коллекций
данных</a>;</li>
<li>виджет {@link android.support.v7.widget.CardView} для <a href="{@docRoot}training/material/lists-cards.html#CardView">создания карточек</a>;</li>
<li>класс {@link android.support.v7.graphics.Palette} для <a href="{@docRoot}training/material/drawables.html#ColorExtract">извлечения главных цветов
на изображениях</a>.</li>
</ul>
<h3>Системные виджеты</h3>
@@ -73,7 +94,8 @@ page.title=Обеспечение совместимости
<h3>Цветовая палитра</h3>
<p>Чтобы получить стили Material Design и настроить цветовую палитру с помощью вспомогательной библиотеки Android v7, примените одну из следующих тем <code>Theme.AppCompat</code>:</p>
<p>Чтобы получить стили Material Design и настроить цветовую палитру с помощью вспомогательной библиотеки
Android v7, примените одну из следующих тем <code>Theme.AppCompat</code>:</p>
<pre>
&lt;!-- extend one of the Theme.AppCompat themes -->
@@ -85,18 +107,23 @@ page.title=Обеспечение совместимости
&lt;/style>
</pre>
<h3>Списки и подсказки</h3>
<h3>Списки и карточки</h3>
<p>Виджеты {@link android.support.v7.widget.RecyclerView} и {@link android.support.v7.widget.CardView} имеются в более ранних версиях Android. Они находятся во вспомогательной библиотеке Android v7, и для них существуют следующие ограничения:</p>
<p>Виджеты {@link android.support.v7.widget.RecyclerView} и {@link
android.support.v7.widget.CardView} имеются в более ранних версиях Android. Они находятся во
вспомогательной библиотеке Android v7, и для них существуют следующие ограничения.</p>
<ul>
<li>В виджете {@link android.support.v7.widget.CardView} применяется программная реализация тени с помощью дополнительного заполнения.</li>
<li>Виджет {@link android.support.v7.widget.CardView} не выполняет обрезку своих дочерних представлений, пересекающихся со скругленными углами.</li>
<li>В виджете {@link android.support.v7.widget.CardView} применяется программная реализация тени
с помощью дополнительного отступа.</li>
<li>Виджет {@link android.support.v7.widget.CardView} не выполняет обрезку своих дочерних представлений,
пересекающихся со скругленными углами.</li>
</ul>
<h3>Зависимости</h3>
<p>Чтобы воспользоваться этими возможностями в версиях Android, предшествующих 5.0 (уровень API 21), включите в свой проект вспомогательную библиотеку Android v7 как <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">зависимость Gradle</a>:</p>
<p>Чтобы воспользоваться этими возможностями в версиях Android, предшествующих 5.0 (уровень API 21), включите в свой проект вспомогательную библиотеку
Android v7 как <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">зависимость Gradle</a>:</p>
<pre>
dependencies {
@@ -117,10 +144,12 @@ dependencies {
<li>анимации появления;</li>
<li>анимации по траектории;</li>
<li>векторные элементы;</li>
<li>Тонирование элементов дизайна.</li>
<li>тонирование элементов дизайна.</li>
</ul>
<p>Чтобы обеспечить совместимость приложения с более ранними версиями Android, проверьте системный параметр {@link android.os.Build.VERSION#SDK_INT version} во время запуска, прежде чем вызвать API любой из этих функций:</p>
<p>Чтобы обеспечить совместимость приложения с более ранними версиями Android, проверьте системный параметр {@link
android.os.Build.VERSION#SDK_INT version} во время запуска, прежде чем вызвать API любой из этих
функций:</p>
<pre>
// Check if we're running on Android 5.0 or higher
@@ -131,4 +160,9 @@ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
}
</pre>
<p class="note"><strong>Примечание.</strong> Чтобы указать версии Android, поддерживаемые вашим приложением, укажите в файле манифеста атрибуты <code>android:minSdkVersion</code> и <code>android:targetSdkVersion</code>. Чтобы использовать функции Material Design, которые имеются в Android 5.0, задайте для атрибута <code>android:targetSdkVersion</code> значение <code>21</code>. Дополнительные сведения представлены в <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">руководстве по API &lt;uses-sdk&gt;</a>.</p>
<p class="note"><strong>Примечание.</strong> Чтобы указать версии Android, поддерживаемые вашим приложением,
установите атрибуты <code>android:minSdkVersion</code> и <code>android:targetSdkVersion</code>
в файле манифеста. Чтобы использовать функции Material Design, которые имеются в Android 5.0, задайте
для атрибута <code>android:targetSdkVersion</code> значение <code>21</code>. Дополнительные сведения см.
в <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">руководстве по API
&lt;uses-sdk&gt;</a>.</p>

47
docs/html-intl/intl/ru/training/material/drawables.jd
View File

@@ -31,14 +31,22 @@ page.title=Работа с элементами дизайна
<h2 id="DrawableTint">Тонирование элементов дизайна</h2>
<p>В Android 5.0 (уровень API 21) и более поздних версий можно тонировать растровые изображения и изображения в формате NinePatch, определенные как альфа-маски. Для тонирования можно применять как цветовые ресурсы, так и атрибуты темы, которые разрешаются в цветовые ресурсы (например, <code>?android:attr/colorPrimary</code>). Обычно такие ресурсы создаются только один раз, после чего они автоматически окрашиваются для соответствия цветам темы.</p>
<p>В Android 5.0 (уровень API 21) и более поздних версий можно тонировать растровые изображения и изображения в формате NinePatch, определенные как
альфа-маски. Для тонирования можно применять как цветовые ресурсы, так и атрибуты темы, которые
разрешаются в цветовые ресурсы (например, <code>?android:attr/colorPrimary</code>). Обычно такие ресурсы создаются
только один раз, после чего они автоматически окрашиваются для соответствия цветам темы.</p>
<p>Тонирование можно применить к объектам {@link android.graphics.drawable.BitmapDrawable} и {@link android.graphics.drawable.NinePatchDrawable} с помощью метода {@code setTint()}. Также можно задать цвет и способ тонирования в макетах, используя для этого атрибуты <code>android:tint</code> и <code>android:tintMode</code>.</p>
<p>Тонирование можно применить к объектам {@link android.graphics.drawable.BitmapDrawable} и {@link
android.graphics.drawable.NinePatchDrawable} с помощью метода {@code setTint()}. Также можно
задать цвет и способ тонирования в макетах, используя для этого атрибуты <code>android:tint</code> и
<code>android:tintMode</code>.</p>
<h2 id="ColorExtract">Извлечение главных цветов на изображении</h2>
<p>Во вспомогательной библиотеке Android r21 и более поздних версий содержится класс {@link android.support.v7.graphics.Palette}, с помощью которого можно извлекать главные цвета на изображении. Данный класс позволяет извлекать следующие главные цвета:</p>
<p>Во вспомогательной библиотеке Android r21 и более поздних версий содержится класс {@link
android.support.v7.graphics.Palette},
с помощью которого можно извлекать следующие главные цвета на изображении:</p>
<ul>
<li>насыщенные цвета;</li>
@@ -49,36 +57,46 @@ page.title=Работа с элементами дизайна
<li>приглушенные светлые цвета.</li>
</ul>
<p>Для извлечения этих цветов передайте объект {@link android.graphics.Bitmap} в статический метод {@link android.support.v7.graphics.Palette#generate Palette.generate()} в фоновом потоке, где вы загружаете изображения. Если невозможно использовать этот поток, вместо этого вызовите метод {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} и укажите прослушиватель.</p>
<p>Для извлечения этих цветов передайте объект {@link android.graphics.Bitmap} в статический метод
{@link android.support.v7.graphics.Palette#generate Palette.generate()} в фоновом
потоке, где загружаются изображения. Если невозможно использовать этот поток, вместо этого вызовите метод
{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} и укажите
модуль прослушивания.</p>
<p>Извлечь главные цвета на изображении можно также с помощью методов get из класса <code>Palette</code>, таких как <code>Palette.getVibrantColor</code>.</p>
<p>Извлечь главные цвета на изображении можно также с помощью методов getter из класса
<code>Palette</code>, таких как <code>Palette.getVibrantColor</code>.</p>
<p>Чтобы использовать класс {@link android.support.v7.graphics.Palette} в своем проекте, добавьте в модуль своего приложения следующую <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">зависимость Gradle</a>:</p>
<p>Чтобы использовать класс {@link android.support.v7.graphics.Palette} в своем проекте, добавьте в модуль своего приложения следующую
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">зависимость Gradle</a>:
</p>
<pre>
dependencies {
...
compile 'com.android.support:palette-v7:21.0.+'
compile 'com.android.support:palette-v7:21.0.0'
}
</pre>
<p>Дополнительные сведения представлены в справке по API для класса {@link android.support.v7.graphics.Palette}.</p>
<p>Дополнительные сведения представлены в справке по API для класса {@link android.support.v7.graphics.Palette}
.</p>
<h2 id="VectorDrawables">Создание векторных элементов</h2>
<!-- video box -->
<a class="notice-developers-video"
href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
<div>
<h3>Видео</h3>
<p>Векторная графика в Android</p>
</div>
</a>
<p>В Android 5.0 (уровень API 21) и более поздних версий имеется возможность определить векторные элементы, которые можно масштабировать без ущерба для четкости. Для векторного изображения требуется лишь один файл ресурсов, тогда как для растровых изображений требуется отдельный файл ресурсов для каждого разрешения. Чтобы создать векторное изображение, укажите детали формы в XML-элементе <code>&lt;vector&gt;</code>.</p>
<p>В Android 5.0 (уровень API 21) и более поздних версий имеется возможность определить векторные элементы, которые можно масштабировать без ущерба для четкости.
Для векторного изображения требуется лишь один файл ресурсов, тогда как для растровых изображений необходим отдельный файл ресурсов для каждой плотности экрана.
Чтобы создать векторное изображение, укажите детали формы в XML-элементе <code>&lt;vector&gt;</code>.
</p>
<p>В примере ниже задается векторное изображение в форме сердца:</p>
<p>В следующем примере создается векторное изображение в форме сердца.</p>
<pre>
&lt;!-- res/drawable/heart.xml -->
@@ -102,4 +120,7 @@ href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
&lt;/vector>
</pre>
<p>Векторные изображения представлены в Android как объекты {@link android.graphics.drawable.VectorDrawable}. Дополнительные сведения о синтаксисе <code>pathData</code> представлены в <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">справке по траекториям SVG</a>. Дополнительные сведения об анимации свойств векторных элементов см. в разделе <a href="{@docRoot}training/material/animations.html#AnimVector">Анимация векторных элементов</a>.</p>
<p>Векторные изображения представлены в Android как объекты {@link android.graphics.drawable.VectorDrawable}.
Дополнительные сведения о синтаксисе <code>pathData</code> см. в <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">справке по траекториям SVG</a>. Дополнительные сведения
об анимации свойств векторных элементов см. в разделе
<a href="{@docRoot}training/material/animations.html#AnimVector">Анимация векторных элементов</a>.</p>

64
docs/html-intl/intl/ru/training/material/get-started.jd
View File

@@ -9,7 +9,7 @@ page.title=Начало работы
<li><a href="#ApplyTheme">Применение темы Material Design</a></li>
<li><a href="#Layouts">Разработка макетов</a></li>
<li><a href="#Depth">Установка высоты представлений</a></li>
<li><a href="#ListsCards">Создание списков и подсказок</a></li>
<li><a href="#ListsCards">Создание списков и карточек</a></li>
<li><a href="#Animations">Настройка анимации</a></li>
</ol>
<h2>См. также</h2>
@@ -33,27 +33,34 @@ page.title=Начало работы
<li style="margin-bottom:10px">
Установите <strong>высоту</strong> своих представлений для отбрасывания теней.</li>
<li style="margin-bottom:10px">
Используйте системные <strong>виджеты</strong> для списков и подсказок.</li>
Используйте системные <strong>виджеты</strong> для списков и карточек.</li>
<li style="margin-bottom:10px">
Настройте <strong>анимацию</strong> в своем приложении.</li>
</ol>
<h3>Обеспечение обратной совместимости</h3>
<p>В приложении можно реализовать множество функций Material Design и одновременно сохранить его совместимость с версиями Android, предшествующими версии 5.0. Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/compatibility.html">Обеспечение совместимости</a>.</p>
<p>В приложении можно реализовать множество функций Material Design и одновременно сохранить его совместимость с версиями Android, предшествующими версии 5.0.
Дополнительные сведения представлены на странице
<a href="{@docRoot}training/material/compatibility.html">Обеспечение совместимости</a>.</p>
<h3>Обновление приложения с помощью элементов Material Design</h3>
<h3>Обновление приложения с добавлением элементов Material Design</h3>
<p>Чтобы освежить существующее приложение с помощью функций и элементов Material Design, обновите макеты в соответствии с рекомендациями Material Design. Также не забудьте реализовать такие функции, как глубина, реакция на касание и анимация.</p>
<p>Чтобы дополнить существующее приложение функциями и элементами Material Design, обновите макеты в соответствии с рекомендациями Material Design.
Также не забудьте добавить в приложение функции глубины, реакции на касание и анимации.
</p>
<h3>Создание новых приложений с элементами Material Design</h3>
<p>При создании приложений с функциями Material Design следуйте <a href="http://www.google.com/design/spec">рекомендациям Material Design</a>, которые позволят вам получить целостное представление о принципах дизайна. При проектировании и разработке своего приложения следуйте инструкциям и используйте новые функциональные возможности платформы Android.</p>
<p>При создании приложений с "материальными" функциями следуйте <a href="http://www.google.com/design/spec">рекомендациям Material Design</a>, которые позволят вам получить целостное представление о новых принципах дизайна.
При проектировании и разработке своего приложения следуйте инструкциям и используйте новые функциональные возможности платформы Android.
</p>
<h2 id="ApplyTheme">Применение темы Material Design</h2>
<p>Чтобы применить тему Material Design в своем приложении, укажите стиль, который наследуется от <code>android:Theme.Material</code>:</p>
<p>Чтобы применить тему Material Design в своем приложении, укажите стиль, который наследует от
<code>android:Theme.Material</code>:</p>
<pre>
&lt;!-- res/values/styles.xml -->
@@ -65,15 +72,19 @@ page.title=Начало работы
&lt;/resources>
</pre>
<p>В теме Material Design содержатся обновленные системные виджеты, для которых можно настраивать цветовую палитру, а также анимации для реакции на касание и переходы. Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/theme.html">Использование темы Material Design</a>.</p>
<p>В теме Material Design содержатся обновленные системные виджеты, для которых можно настраивать цветовую палитру, а также стандартные анимации для реакции на касания и переходы.
Дополнительные сведения представлены в разделе
<a href="{@docRoot}training/material/theme.html">Использование темы Material Design</a>.</p>
<h2 id="Layouts">Разработка макетов</h2>
<p>Помимо применения и настройки темы Material Design, ваши макеты должны быть созданы в соответствии с <a href="http://www.google.com/design/spec">рекомендациями Material Design</a>. Особо внимание при разработке макетов следует обращать на следующие элементы:</p>
<p>Помимо применения и настройки темы Material Design, необходимо соответствие
<a href="http://www.google.com/design/spec">рекомендациям Material Design</a> используемых макетов. При разработке макетов необходимо контролировать следующие элементы:
</p>
<ul>
<li>сетка базовых линий;</li>
<li>сетки базовых линий;</li>
<li>контуры;</li>
<li>интервалы;</li>
<li>размер целевой области касания;</li>
@@ -81,9 +92,11 @@ page.title=Начало работы
</ul>
<h2 id="Depth">Установка высоты представлений</h2>
<h2 id="Depth">Определение высоты представлений</h2>
<p>Представления могут отбрасывать тени, и значение высоты определяет размер тени и порядок ее прорисовки. Чтобы установить высоту представления, используйте в макетах атрибут <code>android:elevation</code>:</p>
<p>Представления могут отбрасывать тени, и значение высоты определяет размер тени и порядок ее прорисовки.
Чтобы установить высоту представления, используйте в макетах атрибут
<code>android:elevation</code>:</p>
<pre>
&lt;TextView
@@ -95,14 +108,22 @@ page.title=Начало работы
android:elevation="5dp" />
</pre>
<p>С помощью нового свойства <code>translationZ</code> можно создавать анимации, которые отражают временные изменения в высоте представления. Изменения высоты могут быть полезны при <a href="{@docRoot}training/material/animations.html#ViewState">реагировании на сенсорные жесты</a>.</p>
<p>С помощью нового свойства <code>translationZ</code> можно создавать анимации, которые отражают временные изменения в высоте представления.
Изменения высоты могут быть полезны при
<a href="{@docRoot}training/material/animations.html#ViewState">реагировании на сенсорные
жесты</a>.</p>
<p>Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/shadows-clipping.html">Определение теней и обрезка представлений</a>.</p>
<p>Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/shadows-clipping.html">Определение теней и обрезка представлений</a>.
</p>
<h2 id="ListsCards">Создание списков и подсказок</h2>
<h2 id="ListsCards">Создание списков и карточек</h2>
<p>{@link android.support.v7.widget.RecyclerView} представляет собой более гибкую версию {@link android.widget.ListView}. Она поддерживает различные типы макетов и способствует повышению производительности. {@link android.support.v7.widget.CardView} обеспечивает единообразное отображение фрагментов информации внутри подсказок в разных приложениях. В следующем примере демонстрируется, как включить {@link android.support.v7.widget.CardView} в макет:</p>
<p>{@link android.support.v7.widget.RecyclerView} представляет собой более гибкую версию {@link
android.widget.ListView}. Она поддерживает различные типы макетов и способствует повышению производительности.
{@link android.support.v7.widget.CardView} обеспечивает единообразное отображение фрагментов информации внутри карточек в разных приложениях.
В следующем примере показано, как включить
{@link android.support.v7.widget.CardView} в макет:</p>
<pre>
&lt;android.support.v7.widget.CardView
@@ -114,12 +135,15 @@ page.title=Начало работы
&lt;/android.support.v7.widget.CardView>
</pre>
<p>Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/lists-cards.html">Создание списков и подсказок</a>.</p>
<p>Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/lists-cards.html">Создание списков и карточек</a>.
</p>
<h2 id="Animations">Настройка анимации</h2>
<p>В состав Android 5.0 (уровень API 21) входят новые API для создания в приложении настраиваемой анимации. Например, можно активировать переходы между операциями и задавать для операций конечный переход:</p>
<p>В состав Android 5.0 (уровень API 21) входят новые API для создания в приложении настраиваемой анимации.
Например, можно разрешать переходы между операциями и задавать для операций конечный переход:
</p>
<pre>
public class MyActivity extends Activity {
@@ -142,6 +166,6 @@ public class MyActivity extends Activity {
}
</pre>
<p>При запуске другой операции из этой операции активируется конечный переход.</p>
<p>При запуске одной операции из другой активируется конечный переход.</p>
<p>Подробные сведения о новых API для анимации см. в разделе <a href="{@docRoot}training/material/animations.html">Определение настраиваемой анимации</a>.</p>
<p>Подробные сведения о новых API для анимации см. в разделе <a href="{@docRoot}training/material/animations.html">Определение настраиваемой анимации</a>.</p>

32
docs/html-intl/intl/ru/training/material/index.jd
View File

@@ -1,33 +1,39 @@
page.title=Создание приложений с помощью Material Design
page.type=проектирование
page.image=images/material.png
page.metaDescription=Узнайте, как применить Material Design к своим приложениям.
page.title=Создание приложений с помощью Material Design
page.type=проектирование
page.image=images/cards/material_2x.png
page.metaDescription=Научитесь применять Material Design к своим приложениям.
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Зависимости и необходимые компоненты</h2>
<h2>Необходимые знания и компоненты</h2>
<ul>
<li>Android 5.0 (уровень API 21)</li>
<li>Android Studio 0.8</li>
</ul>
</div>
</div>
<p>Material Design представляет собой полное руководство по созданию визуальных, движущихся и интерактивных элементов для различных платформ и устройств. Чтобы применить элементы Material Design в своих приложениях Android, руководствуйтесь инструкциями в <a href="http://www.google.com/design/spec/material-design/introduction.html">спецификации Material Design</a>, а также воспользуйтесь новыми компонентами и функциями, которые доступны в Android 5.0 (уровень API 21).</p>
<p>Material Design представляет собой комплексную концепцию создания визуальных, движущихся и интерактивных элементов для различных платформ и устройств.
Чтобы применить элементы Material Design в своих приложениях Android,
руководствуйтесь инструкциями в
<a href="http://www.google.com/design/spec/material-design/introduction.html">спецификации Material
Design</a>, а также воспользуйтесь новыми компонентами и функциями, которые доступны в Android 5.0 (уровень API 21).
</p>
<p>Данный курс обучения посвящен созданию приложений Material Design с использованием следующих элементов:</p>
<p>Данный курс обучения посвящен созданию приложений Material Design, в ходе которого используются следующие элементы:</p>
<ul>
<li>тема Material Design;</li>
<li>виджеты для подсказок и списков;</li>
<li>виджеты для карточек и списков;</li>
<li>настраиваемые тени и обрезка представлений;</li>
<li>векторные элементы;</li>
<li>настраиваемая анимация.</li>
</ul>
<p>В этом курсе также рассматривается обеспечение обратной совместимости нового приложения, в котором используются функции Material Design, с версиями Android, предшествующими версии 5.0 (уровень API 21).</p>
<p>В этом курсе также рассматривается обеспечение обратной совместимости нового приложения, в котором используются функции Material Design, с версиями Android, предшествующими версии 5.0 (уровень API 21).
</p>
<h2>Уроки</h2>
@@ -38,8 +44,8 @@ page.metaDescription=Узнайте, как применить Material Design
<dt><a href="{@docRoot}training/material/theme.html">Использование темы Material Design</a></dt>
<dd>Узнайте, как применять стили Material Design в приложениях.</dd>
<dt><a href="{@docRoot}training/material/lists-cards.html">Создание списков и подсказок</a></dt>
<dd>Узнайте, как с помощью системных виджетов создавать единообразные списки и подсказки.</dd>
<dt><a href="{@docRoot}training/material/lists-cards.html">Создание списков и карточек</a></dt>
<dd>Узнайте, как с помощью системных виджетов создавать единообразные списки и карточки.</dd>
<dt><a href="{@docRoot}training/material/shadows-clipping.html">Определение теней и обрезка представлений</a></dt>
<dd>Узнайте, как устанавливать высоту представлений для создания настраиваемых теней, а также обрезать представления.</dd>
@@ -52,4 +58,4 @@ page.metaDescription=Узнайте, как применить Material Design
<dt><a href="{@docRoot}training/material/compatibility.html">Обеспечение совместимости</a></dt>
<dd>Узнайте, как обеспечить совместимость приложений с версиями платформы, предшествующими Android 5.0.</dd>
</dl>
</dl>

95
docs/html-intl/intl/ru/training/material/lists-cards.jd
View File

@@ -1,4 +1,4 @@
page.title=Создание списков и подсказок
page.title=Создание списков и карточек
@jd:body
@@ -7,7 +7,7 @@ page.title=Создание списков и подсказок
<h2>Содержание этого урока</h2>
<ol>
<li><a href="#RecyclerView">Создание списков</a></li>
<li><a href="#CardView">Создание подсказок</a></li>
<li><a href="#CardView">Создание карточек</a></li>
<li><a href="#Dependencies">Добавление зависимостей</a></li>
</ol>
<h2>См. также</h2>
@@ -19,28 +19,40 @@ page.title=Создание списков и подсказок
</div>
<p>Для создания в приложениях составных списков и подсказок с помощью стилей Material Design можно использовать виджеты {@link android.support.v7.widget.RecyclerView} и {@link android.support.v7.widget.CardView}.</p>
<p>Для создания в приложениях составных списков и карточек с помощью стилей Material Design можно использовать виджеты
{@link android.support.v7.widget.RecyclerView} и {@link android.support.v7.widget.CardView}.
</p>
<h2 id="RecyclerView">Создание списков</h2>
<p>Виджет {@link android.support.v7.widget.RecyclerView} представляет собой расширенную и более гибкую версию {@link android.widget.ListView}. Он является контейнером для отображения больших наборов данных, которые можно эффективно прокручивать, сохраняя при этом ограниченное количество представлений. Виджет {@link android.support.v7.widget.RecyclerView} рекомендуется использовать в случаях, когда имеются коллекции данных, элементы которых изменяются во время выполнения на основе действий пользователя или сетевых событий.</p>
<p>Виджет {@link android.support.v7.widget.RecyclerView} представляет собой расширенную и более гибкую версию {@link android.widget.ListView}.
Он является контейнером для отображения больших наборов данных, которые можно эффективно прокручивать, сохраняя при этом ограниченное количество представлений.
Виджет
{@link android.support.v7.widget.RecyclerView} рекомендуется использовать в случаях, когда имеются коллекции данных, элементы которых изменяются во время выполнения в зависимости от действий пользователя или сетевых событий.
</p>
<p>Класс {@link android.support.v7.widget.RecyclerView} упрощает отображение и обработку больших наборов данных за счет предоставления:</p>
<p>Класс {@link android.support.v7.widget.RecyclerView} упрощает отображение и обработку больших наборов данных с помощью следующих возможностей:
</p>
<ul>
<li>менеджеров макетов для размещения элементов;</li>
<li>анимации по умолчанию для операций с общими элементами, таких как удаление или добавление элементов.</li>
<li>стандартных анимаций для операций с общими элементами, таких как удаление или добавление элементов.</li>
</ul>
<p>Также предоставляются гибкие возможности определения настраиваемых менеджеров макетов и анимации для виджетов {@link android.support.v7.widget.RecyclerView}.</p>
<p>Также предоставляются гибкие возможности определения настраиваемых менеджеров макетов и анимации для виджетов {@link
android.support.v7.widget.RecyclerView}.</p>
<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" />
<p class="img-caption">
<strong>Рисунок 1</strong>. Виджет <code>RecyclerView</code>.
</p>
<p>Чтобы воспользоваться виджетом {@link android.support.v7.widget.RecyclerView}, необходимо определить адаптер и менеджер макетов. Для создания адаптера следует наследовать класс {@link android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter}. Характеристики реализации зависят от особенностей используемого набора данных и типа представлений. Дополнительные сведения представлены в <a href="#RVExamples">примерах</a> ниже.</p>
<p>Чтобы воспользоваться виджетом {@link android.support.v7.widget.RecyclerView}, необходимо определить адаптер и менеджер макетов.
Для создания адаптера необходимо наследовать класс {@link
android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter}. Характеристики реализации зависят от особенностей используемого набора данных и типа представлений.
Дополнительные сведения представлены в <a href="#RVExamples">примерах</a> ниже.
</p>
<div style="float:right">
<img src="{@docRoot}design/material/images/list_mail.png" alt="" width="250" height="426" />
@@ -49,25 +61,37 @@ page.title=Создание списков и подсказок
</p>
</div>
<p><strong>Менеджер макетов</strong> размещает представления элемента внутри {@link android.support.v7.widget.RecyclerView} и определяет порядок повторного использования представлений элемента, которые более не отображаются для пользователя. Чтобы повторно использовать (или <em>перезапустить</em>) представление, менеджер макетов может запросить адаптер заменить содержимое представления другим элементом из набора данных. Такой перезапуск представлений позволяет повысить производительность за счет того, что исключается создание ненужных представлений и выполнение ресурсоемких операций подстановки {@link android.app.Activity#findViewById findViewById()}.</p>
<p><strong>Менеджер макетов</strong> размещает представления элемента внутри {@link
android.support.v7.widget.RecyclerView} и определяет порядок повторного использования представлений элемента, которые перестают быть видимыми пользователю.
Чтобы повторно использовать (или <em>перезапустить</em>) представление, менеджер макетов может запросить адаптер заменить содержимое представления другим элементом из набора данных.
Такой перезапуск представлений позволяет повысить производительность за счет того, что исключается создание ненужных представлений и выполнение ресурсоемких операций поиска {@link android.app.Activity#findViewById findViewById()}.
</p>
<p>Виджет {@link android.support.v7.widget.RecyclerView} включает следующие встроенные менеджеры макетов:</p>
<ul>
<li>{@link android.support.v7.widget.LinearLayoutManager} для отображения элементов в виде списка с вертикальной или горизонтальной прокруткой;</li>
<li>{@link android.support.v7.widget.LinearLayoutManager} для отображения элементов в виде списка с вертикальной или горизонтальной прокруткой;
</li>
<li>{@link android.support.v7.widget.GridLayoutManager} для отображения элементов в виде сетки;</li>
<li>{@link android.support.v7.widget.StaggeredGridLayoutManager} для отображения элементов в виде шахматной сетки.</li>
</ul>
<p>Для создания менеджера макетов следует наследовать класс {@link android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager}.</p>
<p>Для создания менеджера макетов необходимо наследовать класс {@link
android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager}.</p>
<h3>Анимация</h3>
<p>По умолчанию анимация для добавления и удаления элементов включается в виджете {@link android.support.v7.widget.RecyclerView}. Для настройки такой анимации следует наследовать класс {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} и воспользоваться методом {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}.</p>
<p>По умолчанию анимация для добавления и удаления элементов включается в виджете {@link
android.support.v7.widget.RecyclerView}. Для настройки такой анимации следует наследовать класс
{@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} и воспользоваться методом
{@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}
.</p>
<h3 id="RVExamples">Примеры</h3>
<p>В следующем примере демонстрируется, как включить в макет виджет {@link android.support.v7.widget.RecyclerView}:</p>
<p>В следующем примере демонстрируется, как включить в макет виджет
{@link android.support.v7.widget.RecyclerView}:</p>
<pre>
&lt;!-- A RecyclerView with some commonly used attributes -->
@@ -78,7 +102,9 @@ page.title=Создание списков и подсказок
android:layout_height="match_parent"/>
</pre>
<p>После добавления виджета {@link android.support.v7.widget.RecyclerView} подключите дескриптор объекта, подключите его к менеджеру макетов, а затем подключите адаптер к данным, которые будут отображаться:</p>
<p>После добавления виджета {@link android.support.v7.widget.RecyclerView} подключите дескриптор объекта, подключите его к менеджеру макетов, а затем подключите адаптер к данным, которые будут отображаться:
</p>
<pre>
public class MyActivity extends Activity {
@@ -108,7 +134,10 @@ public class MyActivity extends Activity {
}
</pre>
<p>Адаптер обеспечивает доступ к элементам в наборе данных, создает представления для элементов и заменяет содержимое некоторых представлений новыми элементами данных, когда исходный элемент уже не отображается. Пример кода ниже представляет собой простую реализацию для набора данных, который состоит из массива строк, выведенного на экран с помощью виджетов {@link android.widget.TextView}:</p>
<p>Адаптер обеспечивает доступ к элементам в наборе данных, создает представления для элементов и заменяет содержимое некоторых представлений новыми элементами данных, когда исходный элемент уже не отображается.
Пример кода ниже является простой реализацией набора данных, который состоит из массива строк, выведенного на экран с помощью виджетов {@link android.widget.TextView}:
</p>
<pre>
public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
@@ -165,25 +194,35 @@ public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
<div style="float:right;margin-top:15px;margin-left:30px">
<img src="{@docRoot}design/material/images/card_travel.png" alt="" width="225" height="383">
<p class="img-caption" style="margin-left:12px">
<strong>Рисунок 3</strong>. Примеры подсказок.
<strong>Рисунок 3</strong>. Примеры карточек.
</p>
</div>
<h2 id="CardView">Создание подсказок</h2>
<h2 id="CardView">Создание карточек</h2>
<p>Виджет {@link android.support.v7.widget.CardView} является расширением класса {@link android.widget.FrameLayout} и позволяет отображать информацию внутри подсказок, которые будут выглядеть одинаково в рамках платформы. Виджеты {@link android.support.v7.widget.CardView} могут отбрасывать тени и иметь закругленные углы.</p>
<p>Виджет {@link android.support.v7.widget.CardView} является расширением класса {@link android.widget.FrameLayout}
и позволяет отображать информацию внутри карточек, которые будут выглядеть одинаково в рамках платформы. Виджеты {@link
android.support.v7.widget.CardView} могут отбрасывать тени и иметь закругленные углы.</p>
<p>Чтобы создать подсказку, отбрасывающую тень, воспользуйтесь атрибутом <code>card_view:cardElevation</code>. В Android 5.0 (уровень API 21) и более поздних версий виджет {@link android.support.v7.widget.CardView} использует реальную высоту и динамические тени, а в более ранних версиях виджет возвращается к программным теням. Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/compatibility.html">Обеспечение совместимости</a>.</p>
<p>Чтобы создать карточку, отбрасывающую тень, воспользуйтесь атрибутом <code>card_view:cardElevation</code>. В Android 5.0 (уровень API 21) и более поздних версий виджет
{@link android.support.v7.widget.CardView} использует реальную
высоту и динамические тени, а в более ранних версиях в виджете реализованы программные тени.
Дополнительные сведения представлены на странице <a href="{@docRoot}training/material/compatibility.html">Обеспечение
совместимости</a>.</p>
<p>Для настройки внешнего вида виджета {@link android.support.v7.widget.CardView} используйте следующие свойства:</p>
<p>Для настройки внешнего вида виджета
{@link android.support.v7.widget.CardView} используйте следующие свойства:</p>
<ul>
<li>Чтобы задать радиус скругления углов в макете, используйте атрибут <code>card_view:cardCornerRadius</code>.</li>
<li>Чтобы задать радиус скругления углов в программном коде, используйте метод <code>CardView.setRadius</code>.</li>
<li>Чтобы задать цвет фона подсказки, используйте атрибут <code>card_view:cardBackgroundColor</code>.</li>
<li>чтобы задать радиус скругления углов в макете, используйте атрибут <code>card_view:cardCornerRadius</code>;
</li>
<li>чтобы задать радиус скругления углов в программном коде, используйте метод <code>CardView.setRadius</code>;</li>
<li>чтобы задать цвет фона карточки, используйте атрибут <code>card_view:cardBackgroundColor</code>.
</li>
</ul>
<p>В следующем примере показано, как включить виджет {@link android.support.v7.widget.CardView} в макет:</p>
<p>В следующем примере показано, как включить виджет {@link android.support.v7.widget.CardView}
в макет:</p>
<pre>
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
@@ -212,7 +251,11 @@ public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
<h2 id="Dependencies">Добавление зависимостей</h2>
<p>Виджеты {@link android.support.v7.widget.RecyclerView} и {@link android.support.v7.widget.CardView} имеются во <a href="{@docRoot}tools/support-library/features.html#v7">вспомогательных библиотеках v7</a>. Чтобы использовать эти виджеты в своем проекте, добавьте в модуль приложения следующие <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">зависимости Gradle</a>:</p>
<p> Виджеты {@link android.support.v7.widget.RecyclerView} и {@link android.support.v7.widget.CardView}
входят во <a href="{@docRoot}tools/support-library/features.html#v7">вспомогательные
библиотеки v7</a>. Чтобы использовать эти виджеты в своем проекте, добавьте в модуль приложения следующие
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">зависимости Gradle</a>:
</p>
<pre>
dependencies {
@@ -220,4 +263,4 @@ dependencies {
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}
</pre>
</pre>

72
docs/html-intl/intl/ru/training/material/shadows-clipping.jd
View File

@@ -18,20 +18,29 @@ page.title=Определение теней и обрезка представ
</div>
</div>
<p>В Material Design представлена возможность настройки высоты элементов интерфейса. Высота позволяет пользователю понять относительную важность каждого элемента и сосредоточиться на выполнении необходимой задачи.</p>
<p>В Material Design появилась возможность настройки высоты элементов интерфейса. Высота позволяет пользователю понять относительную важность каждого элемента и сосредоточиться на выполнении поставленной задачи.
</p>
<p>Высота представления, выраженная с помощью свойства Z, определяет внешний вид его тени: представления с более высоким значением Z отбрасывают более мягкие тени большего размера. Представления с более высокими значениями Z перекрывают представления с более низкими значениями Z, однако значение Z не влияет на размер самого представления.</p>
<p>Высота представления, выраженная с помощью свойства Z, определяет внешний вид его тени: представления с более высоким значением Z отбрасывают более мягкие тени большего размера.
Представления с более высокими значениями Z перекрывают представления с более низкими значениями Z, однако значение Z не влияет на размер самого представления.
</p>
<p>Прорисовка теней выполняется родительским представлением, поэтому к приподнятому представлению можно применять стандартную операцию обрезки представления (по умолчанию представление обрезается своим родительским представлением).</p>
<p>Прорисовка теней выполняется родительским представлением, поэтому к приподнятому представлению можно применять стандартную операцию обрезки представления (по умолчанию представление обрезается своим родительским представлением).
</p>
<p>Установка высоты также полезна для создания анимации, когда виджеты временно поднимаются выше плоскости представления при выполнении какого-либо действия.</p>
<p>Установка высоты также полезна для создания анимации, когда виджеты временно поднимаются выше плоскости представления при выполнении какого-либо действия.
</p>
<p>Дополнительные сведения об установке высоты в Material Design представлены в статье <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Objects in 3D space</a>.</p>
<p>Дополнительные сведения об установке высоты в Material Design представлены на странице
<a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Объекты в трехмерном пространстве</a>.
</p>
<h2 id="Elevation">Установка высоты представления</h2>
<p>Значение Z для представления включает два компонента: <ul>
<p>Значение Z для представления включает два компонента:
<ul>
<li>высота: статический компонент;</li>
<li>смещение: динамический компонент, используемый для анимации.</li>
</ul>
@@ -41,20 +50,32 @@ page.title=Определение теней и обрезка представ
<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
<p class="img-caption"><strong>Рисунок 1</strong>. Тени для различной высоты представления.</p>
<p>Чтобы установить высоту представления в определении макета, используйте атрибут <code>android:elevation</code>. Чтобы установить высоту представления в программном коде операции, используйте метод{@link android.view.View#setElevation View.setElevation()}.</p>
<p>Чтобы установить высоту представления в определении макета, используйте атрибут <code>android:elevation</code>
. Чтобы установить высоту представления в программном коде операции, используйте метод
{@link android.view.View#setElevation View.setElevation()}.</p>
<p>Чтобы установить смещение представления, используйте метод {@link android.view.View#setTranslationZ View.setTranslationZ()}.</p>
<p>Чтобы установить смещение представления, используйте метод {@link android.view.View#setTranslationZ
View.setTranslationZ()}.</p>
<p>Новые методы {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} и {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} позволяют с легкостью анимировать изменение высоты представления. Дополнительные сведения представлены в справке по API для {@link android.view.ViewPropertyAnimator}, а также в руководстве по <a href="{@docRoot}guide/topics/graphics/prop-animation.html">анимации свойств</a> для разработчиков.</p>
<p>Новые методы {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} и {@link
android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} позволяют с легкостью анимировать изменение высоты представлений.
Дополнительные сведения см. в справке по API для
{@link android.view.ViewPropertyAnimator}, а также в руководстве по <a href="{@docRoot}guide/topics/graphics/prop-animation.html">анимации свойств</a> для разработчиков.
</p>
<p>Также можно воспользоваться {@link android.animation.StateListAnimator} для указания этих анимаций описательно. Это особенно полезно в тех случаях, когда состояние изменяется при анимации переключения, например, когда пользователь нажимает на кнопку. Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/animations.html#ViewState">Анимация изменений состояния представления</a>.</p>
<p>Также можно использовать класс {@link android.animation.StateListAnimator} для декларирования этих анимаций.
Это особенно полезно в тех случаях, когда анимация запускается при изменении состояния, например, когда пользователь нажимает на кнопку.
Дополнительные сведения см. в разделе
<a href="{@docRoot}training/material/animations.html#ViewState">Анимация изменений состояния представления</a>.</p>
<p>Значения Z измеряются в dp (пикселы, не зависящие от плотности).</p>
<p>Значения Z измеряются в dp (пиксели, не зависящие от плотности).</p>
<h2 id="Shadows">Настройка теней и контуров представления</h2>
<p>Границы фонового элемента представления определяют форму его тени по умолчанию. <strong>Контуры</strong> – это внешние границы графического объекта, они также определяют область ряби для реакции на касание.</p>
<p>Границы фонового элемента представления определяют форму его тени по умолчанию.
<strong>Контуры</strong> — это внешние границы графического объекта, они также определяют область ряби для отклика на касание.
</p>
<p>В примере ниже рассматривается это представление, определенное с помощью фонового элемента дизайна:</p>
@@ -77,23 +98,36 @@ page.title=Определение теней и обрезка представ
&lt;/shape>
</pre>
<p>Представление отбрасывает тень с закругленными углами, поскольку фоновый элемент дизайна определяет контур представления. Если указать настраиваемый контур, он будет переопределять форму тени по умолчанию для представления.</p>
<p>Представление отбрасывает тень с закругленными углами, поскольку контур представления определяется фоновым элементом дизайна.
Если указать настраиваемый контур, он будет переопределять стандартную форму тени для представления.</p>
<p>Порядок определения настраиваемого контура представления в программном коде<p>
<ol>
<li>Сначала следует наследовать класс {@link android.view.ViewOutlineProvider}.</li>
<li>Сначала наследуйте класс {@link android.view.ViewOutlineProvider}.</li>
<li>Затем переопределите метод {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li>
<li>Наконец, назначьте поставщика контуров для своего представления с помощью метода {@link android.view.View#setOutlineProvider View.setOutlineProvider()}.</li>
<li>Наконец, назначьте источник контуров для своего представления с помощью метода {@link
android.view.View#setOutlineProvider View.setOutlineProvider()}.</li>
</ol>
<p>Можно создавать овальные и прямоугольные контуры со скругленными углами, используя для этого методы класса {@link android.graphics.Outline}. Поставщик контуров по умолчанию получает контуры из фона представления. Чтобы представление не отбрасывало тень, задайте для поставщика контуров значение <code>null</code>.</p>
<p>Можно создавать овальные и прямоугольные контуры со скругленными углами, используя для этого методы класса
{@link android.graphics.Outline}. Стандартный источник контуров получает контуры из фона представления.
Чтобы представление не отбрасывало тень, задайте для источника контуров значение <code>null</code>.
</p>
<h2 id="Clip">Обрезка представления</h2>
<p>С помощью обрезки представлений можно с легкостью изменять их форму. Представление можно обрезать для обеспечения единообразия элементов дизайна. Также можно изменить форму представления в ответ на действия пользователя. С помощью метода {@link android.view.View#setClipToOutline View.setClipToOutline()} или атрибута <code>android:clipToOutline</code> представление можно обрезать по его контуру. Обрезать можно только прямоугольники, круги и скругленные прямоугольники, как определено в методе {@link android.graphics.Outline#canClip Outline.canClip()}.</p>
<p>С помощью обрезки представлений можно с легкостью изменять их форму. Представление можно обрезать для обеспечения единообразия элементов дизайна.
Также можно изменить форму представления в ответ на действия пользователя.
С помощью метода {@link android.view.View#setClipToOutline
View.setClipToOutline()} или атрибута <code>android:clipToOutline</code> представление можно обрезать по его контуру. Обрезать
можно только прямоугольники, круги и скругленные прямоугольники, как определено в методе
{@link android.graphics.Outline#canClip Outline.canClip()}.</p>
<p>Чтобы обрезать представление по форме элемента дизайна, установите элемент дизайна в качестве фона представления (как показано выше) и вызовите метод {@link android.view.View#setClipToOutline View.setClipToOutline()}.</p>
<p>Чтобы обрезать представление по форме элемента дизайна, установите этот элемент в качестве фона представления
(как показано выше) и вызовите метод {@link android.view.View#setClipToOutline View.setClipToOutline()}
.</p>
<p>Обрезка представления – довольно ресурсоемкая операция, поэтому не анимируйте форму, которую вы используете для обрезки представления. Для достижения этого эффекта используйте анимацию <a href="{@docRoot}training/material/animations.html#Reveal">эффекта появления</a>.</p>
<p>Обрезка представления — довольно ресурсоемкая операция, поэтому не анимируйте форму, которую вы используете для обрезки представления.
Для достижения требуемого эффекта используйте анимацию <a href="{@docRoot}training/material/animations.html#Reveal">эффекта появления</a>.</p>

48
docs/html-intl/intl/ru/training/material/theme.jd
View File

@@ -27,9 +27,12 @@ page.title=Использование темы Material Design
<li>анимация переходов между операциями.</li>
</ul>
<p>Внешний вид темы Material Design можно настроить с учетом фирменного стиля, воспользовавшись для этого цветовой палитрой. Можно изменить оттенок строки действий и строки состояния, используя атрибуты темы, как показано на <a href="#fig3">рисунке 3</a>.</p>
<p>Внешний вид темы Material Design можно настроить с учетом фирменного стиля, воспользовавшись для этого цветовой палитрой.
Можно изменить оттенок строки действий и строки состояния, используя атрибуты темы, как показано на <a href="#fig3">рисунке 3</a>.
</p>
<p>Системные виджеты отличаются новым дизайном и анимацией для реакции на касание. В своем приложении вы можете настроить цветовую палитру, анимацию реакции на касание и переходы между операциями.</p>
<p>Системные виджеты отличаются новым дизайном и анимацией отклика на касание. В своем приложении вы можете настроить цветовую палитру, анимацию отклика на касание и переходы между операциями.
</p>
<p>Тема Material Design задается следующими параметрами:</p>
@@ -39,7 +42,8 @@ page.title=Использование темы Material Design
<li><code>@android:style/Theme.Material.Light.DarkActionBar</code>.</li>
</ul>
<p>Список доступных стилей Material Design представлен в справке по API для {@link android.R.style R.style}.</p>
<p>Список доступных стилей Material Design см. в справке по API для
{@link android.R.style R.style}.</p>
<!-- two columns, dark/light material theme example -->
<div style="width:700px;margin-top:25px;margin-bottom:10px">
@@ -59,13 +63,18 @@ page.title=Использование темы Material Design
</div>
<p class="note">
<strong>Примечание.</strong> Тема Material Design доступна только в Android 5.0 (уровень API 21) и более поздних версий. Во <a href="{@docRoot}tools/support-library/features.html#v7">вспомогательных библиотеках v7</a> представлены темы со стилями Material Design для некоторых виджетов. Эти библиотеки также обеспечивают поддержку настройки цветовой палитры. Дополнительные сведения представлены в разделе <a href="{@docRoot}training/material/compatibility.html">Обеспечение совместимости</a>.
<strong>Примечание.</strong> Темы Material Design доступны только в ОС Android 5.0 (уровень API 21) и более поздних версий.
Во <a href="{@docRoot}tools/support-library/features.html#v7">вспомогательных библиотеках v7</a>
представлены темы со стилями Material Design для некоторых виджетов. Эти библиотеки также обеспечивают поддержку настройки цветовой палитры.
Дополнительные сведения см. на странице
<a href="{@docRoot}training/material/compatibility.html">Обеспечение совместимости</a>.
</p>
<h2 id="ColorPalette">Настройка цветовой палитры</h2>
<p style="margin-bottom:30px">Для настройки основных цветов в соответствии с фирменным стилем определите настраиваемые цвета с помощью атрибутов темы при наследовании от темы Material Design:</p>
<p style="margin-bottom:30px">Для настройки основных цветов в соответствии с фирменным стилем определите настраиваемые цвета с помощью атрибутов темы при наследовании от темы Material Design:
</p>
<pre>
&lt;resources>
@@ -91,17 +100,32 @@ page.title=Использование темы Material Design
<h2 id="StatusBar">Настройка строки состояния</h2>
<p>В теме Material Design можно с легкостью настроить строку состояния, указав нужный цвет в соответствии с фирменным стилем и задав достаточную контрастность для отображения белых значков состояния. Чтобы задать настраиваемый цвет для строки состояния, воспользуйтесь атрибутом <code>android:statusBarColor</code> при наследовании темы Material Design. По умолчанию параметр <code>android:statusBarColor</code> наследует значение <code>android:colorPrimaryDark</code>.</p>
<p>В теме Material Design можно с легкостью настроить строку состояния, указав нужный цвет в соответствии с фирменным стилем и задав достаточную контрастность для отображения белых значков состояния.
Чтобы установить настраиваемый цвет для строки состояния, воспользуйтесь атрибутом <code>android:statusBarColor</code> при наследовании темы Material Design.
<p>Кроме того, можно самостоятельно разместить элемент за строкой состояния. Например, если требуется наложить прозрачную строку состояния поверх фотографии, применив еле уловимый темный градиент, чтобы были видны белые значки состояния. Для этого задайте для атрибута <code>android:statusBarColor</code> значение <code>&#64;android:color/transparent</code> и настройте флаги окна требуемым образом. Также можно воспользоваться методом {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} для применения анимации или эффекта постепенного исчезновения.</p>
<p class="note">
<strong>Примечание.</strong> Строка состояния почти всегда должна иметь четкую границу, отделяющую ее от основной панели инструментов, за исключением случаев, когда за этими панелями от края и до края экрана отображается большое количество изображений или мультимедийный контент, а также в случае, когда вы используете градиент, чтобы обеспечить отображение значков.
По умолчанию параметр <code>android:statusBarColor</code> наследует значение <code>android:colorPrimaryDark</code>.
</p>
<p>При настройке панели навигации и строки состояния сделайте их прозрачными либо измените только строку состояния. Во всех остальных случаях панель навигации должна оставаться черной.</p>
<p>Кроме того, можно самостоятельно разместить элемент за строкой состояния. Например, если требуется наложить прозрачную строку состояния поверх фотографии, применив еле уловимый темный градиент, чтобы были видны белые значки состояния.
Для этого задайте для атрибута <code>android:statusBarColor</code> значение
<code>&#64;android:color/transparent</code> и настройте флаги окна требуемым образом. Также можно воспользоваться
методом {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} для применения анимации или эффекта постепенного исчезания.
</p>
<p class="note">
<strong>Примечание.</strong> Строка состояния почти всегда должна иметь четкую границу, отделяющую ее от основной панели инструментов, за исключением случаев, когда за этими панелями от края и до края экрана отображается большое количество изображений или мультимедийный контент, а также в случае, когда вы используете градиент, чтобы обеспечить видимость значков.
</p>
<p>При настройке панели навигации и строки состояния сделайте их прозрачными либо измените только строку состояния.
Во всех остальных случаях панель навигации должна оставаться черной.</p>
<h2 id="Inheritance">Отдельные представления темы</h3>
<p>Элементы в определениях макета XML могут задавать атрибут <code>android:theme</code>, который ссылается на ресурс темы. Этот атрибут изменяет тему для элемента и любых дочерних элементов, что удобно для изменения цветовых палитр темы в определенной области интерфейса.</p>
<p>Элементы в определениях макета XML могут задавать атрибут <code>android:theme</code>, который ссылается на ресурс темы.
Этот атрибут изменяет тему для элемента и любых дочерних элементов,
что можно использовать для изменения цветовых палитр темы в определенной области интерфейса.
</p>

185
docs/html-intl/intl/vi/design/material/index.jd Normal file
View File

@@ -0,0 +1,185 @@
page.title=Material Design cho Android
page.tags=Material,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>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>

550
docs/html-intl/intl/vi/training/material/animations.jd Normal file
View File

@@ -0,0 +1,550 @@
page.title=Định nghĩa Hoạt hình Tùy chỉnh
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Bài học này hướng dẫn bạn cách</h2>
<ol>
<li><a href="#Touch">Tùy chỉnh Phản hồi Chạm</a></li>
<li><a href="#Reveal">Sử dụng Hiệu ứng Lộ ra</a></li>
<li><a href="#Transitions">Tùy chỉnh Chuyển tiếp Hoạt động</a></li>
<li><a href="#ViewState">Tạo Hiệu ứng Hoạt hình Thay đổi Trạng thái Xem</a></li>
<li><a href="#AnimVector">Tạo Hiệu ứng Hoạt hình Nội dung vẽ được Véc-tơ</a></li>
</ol>
<h2>Bạn cũng nên đọc</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Đặc tả phong cách Material Design</a></li>
<li><a href="{@docRoot}design/material/index.html">Material Design trên Android</a></li>
</ul>
</div>
</div>
<p>Hoạt hình theo phong cách material design phản hồi hành động của người dùng và cung cấp
tính liên tục trực quan khi người dùng tương tác với ứng dụng của bạn. Giao diện material cung cấp một số hoạt hình
mặc định cho các nút và chuyển tiếp hoạt động, và Android 5.0 (API mức 21) và cao hơn cho phép bạn tùy chỉnh
những hoạt hình này và tạo các hoạt hình mới:</p>
<ul>
<li>Phản hồi chạm</li>
<li>Lộ ra Vòng tròn</li>
<li>Chuyển tiếp hoạt động</li>
<li>Chuyển động cong</li>
<li>Thay đổi trạng thái xem</li>
</ul>
<h2 id="Touch">Tùy chỉnh Phản hồi Chạm</h2>
<p>Phản hồi chạm trong Material Design đưa ra một xác nhận trực quan tức thời tại
điểm tiếp xúc khi người dùng tương tác với các phần tử UI. Hoạt hình phản hồi chạm mặc định
cho nút sẽ sử dụng lớp {@link android.graphics.drawable.RippleDrawable} mới để chuyển tiếp
giữa các trạng thái khác nhau bằng hiệu ứng gợn sóng.</p>
<p>Trong hầu hết trường hợp, bạn nên áp dụng tính năng này trong tệp XML dạng xem của mình bằng cách chỉ định nền
dạng xem là:</p>
<ul>
<li><code>?android:attr/selectableItemBackground</code> cho gợn sóng có giới hạn.</li>
<li><code>?android:attr/selectableItemBackgroundBorderless</code> cho gợn sóng lan ra ngoài
dạng xem. Hiệu ứng sẽ được vẽ lên và được giới hạn bởi dạng xem mẹ gần nhất có nền
không rỗng.</li>
</ul>
<p class="note"><strong>Lưu ý:</strong> <code>selectableItemBackgroundBorderless</code> là một thuộc tính
mới được giới thiệu trong API mức 21.</p>
<p>Hoặc, bạn có thể định nghĩa {@link android.graphics.drawable.RippleDrawable}
làm tài nguyên XML bằng cách sử dụng phần tử <code>ripple</code>.</p>
<p>Bạn có thể gán một màu cho các đối tượng {@link android.graphics.drawable.RippleDrawable}. Để thay đổi
màu phản hồi chạm mặc định, hãy sử dụng thuộc tính <code>android:colorControlHighlight</code>
của chủ đề.</p>
<p>Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho lớp {@link
android.graphics.drawable.RippleDrawable}.</p>
<h2 id="Reveal">Sử dụng Hiệu ứng Lộ ra</h2>
<p>Hoạt hình lộ ra đảm bảo tính liên tục trực quan cho người dùng khi bạn hiện hoặc ẩn một nhóm phần tử
UI. Phương thức {@link android.view.ViewAnimationUtils#createCircularReveal
ViewAnimationUtils.createCircularReveal()} cho phép bạn tạo hiệu ứng hoạt hình một vòng tròn cắt hình
để lộ ra hoặc ẩn một dạng xem.</p>
<p>Để lộ ra một dạng xem ẩn trước đó bằng hiệu ứng này:</p>
<pre>
// previously invisible view
View myView = findViewById(R.id.my_view);
// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;
// get the final radius for the clipping circle
int finalRadius = Math.max(myView.getWidth(), myView.getHeight());
// create the animator for this view (the start radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(myView, cx, cy, 0, finalRadius);
// make the view visible and start the animation
myView.setVisibility(View.VISIBLE);
anim.start();
</pre>
<p>Để ẩn một dạng xem hiển thị trước đó bằng hiệu ứng này:</p>
<pre>
// previously visible view
final View myView = findViewById(R.id.my_view);
// get the center for the clipping circle
int cx = (myView.getLeft() + myView.getRight()) / 2;
int cy = (myView.getTop() + myView.getBottom()) / 2;
// get the initial radius for the clipping circle
int initialRadius = myView.getWidth();
// create the animation (the final radius is zero)
Animator anim =
ViewAnimationUtils.createCircularReveal(myView, cx, cy, initialRadius, 0);
// make the view invisible when the animation is done
anim.addListener(new AnimatorListenerAdapter() {
&#64;Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
myView.setVisibility(View.INVISIBLE);
}
});
// start the animation
anim.start();
</pre>
<h2 id="Transitions">Tùy chỉnh Chuyển tiếp Hoạt động</h2>
<!-- shared transition video -->
<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/material/videos/ContactsAnim.webm">
<source src="{@docRoot}design/material/videos/ContactsAnim.ogv">
</video>
</div>
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
<p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>Hình 1</strong> - Chuyển tiếp
với những phần tử chung.</p>
<em>Để phát lại phim, nhấp vào màn hình thiết bị</em>
</div>
</div>
<p>Chuyển tiếp hoạt động trong các ứng dụng theo phong cách material design cung cấp kết nối trực quan giữa các trạng thái khác nhau
thông qua chuyển động và chuyển đổi giữa những phần tử hay dùng. Bạn có thể quy định hoạt hình tùy chỉnh cho
các chuyển tiếp ra vào và chuyển tiếp phần tử chung giữa các hoạt động.</p>
<ul>
<li>Chuyển tiếp <strong>vào</strong> xác định các dạng xem trong một hoạt động sẽ vào cảnh đó như thế nào.
Ví dụ, trong chuyển tiếp vào dạng <em>nổ tung</em>, dạng xem sẽ vào cảnh từ bên ngoài
và bay về phía chính giữa màn hình.</li>
<li>Chuyển tiếp <strong>ra</strong> xác định các dạng xem trong một hoạt động sẽ ra khỏi cảnh như thế nào. Ví
dụ, trong chuyển tiếp ra kiểu <em>nổ tung</em>, dạng xem sẽ ra khỏi cảnh từ
trung tâm.</li>
<li>Chuyển tiếp <strong>phần tử chung</strong> xác định các dạng xem chung giữa hai hoạt động
sẽ chuyển tiếp như thế nào giữa những hoạt động này. Ví dụ, nếu hai hoạt động có cùng
hình ảnh ở các vị trí và kích cỡ khác nhau, chuyển tiếp phần tử chung <em>changeImageTransform</em>
sẽ thể hiện và co giãn hình ảnh một cách mượt mà giữa những hoạt động này.</li>
</ul>
<p>Android 5.0 (API mức 21) hỗ trợ những chuyển tiếp ra vào sau:</p>
<ul>
<li><em>nổ tung</em> - Di chuyển các dạng xem vào hoặc ra khỏi chính giữa cảnh.</li>
<li><em>trượt</em> - Di chuyển các dạng xem vào hoặc ra từ một trong các mép của cảnh.</li>
<li><em>mờ dần</em> - Thêm hoặc gỡ bỏ dạng xem khỏi cảnh bằng cách thay đổi độ mờ đục của nó.</li>
</ul>
<p>Bất cứ chuyển tiếp nào mở rộng lớp {@link android.transition.Visibility} đều được hỗ trợ
như một chuyển tiếp vào hoặc ra. Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho lớp
{@link android.transition.Transition}.</p>
<p>Android 5.0 (API mức 21) cũng hỗ trợ những chuyển tiếp phần tử chung này:</p>
<ul>
<li><em>changeBounds</em> - Tạo hiệu ứng hoạt hình các thay đổi trong giới hạn bố trí của dạng xem mục tiêu.</li>
<li><em>changeClipBounds</em> - Tạo hiệu ứng hoạt hình các thay đổi trong giới hạn cắt hình của dạng xem mục tiêu.</li>
<li><em>changeTransform</em> - Tạo hiệu ứng hoạt hình các thay đổi về co giãn và xoay dạng xem mục tiêu.</li>
<li><em>changeImageTransform</em> - Tạo hiệu ứng hoạt hình các thay đổi về kích cỡ và co giãn của ảnh mục tiêu.</li>
</ul>
<p>Khi bạn cho phép chuyển tiếp hoạt động trong ứng dụng của mình, chuyển tiếp mờ dần chéo cross-fading
mặc định sẽ được kích hoạt giữa các hoạt động ra vào.</p>
<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
<p class="img-caption">
  <strong>Hình 2</strong> - Chuyển tiếp cảnh với một phần tử chung.
</p>
<h3>Quy định chuyển tiếp tùy chỉnh</h3>
<p>Trước tiên, cho phép chuyển tiếp nội dung cửa sổ bằng thuộc tính <code>android:windowContentTransitions</code>
khi bạn định nghĩa một kiểu kế thừa từ chủ đề material. Bạn cũng có thể quy định chuyển tiếp
ra, vào và phần tử chung trong định nghĩa kiểu của mình:</p>
<pre>
&lt;style name="BaseAppTheme" parent="android:Theme.Material">
&lt;!-- enable window content transitions -->
&lt;item name="android:windowContentTransitions">true&lt;/item>
&lt;!-- specify enter and exit transitions -->
&lt;item name="android:windowEnterTransition">@transition/explode&lt;/item>
&lt;item name="android:windowExitTransition">@transition/explode&lt;/item>
&lt;!-- specify shared element transitions -->
&lt;item name="android:windowSharedElementEnterTransition">
&#64;transition/change_image_transform&lt;/item>
&lt;item name="android:windowSharedElementExitTransition">
&#64;transition/change_image_transform&lt;/item>
&lt;/style>
</pre>
<p>Chuyển tiếp <code>change_image_transform</code> trong ví dụ này được định nghĩa như sau:</p>
<pre>
&lt;!-- res/transition/change_image_transform.xml -->
&lt;!-- (see also Shared Transitions below) -->
&lt;transitionSet xmlns:android="http://schemas.android.com/apk/res/android">
&lt;changeImageTransform/>
&lt;/transitionSet>
</pre>
<p>Phần tử <code>changeImageTransform</code> tương ứng với lớp
{@link android.transition.ChangeImageTransform}. Để biết thêm thông tin, hãy xem tài liệu tham khảo API
cho {@link android.transition.Transition}.</p>
<p>Thay vào đó, để cho phép chuyển tiếp nội dung cửa sổ trong mã của bạn, hãy gọi phương thức
{@link android.view.Window#requestFeature Window.requestFeature()}:</p>
<pre>
// inside your activity (if you did not enable transitions in your theme)
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
// set an exit transition
getWindow().setExitTransition(new Explode());
</pre>
<p>Để quy định chuyển tiếp trong mã của bạn, hãy gọi những phương thức này bằng đối tượng {@link
android.transition.Transition}:</p>
<ul>
<li>{@link android.view.Window#setEnterTransition Window.setEnterTransition()}</li>
<li>{@link android.view.Window#setExitTransition Window.setExitTransition()}</li>
<li>{@link android.view.Window#setSharedElementEnterTransition
Window.setSharedElementEnterTransition()}</li>
<li>{@link android.view.Window#setSharedElementExitTransition
Window.setSharedElementExitTransition()}</li>
</ul>
<p>Phương thức {@link android.view.Window#setExitTransition setExitTransition()} và {@link
android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} định nghĩa
chuyển tiếp ra cho hoạt động gọi. Phương thức {@link android.view.Window#setEnterTransition
setEnterTransition()} và {@link android.view.Window#setSharedElementEnterTransition
setSharedElementEnterTransition()} định nghĩa chuyển tiếp vào cho hoạt động được gọi.</p>
<p>Để có đầy đủ hiệu ứng của một chuyển tiếp, bạn phải cho phép chuyển tiếp nội dung cửa sổ trên cả hoạt động
gọi và được gọi. Nếu không, hoạt động gọi sẽ bắt đầu chuyển tiếp ra,
nhưng khi đó bạn sẽ thấy chuyển tiếp cửa sổ (như co giãn và mờ dần).</p>
<p>Để bắt đầu một chuyển tiếp vào ngay khi có thể, hãy sử dụng phương thức
{@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()}
trên hoạt động được gọi. Nó cho phép bạn có chuyển tiếp vào ấn tượng hơn.</p>
<h3>Bắt đầu một hoạt động bằng chuyển tiếp</h3>
<p>Nếu bạn cho phép chuyển tiếp và đặt chuyển tiếp ra cho một hoạt động, chuyển tiếp sẽ được
kích hoạt khi bạn khởi chạy một hoạt động khác như sau:</p>
<pre>
startActivity(intent,
ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
</pre>
<p>Nếu bạn đặt một chuyển tiếp vào cho hoạt động thứ hai, chuyển tiếp này cũng được kích hoạt khi hoạt động
bắt đầu. Để vô hiệu hoá chuyển tiếp khi bạn bắt đầu một hoạt động khác, hãy cung cấp
một nhóm tùy chọn <code>null</code>.</p>
<h3>Bắt đầu một hoạt động bằng một phần tử chung</h3>
<p>Để tạo một hoạt hình chuyển tiếp màn hình giữa hai hoạt động có một phần tử chung:</p>
<ol>
<li>Cho phép chuyển tiếp nội dung cửa sổ trong chủ đề của bạn.</li>
<li>Quy định một chuyển tiếp phần tử chung trong kiểu của bạn.</li>
<li>Định nghĩa chuyển tiếp của bạn dưới dạng một tài nguyên XML.</li>
<li>Gán một tên chung cho các phần tử chung ở cả hai bố trí bằng thuộc tính
<code>android:transitionName</code>.</li>
<li>Sử dụng phương thức {@link android.app.ActivityOptions#makeSceneTransitionAnimation
ActivityOptions.makeSceneTransitionAnimation()}.</li>
</ol>
<pre>
// get the element that receives the click event
final View imgContainerView = findViewById(R.id.img_container);
// get the common element for the transition in this activity
final View androidRobotView = findViewById(R.id.image_small);
// define a click listener
imgContainerView.setOnClickListener(new View.OnClickListener() {
&#64;Override
public void onClick(View view) {
Intent intent = new Intent(this, Activity2.class);
// create the transition animation - the images in the layouts
// of both activities are defined with android:transitionName="robot"
ActivityOptions options = ActivityOptions
.makeSceneTransitionAnimation(this, androidRobotView, "robot");
// start the new activity
startActivity(intent, options.toBundle());
}
});
</pre>
<p>Đối với các dạng xem động dùng chung mà bạn khởi tạo trong mã của mình, hãy sử dụng phương thức
{@link android.view.View#setTransitionName View.setTransitionName()} để quy định một
tên phần tử chung trong cả hai hoạt động.</p>
<p>Để đảo ngược hoạt hình chuyển tiếp cảnh khi bạn kết thúc hoạt động thứ hai, hãy gọi phương thức
{@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()}
thay vì {@link android.app.Activity#finish Activity.finish()}.</p>
<h3>Bắt đầu một hoạt động bằng nhiều phần tử chung</h3>
<p>Để tạo một hoạt hình chuyển tiếp cảnh giữa hai hoạt động có nhiều hơn một phần tử
chung, hãy định nghĩa các phần tử chung trong cả hai bố trí bằng thuộc tính <code>android:transitionName</code>
(hoặc sử dụng phương thức {@link android.view.View#setTransitionName View.setTransitionName()}
trong cả hai hoạt động), và tạo một đối tượng {@link android.app.ActivityOptions} như sau:</p>
<pre>
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
Pair.create(view1, "agreedName1"),
Pair.create(view2, "agreedName2"));
</pre>
<h2 id="CurvedMotion">Sử dụng Chuyển động Cong</h2>
<p>Hoạt hình theo phong cách material design phụ thuộc vào đường cong làm mẫu hình nội suy thời gian
và chuyển động không gian. Với Android 5.0 (API mức 21) trở lên, bạn có thể định nghĩa đường cong định thời tùy chỉnh và
mẫu hình chuyển động cong cho hoạt hình.</p>
<p>Lớp {@link android.view.animation.PathInterpolator} là một hàm nội suy mới dựa trên đường cong
Bézier hoặc đối tượng {@link android.graphics.Path}. Hàm nội suy này quy định một đường cong chuyển động
trong một hình vuông 1x1, với các điểm neo tại (0,0) và (1,1) cùng các điểm kiểm soát được quy định bằng cách sử dụng
các tham đối của hàm dựng. Bạn cũng có thể định nghĩa một hàm nội suy đường dẫn dưới dạng tài nguyên XML:</p>
<pre>
&lt;pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
android:controlX1="0.4"
android:controlY1="0"
android:controlX2="1"
android:controlY2="1"/>
</pre>
<p>Hệ thống cung cấp tài nguyên XML cho ba đường cong cơ bản trong đặc tả
material design:</p>
<ul>
<li><code>&#64;interpolator/fast_out_linear_in.xml</code></li>
<li><code>&#64;interpolator/fast_out_slow_in.xml</code></li>
<li><code>&#64;interpolator/linear_out_slow_in.xml</code></li>
</ul>
<p>Bạn có thể chuyển một đối tượng {@link android.view.animation.PathInterpolator} tới phương thức {@link
android.animation.Animator#setInterpolator Animator.setInterpolator()}.</p>
<p>Lớp {@link android.animation.ObjectAnimator} có các hàm dựng mới cho phép bạn tạo hiệu ứng hoạt hình
cho các tọa độ dọc theo một đường dẫn bằng hai hoặc nhiều thuộc tính đồng thời. Ví dụ, trình tạo hoạt hình sau
sử dụng một đối tượng {@link android.graphics.Path} để tạo hiệu ứng hoạt hình cho thuộc tính X và Y của một dạng xem:</p>
<pre>
ObjectAnimator mAnimator;
mAnimator = ObjectAnimator.ofFloat(view, View.X, View.Y, path);
...
mAnimator.start();
</pre>
<h2 id="ViewState">Tạo Hiệu ứng Hoạt hình Thay đổi Trạng thái Xem</h2>
<p>Lớp {@link android.animation.StateListAnimator} cho phép bạn định nghĩa trình tạo hoạt hình để chạy khi
trạng thái của dạng xem thay đổi. Ví dụ sau cho biết cách định nghĩa một {@link
android.animation.StateListAnimator} dưới dạng tài nguyên XML:</p>
<pre>
&lt;!-- animate the translationZ property of a view when pressed -->
&lt;selector xmlns:android="http://schemas.android.com/apk/res/android">
&lt;item android:state_pressed="true">
&lt;set>
&lt;objectAnimator android:propertyName="translationZ"
android:duration="@android:integer/config_shortAnimTime"
android:valueTo="2dp"
android:valueType="floatType"/>
&lt;!-- you could have other objectAnimator elements
here for "x" and "y", or other properties -->
&lt;/set>
&lt;/item>
&lt;item android:state_enabled="true"
android:state_pressed="false"
android:state_focused="true">
&lt;set>
&lt;objectAnimator android:propertyName="translationZ"
android:duration="100"
android:valueTo="0"
android:valueType="floatType"/>
&lt;/set>
&lt;/item>
&lt;/selector>
</pre>
<p>Để gắn kèm hoạt hình trạng thái dạng xem tùy chỉnh vào một dạng xem, hãy định nghĩa một trình tạo hoạt hình bằng cách sử dụng phần tử
<code>selector</code> trong một tệp tài nguyên XML như trong ví dụ này, và gán nó cho dạng xem
của bạn bằng thuộc tính <code>android:stateListAnimator</code>. Để gán một trình tạo hoạt hình danh sách trạng thái
cho một dạng xem trong mã của bạn, hãy sử dụng phương thức {@link android.animation.AnimatorInflater#loadStateListAnimator
AnimationInflater.loadStateListAnimator()} và gán trình tạo hoạt hình cho dạng xem của bạn bằng phương thức
{@link android.view.View#setStateListAnimator View.setStateListAnimator()}.</p>
<p>Khi chủ đề của bạn mở rộng ra chủ đề material, các nút sẽ có hoạt hình Z theo mặc định. Để tránh hành vi
này trong nút của bạn, hãy đặt thuộc tính <code>android:stateListAnimator</code> thành
<code>@null</code>.</p>
<p>Lớp {@link android.graphics.drawable.AnimatedStateListDrawable} cho phép bạn tạo các nội dung vẽ được
để hiển thị hoạt hình giữa các thay đổi trạng thái của dạng xem được liên kết. Một số widget hệ thống trong
Android 5.0 sử dụng những hoạt hình này theo mặc định. Ví dụ sau cho biết cách
cách định nghĩa {@link android.graphics.drawable.AnimatedStateListDrawable} dưới dạng tài nguyên XML:</p>
<pre>
&lt;!-- res/drawable/myanimstatedrawable.xml -->
&lt;animated-selector
xmlns:android="http://schemas.android.com/apk/res/android">
&lt;!-- provide a different drawable for each state-->
&lt;item android:id="@+id/pressed" android:drawable="@drawable/drawableP"
android:state_pressed="true"/>
&lt;item android:id="@+id/focused" android:drawable="@drawable/drawableF"
android:state_focused="true"/>
&lt;item android:id="@id/default"
android:drawable="@drawable/drawableD"/>
&lt;!-- specify a transition -->
&lt;transition android:fromId="@+id/default" android:toId="@+id/pressed">
&lt;animation-list>
&lt;item android:duration="15" android:drawable="@drawable/dt1"/>
&lt;item android:duration="15" android:drawable="@drawable/dt2"/>
...
&lt;/animation-list>
&lt;/transition>
...
&lt;/animated-selector>
</pre>
<h2 id="AnimVector">Tạo Hiệu ứng Hoạt hình Nội dung vẽ được Véc-tơ</h2>
<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">Nội dung vẽ được Véc-tơ</a> sẽ co giãn được
mà không làm mất độ sắc nét. Lớp {@link android.graphics.drawable.AnimatedVectorDrawable}
cho phép bạn tạo hiệu ứng hoạt hình các thuộc tính của nội dung vẽ được véc-tơ.</p>
<p>Thường thì bạn định nghĩa nội dung vẽ được véc-tơ hoạt hình theo ba tệp XML:</p>
<ul>
<li>Nội dung vẽ được véc-tơ với phần tử <code>&lt;vector&gt;</code> trong
<code>res/drawable/</code></li>
<li>Nội dung vẽ được véc-tơ hoạt hình với phần tử <code>&lt;animated-vector&gt;</code> trong
<code>res/drawable/</code></li>
<li>Một hoặc nhiều trình tạo hoạt hình đối tượng với phần tử <code>&lt;objectAnimator&gt;</code> trong
<code>res/anim/</code></li>
</ul>
<p>Nội dung vẽ được véc-tơ hoạt hình có thể tạo hiệu ứng hoạt hình các thuộc tính của phần tử <code>&lt;group&gt;</code> và
<code>&lt;path&gt;</code>. Phần tử <code>&lt;group&gt;</code> định nghĩa một bộ
đường dẫn hoặc nhóm phụ và phần tử <code>&lt;path&gt;</code> định nghĩa các đường dẫn sẽ được vẽ.</p>
<p>Khi định nghĩa một nội dung vẽ được véc-tơ mà bạn muốn tạo hiệu ứng hoạt hình, hãy sử dụng thuộc tính <code>android:name</code>
để gán một tên duy nhất cho các nhóm và đường dẫn, sao cho bạn có thể tham chiếu tới chúng từ các định nghĩa
trình tạo hoạt hình của mình. Ví dụ:</p>
<pre>
&lt;!-- res/drawable/vectordrawable.xml -->
&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600">
&lt;group
<strong>android:name="rotationGroup"</strong>
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0" >
&lt;path
<strong>android:name="v"</strong>
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
&lt;/group>
&lt;/vector>
</pre>
<p>Định nghĩa nội dung vẽ được véc-tơ hoạt hình sẽ tham chiếu tới các nhóm và đường dẫn trong nội dung vẽ được véc-tơ theo
tên của chúng:</p>
<pre>
&lt;!-- res/drawable/animvectordrawable.xml -->
&lt;animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vectordrawable" >
&lt;target
android:name="rotationGroup"
android:animation="@anim/rotation" />
&lt;target
android:name="v"
android:animation="@anim/path_morph" />
&lt;/animated-vector>
</pre>
<p>Định nghĩa hoạt hình biểu diễn các đối tượng {@link android.animation.ObjectAnimator} hoặc {@link
android.animation.AnimatorSet}. Trình tạo hoạt hình đầu tiên trong ví dụ này sẽ xoay nhóm
đối tượng 360 độ:</p>
<pre>
&lt;!-- res/anim/rotation.xml -->
&lt;objectAnimator
android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360" />
</pre>
<p>Trình tạo hoạt hình thứ hai trong ví dụ này sẽ đổi dạng đường dẫn của nội dung vẽ được véc-tơ từ hình này sang
hình khác. Cả hai đường dẫn đều phải tương thích với việc đổi dạng: chúng phải có cùng số lệnh
và cùng số lượng tham số cho từng lệnh.</p>
<pre>
&lt;!-- res/anim/path_morph.xml -->
&lt;set xmlns:android="http://schemas.android.com/apk/res/android">
&lt;objectAnimator
android:duration="3000"
android:propertyName="pathData"
android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"
android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0 z"
android:valueType="pathType" />
&lt;/set>
</pre>
<p>Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho {@link
android.graphics.drawable.AnimatedVectorDrawable}.</p>

168
docs/html-intl/intl/vi/training/material/compatibility.jd Normal file
View File

@@ -0,0 +1,168 @@
page.title=Duy trì Tính tương thích
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Bài học này hướng dẫn bạn cách</h2>
<ol>
<li><a href="#Theme">Định nghĩa Kiểu Thay thế</a></li>
<li><a href="#Layouts">Cung cấp Bố trí Thay thế</a></li>
<li><a href="#SupportLib">Sử dụng Thư viện Hỗ trợ</a></li>
<li><a href="#CheckVersion">Kiểm tra Phiên bản Hệ thống</a></li>
</ol>
<h2>Bạn cũng nên đọc</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Đặc tả phong cách Material Design</a></li>
<li><a href="{@docRoot}design/material/index.html">Material Design trên Android</a></li>
</ul>
</div>
</div>
<p>Một số tính năng của Material Design như chủ đề Material và chuyển tiếp hoạt động tùy chỉnh
chỉ sẵn có trên Android 5.0 (API mức 21) trở lên. Tuy nhiên, bạn có thể thiết kế ứng dụng của mình để tận dụng
những tính năng này khi chạy trên thiết bị hỗ trợ material design mà vẫn tương thích
với thiết bị đang chạy các bản phát hành Android trước đây.</p>
<h2 id="Theme">Định nghĩa Kiểu Thay thế</h2>
<p>Bạn có thể cấu hình ứng dụng của mình để sử dụng chủ đề material trên những thiết bị hỗ trợ và chuyển về
chủ đề cũ hơn trên những thiết bị đang chạy phiên bản Android cũ hơn:</p>
<ol>
<li>Định nghĩa một chủ đề kế thừa từ một chủ đề cũ hơn (như Holo) trong
<code>res/values/styles.xml</code>.</li>
<li>Định nghĩa một chủ đề với cùng tên và kế thừa chủ đề material trong
<code>res/values-v21/styles.xml</code>.</li>
<li>Đặt chủ đề này làm chủ đề cho ứng dụng của bạn trong tệp bản kê khai.</li>
</ol>
<p class="note"><strong>Lưu ý:</strong>
Nếu ứng dụng của bạn sử dụng chủ đề material nhưng không cung cấp chủ đề thay thế bằng cách này,
ứng dụng của bạn sẽ không chạy trên phiên bản Android trước 5.0.
</p>
<h2 id="Layouts">Cung cấp Bố trí Thay thế</h2>
<p>Nếu những bố trí mà bạn thiết kế theo hướng dẫn về material design không sử dụng bất cứ
thuộc tính XML mới nào được giới thiệu trong Android 5.0 (API mức 21), chúng sẽ hoạt động trên các phiên bản
Android trước đó. Nếu không, bạn có thể cung cấp bố trí thay thế. Bạn cũng có thể cung cấp
bố trí thay thế để tùy chỉnh diện mạo ứng dụng của mình trên các phiên bản Android cũ hơn.</p>
<p>Tạo tệp bố trí của bạn cho Android 5.0 (API mức 21) bên trong <code>res/layout-v21/</code> và
tệp bố trí thay thế của bạn cho các phiên bản Android cũ hơn trong <code>res/layout/</code>.
Ví dụ, <code>res/layout/my_activity.xml</code> là một bố trí thay thế cho
<code>res/layout-v21/my_activity.xml</code>.</p>
<p>Để tránh lặp mã, hãy định nghĩa kiểu của bạn bên trong <code>res/values/</code>, sửa đổi
các kiểu trong <code>res/values-v21/</code> cho các API mới và sử dụng kế thừa kiểu, định nghĩa
kiểu cơ bản trong <code>res/values/</code> và kế thừa từ những kiểu trong <code>res/values-v21/</code>.</p>
<h2 id="SupportLib">Sử dụng Thư viện Hỗ trợ</h2>
<p><a href="{@docRoot}tools/support-library/features.html#v7">Thư viện Hỗ trợ v7</a>
r21 và cao hơn gồm những tính năng material design sau:</p>
<ul>
<li><a href="{@docRoot}training/material/theme.html">Các kiểu mang phong cách material design</a> cho một số widget
hệ thống khi bạn áp dụng một trong các chủ đề <code>Theme.AppCompat</code>.</li>
<li><a href="{@docRoot}training/material/theme.html#ColorPalette">Thuộc tính chủ đề bảng màu</a>
trong các chủ đề <code>Theme.AppCompat</code>.</li>
<li>Widget {@link android.support.v7.widget.RecyclerView} để <a href="{@docRoot}training/material/lists-cards.html#RecyclerView">hiển thị các bộ sưu tập
dữ liệu</a>.</li>
<li>Widget {@link android.support.v7.widget.CardView} để <a href="{@docRoot}training/material/lists-cards.html#CardView">tạo thẻ</a>.</li>
<li>Lớp {@link android.support.v7.graphics.Palette} để <a href="{@docRoot}training/material/drawables.html#ColorExtract">trích xuất màu nổi bật từ
hình ảnh</a>.</li>
</ul>
<h3>Widget hệ thống</h3>
<p>Chủ đề <code>Theme.AppCompat</code> cung cấp các kiểu phong cách material design cho những widget này:</p>
<ul>
<li>{@link android.widget.EditText}</li>
<li>{@link android.widget.Spinner}</li>
<li>{@link android.widget.CheckBox}</li>
<li>{@link android.widget.RadioButton}</li>
<li>{@link android.support.v7.widget.SwitchCompat}</li>
<li>{@link android.widget.CheckedTextView}</li>
</ul>
<h3>Bảng màu</h3>
<p>Để có được các kiểu phong cách material design và tùy chỉnh bảng màu bằng Thư viện Hỗ trợ v7
của Android, hãy áp dụng một trong các chủ đề <code>Theme.AppCompat</code>:</p>
<pre>
&lt;!-- extend one of the Theme.AppCompat themes -->
&lt;style name="Theme.MyTheme" parent="Theme.AppCompat.Light">
&lt;!-- customize the color palette -->
&lt;item name="colorPrimary">@color/material_blue_500&lt;/item>
&lt;item name="colorPrimaryDark">@color/material_blue_700&lt;/item>
&lt;item name="colorAccent">@color/material_green_A200&lt;/item>
&lt;/style>
</pre>
<h3>Danh sách và Thẻ</h3>
<p>Widget {@link android.support.v7.widget.RecyclerView} và {@link
android.support.v7.widget.CardView} sẵn có trong các phiên bản Android cũ hơn thông qua
Thư viện Hỗ trợ v7 của Android với những hạn chế sau:</p>
<ul>
<li>{@link android.support.v7.widget.CardView} quay lại triển khai đổ bóng theo lập trình
bằng cách sử dụng phần đệm bổ sung.</li>
<li>{@link android.support.v7.widget.CardView} không cắt hình những dạng xem con của nó có giao cắt với
các góc bo tròn.</li>
</ul>
<h3>Phụ thuộc</h3>
<p>Để sử dụng những tính năng này trong các phiên bản Android trước 5.0 (API mức 21), hãy thêm
Thư viện Hỗ trợ v7 của Android vào dự án của bạn như một <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Phần phụ thuộc Gradle</a>:</p>
<pre>
dependencies {
compile 'com.android.support:appcompat-v7:21.0.+'
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}
</pre>
<h2 id="CheckVersion">Kiểm tra Phiên bản Hệ thống</h2>
<p>Những tính năng sau chỉ sẵn có trong Android 5.0 (API mức 21) trở lên:</p>
<ul>
<li>Chuyển tiếp hoạt động</li>
<li>Phản hồi chạm</li>
<li>Lộ ra hoạt hình</li>
<li>Hoạt hình dựa trên đường dẫn</li>
<li>Nội dung vẽ được véc-tơ</li>
<li>Nhuộm màu nội dung vẽ được</li>
</ul>
<p>Để duy trì tính tương thích với các phiên bản Android cũ hơn, hãy kiểm tra {@link
android.os.Build.VERSION#SDK_INT version} vào thời gian chạy trước khi bạn gọi ra API cho bất cứ tính năng nào
sau đây:</p>
<pre>
// Check if we're running on Android 5.0 or higher
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// Call some material design APIs here
} else {
// Implement this feature without material design
}
</pre>
<p class="note"><strong>Lưu ý:</strong> Để quy định ứng dụng của bạn hỗ trợ những phiên bản Android nào,
hãy sử dụng thuộc tính <code>android:minSdkVersion</code> và <code>android:targetSdkVersion</code>
trong tệp bản kê khai của bạn. Để sử dụng các tính năng của material design trong Android 5.0, hãy đặt
thuộc tính <code>android:targetSdkVersion</code> thành <code>21</code>. Để biết thêm thông tin, hãy xem hướng dẫn
<a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">&lt;uses-sdk&gt; API
</a>.</p>

126
docs/html-intl/intl/vi/training/material/drawables.jd Normal file
View File

@@ -0,0 +1,126 @@
page.title=Làm việc với Nội dung vẽ được
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Bài học này hướng dẫn bạn cách</h2>
<ol>
<li><a href="#DrawableTint">Nhuộm màu Tài nguyên Vẽ được</a></li>
<li><a href="#ColorExtract">Trích xuất Màu Nổi bật từ một Hình ảnh</a></li>
<li><a href="#VectorDrawables">Tạo Nội dung vẽ được Véc-tơ</a></li>
</ol>
<h2>Bạn cũng nên đọc</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Đặc tả phong cách Material Design</a></li>
<li><a href="{@docRoot}design/material/index.html">Material Design trên Android</a></li>
</ul>
</div>
</div>
<p>Những khả năng sau của nội dung vẽ được giúp bạn triển khai phong cách material design trong các ứng dụng của mình:</p>
<ul>
<li>Nhuộm màu nội dung vẽ được</li>
<li>Trích xuất màu nổi bật</li>
<li>Nội dung vẽ được véc-tơ</li>
</ul>
<p>Bài học này cho bạn biết cách sử dụng những tính năng này trong ứng dụng của mình.</p>
<h2 id="DrawableTint">Nhuộm màu Tài nguyên Vẽ được</h2>
<p>Với Android 5.0 (API mức 21) và cao hơn, bạn có thể nhuộm màu ảnh bitmap và ảnh chín miếng được định nghĩa làm
mặt nạ alpha. Bạn có thể nhuộm chúng bằng tài nguyên màu hoặc những thuộc tính chủ đề nhằm phân giải thành các tài nguyên
màu (ví dụ, <code>?android:attr/colorPrimary</code>). Thông thường, bạn chỉ tạo những tài sản này
một lần và tô màu tự động cho chúng để khớp với chủ đề của mình.</p>
<p>Bạn có thể áp dụng một màu nhuộm cho đối tượng {@link android.graphics.drawable.BitmapDrawable} hoặc {@link
android.graphics.drawable.NinePatchDrawable} bằng phương thức {@code setTint()}. Bạn cũng có thể
đặt màu nhuộm và chế độ trong bố trí của mình bằng các thuộc tính <code>android:tint</code> và
<code>android:tintMode</code>.</p>
<h2 id="ColorExtract">Trích xuất Màu Nổi bật từ một Hình ảnh</h2>
<p>Thư viện Hỗ trợ Android r21 và cao hơn bao gồm lớp {@link
android.support.v7.graphics.Palette}, cho phép bạn trích xuất màu nổi bật từ một hình ảnh.
Lớp này trích xuất những màu nổi bật sau:</p>
<ul>
<li>Rực rỡ</li>
<li>Tối rực rỡ</li>
<li>Sáng rực rỡ</li>
<li>Lặng</li>
<li>Tối lặng</li>
<li>Sáng lặng</li>
</ul>
<p>Để trích xuất những màu này, hãy chuyển một đối tượng {@link android.graphics.Bitmap} cho phương thức tĩnh
{@link android.support.v7.graphics.Palette#generate Palette.generate()} trong
luồng chạy ngầm nơi bạn tải hình ảnh của mình. Nếu bạn không thể sử dụng luồng đó, hãy gọi phương thức
{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} và
cung cấp một trình nghe.</p>
<p>Bạn có thể truy xuất màu nổi bật từ hình ảnh bằng cách sử dụng các phương thức getter trong lớp
<code>Palette</code> chẳng hạn như <code>Palette.getVibrantColor</code>.</p>
<p>Để sử dụng lớp {@link android.support.v7.graphics.Palette} trong dự án của mình, hãy thêm
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Phần phụ thuộc Gradle</a> sau vào
mô-đun ứng dụng của bạn:</p>
<pre>
dependencies {
...
compile 'com.android.support:palette-v7:21.0.0'
}
</pre>
<p>Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho lớp
{@link android.support.v7.graphics.Palette}.</p>
<h2 id="VectorDrawables">Tạo Nội dung vẽ được Véc-tơ</h2>
<!-- video box -->
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
<div>
<h3>Video</h3>
<p>Đồ họa Véc-tơ Android</p>
</div>
</a>
<p>Trong Android 5.0 (API mức 21) và cao hơn, bạn có thể định nghĩa nội dung vẽ được véc-tơ co giãn mà không làm mất
độ sắc nét. Bạn chỉ cần một tệp tài sản cho một hình ảnh véc-tơ, đối lập với tệp tài sản cho
từng mật độ màn hình trong trường hợp hình ảnh bitmap. Để tạo một hình ảnh véc-tơ, bạn định nghĩa chi tiết
của hình ảnh trong phần tử XML <code>&lt;vector&gt;</code>.</p>
<p>Ví dụ sau định nghĩa hình ảnh véc-tơ có hình một trái tim:</p>
<pre>
&lt;!-- res/drawable/heart.xml -->
&lt;vector xmlns:android="http://schemas.android.com/apk/res/android"
&lt;!-- intrinsic size of the drawable -->
android:height="256dp"
android:width="256dp"
&lt;!-- size of the virtual canvas -->
android:viewportWidth="32"
android:viewportHeight="32">
&lt;!-- draw a path -->
&lt;path android:fillColor="#8fff"
android:pathData="M20.5,9.5
c-1.955,0,-3.83,1.268,-4.5,3
c-0.67,-1.732,-2.547,-3,-4.5,-3
C8.957,9.5,7,11.432,7,14
c0,3.53,3.793,6.257,9,11.5
c5.207,-5.242,9,-7.97,9,-11.5
C25,11.432,23.043,9.5,20.5,9.5z" />
&lt;/vector>
</pre>
<p>Hình ảnh véc-tơ được biểu diễn trong Android dưới dạng đối tượng {@link android.graphics.drawable.VectorDrawable}
. Để biết thêm thông tin về cú pháp <code>pathData</code>, hãy xem tham chiếu <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">Đường dẫn SVG</a>. Để biết thêm thông tin
về việc tạo hiệu ứng hoạt hình các thuộc tính của nội dung vẽ được véc-tơ, hãy xem
<a href="{@docRoot}training/material/animations.html#AnimVector">Tạo Hiệu ứng Hoạt hình Nội dung vẽ được Véc-tơ</a>.</p>

171
docs/html-intl/intl/vi/training/material/get-started.jd Normal file
View File

@@ -0,0 +1,171 @@
page.title=Bắt đầu
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Bài học này hướng dẫn bạn cách</h2>
<ol>
<li><a href="#ApplyTheme">Áp dụng Chủ đề Material</a></li>
<li><a href="#Layouts">Thiết kế Bố trí của Bạn</a></li>
<li><a href="#Depth">Quy định Độ cao trong Dạng xem của Bạn</a></li>
<li><a href="#ListsCards">Tạo Danh sách và Thẻ</a></li>
<li><a href="#Animations">Tùy chỉnh Hoạt hình của Bạn</a></li>
</ol>
<h2>Bạn cũng nên đọc</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Đặc tả phong cách Material Design</a></li>
<li><a href="{@docRoot}design/material/index.html">Material Design trên Android</a></li>
</ul>
</div>
</div>
<p>Để tạo ứng dụng với material design:</p>
<ol>
<li style="margin-bottom:10px">
Xem phần <a href="http://www.google.com/design/spec">đặc tả phong cách material design</a>.</li>
<li style="margin-bottom:10px">
Áp dụng chủ đề <strong>material</strong> cho ứng dụng của bạn.</li>
<li style="margin-bottom:10px">
Tạo <strong>bố trí</strong> của bạn theo hướng dẫn về material design.</li>
<li style="margin-bottom:10px">
Quy định <strong>độ cao</strong> cho dạng xem của bạn để đổ bóng.</li>
<li style="margin-bottom:10px">
Sử dụng <strong>widget</strong> hệ thống cho danh sách và thẻ.</li>
<li style="margin-bottom:10px">
Tùy chỉnh <strong>hoạt hình</strong> trong ứng dụng của bạn.</li>
</ol>
<h3>Duy trì tính tương thích ngược</h3>
<p>Bạn có thể thêm nhiều tính năng material design vào ứng dụng của mình trong khi vẫn duy trì tính tương thích với
các phiên bản Android trước 5.0. Để biết thêm thông tin, hãy xem phần
<a href="{@docRoot}training/material/compatibility.html">Duy trì Tính tương thích</a>.</p>
<h3>Cập nhật ứng dụng của bạn với material design</h3>
<p>Để cập nhật một ứng dụng hiện tại bằng material design, hãy cập nhật các bố trí của bạn theo
hướng dẫn về material design. Cũng nhớ kết hợp chiều sâu, phản hồi chạm và
hoạt hình.</p>
<h3>Tạo ứng dụng mới với material design</h3>
<p>Nếu bạn tạo một ứng dụng mới với các tính năng của material design, <a href="http://www.google.com/design/spec">hướng dẫn về material design</a> cung cấp cho bạn một
khuôn khổ thiết kế súc tích. Làm theo hướng dẫn đó và sử dụng chức năng mới trong khuôn khổ Android
để thiết kế và phát triển ứng dụng của bạn.</p>
<h2 id="ApplyTheme">Áp dụng Chủ đề Material</h2>
<p>Để áp dụng chủ đề material trong ứng dụng của mình, hãy quy định một kiểu kế thừa từ
<code>android:Theme.Material</code>:</p>
<pre>
&lt;!-- res/values/styles.xml -->
&lt;resources>
&lt;!-- your theme inherits from the material theme -->
&lt;style name="AppTheme" parent="android:Theme.Material">
&lt;!-- theme customizations -->
&lt;/style>
&lt;/resources>
</pre>
<p>Chủ đề material cung cấp các widget hệ thống được cập nhật để bạn có thể đặt bảng màu và
hoạt hình mặc định cho phản hồi chạm và chuyển tiếp hoạt động. Để biết thêm chi tiết, hãy xem phần
<a href="{@docRoot}training/material/theme.html">Sử dụng Chủ đề Material</a>.</p>
<h2 id="Layouts">Thiết kế Bố trí của Bạn</h2>
<p>Bên cạnh việc áp dụng và tùy chỉnh chủ đề material, bố trí của bạn cần tuân thủ
<a href="http://www.google.com/design/spec">hướng dẫn về material design</a>. Khi thiết kế
bố trí của bạn, hãy đặc biệt chú ý tới điều sau đây:</p>
<ul>
<li>Lưới đường cơ sở</li>
<li>Dòng chính</li>
<li>Giãn cách</li>
<li>Kích cỡ mục tiêu chạm</li>
<li>Cấu trúc bố trí</li>
</ul>
<h2 id="Depth">Quy định Độ cao trong Dạng xem của Bạn</h2>
<p>Dạng xem có thể đổ bóng và giá trị độ cao của một dạng xem
xác định kích cỡ bóng và thứ tự vẽ của nó. Để đặt độ cao của một dạng xem, hãy sử dụng thuộc tính
<code>android:elevation</code> trong bố trí của bạn:</p>
<pre>
&lt;TextView
android:id="&#64;+id/my_textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="&#64;string/next"
android:background="&#64;color/white"
android:elevation="5dp" />
</pre>
<p>Thuộc tính <code>translationZ</code> mới cho phép bạn tạo những hoạt hình phản ánh các thay đổi
tạm thời về độ cao của một dạng xem. Thay đổi về độ cao có thể hữu ích khi
<a href="{@docRoot}training/material/animations.html#ViewState">phản hồi lại các cử chỉ
chạm</a>.</p>
<p>Để biết thêm chi tiết, 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>
<h2 id="ListsCards">Tạo Danh sách và Thẻ</h2>
<p>{@link android.support.v7.widget.RecyclerView} là một phiên bản dễ ghép nối hơn của {@link
android.widget.ListView} có hỗ trợ các kiểu bố trí khác nhau và cung cấp những cải tiến về hiệu năng.
{@link android.support.v7.widget.CardView} cho phép bạn hiện các mẩu thông tin bên trong thẻ với
một diện mạo nhất quán giữa các ứng dụng. Ví dụ về mã sau đây minh họa cách thêm
{@link android.support.v7.widget.CardView} vào bố trí của bạn:</p>
<pre>
&lt;android.support.v7.widget.CardView
android:id="&#64;+id/card_view"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="3dp">
...
&lt;/android.support.v7.widget.CardView>
</pre>
<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>
<h2 id="Animations">Tùy chỉnh Hoạt hình của Bạn</h2>
<p>Android 5.0 (API mức 21) bao gồm các API mới để tạo hoạt hình tùy chỉnh trong ứng dụng của bạn.
Ví dụ, bạn có thể cho phép chuyển tiếp hoạt động và định nghĩa một chuyển tiếp ra bên trong một
hoạt động:</p>
<pre>
public class MyActivity extends Activity {
&#64;Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// enable transitions
getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
setContentView(R.layout.activity_my);
}
public void onSomeButtonClicked(View view) {
getWindow().setExitTransition(new Explode());
Intent intent = new Intent(this, MyOtherActivity.class);
startActivity(intent,
ActivityOptions
.makeSceneTransitionAnimation(this).toBundle());
}
}
</pre>
<p>Khi bạn bắt đầu một hoạt động khác từ hoạt động này, chuyển tiếp ra được kích hoạt.</p>
<p>Để tìm hiểu thêm về các API hoạt hình mới, hãy xem <a href="{@docRoot}training/material/animations.html">Định nghĩa Hoạt hình Tùy chỉnh</a>.</p>

61
docs/html-intl/intl/vi/training/material/index.jd Normal file
View File

@@ -0,0 +1,61 @@
page.title=Material Design cho Nhà phát triển
page.type=design
page.image=images/cards/material_2x.png
page.metaDescription=Tìm hiểu cách áp dụng material design cho ứng dụng của bạn.
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Phụ thuộc và Điều kiện Tiên quyết</h2>
<ul>
<li>Android 5.0 (API mức 21)</li>
</ul>
</div>
</div>
<p>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ị. Để sử dụng material design trong ứng dụng Androi của mình, hãy làm theo hướng dẫn
mô tả trong
<a href="http://www.google.com/design/spec/material-design/introduction.html">đặ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).</p>
<p>Bài học này sẽ cho bạn thấy cách tạo ứng dụng material design bằng những phần tử sau:</p>
<ul>
<li>Chủ đề material</li>
<li>Widget cho thẻ và danh sách</li>
<li>Đổ bóng và cắt xén dạng xem tùy chỉnh</li>
<li>Nội dung vẽ được véc-tơ</li>
<li>Hoạt hình tùy chỉnh</li>
</ul>
<p>Bài học này cũng hướng dẫn cho bạn cách duy trì tính tương thích với các phiên bản Android trước
5.0 (API mức 21) khi bạn sử dụng các tính năng về material design trong ứng dụng của mình.</p>
<h2>Bài học</h2>
<dl>
<dt><a href="{@docRoot}training/material/get-started.html">Bắt đầu</a></dt>
<dd>Tìm hiểu cách cập nhật ứng dụng của bạn với các tính năng của material design.</dd>
<dt><a href="{@docRoot}training/material/theme.html">Sử dụng Chủ đề Material</a></dt>
<dd>Tìm hiểu cách áp dụng các kiểu phong cách material design cho ứng dụng của bạn.</dd>
<dt><a href="{@docRoot}training/material/lists-cards.html">Tạo Danh sách và Thẻ</a></dt>
<dd>Tìm hiểu cách tạo danh sách và thẻ với một diện mạo và cảm giác nhất quán bằng cách sử dụng widget hệ thống.</dd>
<dt><a href="{@docRoot}training/material/shadows-clipping.html">Định nghĩa Đổ bóng và Dạng xem Cắt hình</a></dt>
<dd>Tìm hiểu cách đặt độ cao cho dạng xem của bạn để tạo đổ bóng tùy chỉnh và cách cắt hình dạng xem.</dd>
<dt><a href="{@docRoot}training/material/drawables.html">Làm việc với Nội dung vẽ được</a></dt>
<dd>Tìm hiểu cách tạo nội dung vẽ được véc-tơ và cách nhuộm màu tài nguyên vẽ được.</dd>
<dt><a href="{@docRoot}training/material/animations.html">Định nghĩa Hoạt hình Tùy chỉnh</a></dt>
<dd>Tìm hiểu cách tạo hoạt hình tùy chỉnh cho các dạng xem và chuyển tiếp hoạt động bằng các phần tử chung.</dd>
<dt><a href="{@docRoot}training/material/compatibility.html">Duy trì Tính tương thích</a></dt>
<dd>Tìm hiểu cách duy trì tính tương thích với các phiên bản nền tảng trước Android 5.0.</dd>
</dl>

266
docs/html-intl/intl/vi/training/material/lists-cards.jd Normal file
View File

@@ -0,0 +1,266 @@
page.title=Tạo Danh sách và Thẻ
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Bài học này hướng dẫn bạn cách</h2>
<ol>
<li><a href="#RecyclerView">Tạo Danh sách</a></li>
<li><a href="#CardView">Tạo Thẻ</a></li>
<li><a href="#Dependencies">Thêm Phụ thuộc</a></li>
</ol>
<h2>Bạn cũng nên đọc</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Đặc tả phong cách Material Design</a></li>
<li><a href="{@docRoot}design/material/index.html">Material Design trên Android</a></li>
</ul>
</div>
</div>
<p>Để tạo danh sách và thẻ phức tạp bằng phong cách material design trong ứng dụng của mình, bạn có thể sử dụng widget
{@link android.support.v7.widget.RecyclerView} và {@link android.support.v7.widget.CardView}
.</p>
<h2 id="RecyclerView">Tạo Danh sách</h2>
<p>Widget {@link android.support.v7.widget.RecyclerView} là một phiên bản nâng cao và linh hoạt hơn
của {@link android.widget.ListView}. Widget này là một bộ chứa để hiển thị các tập dữ liệu
lớn có thể được cuộn rất hiệu quả bằng cách duy trì một số dạng xem hữu hạn. Sử dụng widget
{@link android.support.v7.widget.RecyclerView} khi bạn có các bộ sưu tập dữ liệu với phần tử
thay đổi vào thời gian chạy dựa vào hành động của người dùng hoặc sự kiện mạng.</p>
<p>Lớp {@link android.support.v7.widget.RecyclerView} đơn giản hóa việc hiển thị và xử lý
các tập dữ liệu lớn bằng cách cung cấp:</p>
<ul>
<li>Trình quản lý bố trí để định vị mục</li>
<li>Hoạt hình mặc định cho các thao tác chung đối với mục như loại bỏ hoặc thêm mục</li>
</ul>
<p>Bạn cũng có sự linh hoạt để định nghĩa các trình quản lý bố trí tùy chỉnh và hoạt hình cho widget {@link
android.support.v7.widget.RecyclerView}.</p>
<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" />
<p class="img-caption">
<strong>Hình 1</strong>. Widget <code>RecyclerView</code>.
</p>
<p>Để sử dụng widget {@link android.support.v7.widget.RecyclerView}, bạn phải quy định một
trình điều hợp và trình quản lý bố trí. Để tạo một trình điều hợp, hãy mở rộng lớp {@link
android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter}. Chi tiết
của triển khai phụ thuộc vào các chỉ định của tập dữ liệu của bạn và kiểu dạng xem. Để biết thêm
thông tin, hãy xem <a href="#RVExamples">ví dụ</a> bên dưới.</p>
<div style="float:right">
<img src="{@docRoot}design/material/images/list_mail.png" alt="" width="250" height="426" />
<p class="img-caption" style="margin-left:8px">
<strong>Hình 2</strong> - Danh sách với <code>RecyclerView</code>.
</p>
</div>
<p><strong>Trình quản lý bố trí</strong> sẽ định vị các dạng xem mục bên trong {@link
android.support.v7.widget.RecyclerView} và xác định thời điểm sử dụng lại các dạng xem mục
không còn hiển thị trước người dùng nữa. Để sử dụng lại (hoặc <em>tái chế</em>) một dạng xem, trình quản lý bố
trí có thể yêu cầu trình điều hợp thay thế nội dung của dạng xem bằng một phần tử khác từ tập dữ liệu. Tái chế
dạng xem bằng cách này sẽ cải thiện hiệu năng nhờ tránh tạo những dạng xem không cần thiết hoặc thực hiện
tra cứu {@link android.app.Activity#findViewById findViewById()} tốn kém.</p>
<p>{@link android.support.v7.widget.RecyclerView} cung cấp những trình quản lý bố trí dựng sẵn sau:</p>
<ul>
<li>{@link android.support.v7.widget.LinearLayoutManager} hiện các mục trong một danh sách cuộn
thẳng đứng hoặc nằm ngang.</li>
<li>{@link android.support.v7.widget.GridLayoutManager} hiện các mục trong lưới.</li>
<li>{@link android.support.v7.widget.StaggeredGridLayoutManager} hiện các mục trong một lưới so le.</li>
</ul>
<p>Để tạo một trình quản lý bố trí tùy chỉnh, hãy mở rộng lớp {@link
android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager}.</p>
<h3>Hoạt hình</h3>
<p>Hoạt hình để thêm và loại bỏ mục được kích hoạt theo mặc định trong {@link
android.support.v7.widget.RecyclerView}. Để tùy chỉnh những hoạt hình này, hãy mở rộng lớp
{@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} và sử dụng
phương thức {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}
.</p>
<h3 id="RVExamples">Ví dụ</h3>
<p>Ví dụ đoạn mã sau minh họa cách thêm
{@link android.support.v7.widget.RecyclerView} vào bố trí:</p>
<pre>
&lt;!-- A RecyclerView with some commonly used attributes -->
&lt;android.support.v7.widget.RecyclerView
android:id="@+id/my_recycler_view"
android:scrollbars="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</pre>
<p>Sau khi thêm widget {@link android.support.v7.widget.RecyclerView} vào bố trí của bạn,
hãy lấy một núm điều tác tới đối tượng, kết nối nó với một trình quản lý bố trí và gắn kèm một trình điều hợp cho dữ liệu
cần được hiển thị:</p>
<pre>
public class MyActivity extends Activity {
private RecyclerView mRecyclerView;
private RecyclerView.Adapter mAdapter;
private RecyclerView.LayoutManager mLayoutManager;
&#64;Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.my_activity);
mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
// use this setting to improve performance if you know that changes
// in content do not change the layout size of the RecyclerView
mRecyclerView.setHasFixedSize(true);
// use a linear layout manager
mLayoutManager = new LinearLayoutManager(this);
mRecyclerView.setLayoutManager(mLayoutManager);
// specify an adapter (see also next example)
mAdapter = new MyAdapter(myDataset);
mRecyclerView.setAdapter(mAdapter);
}
...
}
</pre>
<p>Trình điều hợp cung cấp truy cập vào các mục trong tập dữ liệu của bạn, tạo dạng xem cho mục và
thay thế nội dung của một số dạng xem bằng mục dữ liệu mới khi mục ban đầu không còn
hiển thị. Ví dụ đoạn mã sau đây thể hiện việc triển khai đơn giản của tập dữ liệu bao gồm
một mảng xâu được hiển thị bằng widget {@link android.widget.TextView}:</p>
<pre>
public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
private String[] mDataset;
// Provide a reference to the views for each data item
// Complex data items may need more than one view per item, and
// you provide access to all the views for a data item in a view holder
public static class ViewHolder extends RecyclerView.ViewHolder {
// each data item is just a string in this case
public TextView mTextView;
public ViewHolder(TextView v) {
super(v);
mTextView = v;
}
}
// Provide a suitable constructor (depends on the kind of dataset)
public MyAdapter(String[] myDataset) {
mDataset = myDataset;
}
// Create new views (invoked by the layout manager)
&#64;Override
public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
int viewType) {
// create a new view
View v = LayoutInflater.from(parent.getContext())
.inflate(R.layout.my_text_view, parent, false);
// set the view's size, margins, paddings and layout parameters
...
ViewHolder vh = new ViewHolder(v);
return vh;
}
// Replace the contents of a view (invoked by the layout manager)
&#64;Override
public void onBindViewHolder(ViewHolder holder, int position) {
// - get element from your dataset at this position
// - replace the contents of the view with that element
holder.mTextView.setText(mDataset[position]);
}
// Return the size of your dataset (invoked by the layout manager)
&#64;Override
public int getItemCount() {
return mDataset.length;
}
}
</pre>
<div style="float:right;margin-top:15px;margin-left:30px">
<img src="{@docRoot}design/material/images/card_travel.png" alt="" width="225" height="383">
<p class="img-caption" style="margin-left:12px">
<strong>Hình 3</strong>. Ví dụ thẻ.
</p>
</div>
<h2 id="CardView">Tạo Thẻ</h2>
<p>{@link android.support.v7.widget.CardView} mở rộng lớp {@link android.widget.FrameLayout} và
cho phép bạn hiển thị thông tin bên trong các thẻ có diện mạo nhất quán trên khắp nền tảng. Widget {@link
android.support.v7.widget.CardView} có thể có đổ bóng và góc bo tròn.</p>
<p>Để tạo một thẻ có bóng, hãy sử dụng thuộc tính <code>card_view:cardElevation</code>.
{@link android.support.v7.widget.CardView} sử dụng độ cao thực và đổ bóng động trên Android 5.0
(API mức 21) và cao hơn, và quay lại triển khai đổ bóng theo lập trình trên các phiên bản cũ hơn.
Để biết thêm thông tin, hãy xem phần <a href="{@docRoot}training/material/compatibility.html">Duy trì
Tính tương thích</a>.</p>
<p>Sử dụng những thuộc tính sau để tùy chỉnh diện mạo của widget
{@link android.support.v7.widget.CardView}:</p>
<ul>
<li>Để đặt bán kính góc trong bố trí của bạn, hãy sử dụng thuộc tính <code>card_view:cardCornerRadius</code>
.</li>
<li>Để đặt bán kính góc trong mã của bạn, hãy sử dụng phương thức <code>CardView.setRadius</code>.</li>
<li>Để đặt màu nền của thẻ, hãy sử dụng thuộc tính <code>card_view:cardBackgroundColor</code>
.</li>
</ul>
<p>Ví dụ về mã sau đây cho bạn thấy cách thêm widget {@link android.support.v7.widget.CardView}
trong bố trí của mình:</p>
<pre>
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
... >
&lt;!-- A CardView that contains a TextView -->
&lt;android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:id="@+id/card_view"
android:layout_gravity="center"
android:layout_width="200dp"
android:layout_height="200dp"
card_view:cardCornerRadius="4dp">
&lt;TextView
android:id="@+id/info_text"
android:layout_width="match_parent"
android:layout_height="match_parent" />
&lt;/android.support.v7.widget.CardView>
&lt;/LinearLayout>
</pre>
<p>Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho {@link android.support.v7.widget.CardView}.</p>
<h2 id="Dependencies">Thêm Phụ thuộc</h2>
<p>Widget {@link android.support.v7.widget.RecyclerView} và {@link android.support.v7.widget.CardView}
là bộ phận của <a href="{@docRoot}tools/support-library/features.html#v7">Thư viện Hỗ trợ
v7</a>. Để sử dụng những widget này trong dự án của mình, hãy thêm những
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Phụ thuộc Gradle</a> này vào mô-đun
ứng dụng của bạn:</p>
<pre>
dependencies {
...
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}
</pre>

133
docs/html-intl/intl/vi/training/material/shadows-clipping.jd Normal file
View File

@@ -0,0 +1,133 @@
page.title=Định nghĩa Đổ bóng và Dạng xem Cắt hình
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Bài học này hướng dẫn bạn cách</h2>
<ol>
<li><a href="#Elevation">Gán Độ cao cho Dạng xem của Bạn</a></li>
<li><a href="#Shadows">Tùy chỉnh Đổ bóng và Viền của Dạng xem</a></li>
<li><a href="#Clip">Dạng xem Cắt hình</a></li>
</ol>
<h2>Bạn cũng nên đọc</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Đặc tả phong cách Material Design</a></li>
<li><a href="{@docRoot}design/material/index.html">Material Design trên Android</a></li>
</ul>
</div>
</div>
<p>Material design giới thiệu độ cao cho phần tử UI. Độ cao giúp người dùng hiểu được
tầm quan trọng tương đối của từng phần tử và tập chung sự chú ý của họ vào tác vụ hiện có.</p>
<p>Độ cao của một dạng xem, được biểu diễn bằng thuộc tính Z, sẽ xác định diện mạo trực quan của
bóng đổ: dạng xem có giá trị Z cao hơn sẽ đổ bóng lớn hơn, mềm hơn. Dạng xem có giá trị Z cao hơn sẽ che khuất dạng xem
có giá trị Z thấp hơn; tuy nhiên, giá trị Z của một dạng xem không ảnh hưởng tới kích cỡ của dạng xem.</p>
<p>Đổ bóng được vẽ bởi dạng xem mẹ của dạng xem cao hơn, do vậy nó phụ thuộc vào tiêu chuẩn cắt dạng xem,
được cắt bởi dạng xem mẹ theo mặc định.</p>
<p>Độ cao cũng hữu ích trong việc tạo hoạt hình ở nơi widget tạm thời dâng cao hơn
mặt phẳng dạng xem khi thực hiện một hành động nào đó.</p>
<p>Để biết thêm thông tin về độ cao trong material design, hãy xem
<a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Đối tượng
trong không gian 3D</a>.</p>
<h2 id="Elevation">Gán Độ cao cho Dạng xem của Bạn</h2>
<p>Giá trị Z của một dạng xem có hai thành phần:
<ul>
<li>Độ cao: Thành phần tĩnh.</li>
<li>Độ dịch: Thành phần động được sử dụng cho hoạt hình.</li>
</ul>
<p><code>Z = elevation + translationZ</code></p>
<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
<p class="img-caption"><strong>Hình 1</strong> - Đổ bóng cho các độ cao dạng xem khác nhau.</p>
<p>Để đặt độ cao của dạng xem trong một định nghĩa bố trí, hãy sử dụng thuộc tính <code>android:elevation</code>
. Để đặt độ cao của dạng xem trong mã của một hoạt động, hãy sử dụng phương thức
{@link android.view.View#setElevation View.setElevation()}.</p>
<p>Để đặt độ dịch của dạng xem, hãy sử dụng phương thức {@link android.view.View#setTranslationZ
View.setTranslationZ()}.</p>
<p>Các phương thức {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} và {@link
android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} mới cho phép
bạn dễ dàng tạo hiệu ứng hoạt hình cho độ cao của dạng xem. Để biết thêm thông tin, hãy xem tài liệu tham khảo API cho
{@link android.view.ViewPropertyAnimator} và hướng dẫn cho nhà phát triển về <a href="{@docRoot}guide/topics/graphics/prop-animation.html">Hoạt hình Thuộc tính</a>
.</p>
<p>Bạn cũng có thể sử dụng {@link android.animation.StateListAnimator} để
quy định những hoạt hình này bằng cách khai báo. Điều này đặc biệt hữu ích đối với trường hợp các thay đổi
trạng thái sẽ kích hoạt hoạt hình như khi người dùng nhấn một nút. Để biết thêm thông tin, hãy xem phần
<a href="{@docRoot}training/material/animations.html#ViewState">Tạo Hiệu ứng Hoạt hình Thay đổi Trạng thái Xem</a>.</p>
<p>Giá trị Z được đo bằng dp (điểm ảnh độc lập với mật độ).</p>
<h2 id="Shadows">Tùy chỉnh Đổ bóng và Viền của Dạng xem</h2>
<p>Các giới hạn nội dung vẽ được của nền dạng xem sẽ xác định hình dạng mặc định của bóng.
<strong>Viền</strong> biểu thị hình dạng ngoài của một đối tượng đồ họa và định nghĩa vùng
gợn sóng cho phản hồi chạm.</p>
<p>Hãy cân nhắc dạng xem sau được định nghĩa với nội dung vẽ được làm nền:</p>
<pre>
&lt;TextView
android:id="@+id/myview"
...
android:elevation="2dp"
android:background="@drawable/myrect" />
</pre>
<p>Nội dung vẽ được làm nền được định nghĩa là một hình chữ nhật với góc bo tròn:</p>
<pre>
&lt;!-- res/drawable/myrect.xml -->
&lt;shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
&lt;solid android:color="#42000000" />
&lt;corners android:radius="5dp" />
&lt;/shape>
</pre>
<p>Dạng xem sẽ tạo đổ bóng có góc bo tròn do nội dung vẽ được làm nền sẽ định nghĩa
viền của dạng xem. Khi cung cấp viền tùy chỉnh, nó ghi đè hình dạng mặc định của bóng đổ dạng xem.</p>
<p>Để định nghĩa viền tùy chỉnh cho một dạng xem trong mã của bạn:<p>
<ol>
<li>Mở rộng lớp {@link android.view.ViewOutlineProvider}.</li>
<li>Ghi đè phương thức {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li>
<li>Gán trình cung cấp viền mới cho dạng xem của bạn bằng phương thức {@link
android.view.View#setOutlineProvider View.setOutlineProvider()}.</li>
</ol>
<p>Bạn có thể tạo viền hình bầu dục và hình chữ nhật có góc bo tròn bằng cách sử dụng các phương thức trong lớp
{@link android.graphics.Outline}. Trình cung cấp viền mặc định cho dạng xem sẽ lấy viền
từ nền của dạng xem. Để ngăn dạng xem đổ bóng, hãy đặt trình cung cấp viền của nó
thành <code>null</code>.</p>
<h2 id="Clip">Dạng xem Cắt hình</h2>
<p>Dạng xem cắt hình cho phép bạn dễ dàng thay đổi hình dạng của một dạng xem. Bạn có thể cắt hình dạng xem để
nhất quán với các phần tử thiết kế khác hoặc để thay đổi hình dạng của một dạng xem để đáp ứng lại thông tin đầu vào của người dùng.
Bạn có thể cắt một dạng xem thành vùng viền của nó bằng cách sử dụng phương thức {@link android.view.View#setClipToOutline
View.setClipToOutline()} hoặc thuộc tính <code>android:clipToOutline</code>. Chỉ
viền là hình chữ nhật, hình tròn và hình chữ nhật bo tròn mới hỗ trợ cắt hình như được xác định bởi phương thức
{@link android.graphics.Outline#canClip Outline.canClip()}.</p>
<p>Để cắt dạng xem thành hình dạng của một nội dung vẽ được, hãy đặt nội dung vẽ được làm nền của dạng xem
(như minh họa bên trên) và gọi phương thức {@link android.view.View#setClipToOutline View.setClipToOutline()}
.</p>
<p>Cắt dạng xem là một thao tác tốn kém, vì vậy đừng tạo hiệu ứng hoạt hình cho hình dạng bạn sử dụng để
cắt dạng xem. Để đạt được hiệu ứng này, hãy sử dụng hoạt hình <a href="{@docRoot}training/material/animations.html#Reveal">Hiệu ứng Lộ ra</a>.</p>

131
docs/html-intl/intl/vi/training/material/theme.jd Normal file
View File

@@ -0,0 +1,131 @@
page.title=Sử dụng Chủ đề Material
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>Bài học này hướng dẫn bạn cách</h2>
<ol>
<li><a href="#ColorPalette">Tùy chỉnh Bảng màu</a></li>
<li><a href="#StatusBar">Tùy chỉnh Thanh Trạng thái</a></li>
<li><a href="#Inheritance">Tạo Chủ đề Dạng xem Riêng</a></li>
</ol>
<h2>Bạn cũng nên đọc</h2>
<ul>
<li><a href="http://www.google.com/design/spec">Đặc tả phong cách Material Design</a></li>
<li><a href="{@docRoot}design/material/index.html">Material Design trên Android</a></li>
</ul>
</div>
</div>
<p>Chủ đề material mới cung cấp:</p>
<ul>
<li>Widget hệ thống cho phép bạn đặt bảng màu của chúng</li>
<li>Hoạt hình phản hồi chạm cho widget hệ thống</li>
<li>Hoạt hình chuyển tiếp hoạt động</li>
</ul>
<p>Bạn có thể tùy chỉnh diện mạo của chủ đề material
theo nhận diện thương hiệu của mình bằng một bảng màu mà bạn kiểm soát. Bạn có thể nhuộm màu thanh hành động và
thanh trạng thái bằng cách sử dụng các thuộc tính chủ đề như minh họa trong <a href="#fig3">Hình 3</a>.</p>
<p>Widget hệ thống có một thiết kế mới và hoạt hình phản hồi chạm. Bạn có thể tùy chỉnh
bảng màu, hoạt hình phản hồi chạm và chuyển tiếp hoạt động cho ứng dụng của mình.</p>
<p>Chủ đề material được định nghĩa là:</p>
<ul>
<li><code>@android:style/Theme.Material</code> (phiên bản tối)</li>
<li><code>@android:style/Theme.Material.Light</code> (phiên bản sáng)</li>
<li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
</ul>
<p>Để biết danh sách các kiểu material mà bạn có thể sử dụng, hãy xem tài liệu tham chiếu API cho
{@link android.R.style R.style}.</p>
<!-- two columns, dark/light material theme example -->
<div style="width:700px;margin-top:25px;margin-bottom:10px">
<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:170px;margin:0 auto">
<p style="margin-top:8px;font-size:12px"><strong>Hình 1</strong>. 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:170px;margin:0 auto">
<p style="margin-top:8px;font-size:12px"><strong>Hình 2</strong>. Giao diện material sáng</p>
</div>
</div>
<br style="clear:left">
</div>
<p class="note">
<strong>Lưu ý:</strong> Chủ đề material chỉ sẵn có trong Android 5.0 (API mức 21) trở
lên. <a href="{@docRoot}tools/support-library/features.html#v7">Thư viện Hỗ trợ v7</a>
cung cấp chủ đề mang phong cách material design cho một số widget và hỗ trợ tùy chỉnh
bảng màu. Để biết thêm thông tin, hãy xem phần
<a href="{@docRoot}training/material/compatibility.html">Duy trì Tính tương thích</a>.
</p>
<h2 id="ColorPalette">Tùy chỉnh Bảng màu</h2>
<p style="margin-bottom:30px">Để tùy chỉnh các màu cơ bản của chủ đề cho phù hợp với nhãn hiệu của bạn, hãy định nghĩa
màu tùy chỉnh của bạn bằng thuộc tính chủ đề khi bạn kế thừa từ chủ đề material:</p>
<pre>
&lt;resources>
&lt;!-- inherit from the material theme -->
&lt;style name="AppTheme" parent="android:Theme.Material">
&lt;!-- Main theme colors -->
&lt;!-- your app branding color for the app bar -->
&lt;item name="android:colorPrimary">@color/primary&lt;/item>
&lt;!-- darker variant for the status bar and contextual app bars -->
&lt;item name="android:colorPrimaryDark">@color/primary_dark&lt;/item>
&lt;!-- theme UI controls like checkboxes and text fields -->
&lt;item name="android:colorAccent">@color/accent&lt;/item>
&lt;/style>
&lt;/resources>
</pre>
<div style="float:right;margin-left:25px;margin-top:20px;margin-bottom:10px" id="fig3">
<img src="{@docRoot}training/material/images/ThemeColors.png" width="250" height="445" />
<p class="img-caption" style="margin-bottom:0px">
<strong>Hình 3.</strong> Tùy chỉnh chủ đề material.</p>
</div>
<h2 id="StatusBar">Tùy chỉnh Thanh Trạng thái</h2>
<p>Chủ đề material cho phép bạn dễ dàng tùy chỉnh thanh trạng thái để bạn có thể quy định
màu cho phù hợp với nhãn hiệu của mình và đảm bảo đủ độ tương phản để hiển thị biểu tượng trạng thái màu trắng. Để
đặt màu tùy chỉnh cho thanh trạng thái, hãy sử dụng thuộc tính <code>android:statusBarColor</code> khi
bạn mở rộng chủ đề material. Theo mặc định, <code>android:statusBarColor</code> kế thừa
giá trị của <code>android:colorPrimaryDark</code>.</p>
<p>Bạn cũng có thể tự vẽ phía sau thanh trạng thái. Ví dụ, nếu bạn muốn hiển thị
thanh trạng thái trong suốt trên một ảnh chụp, với graddien hơi tối để đảm bảo biểu tượng
trạng thái màu trắng nhìn thấy được. Để làm vậy, hãy đặt thuộc tính <code>android:statusBarColor</code> thành
<code>&#64;android:color/transparent</code> và điều chỉnh cờ cửa sổ nếu cần. Bạn cũng có thể
sử dụng phương thức {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} cho hoạt hình
hoặc hiệu ứng mờ dần.</p>
<p class="note">
<strong>Lưu ý:</strong> Thanh trạng thái cần luôn có một bản vẽ rõ ràng từ
thanh công cụ chính, trừ trường hợp bạn hiển thị nội dung hình ảnh hoặc phương tiện phong phú từ cạnh tới cạnh phía sau
những thanh này và khi bạn sử dụng gradient để đảm bảo rằng các biểu tượng vẫn nhìn thấy được.
</p>
<p>Khi bạn tùy chỉnh thanh điều hướng và trạng thái, hãy khiến cả hai đều trong suốt hoặc chỉ sửa đổi
thanh trạng thái. Thanh điều hướng nên giữ lại màu đen trong mọi trường hợp khác.</p>
<h2 id="Inheritance">Tạo Chủ đề Dạng xem Riêng</h3>
<p>Những phần tử trong định nghĩa bố trí XML có thể quy định thuộc tính <code>android:theme</code> để
tham chiếu tới một tài nguyên chủ đề. Thuộc tính này sửa đổi chủ đề cho phần tử và bất cứ
phần tử con nào, điều này có ích đối với việc thay đổi bảng màu của chủ đề trong một phần cụ thể
của giao diện.</p>

15
docs/html-intl/intl/zh-cn/design/material/index.jd
View File

@@ -1,7 +1,6 @@
page.title=材料设计
page.tags=Material, design
page.type=设计
page.image=design/material/images/MaterialLight.png
page.title=Android 材料设计
page.tags=Material,design
page.image=images/cards/design-material-for-android_2x.jpg
@jd:body
@@ -53,13 +52,13 @@ Android 现在已支持材料设计应用。
<li>用于自定义阴影和动画的全新 API</li>
</ul>
<p>有关在 Android 上实现材料设计的详细信息，请参阅<a href="{@docRoot}training/material/index.html">创建材料设计应用</a>。
<p>有关在 Android 上实现材料设计的详细信息，请参阅<a href="{@docRoot}training/material/index.html">使用材料设计创建应用</a>。
</p>
<h3>材料主题</h3>
<p>材料主题提供了新的应用样式和系统小工具，让您能够为触摸反馈以及活动转换设置配色工具以及默认动画。
<p>材料主题提供了新的应用样式和系统小工具，让您能够为触摸反馈以及 Activity 转换设置配色工具以及默认动画。
</p>
<!-- two columns -->
@@ -136,7 +135,7 @@ Android 现在已支持材料设计应用。
<h3>动画</h3>
<p>动画 API 让您可为 UI 控件中的触摸反馈、视图状态更改以及活动转换创建自定义动画。
<p>动画 API 让您可为 UI 控件中的触摸反馈、视图状态更改以及 Activity 转换创建自定义动画。
</p>
<p>这些 API 的作用是：</p>
@@ -149,7 +148,7 @@ Android 现在已支持材料设计应用。
使用<strong>循环显示</strong>动画隐藏和显示视图。
</li>
<li style="margin-bottom:15px">
使用自定义<strong>活动转换</strong>动画切换活动。
使用自定义 <strong>Activity 转换</strong>动画切换 Activity。
</li>
<li style="margin-bottom:15px">
使用<strong>曲线运动</strong>创建更自然的动画。

210
docs/html-intl/intl/zh-cn/training/material/animations.jd
View File

@@ -1,4 +1,4 @@
page.title=定义定制动画
page.title=定义定制动画
@jd:body
@@ -21,7 +21,10 @@ page.title=定义定制动画
</div>
<p>材料设计中的动画将为用户提供操作反馈并在用户与您的应用进行互动时提供视觉连续性。材料主题将为按钮与操作行为转换提供一些默认动画，而 Android 5.0 及以上的版本（API 级别 21）可让您定制这些动画，同时也可创建新动画：</p>
<p>材料设计中的动画将为用户提供操作反馈并在用户与您的应用进行互动时提供视觉连续性。
材料主题将为按钮与操作行为转换提供一些默认动画，而 Android 5.0（API 级别 21）及更高版本可让您定制这些动画，同时也可创建新动画：
</p>
<ul>
<li>触摸反馈</li>
@@ -34,28 +37,42 @@ page.title=定义定制动画
<h2 id="Touch">定制触摸反馈</h2>
<p>材料设计中的触摸反馈可在用户与 UI 元素互动时，在接触点上提供即时视觉确认。适用于按钮的默认触摸动画使用全新 {@link android.graphics.drawable.RippleDrawable} 类别，以波纹效果实现不同状态间的转换。</p>
<p>材料设计中的触摸反馈可在用户与 UI 元素互动时，在接触点上提供即时视觉确认。
适用于按钮的默认触摸动画使用全新 {@link android.graphics.drawable.RippleDrawable} 类别，以波纹效果实现不同状态间的转换。
<p>在大多数情况下，您应以下列方式指定视图背景，在您的视图 XML 中应用此功能：</p>
</p>
<p>在大多数情况下，您应以下列方式指定视图背景，在您的视图 XML 中应用此功能：
</p>
<ul>
<li><code>?android:attr/selectableItemBackground</code> 指定有界的波纹</li>
<li><code>?android:attr/selectableItemBackgroundBorderless</code> 指定越界的波纹</li>
<li><code>?android:attr/selectableItemBackground</code> 指定有界的波纹。</li>
<li><code>?android:attr/selectableItemBackgroundBorderless</code> 指定越过视图边界的波纹。
它将由一个非空背景的视图的最近父项所绘制和设定边界。
</li>
</ul>
<p class="note"><strong>注意：</strong><code>selectableItemBackgroundBorderless</code> 是 API 级别 21 中推出的新属性。</p>
<p class="note"><strong>注意：</strong><code>selectableItemBackgroundBorderless</code> 是 API 级别 21 中推出的新属性。
</p>
<p>此外，您可利用 <code>ripple</code> 元素将 {@link android.graphics.drawable.RippleDrawable} 定义为一个 XML 资源。</p>
<p>此外，您可利用 <code>ripple</code> 元素将 {@link android.graphics.drawable.RippleDrawable}
定义为一个 XML 资源。</p>
<p>您可以为 {@link android.graphics.drawable.RippleDrawable} 对象指定一种颜色。如果要改变默认触摸反馈颜色，请使用主题的 <code>android:colorControlHighlight</code> 属性。</p>
<p>您可以为 {@link android.graphics.drawable.RippleDrawable} 对象指定一种颜色。如果要改变默认触摸反馈颜色，请使用主题的 <code>android:colorControlHighlight</code>
属性。
</p>
<p>如果要了解更多信息，请参阅 {@link android.graphics.drawable.RippleDrawable} 类别的 API 参考文档。</p>
<p>如果要了解更多信息，请参阅 {@link
android.graphics.drawable.RippleDrawable} 类别的 API 参考文档。</p>
<h2 id="Reveal">使用揭露效果</h2>
<p>当您显示或隐藏一组 UI 元素时，揭露动画可为用户提供视觉连续性。{@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} 方法让您能够为裁剪区域添加动画以揭露或隐藏视图。</p>
<p>当您显示或隐藏一组 UI
元素时，揭露动画可为用户提供视觉连续性。{@link android.view.ViewAnimationUtils#createCircularReveal
ViewAnimationUtils.createCircularReveal()} 方法让您能够为裁剪区域添加动画以揭露或隐藏视图。
</p>
<p>如果要使用此效果揭露之前不可见的视图：</p>
@@ -122,19 +139,29 @@ anim.start();
</video>
</div>
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
<p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>图 1</strong> - 拥有共享元素的转换。</p>
<em>如果要重新播放影片，请单击设备屏幕</em>
<p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>图 1</strong> - 拥有共享元素的转换。
</p>
<em>如果要重新播放影片，请点击设备屏幕</em>
</div>
</div>
<p>材料设计应用中的操作行为转换透过通用元素之间的移动和转换提供不同状态之间的视觉连接。您可为进入、退出以及操作行为之间的共享元素转换指定定制动画。</p>
<p>材料设计应用中的操作行为转换透过通用元素之间的移动和转换提供不同状态之间的视觉连接。
您可为进入、退出转换以及操作行为之间的共享元素转换指定定制动画。
</p>
<ul>
<li><strong>进入</strong>转换将决定操作行为的视图如何进入场景。例如，<em>分解</em>进入转换中，视图将从屏幕外进入场景并飞往屏幕中心。</li>
<li><strong>进入</strong>转换将决定操作行为中视图如何进入场景。例如，在<em>分解</em>进入转换中，视图将从屏幕外进入场景并飞往屏幕中心。
<li><strong>退出</strong>转换将决定操作行为的视图如何退出场景。例如，<em>分解</em>退出转换中，视图将从屏幕中心退出场景。</li>
</li>
<li><strong>共享元素</strong>转换将决定两个操作行为转换之间共享的视图如何在这些操作行为中转换。例如，如果两个操作行为拥有相同的图像，但其位置与大小不同，<em>changeImageTransform</em> 共享元素转换将在这些操作行为之间平滑地转换与缩放图像。</li>
<li><strong>退出</strong>转换将决定操作行为中应用行为的显示视图如何退出场景。例如，在<em>分解</em>退出转换中，视图将从屏幕中心退出场景。
</li>
<li><strong>共享元素</strong>转换将决定两个操作行为转换之间共享的视图如何在这些操作行为中转换。
例如，如果两个操作行为拥有相同的图像，但其位置与大小不同，<em>changeImageTransform</em> 共享元素转换将在这些操作行为之间平滑地转换与缩放图像。
</li>
</ul>
<p>Android 5.0（API 级别 21）支持这些进入与退出转换：</p>
@@ -142,10 +169,12 @@ anim.start();
<ul>
<li><em>分解</em> - 从场景中心移入或移出视图。</li>
<li><em>滑动</em> - 从场景边缘移入或移出视图。</li>
<li><em>淡入淡出</em> - 通过调整透明度从场景增添或移除视图。</li>
<li><em>淡入淡出</em> - 通过调整透明度在场景中增添或移除视图。</li>
</ul>
<p>任何扩展 {@link android.transition.Visibility} 类别的转换均将获得进入或退出转换支持。如果要了解更多信息，请参阅 {@link android.transition.Transition} 类别的 API 参考文档。</p>
<p>任何扩展 {@link android.transition.Visibility} 类别的转换均将获得进入或退出转换支持。
如果要了解更多信息，请参阅
{@link android.transition.Transition} 类别的 API 参考文档。</p>
<p>Android 5.0（API 级别 21）也支持这些共享元素转换：</p>
@@ -156,7 +185,8 @@ anim.start();
<li><em>changeImageTransform</em> - 为目标图像的大小与缩放变化添加动画。</li>
</ul>
<p>当您在您的应用中启用操作行为转换，默认的交叉淡入淡出转换将在进入与退出操作行为之间激活。</p>
<p>当您在您的应用中启用操作行为转换，默认的交叉淡入淡出转换将在进入与退出操作行为之间激活。
</p>
<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
<p class="img-caption">
@@ -165,7 +195,9 @@ anim.start();
<h3>指定定制转换</h3>
<p>首先，在定义您从材料主题继承的风格时，使用 <code>android:windowContentTransitions</code> 属性启用窗口内容转换。您也可在您的风格定义中指定进入、退出以及共享元素转换：</p>
<p>首先，在定义您从材料主题继承的风格时，使用 <code>android:windowContentTransitions</code>
属性启用窗口内容转换。您也可在您的风格定义中指定进入、退出以及共享元素转换：
</p>
<pre>
&lt;style name="BaseAppTheme" parent="android:Theme.Material">
@@ -194,9 +226,12 @@ anim.start();
&lt;/transitionSet>
</pre>
<p><code>changeImageTransform</code> 元素与 {@link android.transition.ChangeImageTransform} 类别相对应。如果要了解更多信息，请参阅 {@link android.transition.Transition} 的 API 参考文档。</p>
<p><code>changeImageTransform</code> 元素与
{@link android.transition.ChangeImageTransform} 类别相对应。如果要了解更多信息，请参阅 {@link android.transition.Transition} 的 API
参考。</p>
<p>如果要在您的代码中启用窗口内容转换，请调用 {@link android.view.Window#requestFeature Window.requestFeature()} 方法：</p>
<p>如果要在您的代码中启用窗口内容转换，请调用
{@link android.view.Window#requestFeature Window.requestFeature()} 方法：</p>
<pre>
// inside your activity (if you did not enable transitions in your theme)
@@ -206,33 +241,47 @@ getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setExitTransition(new Explode());
</pre>
<p>如果要在您的代码中指定转换，请以 {@link android.transition.Transition} 对象调用这些方法：</p>
<p>如果要在您的代码中指定转换，请以 {@link
android.transition.Transition} 对象调用这些方法：</p>
<ul>
<li>{@link android.view.Window#setEnterTransition Window.setEnterTransition()}</li>
<li>{@link android.view.Window#setExitTransition Window.setExitTransition()}</li>
<li>{@link android.view.Window#setSharedElementEnterTransition Window.setSharedElementEnterTransition()}</li>
<li>{@link android.view.Window#setSharedElementExitTransition Window.setSharedElementExitTransition()}</li>
<li>{@link android.view.Window#setSharedElementEnterTransition
Window.setSharedElementEnterTransition()}</li>
<li>{@link android.view.Window#setSharedElementExitTransition
Window.setSharedElementExitTransition()}</li>
</ul>
<p>{@link android.view.Window#setExitTransition setExitTransition()} 与 {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} 方法定义正在调用的操作行为的退出转换。{@link android.view.Window#setEnterTransition setEnterTransition()} 与 {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} 方法定义被调用的操作行为的进入转换。</p>
<p>{@link android.view.Window#setExitTransition setExitTransition()} 和 {@link
android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} 方法定义正在调用的操作行为的退出转换。
{@link android.view.Window#setEnterTransition
setEnterTransition()} 与 {@link android.view.Window#setSharedElementEnterTransition
setSharedElementEnterTransition()} 方法定义被调用的操作行为的进入转换。</p>
<p>如果要取得转换的完整效果，您必须在正在调用以及被调用的操作行为上启用窗口内容转换。否则，正在调用的操作行为将开始退出转换，但是您将会看到窗口转换（例如缩放或淡入淡出）</p>
<p>如果要取得转换的完整效果，您必须在正在调用以及被调用的操作行为上启用窗口内容转换。
否则，正在调用的操作行为将开始退出转换，但是您将会看到窗口转换（例如缩放或淡入淡出）。
</p>
<p>如果要尽快开始进入转换，请在被调用的操作行为上使用 {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} 方法。这可以让您实现更生动的进入转换。</p>
<p>如果要尽快开始进入转换，请针对被调用的操作行为使用
{@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()}
方法。这可以让您实现更生动的进入转换。</p>
<h3>使用转换开始一个操作行为</h3>
<h3>使用转换启动一个操作行为</h3>
<p>如果您启用转换并且为一个操作行为设置退出转换，那么在您启动另一个操作行为时，转换将以下列方式激活：</p>
<p>如果您启用转换并且为一个操作行为设置退出转换，那么在您启动另一个操作行为时，转换将以下列方式激活：
</p>
<pre>
startActivity(intent,
ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
</pre>
<p>如果您已为第二个操作行为设置进入转换，则转换也将会在操作行为开始时激活。如果要在您开始另一个操作行为时禁用转换，请提供 <code>null</code> 选项包。</p>
<p>如果您已为第二个操作行为设置进入转换，则转换也将会在操作行为启动时激活。
如果要在您启动另一个操作行为时禁用转换，请提供
<code>null</code> 选项包。</p>
<h3>以共享元素开始一个操作行为</h3>
<h3>以共享元素启动一个操作行为</h3>
<p>如果要在两个拥有共享元素的操作行为之间安排屏幕转换动画：</p>
@@ -240,8 +289,10 @@ startActivity(intent,
<li>请在您的主题中启用窗口内容转换。</li>
<li>在您的风格中指定一个共享元素转换。</li>
<li>将您的转换定义为 XML 资源。</li>
<li>利用 <code>android:transitionName</code> 属性对两个布局中的共享元素指定一个通用名称。</li>
<li>使用 {@link android.app.ActivityOptions#makeSceneTransitionAnimation ActivityOptions.makeSceneTransitionAnimation()} 方法。</li>
<li>利用
<code>android:transitionName</code> 属性对两个布局中的共享元素指定一个通用名称。</li>
<li>使用 {@link android.app.ActivityOptions#makeSceneTransitionAnimation
ActivityOptions.makeSceneTransitionAnimation()} 方法。</li>
</ol>
<pre>
@@ -266,13 +317,20 @@ imgContainerView.setOnClickListener(new View.OnClickListener() {
});
</pre>
<p>对于在您的代码中生成的共享动态视图，请使用 {@link android.view.View#setTransitionName View.setTransitionName()} 方法在两个操作行为中指定一个通用元素名称。</p>
<p>对于在您的代码中生成的共享动态视图，请使用
{@link android.view.View#setTransitionName View.setTransitionName()} 方法在两个操作行为中指定一个通用元素名称。
</p>
<p>如果要在完成第二项操作行为时反转场景转换动画，请调用 {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} 方法而非 {@link android.app.Activity#finish Activity.finish()}。</p>
<p>如果要在完成第二项操作行为时反转场景转换动画，请调用
{@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()}
方法而非 {@link android.app.Activity#finish Activity.finish()}。</p>
<h3>以多个共享元素开始一个操作行为</h3>
<h3>以多个共享元素启动一个操作行为</h3>
<p>如果要在两个拥有多过一个共享元素的操作行为之间安排场景转换动画，请以 <code>android:transitionName</code> 属性（或在两个操作行为中使用 {@link android.view.View#setTransitionName View.setTransitionName()} 方法）定义共享元素，并以下列方式创建一个 {@link android.app.ActivityOptions} 对象：</p>
<p>如果要在两个拥有多个共享元素的操作行为之间安排场景转换动画，请以 <code>android:transitionName</code>
属性（或在两个操作行为中使用 {@link android.view.View#setTransitionName View.setTransitionName()} 方法）定义共享元素，并以下列方式创建一个 {@link android.app.ActivityOptions} 对象：
</p>
<pre>
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
@@ -283,9 +341,14 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
<h2 id="CurvedMotion">使用曲线运动</h2>
<p>材料设计中的动画利用曲线进行时间内插与空间移动模式。利用 Android 5.0（API 级别 21）及更高版本，您可为动画定义定制时间曲线以及曲线运动模式。</p>
<p>材料设计中的动画利用曲线实现时间内插与空间移动模式。
利用 Android 5.0（API 级别 21）及更高版本，您可为动画定义定制时间曲线以及曲线运动模式。
</p>
<p>{@link android.view.animation.PathInterpolator} 类别是一个基于贝塞尔曲线或 {@link android.graphics.Path} 对象的全新插入器。此插入器在一个 1x1 的正方形内指定一个运动曲线，定位点位于 (0,0) 以及 (1,1)，而控制点则使用构造函数参数指定。您也可以将路径插入器定义为一个 XML 资源：</p>
<p>{@link android.view.animation.PathInterpolator} 类别是一个基于贝塞尔曲线或 {@link android.graphics.Path} 对象的全新插入器。
此插入器在一个 1x1 的正方形内指定一个运动曲线，定位点位于 (0,0) 以及 (1,1)，而控制点则使用构造函数参数指定。
您也可以将路径插入器定义为一个 XML 资源：</p>
<pre>
&lt;pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
@@ -295,7 +358,8 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
android:controlY2="1"/>
</pre>
<p>系统将为材料设计规范中的三种基本曲线提供 XML 资源：</p>
<p>系统将为材料设计规范中的三种基本曲线提供 XML 资源：
</p>
<ul>
<li><code>&#64;interpolator/fast_out_linear_in.xml</code></li>
@@ -303,9 +367,12 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
<li><code>&#64;interpolator/linear_out_slow_in.xml</code></li>
</ul>
<p>您可以将一个 {@link android.view.animation.PathInterpolator} 对象传递给 {@link android.animation.Animator#setInterpolator Animator.setInterpolator()} 方法。</p>
<p>您可以将一个 {@link android.view.animation.PathInterpolator} 对象传递给 {@link
android.animation.Animator#setInterpolator Animator.setInterpolator()} 方法。</p>
<p>{@link android.animation.ObjectAnimator} 类别拥有新的构造函数，可让您一次使用两个或更多属性在路径上为坐标添加动画。例如，下列的动画使用 {@link android.graphics.Path} 对象为视图的 X 和 Y 属性添加动画：</p>
<p>{@link android.animation.ObjectAnimator} 类别拥有新的构造函数，可让您一次使用两个或更多属性在路径上为坐标添加动画。
例如，下列动画使用 {@link android.graphics.Path} 对象为视图的 X 和 Y 属性添加动画：
</p>
<pre>
ObjectAnimator mAnimator;
@@ -317,7 +384,9 @@ mAnimator.start();
<h2 id="ViewState">为视图状态改变添加动画</h2>
<p>{@link android.animation.StateListAnimator} 类别让您能够定义视图状态改变时运行的动画。下列示例显示如何将 {@link android.animation.StateListAnimator} 定义为一个 XML 资源：</p>
<p>{@link android.animation.StateListAnimator} 类别让您能够定义视图状态改变时运行的动画。
下列示例显示如何将 {@link
android.animation.StateListAnimator} 定义为一个 XML 资源：</p>
<pre>
&lt;!-- animate the translationZ property of a view when pressed -->
@@ -345,11 +414,21 @@ mAnimator.start();
&lt;/selector>
</pre>
<p>如果要将定制视图状态动画附加至一个视图，请依照此示例使用 XML 资源文件中的 <code>selector</code> 元素定义一个动画，并使用 <code>android:stateListAnimator</code> 属性将此动画分配给您的视图。如果要将一个状态列表动画分配给您的代码内的一个视图，请使用 {@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()} 方法，并以{@link android.view.View#setStateListAnimator View.setStateListAnimator()} 方法将动画分配给您的视图。</p>
<p>如果要将定制视图状态动画附加至一个视图，请依照此示例使用 XML 资源文件中的
<code>selector</code> 元素定义一个动画，并使用 <code>android:stateListAnimator</code> 属性将此动画分配给您的视图。
如果要将一个状态列表动画分配给您的代码内的一个视图，请使用 {@link android.animation.AnimatorInflater#loadStateListAnimator
AnimationInflater.loadStateListAnimator()} 方法，并以
{@link android.view.View#setStateListAnimator View.setStateListAnimator()} 方法将动画分配给您的视图。
</p>
<p>当您的主题扩展材料主题，在默认情况下按钮将拥有一个 Z 动画。如果要避免您的按钮出现这类行为，请将 <code>android:stateListAnimator</code> 属性设置为 <code>@null</code>。</p>
<p>当您的主题扩展材料主题时，在默认情况下按钮将拥有一个 Z 动画。如果要避免您的按钮出现这类行为，请将 <code>android:stateListAnimator</code> 属性设置为
<code>@null</code>。
</p>
<p>{@link android.graphics.drawable.AnimatedStateListDrawable} 类别让您能够创建图片，显示相关视图之间的状态变化。Android 5.0 中的某些系统小组件在默认情况下使用这些动画。下列示例显示如何将 {@link android.graphics.drawable.AnimatedStateListDrawable} 定义为一个 XML 资源：</p>
<p>{@link android.graphics.drawable.AnimatedStateListDrawable} 类别让您能够创建图片，显示相关视图之间的状态变化。
Android 5.0 中的某些系统小组件在默认情况下使用这些动画。
下列示例显示如何将 {@link android.graphics.drawable.AnimatedStateListDrawable} 定义为一个 XML 资源：
</p>
<pre>
&lt;!-- res/drawable/myanimstatedrawable.xml -->
@@ -379,19 +458,28 @@ mAnimator.start();
<h2 id="AnimVector">为矢量图片添加动画</h2>
<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">矢量图片</a>可在不丢失定义的情况下缩放。{@link android.graphics.drawable.AnimatedVectorDrawable} 类别可让您为矢量图片的属性添加动画。</p>
<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">矢量图片</a>可在不丢失定义的情况下缩放。
{@link android.graphics.drawable.AnimatedVectorDrawable}
类别可让您为矢量图片的属性添加动画。</p>
<p>您通常可以在 3 个 XML 文件中定义添加动画的矢量图片：</p>
<ul>
<li>在 <code>res/drawable/</code> 中拥有 <code>&lt;vector&gt;</code> 元素的矢量图片</li>
<li>在 <code>res/drawable/</code> 中拥有 <code>&lt;animated-vector&gt;</code> 元素且已添加动画的矢量图片</li>
<li>在 <code>res/anim/</code> 中拥有 <code>&lt;objectAnimator&gt;</code> 元素的一个或多个对象动画</li>
<li>在
<code>res/drawable/</code> 中拥有 <code>&lt;vector&gt;</code> 元素的矢量图片</li>
<li>在
<code>res/drawable/</code> 中拥有 <code>&lt;animated-vector&gt;</code> 元素且已添加动画的矢量图片</li>
<li>在
<code>res/anim/</code> 中拥有 <code>&lt;objectAnimator&gt;</code> 元素的一个或多个对象动画</li>
</ul>
<p>添加动画的矢量图片可为 <code>&lt;group&gt;</code> 以及 <code>&lt;path&gt;</code> 元素的属性添加动画。<code>&lt;group&gt;</code> 元素定义路径集或子组，而　<code>&lt;path&gt;</code> 元素则定义将绘制的路径。</p>
<p>添加动画的矢量图片可为 <code>&lt;group&gt;</code> 以及
<code>&lt;path&gt;</code> 元素的属性添加动画。<code>&lt;group&gt;</code> 元素定义路径集或子组，而 <code>&lt;path&gt;</code> 元素则定义将绘制的路径。
</p>
<p>当您定义一个您想要添加动画的矢量图片时，请使用 <code>android:name</code> 属性给这些群组和路径指定一个唯一名称，以便让您能够从您的动画定义中参考这些群组或路径。例如：</p>
<p>当您定义一个您想要添加动画的矢量图片时，请使用 <code>android:name</code>
属性给这些群组和路径指定一个唯一名称，以便让您能够从您的动画定义中引用这些群组或路径。
例如：</p>
<pre>
&lt;!-- res/drawable/vectordrawable.xml -->
@@ -413,7 +501,8 @@ mAnimator.start();
&lt;/vector>
</pre>
<p>已添加动画的矢量图片定义指的是矢量图片内按名称分类的群组和路径：</p>
<p>已添加动画的矢量图片定义按名称引用矢量图片内的群组和路径：
</p>
<pre>
&lt;!-- res/drawable/animvectordrawable.xml -->
@@ -428,7 +517,9 @@ mAnimator.start();
&lt;/animated-vector>
</pre>
<p>动画定义代表着 {@link android.animation.ObjectAnimator} 或 {@link android.animation.AnimatorSet} 对象。此示例中的首个动画为目标群组进行了 360 度旋转：</p>
<p>动画定义代表着 {@link android.animation.ObjectAnimator} 或 {@link
android.animation.AnimatorSet} 对象。此示例中的第一个动画将目标群组旋转 360 度：
</p>
<pre>
&lt;!-- res/anim/rotation.xml -->
@@ -439,7 +530,9 @@ mAnimator.start();
android:valueTo="360" />
</pre>
<p>此示例中的第二个动画为矢量图片的路径进行变形。两个路径均需可兼容变形操作：两个路径均需拥有相同数量的指令，而且每个指令均需拥有相同数量的参数。</p>
<p>此示例中的第二个动画对矢量图片的路径进行变形。
两个路径均需可兼容变形操作：两个路径均需拥有相同数量的指令，而且每个指令均需拥有相同数量的参数。
</p>
<pre>
&lt;!-- res/anim/path_morph.xml -->
@@ -453,4 +546,5 @@ mAnimator.start();
&lt;/set>
</pre>
<p>如果要了解更多信息，请参阅 {@link android.graphics.drawable.AnimatedVectorDrawable} 的 API 参考文档。</p>
<p>如果要了解更多信息，请参阅 {@link
android.graphics.drawable.AnimatedVectorDrawable} 的 API 参考文档。</p>

78
docs/html-intl/intl/zh-cn/training/material/compatibility.jd
View File

@@ -20,42 +20,63 @@ page.title=维护兼容性
</div>
<p>有些材料设计功能（例如材料主题和定制操作行为转换）仅在 Android 5.0（API 级别 21）及更高版本中提供。不过，您可为您的应用进行设计，使应用在支持材料设计的设备上运行时可使用这些功能，且同时能够与运行早期版本 Android 的设备兼容。</p>
<p>有些材料设计功能（例如材料主题和定制操作行为转换）仅在 Android 5.0（API 级别 21）及更高版本中提供。
不过，您可为您的应用进行设计，使应用在支持材料设计的设备上运行时可使用这些功能，且同时能够与运行早期版本 Android 的设备兼容。
</p>
<h2 id="Theme">定义备用样式</h2>
<p>您可为您的应用进行配置，使应用能够在支持它的设备上使用材料主题，并且能够在运行早期版本 Android 的设备上还原至早期版本的主题：</p>
<p>您可对您的应用进行配置，使应用能够在支持它的设备上使用材料主题，并且能够在运行早期版本 Android 的设备上还原至早期版本的主题：
</p>
<ol>
<li>定义一个从 <code>res/values/styles.xml</code> 中的早期版本主题（例如 Holo）继承的主题。</li>
<li>定义一个从 <code>res/values-v21/styles.xml</code> 中的材料主题继承且拥有相同名称的主题。</li>
<li>定义一个从
<code>res/values/styles.xml</code> 中的早期版本主题（例如 Holo）继承的主题。</li>
<li>定义一个从
<code>res/values-v21/styles.xml</code> 中的材料主题继承且拥有相同名称的主题。</li>
<li>在清单文件中将此主题设置为您的应用主题。</li>
</ol>
<p class="note"><strong>请注意：</strong>如果您的应用使用材料主题，但没有以这方式提供备用主题，您的应用将无法在 Android 5.0 之前的 Android 版本上运行。
<p class="note"><strong>注意</strong>：如果您的应用使用材料主题，但没有以这方式提供备用主题，您的应用将无法在 Android 5.0 之前的 Android 版本上运行。
</p>
<h2 id="Layouts">提供备用布局</h2>
<p>如果您根据材料设计指导方针设计的布局没有使用 Android 5.0（API 级别 21）所推出的新 XML 属性，这些布局将能够在早期版本 Android 上运行。或者，您也可以提供备用布局。您也可以提供备用布局以定制应用在早期版本 Android 上的呈现方式。</p>
<p>如果您根据材料设计指导方针设计的布局没有使用 Android 5.0（API 级别 21）所推出的新 XML 属性，这些布局将能够在早期版本的 Android 上运行。
<p>您可在 <code>res/layout-v21/</code> 内创建用于 Android 5.0（API 级别 21）的布局文件，同时也可在 <code>res/layout/</code> 内创建用于早期版本 Android 的备用布局文件。例如，<code>res/layout/my_activity.xml</code> 是 <code>res/layout-v21/my_activity.xml</code> 的备用布局。</p>
或者，您也可以提供备用布局。您也可以提供备用布局以定制应用在早期版本的 Android 上的呈现方式。
</p>
<p>为避免代码重复，请在 <code>res/values/</code> 内定义您的风格，在 <code>res/values-v21/</code> 内为新 API 修改风格，以及使用风格继承（即：在 <code>res/values/</code> 内定义基础风格，然后在 <code>res/values-v21/</code> 内继承这些风格）。</p>
<p>您可在 <code>res/layout-v21/</code> 内创建用于 Android 5.0（API 级别 21）的布局文件，同时也可在 <code>res/layout/</code> 内创建用于早期版本 Android 的备用布局文件。例如，<code>res/layout/my_activity.xml</code> 是
<code>res/layout-v21/my_activity.xml</code> 的备用布局。
</p>
<p>为避免代码重复，请在 <code>res/values/</code> 内定义您的风格，在 <code>res/values-v21/</code> 内为新 API 修改风格，以及使用风格继承（即：在 <code>res/values/</code> 内定义基础风格，然后在 <code>res/values-v21/</code> 内继承这些风格）。
</p>
<h2 id="SupportLib">使用支持内容库</h2>
<p><a href="{@docRoot}tools/support-library/features.html#v7">v7 支持内容库</a> r21 及更高版本包括下列材料设计功能：</p>
<p><a href="{@docRoot}tools/support-library/features.html#v7">v7 支持内容库</a>
r21 及更高版本包括下列材料设计功能：</p>
<ul>
<li>应用其中一个 <code>Theme.AppCompat</code> 主题时可取得适用于一些系统小组件的<a href="{@docRoot}training/material/theme.html">材料设计风格</a>。</li>
<li><code>Theme.AppCompat</code> 主题中拥有<a href="{@docRoot}training/material/theme.html#ColorPalette">配色工具主题属性</a>。</li>
<li><a href="{@docRoot}training/material/lists-cards.html#RecyclerView">显示数据集合</a>的 {@link android.support.v7.widget.RecyclerView} 小组件。</li>
<li>应用其中一个 <code>Theme.AppCompat</code> 主题时可取得适用于一些系统小组件的<a href="{@docRoot}training/material/theme.html">材料设计风格</a>。
</li>
<li><code>Theme.AppCompat</code> 主题中拥有<a href="{@docRoot}training/material/theme.html#ColorPalette">配色工具主题属性</a>。
</li>
<li><a href="{@docRoot}training/material/lists-cards.html#RecyclerView">显示数据集合</a>的 {@link android.support.v7.widget.RecyclerView} 小组件。
</li>
<li><a href="{@docRoot}training/material/lists-cards.html#CardView">创建卡片</a>的 {@link android.support.v7.widget.CardView} 小组件。</li>
<li><a href="{@docRoot}training/material/drawables.html#ColorExtract">从图像萃取突出颜色</a>的 {@link android.support.v7.graphics.Palette} 类别。</li>
<li><a href="{@docRoot}training/material/drawables.html#ColorExtract">从图像萃取突出颜色</a>的 {@link android.support.v7.graphics.Palette} 类别。
</li>
</ul>
<h3>系统小组件</h3>
@@ -73,7 +94,8 @@ page.title=维护兼容性
<h3>配色工具</h3>
<p>如果要利用 Android v7 支持内容库取得材料设计风格以及定制配色工具，请应用其中一个 <code>Theme.AppCompat</code> 主题：</p>
<p>如果要利用 Android v7 支持内容库取得材料设计风格以及定制配色工具，请应用其中一个 <code>Theme.AppCompat</code> 主题：
</p>
<pre>
&lt;!-- extend one of the Theme.AppCompat themes -->
@@ -85,18 +107,23 @@ page.title=维护兼容性
&lt;/style>
</pre>
<h3>列表与卡片</h3>
<h3>列表和卡片</h3>
<p>{@link android.support.v7.widget.RecyclerView} 以及 {@link android.support.v7.widget.CardView} 小组件可通过 Android v7 支持内容库提供给早期版本 Android，但有如下限制：</p>
<p>{@link android.support.v7.widget.RecyclerView} 以及 {@link
android.support.v7.widget.CardView} 小组件可通过 Android v7 支持内容库提供给早期版本 Android，但有如下限制：
</p>
<ul>
<li>{@link android.support.v7.widget.CardView} 使用额外边距返回编程阴影实现。</li>
<li>{@link android.support.v7.widget.CardView} 不会裁剪其与圆角相交的子视图。</li>
<li>{@link android.support.v7.widget.CardView} 使用额外边距返回编程阴影实现。
</li>
<li>{@link android.support.v7.widget.CardView} 不会裁剪其与圆角相交的子视图。
</li>
</ul>
<h3>依赖关系</h3>
<h3>依赖项</h3>
<p>如果要在 Android 5.0（API 级别 21）之前的 Android 版本使用这些功能，请将 Android v7 支持内容库作为 <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Gradle 依赖关系</a>包括在您的项目中：</p>
<p>如果要在 Android 5.0（API 级别 21）之前的 Android 版本中使用这些功能，请将
Android v7 支持内容库作为 <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Gradle 依赖项</a>包括在您的项目中：</p>
<pre>
dependencies {
@@ -120,7 +147,9 @@ dependencies {
<li>图片着色</li>
</ul>
<p>如果要保留与早期版本 Android 的兼容性，请您在运行时检查系统 {@link android.os.Build.VERSION#SDK_INT version}，然后再为下列的任何一个功能调用 API：</p>
<p>如果要保留与早期版本 Android 的兼容性，请您在运行时检查系统 {@link
android.os.Build.VERSION#SDK_INT version}，然后再为下列的任何一个功能调用 API：
</p>
<pre>
// Check if we're running on Android 5.0 or higher
@@ -131,4 +160,9 @@ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
}
</pre>
<p class="note"><strong>请注意：</strong>如果要指定您的应用所支持的 Android 版本，请使用您的清单文件中的 <code>android:minSdkVersion</code> 以及 <code>android:targetSdkVersion</code> 属性。如果要在 Android 5.0 内使用材料设计功能，请将 <code>android:targetSdkVersion</code> 属性设置为 <code>21</code>。如果要了解更多信息，请参阅 <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">&lt;uses-sdk&gt; API 指南</a>。</p>
<p class="note"><strong>注意：</strong>如果要指定您的应用所支持的 Android 版本，请使用您的清单文件中的 <code>android:minSdkVersion</code> 以及 <code>android:targetSdkVersion</code>
属性。
如果要在 Android 5.0 内使用材料设计功能，请将 <code>android:targetSdkVersion</code> 属性设置为 <code>21</code>。
如果要了解更多信息，请参阅
<a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">&lt;uses-sdk&gt; API
指南</a>。</p>

45
docs/html-intl/intl/zh-cn/training/material/drawables.jd
View File

@@ -31,14 +31,22 @@ page.title=使用图片
<h2 id="DrawableTint">为图片资源着色</h2>
<p>利用 Android 5.0（API 级别 21）及更高版本，您可为位图以及定义为 Alpha 蒙版的点九图着色。您可使用颜色资源或分解为颜色资源（例如 <code>?android:attr/colorPrimary</code>）的主题属性为其着色。通常，您只有一次机会创建这些资产并自动为其上色以符合您的主题。</p>
<p>利用 Android 5.0（API 级别 21）及更高版本，您可为位图以及定义为 Alpha 蒙版的点九图着色。
您可使用颜色资源或分解为颜色资源（例如 <code>?android:attr/colorPrimary</code>）的主题属性为其着色。
通常，您只有一次机会创建这些资产并自动为其上色以符合您的主题。
</p>
<p>您可利用 {@code setTint()} 方法为 {@link android.graphics.drawable.BitmapDrawable} 或 {@link android.graphics.drawable.NinePatchDrawable} 对象着色。您也可以利用 <code>android:tint</code> 以及 <code>android:tintMode</code> 属性设置您的布局中的着色颜色和模式。</p>
<p>您可利用 {@code setTint()} 方法为 {@link android.graphics.drawable.BitmapDrawable} 或 {@link
android.graphics.drawable.NinePatchDrawable} 对象着色。您也可以利用 <code>android:tint</code> 以及
<code>android:tintMode</code> 属性设置您的布局中的着色颜色和模式。
</p>
<h2 id="ColorExtract">从图像萃取突出颜色</h2>
<p>Android 支持内容库 r21 及更高版本包括 {@link android.support.v7.graphics.Palette} 类别，可让您从图像萃取突出颜色。此类别将萃取下列突出颜色：</p>
<p>Android 支持内容库 r21 及更高版本包括 {@link
android.support.v7.graphics.Palette} 类别，可让您从图像萃取突出颜色。此类别将萃取下列突出颜色：
</p>
<ul>
<li>鲜艳</li>
@@ -49,34 +57,44 @@ page.title=使用图片
<li>低调浅色</li>
</ul>
<p>如果要萃取这些颜色，请将 {@link android.graphics.Bitmap} 对象传递给位于您上载图像的背景线程的 {@link android.support.v7.graphics.Palette#generate Palette.generate()} 静态方法。如果您无法使用此线程，请调用 {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} 方法并提供一个侦听程序。</p>
<p>如果要萃取这些颜色，请将 {@link android.graphics.Bitmap} 对象传递给位于您上载图像的背景线程的
{@link android.support.v7.graphics.Palette#generate Palette.generate()} 静态方法。
如果您无法使用此线程，请调用
{@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} 方法并提供一个侦听程序。
</p>
<p>您可使用 <code>Palette</code> 类别（例如 <code>Palette.getVibrantColor</code>）中的 getter 方法从图像检索突出颜色。</p>
<p>您可使用
<code>Palette</code> 类别（例如 <code>Palette.getVibrantColor</code>）中的 getter 方法从图像检索突出颜色。</p>
<p>如果要使用您项目中的 {@link android.support.v7.graphics.Palette} 类别，请将下列 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 依赖关系</a>添加至您的应用模块：</p>
<p>如果要在项目中使用 {@link android.support.v7.graphics.Palette} 类别，请将下列
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 依赖项</a>添加至您的应用模块：
</p>
<pre>
dependencies {
...
compile 'com.android.support:palette-v7:21.0.+'
compile 'com.android.support:palette-v7:21.0.0'
}
</pre>
<p>如果要了解更多信息，请参阅 {@link android.support.v7.graphics.Palette} 类别的 API 参考文档。</p>
<p>如果要了解更多信息，请参阅{@link android.support.v7.graphics.Palette}
类别的 API 参考文档。</p>
<h2 id="VectorDrawables">创建矢量图片</h2>
<!-- video box -->
<a class="notice-developers-video"
href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
<div>
<h3>视频</h3>
<p>Android 矢量图形</p>
</div>
</a>
<p>在 Android 5.0（API 级别 21）及更高版本中，您可定义矢量图片，而且图片可在不丢失定义的情况下缩放。您只需一个资产文件即可创建一个矢量图像，而位图图像则需要为每个屏幕密度提供一个资产文件。如果要创建一个矢量图像，请您在 <code>&lt;vector&gt;</code> XML 元素中定义形状的详情。</p>
<p>在 Android 5.0（API 级别 21）及更高版本中，您可定义矢量图片，而且图片可在不损失清晰度的情况下缩放。
您只需一个资产文件即可创建一个矢量图像，而位图图像则需要为每个屏幕密度提供一个资产文件。
如果要创建一个矢量图像，请您在 <code>&lt;vector&gt;</code> XML 元素中定义形状的详情。
</p>
<p>下列示例以心形定义一个矢量图像：</p>
@@ -102,4 +120,7 @@ href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
&lt;/vector>
</pre>
<p>矢量图像在 Android 中以 {@link android.graphics.drawable.VectorDrawable} 对象表示。如果要了解更多有关 <code>pathData</code> 语法的信息，请参阅 <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG 路径参考文档</a>。如果要了解更多有关为矢量图片属性添加动画的信息，请参阅<a href="{@docRoot}training/material/animations.html#AnimVector">为矢量图片添加动画</a>。</p>
<p>矢量图像在 Android 中以 {@link android.graphics.drawable.VectorDrawable}
对象表示。如果要了解更多有关 <code>pathData</code> 语法的信息，请参阅 <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG 路径参考</a>。如果要了解更多有关为矢量图片属性添加动画的信息，请参阅<a href="{@docRoot}training/material/animations.html#AnimVector">为矢量图片添加动画</a>。
</p>

54
docs/html-intl/intl/zh-cn/training/material/get-started.jd
View File

@@ -38,22 +38,29 @@ page.title=入门指南
定制您的应用中的<strong>动画</strong>。</li>
</ol>
<h3>维护后向兼容性</h3>
<h3>保持后向兼容性</h3>
<p>您可将多个材料设计功能添加至您的应用，同时维护与 Android 5.0 之前的 Android 版本的兼容性。如果要了解更多信息，请参阅<a href="{@docRoot}training/material/compatibility.html">维护兼容性</a>。</p>
<p>您可将多个材料设计功能添加至您的应用，同时保持与 Android 5.0 之前的 Android 版本的兼容性。
如果要了解更多信息，请参阅
<a href="{@docRoot}training/material/compatibility.html">保持兼容性</a>。</p>
<h3>使用材料设计更新您的应用</h3>
<p>如果要更新现有应用以纳入材料设计，请遵循材料设计指导方针更新您的布局。同时也须确保纳入深度、触摸反馈和动画。</p>
<p>如果要更新现有应用以纳入材料设计，请遵循材料设计指导方针更新您的布局。
同时也须确保纳入深度、触摸反馈和动画。
</p>
<h3>使用材料设计创建新应用</h3>
<p>如果您要使用材料设计功能创建新应用，<a href="http://www.google.com/design/spec">材料设计指导方针</a>将为您提供一个紧密结合的设计框架。请遵循这些指导方针并使用 Android 框架中的新功能来设计与开发您的应用。</p>
<p>如果您要使用材料设计功能创建新应用，<a href="http://www.google.com/design/spec">材料设计指导方针</a>将为您提供一个紧密结合的设计框架。
请遵循这些指导方针并使用 Android
框架中的新功能来设计与开发您的应用。</p>
<h2 id="ApplyTheme">使用材料主题</h2>
<p>如果要在您的应用中使用材料主题，请指定一个从 <code>android:Theme.Material</code> 继承的风格：</p>
<p>如果要在您的应用中使用材料主题，请指定一个从
<code>android:Theme.Material</code> 继承的风格：</p>
<pre>
&lt;!-- res/values/styles.xml -->
@@ -65,12 +72,16 @@ page.title=入门指南
&lt;/resources>
</pre>
<p>材料主题提供更新的系统小组件，让您能够为触摸反馈以及操作行为转换设置配色工具以及默认动画。有关更多详情，请参阅<a href="{@docRoot}training/material/theme.html">使用材料主题</a>。</p>
<p>材料主题提供更新的系统小组件，让您能够为触摸反馈以及操作行为转换设置配色工具以及默认动画。
有关更多详情，请参阅<a href="{@docRoot}training/material/theme.html">使用材料主题</a>。
</p>
<h2 id="Layouts">设计布局</h2>
<p>除了应用及定制材料主题，您的布局同时也应符合<a href="http://www.google.com/design/spec">材料设计指导方针</a>。设计布局时，请特别注意下列几点：</p>
<p>除了应用及定制材料主题，您的布局同时也应符合<a href="http://www.google.com/design/spec">材料设计指导方针</a>。
设计布局时，请特别注意下列几点：
</p>
<ul>
<li>基线格点</li>
@@ -83,7 +94,9 @@ page.title=入门指南
<h2 id="Depth">指定您视图内的高度</h2>
<p>视图可透射阴影，而视图的高度值将决定其阴影的大小以及其显示顺序。如果要设置视图的高度，请使用您的布局中的 <code>android:elevation</code> 属性：</p>
<p>视图可透射阴影，而视图的高度值将决定其阴影的大小以及其显示顺序。
如果要设置视图的高度，请使用您的布局中的
<code>android:elevation</code> 属性：</p>
<pre>
&lt;TextView
@@ -95,14 +108,22 @@ page.title=入门指南
android:elevation="5dp" />
</pre>
<p>新的 <code>translationZ</code> 属性可让您创建反映出视图高度临时变化的动画。高度变化可在<a href="{@docRoot}training/material/animations.html#ViewState">响应触摸手势</a>时发挥作用。</p>
<p>新的 <code>translationZ</code> 属性可让您创建反映出视图高度临时变化的动画。
高度变化可在<a href="{@docRoot}training/material/animations.html#ViewState">响应触摸手势</a>时发挥作用。
<p>有关更多详情，请参阅<a href="{@docRoot}training/material/shadows-clipping.html">定义阴影与裁剪视图</a>。</p>
</p>
<p>有关更多详情，请参阅<a href="{@docRoot}training/material/shadows-clipping.html">定义阴影与裁剪视图</a>。
</p>
<h2 id="ListsCards">创建列表与卡片</h2>
<p>{@link android.support.v7.widget.RecyclerView} 是 {@link android.widget.ListView} 的可插入版本，支持不同布局类型，具有更高性能。{@link android.support.v7.widget.CardView} 让您能够展示卡片内的各种信息并且在各种应用中实现一致的呈现方式。下列代码示例将展示如何将 {@link android.support.v7.widget.CardView} 包括在您的布局中：</p>
<p>{@link android.support.v7.widget.RecyclerView} 是 {@link
android.widget.ListView} 的可插入版本，支持不同布局类型，具有更高性能。
{@link android.support.v7.widget.CardView} 让您能够展示卡片内的各种信息并且在各种应用中实现一致的呈现方式。
下列代码示例将展示如何将
{@link android.support.v7.widget.CardView} 包括在您的布局中：</p>
<pre>
&lt;android.support.v7.widget.CardView
@@ -114,12 +135,15 @@ page.title=入门指南
&lt;/android.support.v7.widget.CardView>
</pre>
<p>如果要了解更多信息，请参阅<a href="{@docRoot}training/material/lists-cards.html">创建列表与卡片</a>。</p>
<p>如需了解详细信息，请参阅<a href="{@docRoot}training/material/lists-cards.html">创建列表和卡片</a>。
</p>
<h2 id="Animations">定制您的动画</h2>
<p>Android 5.0（API 级别 21）包括新 API，可用于在您的应用中创建定制动画。例如，您可启用操作行为转换并定义操作行为内的退出转换：</p>
<p>Android 5.0（API 级别 21）包括新 API，可用于在您的应用中创建定制动画。例如，您可启用操作行为转换并定义操作行为内的退出转换：
</p>
<pre>
public class MyActivity extends Activity {
@@ -142,6 +166,6 @@ public class MyActivity extends Activity {
}
</pre>
<p>当您从此操作行为开始另一个操作行为时，退出转换将被激活。</p>
<p>当您从此操作行为启动另一个操作行为时，退出转换将被激活。</p>
<p>如果要了解有关新动画 API 的更多详情，请参阅<a href="{@docRoot}training/material/animations.html">定义定制动画</a>。</p>
<p>如果要了解有关新动画 API 的更多详情，请参阅<a href="{@docRoot}training/material/animations.html">定义定制动画</a>。</p>

22
docs/html-intl/intl/zh-cn/training/material/index.jd
View File

@@ -1,21 +1,26 @@
page.title=使用材料设计创建应用
page.type=design
page.image=images/material.png
page.title=面向开发者的材料设计
page.type=设计
page.image=images/cards/material_2x.png
page.metaDescription=学习如何将材料设计运用到您的应用中。
@jd:body
<div id="tb-wrapper">
<div id="tb">
<h2>依赖关系和先决条件</h2>
<h2>依赖项和先决条件</h2>
<ul>
<li>Android 5.0（API 级别 21）</li>
<li>Android Studio 0.8</li>
</ul>
</div>
</div>
<p>材料设计是专为设计适用于多个平台和设备的视觉、移动与互动效果而制定的综合指南。如果要在您的 Android 应用中使用材料设计，请遵循<a href="http://www.google.com/design/spec/material-design/introduction.html">材料设计规范</a>内所述的指导方针，并使用 Android 5.0（API 级别 21）所提供的新组件与功能。</p>
<p>材料设计是专为设计适用于多个平台和设备的视觉、运动与互动效果而制定的综合指南。
如果要在您的 Android 应用中使用材料设计，请遵循<a href="http://www.google.com/design/spec/material-design/introduction.html">材料设计规范</a>内所述的指导方针，并使用 Android 5.0（API 级别 21）所提供的新组件与功能。
</p>
<p>本课程将向您介绍如何利用下列元素创建材料设计应用：</p>
@@ -27,7 +32,8 @@ page.metaDescription=学习如何将材料设计运用到您的应用中。
<li>定制动画</li>
</ul>
<p>本课程也将向您展示在您的应用中使用材料设计功能时应如何维护与 Android 5.0（API 级别 21）之前的 Android 版本的兼容性。</p>
<p>本课程也将向您展示在您的应用中使用材料设计功能时应如何保持与 Android
5.0（API 级别 21）之前的 Android 版本的兼容性。</p>
<h2>课程</h2>
@@ -52,4 +58,4 @@ page.metaDescription=学习如何将材料设计运用到您的应用中。
<dt><a href="{@docRoot}training/material/compatibility.html">维护兼容性</a></dt>
<dd>了解如何维护与 Android 5.0 之前各种平台版本的兼容性。</dd>
</dl>
</dl>

89
docs/html-intl/intl/zh-cn/training/material/lists-cards.jd
View File

@@ -19,28 +19,40 @@ page.title=创建列表与卡片
</div>
<p>如果要在您的应用中使用材料设计风格创建复杂列表与卡片，您可使用 {@link android.support.v7.widget.RecyclerView} 以及 {@link android.support.v7.widget.CardView} 小组件。</p>
<p>如果要在您的应用中使用材料设计风格创建复杂列表与卡片，您可使用
{@link android.support.v7.widget.RecyclerView} 以及 {@link android.support.v7.widget.CardView}
小组件。</p>
<h2 id="RecyclerView">创建列表</h2>
<p>{@link android.support.v7.widget.RecyclerView} 小组件比 {@link android.widget.ListView} 更高级且更具灵活性。此小组件是一个用于显示庞大数据集的容器，可通过保持有限数量的视图进行非常有效的滚动操作。如果您有数据收集任务，且在任务运行过程中其元素将因用户操作或网络事件而发生改变，则请使用 {@link android.support.v7.widget.RecyclerView} 小组件。</p>
<p>{@link android.support.v7.widget.RecyclerView} 小组件比 {@link android.widget.ListView} 更高级且更具灵活性。
此小组件是一个用于显示庞大数据集的容器，可通过保持有限数量的视图进行非常有效的滚动操作。
如果您有数据集合，其中的元素将因用户操作或网络事件而发生改变，请使用
{@link android.support.v7.widget.RecyclerView} 小组件。
</p>
<p>{@link android.support.v7.widget.RecyclerView} 类别将通过提供下列功能简化庞大数据集的显示与处理：</p>
<p>{@link android.support.v7.widget.RecyclerView} 类别将通过提供下列功能简化庞大数据集的显示与处理：
</p>
<ul>
<li>用于项目定位的布局管理器</li>
<li>用于通用项目操作（例如删除或添加项目）的默认动画。</li>
<li>用于通用项目操作（例如删除或添加项目）的默认动画</li>
</ul>
<p>您也可灵活选择如何为 {@link android.support.v7.widget.RecyclerView} 小组件定义定制布局管理器与动画。</p>
<p>您也可灵活选择如何为 {@link
android.support.v7.widget.RecyclerView} 小组件定义定制布局管理器与动画。</p>
<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" />
<p class="img-caption">
<strong>图 1</strong>.<code>RecyclerView</code> 小组件。
</p>
<p>如果要使用 {@link android.support.v7.widget.RecyclerView} 小组件，您必须指定一个适配器和一个布局管理器。如果要创建一个适配器，请扩展 {@link android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} 类别。实现的详情将取决于数据集的具体信息以及视图的类型。如果要了解更多信息，请参阅下列<a href="#RVExamples">示例</a>。</p>
<p>如果要使用 {@link android.support.v7.widget.RecyclerView} 小组件，您必须指定一个适配器和一个布局管理器。
如果要创建一个适配器，请扩展 {@link
android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} 类别。实现的详情将取决于数据集的具体信息以及视图的类型。
如果要了解更多信息，请参阅下列<a href="#RVExamples">示例</a>。
</p>
<div style="float:right">
<img src="{@docRoot}design/material/images/list_mail.png" alt="" width="250" height="426" />
@@ -49,25 +61,37 @@ page.title=创建列表与卡片
</p>
</div>
<p><strong>布局管理器</strong>将确定 {@link android.support.v7.widget.RecyclerView} 内各项目视图的位置并决定何时重新使用用户已不可见的项目视图。如果要重新使用（或<em>重复使用</em>）一个视图，布局管理器可能会要求适配器以数据集中的另一个元素替换视图的内容。以此方式重复使用视图将可避免创建不必要的视图或执行成本高昂的 {@link android.app.Activity#findViewById findViewById()} 查找，从而改善性能。</p>
<p><strong>布局管理器</strong>将确定 {@link
android.support.v7.widget.RecyclerView} 内各项目视图的位置并决定何时重新使用用户已不可见的项目视图。
如果要重新使用（或<em>重复使用</em>）一个视图，布局管理器可能会要求适配器以数据集中的另一个元素替换视图的内容。
以此方式重复使用视图将可避免创建不必要的视图或执行成本高昂的 {@link android.app.Activity#findViewById findViewById()} 查找，从而改善性能。
</p>
<p>{@link android.support.v7.widget.RecyclerView} 提供这些内置布局管理器：</p>
<ul>
<li>{@link android.support.v7.widget.LinearLayoutManager} 以垂直或水平滚动列表方式显示项目。</li>
<li>{@link android.support.v7.widget.LinearLayoutManager} 以垂直或水平滚动列表方式显示项目。
</li>
<li>{@link android.support.v7.widget.GridLayoutManager} 在网格中显示项目。</li>
<li>{@link android.support.v7.widget.StaggeredGridLayoutManager} 在分散对齐网格中显示项目。</li>
</ul>
<p>如果要创建一个定制布局管理器，请扩展 {@link android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} 类别。</p>
<p>如果要创建一个定制布局管理器，请扩展 {@link
android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} 类别。</p>
<h3>动画</h3>
<p>{@link android.support.v7.widget.RecyclerView} 在默认情况下启用增添与删除项目的动画。如果要定制这些动画，请扩展 {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} 类别并使用 {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()} 方法。</p>
<p>{@link
android.support.v7.widget.RecyclerView} 在默认情况下启用增添与删除项目的动画。如果要定制这些动画，请扩展
{@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} 类别并使用 {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}
方法。
</p>
<h3 id="RVExamples">示例</h3>
<p>下列代码示例将展示如何将 {@link android.support.v7.widget.RecyclerView} 添加至布局：</p>
<p>下列代码示例将展示如何将
{@link android.support.v7.widget.RecyclerView} 添加至布局：</p>
<pre>
&lt;!-- A RecyclerView with some commonly used attributes -->
@@ -78,7 +102,9 @@ page.title=创建列表与卡片
android:layout_height="match_parent"/>
</pre>
<p>将 {@link android.support.v7.widget.RecyclerView} 小组件添加至您的布局后，立即获取对象图柄并将其连接至布局管理器，同时附加一个适配器以便显示数据：</p>
<p>将 {@link android.support.v7.widget.RecyclerView} 小组件添加至您的布局后，立即获取对象图柄并将其连接至布局管理器，同时附加一个适配器以便显示数据：
</p>
<pre>
public class MyActivity extends Activity {
@@ -108,7 +134,10 @@ public class MyActivity extends Activity {
}
</pre>
<p>适配器可让您存取数据集中的项目，为项目创建视图，并且在原始项目不再可见时以新数据项目替换视图的某些内容。下列代码示例将展示一个简单的实现，目标为一个包含使用 {@link android.widget.TextView} 小组件显示的字符串阵列的数据集：</p>
<p>适配器可让您存取数据集中的项目，为项目创建视图，并且在原始项目不再可见时以新数据项目替换视图的某些内容。
下列代码示例将展示一个简单的实现，目标为一个包含使用 {@link android.widget.TextView} 小组件显示的字符串阵列的数据集：
</p>
<pre>
public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
@@ -171,19 +200,29 @@ public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
<h2 id="CardView">创建卡片</h2>
<p>{@link android.support.v7.widget.CardView} 扩展 {@link android.widget.FrameLayout} 类别并让您能够显示卡片内的信息，这些信息在整个平台中拥有一致的呈现方式。{@link android.support.v7.widget.CardView} 小组件可拥有阴影和圆角。</p>
<p>{@link android.support.v7.widget.CardView} 扩展 {@link android.widget.FrameLayout} 类别并让您能够显示卡片内的信息，这些信息在整个平台中拥有一致的呈现方式。{@link
android.support.v7.widget.CardView} 小组件可拥有阴影和圆角。
</p>
<p>如果要使用阴影创建卡片，请使用 <code>card_view:cardElevation</code> 属性。{@link android.support.v7.widget.CardView} 在 Android 5.0（API 级别 21）及更高版本中使用真实高度与动态阴影，而在早期的 Android 版本中则返回编程阴影实现。如果要了解更多信息，请参阅<a href="{@docRoot}training/material/compatibility.html">维护兼容性</a>。</p>
<p>如果要使用阴影创建卡片，请使用 <code>card_view:cardElevation</code> 属性。{@link android.support.v7.widget.CardView} 在 Android 5.0（API 级别 21）及更高版本中使用真实高度与动态阴影，而在早期的 Android 版本中则返回编程阴影实现。如需了解详细信息，请参阅<a href="{@docRoot}training/material/compatibility.html">保持兼容性</a>
<p>使用这些属性定制 {@link android.support.v7.widget.CardView} 小组件的外观：</p>
</p>
<p>使用这些属性定制
{@link android.support.v7.widget.CardView} 小组件的外观：</p>
<ul>
<li>如果要在您的布局中设置圆角半径，请使用 <code>card_view:cardCornerRadius</code> 属性。</li>
<li>如果要在您的布局中设置圆角半径，请使用 <code>card_view:cardCornerRadius</code>
属性。</li>
<li>如果要在您的代码中设置圆角半径，请使用 <code>CardView.setRadius</code> 方法。</li>
<li>如果要设置卡片的背景颜色，请使用 <code>card_view:cardBackgroundColor</code> 属性。</li>
<li>如果要设置卡片的背景颜色，请使用 <code>card_view:cardBackgroundColor</code>
属性。</li>
</ul>
<p>下列代码示例将展示如何将 {@link android.support.v7.widget.CardView} 小组件包括在您的布局中：</p>
<p>下列代码示例将展示如何将 {@link android.support.v7.widget.CardView}
小组件包括在您的布局中：</p>
<pre>
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
@@ -207,12 +246,16 @@ public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
&lt;/LinearLayout>
</pre>
<p>如果要了解更多信息，请参阅 {@link android.support.v7.widget.CardView} 的 API 参考文档。</p>
<p>如果要了解更多信息，请参阅 {@link android.support.v7.widget.CardView} 的 API 参考。</p>
<h2 id="Dependencies">添加依赖关系</h2>
<h2 id="Dependencies">添加依赖项</h2>
<p>{@link android.support.v7.widget.RecyclerView} 与 {@link android.support.v7.widget.CardView} 小组件为 <a href="{@docRoot}tools/support-library/features.html#v7">v7 支持内容库</a>的一部分。如果要在您的项目中使用这些小组件，请将这些 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 依赖关系</a>添加至您的应用模块：</p>
<p>{@link android.support.v7.widget.RecyclerView} 与 {@link android.support.v7.widget.CardView}
小组件为 <a href="{@docRoot}tools/support-library/features.html#v7">v7 支持内容库</a>的一部分。
如果要在您的项目中使用这些小组件，请将这些
<a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 依赖项</a>添加至您的应用模块：
</p>
<pre>
dependencies {
@@ -220,4 +263,4 @@ dependencies {
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}
</pre>
</pre>

70
docs/html-intl/intl/zh-cn/training/material/shadows-clipping.jd
View File

@@ -18,20 +18,29 @@ page.title=定义阴影与裁剪视图
</div>
</div>
<p>材料设计为 UI 元素引入高度高度将帮助用户了解每个元素的相对重要性，让他们能够集中于手边的工作。</p>
<p>材料设计为 UI 元素引入高度。高度将帮助用户了解每个元素的相对重要性，让他们能够集中于手边的工作。
</p>
<p>由 Z 属性所表示的视图高度将决定其阴影的视觉外观：拥有较高 Z 值的视图将投射更大且更柔和的阴影。拥有较高 Z 值的视图将挡住拥有较低 Z 值的视图；不过视图的 Z 值并不影响视图的大小。</p>
<p>由 Z 属性所表示的视图高度将决定其阴影的视觉外观：拥有较高 Z 值的视图将投射更大且更柔和的阴影。
拥有较高 Z 值的视图将挡住拥有较低 Z 值的视图；不过视图的 Z 值并不影响视图的大小。
</p>
<p>阴影是由提升的视图的父项所绘制，因此将受到标准视图裁剪的影响，而在默认情况下裁剪将由父项执行。</p>
<p>阴影是由提升的视图的父项所绘制，因此将受到标准视图裁剪的影响，而在默认情况下裁剪将由父项执行。
</p>
<p>此外，在创建其中的小组件在执行某些操作行为时会暂时升至视图平面之上的动画时，高度也很实用。</p>
<p>此外，在创建其中的小组件在执行某些操作行为时会暂时升至视图平面之上的动画时，高度也很实用。
</p>
<p>要了解更多有关材料设计高度的信息，请参阅 <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">3D 空间内的对象</a>。</p>
<p>要了解更多有关材料设计高度的信息，请参阅
<a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">3D 空间内的对象</a>。
</p>
<h2 id="Elevation">指定视图高度</h2>
<p>视图的 Z 值包含两个组件： <ul>
<p>视图的 Z 值包含两个组件：
<ul>
<li>高度：静态组件。</li>
<li>转换：用于动画的动态组件。</li>
</ul>
@@ -41,20 +50,32 @@ page.title=定义阴影与裁剪视图
<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
<p class="img-caption"><strong>图 1</strong> - 不同视图高度的阴影。</p>
<p>如果要在布局定义中设置视图的高度，请使用 <code>android:elevation</code> 属性。如果要在操作行为的代码中设置视图高度，请使用 {@link android.view.View#setElevation View.setElevation()} 方法。</p>
<p>如果要在布局定义中设置视图的高度，请使用 <code>android:elevation</code>
属性。如果要在操作行为的代码中设置视图高度，请使用
{@link android.view.View#setElevation View.setElevation()} 方法。</p>
<p>如果要设置视图转换，请使用 {@link android.view.View#setTranslationZ View.setTranslationZ()} 方法。</p>
<p>如果要设置视图转换，请使用 {@link android.view.View#setTranslationZ
View.setTranslationZ()} 方法。</p>
<p>全新的 {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} 与 {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} 方法让您能够轻松地为视图高度添加动画。如果要了解更多信息，请参阅 {@link android.view.ViewPropertyAnimator} 的 API 参考文档以及<a href="{@docRoot}guide/topics/graphics/prop-animation.html">属性动画</a>开发指南。</p>
<p>全新的 {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} 与 {@link
android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} 方法让您能够轻松地为视图高度添加动画。
如果要了解更多信息，请参阅
{@link android.view.ViewPropertyAnimator} 的 API 参考以及<a href="{@docRoot}guide/topics/graphics/prop-animation.html">属性动画</a>开发指南。
</p>
<p>您也可使用 {@link android.animation.StateListAnimator} 以说明性方式指定这些动画。当状态改变会触发动画（例如当用户按下按钮）时，此方法特别有用。如果要了解更多信息，请参阅<a href="{@docRoot}training/material/animations.html#ViewState">为视图状态改变添加动画</a>。</p>
<p>您也可使用 {@link android.animation.StateListAnimator} 以说明性方式指定这些动画。
当状态改变会触发动画（例如当用户按下按钮）时，此方法特别有用。
如果要了解更多信息，请参阅<a href="{@docRoot}training/material/animations.html#ViewState">为视图状态改变添加动画</a>。
</p>
<p>Z 值按 dp（密度独立像素）测量。</p>
<p>Z 值以 dp（密度独立像素）为单位度量。</p>
<h2 id="Shadows">定制视图阴影与轮廓</h2>
<p>视图的背景图片的边界将决定其阴影的默认形状。<strong>轮廓</strong>代表图形对象的外形并定义触摸反馈的波纹区域。</p>
<p>视图的背景图片的边界将决定其阴影的默认形状。<strong>轮廓</strong>代表图形对象的外形并定义触摸反馈的波纹区域。
</p>
<p>下面举一个以背景图片定义的视图示例：</p>
@@ -77,23 +98,36 @@ page.title=定义阴影与裁剪视图
&lt;/shape>
</pre>
<p>视图将投射一个带有圆角的阴影，因为背景图片将定义视图的轮廓。如果提供一个定制轮廓，则此轮廓将替代视图阴影的默认形状。</p>
<p>视图将投射一个带有圆角的阴影，因为背景图片将定义视图的轮廓。
如果提供一个定制轮廓，则此轮廓将替代视图阴影的默认形状。</p>
<p>如果要为您的代码中的视图定义定制轮廓：<p>
<ol>
<li>扩展 {@link android.view.ViewOutlineProvider} 类别。</li>
<li>替代 {@link android.view.ViewOutlineProvider#getOutline getOutline()} 方法。</li>
<li>利用 {@link android.view.View#setOutlineProvider View.setOutlineProvider()} 方法向您的视图指定新的轮廓提供程序。</li>
<li>利用 {@link
android.view.View#setOutlineProvider View.setOutlineProvider()} 方法向您的视图指定新的轮廓提供程序。</li>
</ol>
<p>您可使用 {@link android.graphics.Outline} 类别中的方法创建带有圆角的椭圆形和矩形轮廓。视图的默认轮廓提供程序将从视图背景取得轮廓。如果要防止视图投射阴影，请将其轮廓提供程序设置为 <code>null</code>。</p>
<p>您可使用
{@link android.graphics.Outline} 类别中的方法创建带有圆角的椭圆形和矩形轮廓。视图的默认轮廓提供程序将从视图背景取得轮廓。
如果要防止视图投射阴影，请将其轮廓提供程序设置为 <code>null</code>。
</p>
<h2 id="Clip">裁剪视图</h2>
<p>裁剪视图让您能够轻松改变视图形状。您可以裁剪视图，以便与其他设计元素保持一致，也可以根据用户输入改变视图形状。您可使用 {@link android.view.View#setClipToOutline View.setClipToOutline()} 方法或 <code>android:clipToOutline</code> 属性将视图裁剪至其轮廓区域。由 {@link android.graphics.Outline#canClip Outline.canClip()} 方法所决定，仅有矩形、圆形和圆角矩形轮廓支持裁剪。</p>
<p>裁剪视图让您能够轻松改变视图形状。您可以裁剪视图，以便与其他设计元素保持一致，也可以根据用户输入改变视图形状。您可使用 {@link android.view.View#setClipToOutline
View.setClipToOutline()} 方法或 <code>android:clipToOutline</code> 属性将视图裁剪至其轮廓区域。
<p>如果要将视图裁剪至图片的形状，请将图片设置为视图背景（如上所示）并调用 {@link android.view.View#setClipToOutline View.setClipToOutline()} 方法。</p>
由
{@link android.graphics.Outline#canClip Outline.canClip()} 方法所决定，仅有矩形、圆形和圆角矩形轮廓支持裁剪。
</p>
<p>裁剪视图是一个成本高昂的操作，因此不可为您用于裁剪视图的形状添加动画。如果要实现此效果，请使用<a href="{@docRoot}training/material/animations.html#Reveal">揭露效果</a>动画。</p>
<p>如果要将视图裁剪至图片的形状，请将图片设置为视图背景（如上所示）并调用 {@link android.view.View#setClipToOutline View.setClipToOutline()}
方法。
</p>
<p>裁剪视图是一个成本高昂的操作，因此不可为您用于裁剪视图的形状添加动画。
如果要实现此效果，请使用<a href="{@docRoot}training/material/animations.html#Reveal">揭露效果</a>动画。</p>

48
docs/html-intl/intl/zh-cn/training/material/theme.jd
View File

@@ -27,9 +27,12 @@ page.title=使用材料主题
<li>操作行为转换动画</li>
</ul>
<p>您可使用您所控制的配色工具，按照您的品牌形象定制材料主题的外观。您可使用主题属性为操作栏和状态栏着色，如<a href="#fig3">图 3</a> 所示。</p>
<p>您可使用您所控制的配色工具，按照您的品牌形象定制材料主题的外观。
您可使用主题属性为操作栏和状态栏着色，如<a href="#fig3">图 3</a> 所示。
</p>
<p>系统小组件拥有全新的设计与触摸反馈动画。您可为您的应用定制配色工具、触摸反馈动画以及操作行为转换。</p>
<p>系统小组件拥有全新的设计与触摸反馈动画。您可为您的应用定制配色工具、触摸反馈动画以及操作行为转换。
</p>
<p>材料主题的定义为：</p>
@@ -39,7 +42,8 @@ page.title=使用材料主题
<li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
</ul>
<p>如果要了解您可使用的材料风格，请参阅 {@link android.R.style R.style} 的 API 参考文档。</p>
<p>如果要了解您可使用的材料风格，请参阅
{@link android.R.style R.style} 的 API 参考。</p>
<!-- two columns, dark/light material theme example -->
<div style="width:700px;margin-top:25px;margin-bottom:10px">
@@ -59,13 +63,18 @@ page.title=使用材料主题
</div>
<p class="note">
<strong>请注意：</strong>材料主题仅在 Android 5.0（API 级别 21）及更高版本中提供。<a href="{@docRoot}tools/support-library/features.html#v7">v7 支持内容库</a>为一些小组件提供附带材料设计风格的主题，同时为配色工具定制提供支持。如果要了解更多信息，请参阅<a href="{@docRoot}training/material/compatibility.html">维护兼容性</a>。
<strong>注意：</strong>材料主题仅在 Android 5.0（API 级别 21）及更高版本中提供。
<a href="{@docRoot}tools/support-library/features.html#v7">v7 支持内容库</a>为一些小组件提供附带材料设计风格的主题，同时为配色工具定制提供支持。
如果要了解更多信息，请参阅
<a href="{@docRoot}training/material/compatibility.html">保持兼容性</a>。
</p>
<h2 id="ColorPalette">定制配色工具</h2>
<p style="margin-bottom:30px">如果要定制主题的基色以符合您的品牌，您可在进行材料主题继承时使用主题属性定义您的定制颜色：</p>
<p style="margin-bottom:30px">如果要定制主题的基色以符合您的品牌，您可在进行材料主题继承时使用主题属性定义您的定制颜色：
</p>
<pre>
&lt;resources>
@@ -91,17 +100,32 @@ page.title=使用材料主题
<h2 id="StatusBar">定制状态栏</h2>
<p>材料主题可让您轻松定制状态栏，因此您可以指定一个符合自己品牌特色且对比度足够高、能够显示白色状态图标的颜色。如果要为状态栏设置定制颜色，您可在扩展材料主题时使用 <code>android:statusBarColor</code> 属性。默认情况下，<code>android:statusBarColor</code> 将继承 <code>android:colorPrimaryDark</code> 的值。</p>
<p>材料主题可让您轻松定制状态栏，因此您可以指定一个符合自己品牌特色且对比度足够高、能够显示白色状态图标的颜色。
如果要为状态栏设置定制颜色，您可在扩展材料主题时使用 <code>android:statusBarColor</code> 属性。
<p>您也可自行将状态栏移到后侧。例如，您想在一个照片上以透明的方式显示状态栏，同时利用细微的深色渐变以确保白色状态图标仍保持可见。如果要执行此操作，请将 <code>android:statusBarColor</code> 属性设置为 <code>&#64;android:color/transparent</code> 并根据需要调整窗口标志。您也可以使用 {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} 方法进行动画或淡出设置。</p>
<p class="note">
<strong>请注意：</strong>在多数情况下，状态栏与主工具栏之间应该有一个清楚的分割，您在这些栏的后侧显示全屏的丰富图像或媒体内容以及使用颜色渐变以确保图表仍保持可见的情况除外。
默认情况下，<code>android:statusBarColor</code> 将继承 <code>android:colorPrimaryDark</code> 的值。
</p>
<p>定制导航栏和状态栏时，您可选择将导航栏和状态栏变透明或仅修改状态栏。在所有其他情况中，导航栏均应保持黑色。</p>
<p>您也可自行将状态栏移到后侧。例如，您想在一个照片上以透明的方式显示状态栏，同时利用细微的深色渐变以确保白色状态图标仍保持可见。
如果要执行此操作，请将 <code>android:statusBarColor</code> 属性设置为
<code>&#64;android:color/transparent</code> 并根据需要调整窗口标志。您也可以使用 {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} 方法进行动画或淡出设置。
</p>
<p class="note">
<strong>注意：</strong>在多数情况下，状态栏与主工具栏之间应该有一个清楚的分割，您在这些栏的后侧显示全屏的丰富图像或媒体内容以及使用颜色渐变以确保图表仍保持可见的情况除外。
</p>
<p>定制导航栏和状态栏时，您可选择将导航栏和状态栏变透明或仅修改状态栏。
在所有其他情况中，导航栏均应保持黑色。</p>
<h2 id="Inheritance">主题个别视图</h3>
<p>XML 布局定义内的元素可指定 <code>android:theme</code> 属性，而该属性将引用一个主题资源。此属性可修改元素以及任何子元素的主题，有助于改变界面中特定部分的主题配色工具。</p>
<p>XML 布局定义内的元素可指定 <code>android:theme</code> 属性，而该属性将引用一个主题资源。
此属性可修改元素以及任何子元素的主题，有助于改变界面中特定部分的主题配色工具。
</p>

49
docs/html-intl/intl/zh-tw/design/material/index.jd
View File

@@ -1,7 +1,6 @@
page.title=材料設計
page.tags=Material, design
page.type=設計
page.image=design/material/images/MaterialLight.png
page.title=Android 材料設計
page.tags=Material,design
page.image=images/cads/design-material-for-android_2x.jpg
@jd:body
@@ -41,19 +40,19 @@ page.image=design/material/images/MaterialLight.png
<p itemprop="description">材料設計是一份內容廣泛的綜合性指南，引導您跨平台、跨裝置進行視覺、動態和互動的設計。
Android 現已納入對材料設計應用程式的支援。
如果要在 Android 應用程式中使用材料設計，請依照<a href="http://www.google.com/design/spec">材料設計規格</a>中定義的指示，並使用
Android
5.0 (API 層級 21) 或後續版本中的新元件和新功能。</p>
如果要在 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>新的設計風格</li>
<li>用於複雜視圖的小工具</li>
<li>自訂陰影和動畫的新 API</li>
</ul>
<p>如需取得如何在 Android 上實作材料設計的詳細資訊，請詳見<a href="{@docRoot}training/material/index.html">使用材料設計建立應用程式</a>。
<p>如需取得如何在 Android 上實作材料設計的詳細資訊，請參閱<a href="{@docRoot}training/material/index.html">使用材料設計建立應用程式</a>。
</p>
@@ -92,8 +91,8 @@ Android
<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>
<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" />
@@ -109,12 +108,12 @@ Android
<h3>檢視陰影</h3>
<p>除了 X 和 Y 屬性外，Android 中的檢視現在也有 Z 屬性。
這個新屬性代表檢視的高度，這會決定：</p>
<p>除了 X 和 Y 屬性外，Android 中的視圖現在也有 Z 屬性。
這個新屬性代表視圖的高度，這會決定：</p>
<ul>
<li>陰影大小：帶有較高 Z 值的檢視會投射更大的陰影。</li>
<li>繪製順序：具有較高 Z 值的檢視會顯示在其他檢視之上。</li>
<li>陰影大小：Z 值較高的視圖會投射更大的陰影。</li>
<li>繪製順序：Z 值較高的視圖會顯示在其他視圖之上。</li>
</ul>
<div style="width:290px;margin-left:35px;float:right">
@@ -130,39 +129,39 @@ Android
</div>
</div>
<p>如需取得詳細資訊，請參閱<a href="{@docRoot}training/material/shadows-clipping.html">定義陰影和裁剪檢視</a>。
<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/shadows-clipping.html">定義陰影和裁剪視圖</a>。
</p>
<h3>動畫</h3>
<p>新的動畫 API 可針對 UI 控制項的輕觸回饋、檢視狀態中的變更，以及行為轉換，讓您建立自訂動畫。
<p>新的動畫 API 可針對 UI 控制項的輕觸回饋、視圖狀態中的變更，以及操作行為轉換，讓您建立自訂動畫。
</p>
<p>這些 API 讓您可以：</p>
<ul>
<li style="margin-bottom:15px">
回應您檢視中有<strong>輕觸回饋</strong>動畫的輕觸事件。
回應您視圖中有<strong>輕觸回饋</strong>動畫的輕觸事件。
</li>
<li style="margin-bottom:15px">
隱藏和顯示有<strong>循環顯示</strong>動畫的檢視。
隱藏和顯示有<strong>循環顯示</strong>動畫的視圖。
</li>
<li style="margin-bottom:15px">
在有自訂<strong>行為轉換</strong>動畫的行為間切換。
在包含自訂<strong>操作行為轉換</strong>動畫的行為間切換。
</li>
<li style="margin-bottom:15px">
使用<strong>曲線動作</strong>建立更自然的動畫。
</li>
<li style="margin-bottom:15px">
在帶有<strong>檢視狀態變更</strong>動畫的一個或多個檢視屬性中變更動畫。
在包含<strong>視圖狀態變更</strong>動畫的一個或多個視圖屬性中變更動畫。
</li>
<li style="margin-bottom:15px">
在檢視狀態變更間，顯示<strong>狀態清單可繪項目</strong>中的動畫。
在視圖狀態變更之間，顯示<strong>狀態清單可繪項目</strong>中的動畫。
</li>
</ul>
<p>輕觸回饋動畫會內建於數個標準檢視中，例如按鈕等。新 API 可讓您自訂這些動畫，並將其新增至您的自訂檢視中。
<p>輕觸回饋動畫會內建於數個標準視圖中，例如按鈕等。新 API 可讓您自訂這些動畫，並將其新增至您的自訂視圖中。
</p>
<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/animations.html">定義自訂動畫</a>。
@@ -176,7 +175,7 @@ Android
<ul>
<li><strong>矢量可繪項目</strong>可以調整大小，但又不會喪失定義，最適合於應用程式中的單色圖示。
</li>
<li><strong>可繪項目著色</strong>可讓您在執行階段將點陣圖定義為 Alpha 遮罩，並以一個顏色進行著色。
<li><strong>繪製著色</strong>可讓您在執行階段將點陣圖定義為 Alpha 遮罩，並以一個顏色進行著色。
</li>
<li><strong>顏色提取</strong>可讓您自動從點陣圖影像中提取顯著顏色。
</li>

226
docs/html-intl/intl/zh-tw/training/material/animations.jd
View File

@@ -9,7 +9,7 @@ page.title=定義自訂動畫
<li><a href="#Touch">自訂輕觸回饋</a></li>
<li><a href="#Reveal">使用顯示效果</a></li>
<li><a href="#Transitions">自訂操作行為轉換</a></li>
<li><a href="#ViewState">動畫顯示檢視狀態變更</a></li>
<li><a href="#ViewState">動畫顯示視圖狀態變更</a></li>
<li><a href="#AnimVector">動畫顯示矢量可繪</a></li>
</ol>
<h2>您也應該閱讀</h2>
@@ -21,43 +21,60 @@ page.title=定義自訂動畫
</div>
<p>材料設計中的動畫讓使用者在進行操作動作之後獲得回饋，並且在使用者與您的應用程式互動時提供視覺上的連續性。材料設計風格針對按鈕和操作行為轉換提供某些預設的動畫，而 Android 5.0 (API 級別 21) 或更新版本則可讓您自訂這些動畫，以及建立新的動畫：</p>
<p>材料設計中的動畫讓使用者在進行操作動作之後獲得回饋，並且在使用者與您的應用程式互動時提供視覺上的連續性。
材料設計風格針對按鈕和操作行為轉換，提供某些預設的動畫，而 Android 5.0 (API 級別 21) 以上版本則可讓您自訂這些動畫並建立新的動畫：
</p>
<ul>
<li>輕觸回饋</li>
<li>循環顯示</li>
<li>操作行為轉換</li>
<li>曲線動作</li>
<li>檢視狀態變更</li>
<li>視圖狀態變更</li>
</ul>
<h2 id="Touch">自訂輕觸回饋</h2>
<p>當使用者與 UI 元素互動時，材料設計中的輕觸回饋在接觸點提供即時的視覺化確認。按鈕的預設輕觸回饋動畫使用新的 {@link android.graphics.drawable.RippleDrawable} 類別，透過漣漪效果在不同的狀態之間進行轉換。</p>
<p>當使用者與 UI 元素互動時，材料設計中的輕觸回饋在接觸點提供即時的視覺化確認。
按鈕的預設輕觸回饋動畫使用新的 {@link android.graphics.drawable.RippleDrawable} 類別，透過漣漪效果在不同狀態之間進行轉換。
<p>在大多數情況下，您應該在檢視 XML 中將檢視背景指定為下列項目來套用此功能：</p>
</p>
<p>大多數情況下，您應該在視圖 XML 中將視圖背景指定為下列項目以套用此功能：
</p>
<ul>
<li>對有邊界的漣漪指定為 <code>?android:attr/selectableItemBackground</code></li>
<li>對延伸出檢視的漣漪指定為 <code>?android:attr/selectableItemBackgroundBorderless</code></li>
<li>對有邊界的漣漪指定為 <code>?android:attr/selectableItemBackground</code>。</li>
<li>對延伸出視圖的漣漪指定為 <code>?android:attr/selectableItemBackgroundBorderless</code>。
這會繪製在具有非空背景的視圖之最接近父項上，並以其作為邊界。
</li>
</ul>
<p class="note"><strong>注意：</strong><code>selectableItemBackgroundBorderless</code> 是 API 級別 21 引入的新屬性。</p>
<p class="note"><strong>注意：</strong><code>selectableItemBackgroundBorderless</code> 是 API 級別 21 推出的新屬性。
</p>
<p>或者，您也可以使用 <code>ripple</code> 元素將 {@link android.graphics.drawable.RippleDrawable} 定義為 XML 資源。</p>
<p>或者，您也可以使用 <code>ripple</code> 元素將 {@link android.graphics.drawable.RippleDrawable} 定義為 XML 資源。
</p>
<p>您可以對 {@link android.graphics.drawable.RippleDrawable} 物件指定顏色。如果要變更預設的輕觸回饋顏色，請使用風格主題的 <code>android:colorControlHighlight</code> 屬性。</p>
<p>您可以對 {@link android.graphics.drawable.RippleDrawable} 物件指定色彩。如要變更預設的輕觸回饋色彩，請使用設計風格的 <code>android:colorControlHighlight</code> 屬性。
<p>如需詳細資訊，請參閱 {@link android.graphics.drawable.RippleDrawable} 類別的 API 參考資料。</p>
</p>
<p>如需詳細資訊，請參閱 {@link
android.graphics.drawable.RippleDrawable} 類別的 API 參考資料。</p>
<h2 id="Reveal">使用顯示效果</h2>
<p>當您顯示或隱藏一組 UI 元素時，顯示動畫可提供使用者視覺上的連續性。{@link android.view.ViewAnimationUtils#createCircularReveal ViewAnimationUtils.createCircularReveal()} 方法可讓您以動畫顯示裁剪的圓形，來顯示或隱藏檢視。</p>
<p>當您顯示或隱藏一組 UI 元素時，顯示動畫可提供使用者視覺上的連續性。
{@link android.view.ViewAnimationUtils#createCircularReveal
ViewAnimationUtils.createCircularReveal()}方法可讓您以動畫顯示裁剪的圓形，以顯示或隱藏視圖。
</p>
<p>使用下列效果顯示之前看不見的檢視：</p>
<p>使用下列效果顯示之前看不見的視圖：</p>
<pre>
// previously invisible view
@@ -79,7 +96,7 @@ myView.setVisibility(View.VISIBLE);
anim.start();
</pre>
<p>使用下列效果隱藏之前看見的檢視：</p>
<p>使用下列效果隱藏之前看見的視圖：</p>
<pre>
// previously visible view
@@ -122,41 +139,54 @@ anim.start();
</video>
</div>
<div style="font-size:10pt;margin-left:20px;margin-bottom:30px">
<p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>圖 1</strong> - 使用分享元素的轉換。</p>
<em>如果要重播影片，請按一下裝置螢幕</em>
<p class="img-caption" style="margin-top:3px;margin-bottom:10px"><strong>圖 1</strong> - 使用分享元素的轉換。
</p>
如要重播影片，請按一下裝置螢幕<em></em>
</div>
</div>
<p>材料設計應用程式中的操作行為轉換透過常見元素之間的動作和轉換，在不同的狀態之間提供視覺上的連接效果。您可以針對進入和離開轉換，以及不同操作行為之間分享元素的轉換指定自訂動畫。</p>
<p>材料設計應用程式中的操作行為轉換透過常見元素之間的動作和轉換，在不同的狀態之間提供視覺上的連接效果。
您可針對進入和離開轉換及不同操作行為之間分享元素的轉換指定自訂動畫。
</p>
<ul>
<li><strong>進入</strong>轉換決定操作行為中的檢視如何進入場景。例如，在<em>爆炸</em>進入轉換中，檢視會從外面進入場景，然後飛入螢幕的中央。</li>
<li><strong>進入</strong>轉換決定操作行為中的視圖如何進入場景。例如，在爆炸<em></em>進入轉換中，視圖會從外面進入場景，接著飛入螢幕的中央。
<li><strong>離開</strong>轉換決定操作行為中的檢視如何離開場景。例如，在<em>爆炸</em>離開轉換中，檢視會從中央離開場景。</li>
</li>
<li><strong>分享元素</strong>轉換決定在兩個操作行為轉換之間分享的檢視如何在這些操作行為之間轉換。例如，如果兩個操作行為在不同的位置和大小有相同的影像，<em>changeImageTransform</em> 分享元素轉換會在這些操作行為之間流暢地解譯影像以及調整影像的大小。</li>
<li><strong>離開</strong>轉換決定操作行為中的視圖如何離開場景。例如，在爆炸<em></em>離開轉換中，視圖會從中央離開場景。
</li>
<li><strong>分享元素</strong>轉換決定在兩個操作行為轉換之間分享的視圖如何在這些操作行為之間轉換。
例如，若兩個操作行為在不同的位置和大小具有相同的影像，changeImageTransform<em></em> 分享元素轉換會在這些操作行為之間流暢地解譯影像以及調整影像的大小。
</li>
</ul>
<p>Android 5.0 (API 級別 21) 支援下列進入和離開轉換：</p>
<ul>
<li>爆炸<em></em> - 檢視從場景的中央移入和移出。</li>
<li>滑動<em></em> - 檢視從場景的其中一邊移入和移出。</li>
<li>淡化<em></em> - 改變檢視的透明度，將檢視加入場景，或從場景移除檢視。</li>
<li>爆炸<em></em> - 視圖從場景的中央移入和移出。</li>
<li>滑動<em></em> - 視圖從場景的其中一邊移入和移出。</li>
<li>淡化<em></em> - 改變視圖的透明度，以將視圖加入場景，或從場景中移除。</li>
</ul>
<p>延伸 {@link android.transition.Visibility} 類別的轉換都可做為進入或離開轉換。如需詳細資訊，請參閱 {@link android.transition.Transition} 類別的 API 參考資料。</p>
<p>所有延伸 {@link android.transition.Visibility} 類別的轉換都可作為進入或離開轉換。
如需詳細資訊，請參閱 {@link android.transition.Transition} 類別的 API 參考資料。
</p>
<p>Android 5.0 (API 級別 21) 也支援下列分享元素轉換：</p>
<ul>
<li>changeBounds<em></em> - 動畫顯示目標檢視版面邊界的變更。</li>
<li>changeClipBounds<em></em> - 動畫顯示目標檢視裁剪邊界的變更。</li>
<li>changeTransform<em></em> - 動畫顯示目標檢視比例和旋轉方向的變更。</li>
<li>changeImageTransform<em></em> - 動畫顯示目標影像大小和比例的變更。</li>
<li>changeBounds<em></em> - 動畫顯示目標視圖版面配置邊界的變更。</li>
<li>changeClipBounds<em></em> - 動畫顯示目標視圖裁剪邊界的變更。</li>
<li>changeTransform<em></em> - 動畫顯示目標視圖比例和旋轉方向的變更。</li>
<li><em>changeImageTransform</em> - 動畫顯示目標影像大小和比例的變更。</li>
</ul>
<p>當您在應用程式中啟用操作行為轉換時，進入和離開操作行為之間會啟動預設交錯淡化轉換。</p>
<p>當您在應用程式中啟用操作行為轉換時，進入和離開操作行為之間會啟動預設交錯淡化轉換。
</p>
<img src="{@docRoot}training/material/images/SceneTransition.png" alt="" width="600" height="405" style="margin-top:20px" />
<p class="img-caption">
@@ -165,7 +195,9 @@ anim.start();
<h3>指定自訂轉換</h3>
<p>首先，當您定義一個從材料設計風格繼承而來的樣式時，請使用 <code>android:windowContentTransitions</code> 屬性啟用視窗內容轉換。您也可以在樣式定義中指定進入、離開和分享元素轉換：</p>
<p>首先，當您定義一個從材料設計風格繼承而來的樣式時，請使用 <code>android:windowContentTransitions</code> 屬性啟用視窗內容轉換。
您也可在樣式定義中指定進入、離開和分享元素轉換：
</p>
<pre>
&lt;style name="BaseAppTheme" parent="android:Theme.Material">
@@ -194,9 +226,12 @@ anim.start();
&lt;/transitionSet>
</pre>
<p><code>changeImageTransform</code> 元素符合 {@link android.transition.ChangeImageTransform} 類別。如需詳細資訊，請參閱 {@link android.transition.Transition} 的 API 參考資料。</p>
<p><code>changeImageTransform</code> 元素對應至 {@link android.transition.ChangeImageTransform} 類別。
如需詳細資訊，請參閱 {@link android.transition.Transition} 的 API 參考資料。
</p>
<p>如果要在程式碼中改為啟用視窗內容轉換，請呼叫 {@link android.view.Window#requestFeature Window.requestFeature()} 方法：</p>
<p>如要在程式碼中改為啟用視窗內容轉換，請呼叫 {@link android.view.Window#requestFeature Window.requestFeature()}方法：
</p>
<pre>
// inside your activity (if you did not enable transitions in your theme)
@@ -206,42 +241,58 @@ getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
getWindow().setExitTransition(new Explode());
</pre>
<p>如果要在程式碼中指定轉換，請搭配 {@link android.transition.Transition} 物件呼叫下列方法：</p>
<p>如要在程式碼中指定轉換，請以 {@link
android.transition.Transition} 物件呼叫下列方法：</p>
<ul>
<li>{@link android.view.Window#setEnterTransition Window.setEnterTransition()}</li>
<li>{@link android.view.Window#setExitTransition Window.setExitTransition()}</li>
<li>{@link android.view.Window#setSharedElementEnterTransition Window.setSharedElementEnterTransition()}</li>
<li>{@link android.view.Window#setSharedElementExitTransition Window.setSharedElementExitTransition()}</li>
<li>{@link android.view.Window#setSharedElementEnterTransition
Window.setSharedElementEnterTransition()}</li>
<li>{@link android.view.Window#setSharedElementExitTransition
Window.setSharedElementExitTransition()}</li>
</ul>
<p>{@link android.view.Window#setExitTransition setExitTransition()} 和 {@link android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} 方法定義呼叫操作行為的離開轉換。{@link android.view.Window#setEnterTransition setEnterTransition()} 和 {@link android.view.Window#setSharedElementEnterTransition setSharedElementEnterTransition()} 方法定義被呼叫操作行為的進入轉換。</p>
<p>{@link android.view.Window#setExitTransition setExitTransition()} 和 {@link
android.view.Window#setSharedElementExitTransition setSharedElementExitTransition()} 方法定義了呼叫操作行為的離開轉換。
{@link android.view.Window#setEnterTransition
setEnterTransition()} 和 {@link android.view.Window#setSharedElementEnterTransition
setSharedElementEnterTransition()} 方法定義被呼叫操作行為的進入轉換。</p>
<p>如果要取得轉換的完整效果，您必須同時對呼叫與被呼叫操作行為啟用視窗內容轉換。否則，呼叫操作行為只會啟動離開轉換，然後您只會看到視窗轉換 (類似調整大小或淡化)。</p>
<p>如要取得轉換的完整效果，您必須同時對呼叫與被呼叫操作行為啟用視窗內容轉換。
否則，呼叫操作行為會啟動離開轉換，然後您只會看到視窗轉換 (類似調整大小或淡化)。
</p>
<p>如果要立即啟動進入轉換，請對被呼叫的操作行為使用 {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} 方法。這樣您就會有更戲劇性的進入轉換。</p>
<p>如要立即啟動進入轉換，請對被呼叫的操作行為使用 {@link android.view.Window#setAllowEnterTransitionOverlap Window.setAllowEnterTransitionOverlap()} 方法。
這樣您就會有更戲劇性的進入轉換。</p>
<h3>使用轉換啟動操作行為</h3>
<p>如果您啟用轉換並且對操作行為設定離開轉換，當您啟動另一個操作行為時就會啟動轉換，如下所示：</p>
<p>若您啟用轉換並對操作行為設定離開轉換，當您啟動另一個操作行為時，就會啟動轉換，如下所示：
</p>
<pre>
startActivity(intent,
ActivityOptions.makeSceneTransitionAnimation(this).toBundle());
</pre>
<p>如果您已經針對第二個操作行為設定進入轉換，當操作行為啟動時，也會啟動轉換。如果要在啟動另一個操作行為時停用轉換，請提供 <code>null</code> 選項組合。</p>
<p>若您已針對第二個操作行為設定進入轉換，當操作行為啟動時，也會啟動轉換。
若要在啟動另一個操作行為時停用轉換，請提供 <code>null</code> 選項組合。
</p>
<h3>使用一個分享元素啟動操作行為</h3>
<p>在兩個擁有分享元素的操作行為之間製作螢幕轉換動畫：</p>
<ol>
<li>在風格主題中啟用視窗內容轉換。</li>
<li>在設計風格中啟用視窗內容轉換。</li>
<li>在樣式中指定分享元素轉換。</li>
<li>將您的轉換定義為 XML 資源。</li>
<li>使用 <code>android:transitionName</code> 屬性，對兩個版面配置中的分享元素指定通用名稱。</li>
<li>使用 {@link android.app.ActivityOptions#makeSceneTransitionAnimation ActivityOptions.makeSceneTransitionAnimation()} 方法。</li>
<li>使用 <code>android:transitionName</code> 屬性，對兩個版面配置中的分享元素指定通用名稱。
</li>
<li>使用 {@link android.app.ActivityOptions#makeSceneTransitionAnimation
ActivityOptions.makeSceneTransitionAnimation()} 方法。</li>
</ol>
<pre>
@@ -266,13 +317,20 @@ imgContainerView.setOnClickListener(new View.OnClickListener() {
});
</pre>
<p>對於您在程式碼中所產生的分享動態檢視，請使用 {@link android.view.View#setTransitionName View.setTransitionName()} 方法，在兩個操作行為中指定通用元素名稱。</p>
<p>對於您在程式碼中所產生的分享動態視圖，請使用 {@link android.view.View#setTransitionName View.setTransitionName()} 方法，在兩個操作行為中指定通用元素名稱。
<p>如果要在完成第二個操作行為時倒轉場景轉換動畫，請呼叫 {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} 方法而不是 {@link android.app.Activity#finish Activity.finish()}。</p>
</p>
<p>如要在完成第二個操作行為時倒轉場景轉換動畫，請呼叫 {@link android.app.Activity#finishAfterTransition Activity.finishAfterTransition()} 方法而不是 {@link android.app.Activity#finish Activity.finish()}。
</p>
<h3>使用多個分享元素啟動操作行為</h3>
<p>如果要在兩個擁有多個分享元素的操作行為之間製作場景轉換動畫，請使用 <code>android:transitionName</code> 屬性在兩個版面配置中定義分享元素 (或在兩個操作行為中使用 {@link android.view.View#setTransitionName View.setTransitionName()} 方法)，然後建立 {@link android.app.ActivityOptions} 物件，如下所示：</p>
<p>如要在兩個具有多個分享元素的操作行為之間製作場景轉換動畫，請使用 <code>android:transitionName</code> 屬性在兩個版面配置中定義分享元素 (或在兩個操作行為中使用 {@link android.view.View#setTransitionName View.setTransitionName()} 方法)，然後建立 {@link android.app.ActivityOptions} 物件，如下所示：
</p>
<pre>
ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
@@ -283,9 +341,14 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
<h2 id="CurvedMotion">使用曲線動作</h2>
<p>材料設計中的動畫依據使用時間插值法和空間移動模式的曲線。在 Android 5.0 (API 級別 21) 或更新版本中，您可以為動畫定義自訂時間曲線和曲線動作模式。</p>
<p>材料設計中的動畫依據使用時間插值法和空間移動模式的曲線而定。
在 Android 5.0 (API 級別 21) 及以上版本中，您可為動畫定義自訂時間曲線和曲線動作模式。
</p>
<p>{@link android.view.animation.PathInterpolator} 類別是根據貝茲曲線 (Bézier curve) 或 {@link android.graphics.Path} 物件的一種新插值器。這個插值器在一個 1x1 的方格中指定動作曲線，在 (0,0) 和 (1,1) 有兩個錨定點，以及使用建構函式引數指定的控制點。您也可以將路徑插值器定義為 XML 資源：</p>
<p>{@link android.view.animation.PathInterpolator} 類別是根據貝茲曲線 (Bézier curve) 或 {@link android.graphics.Path} 物件的一種新插值器。
這個插值器在一個 1x1 的方格中指定動作曲線，在 (0,0) 和 (1,1) 有兩個錨定點，以及使用建構函式引數指定的控制點。
您也可以將路徑插值器定義為 XML 資源：</p>
<pre>
&lt;pathInterpolator xmlns:android="http://schemas.android.com/apk/res/android"
@@ -295,7 +358,8 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
android:controlY2="1"/>
</pre>
<p>系統在材料設計規格中提供三種基本曲線的 XML 資源：</p>
<p>系統在材料設計規格中提供三種基本曲線的 XML 資源：
</p>
<ul>
<li><code>&#64;interpolator/fast_out_linear_in.xml</code></li>
@@ -303,9 +367,12 @@ ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this,
<li><code>&#64;interpolator/linear_out_slow_in.xml</code></li>
</ul>
<p>您可以將 {@link android.view.animation.PathInterpolator} 物件傳遞到 {@link android.animation.Animator#setInterpolator Animator.setInterpolator()} 方法。</p>
<p>您可將 {@link android.view.animation.PathInterpolator} 物件傳送至 {@link
android.animation.Animator#setInterpolator Animator.setInterpolator()} 方法。</p>
<p>{@link android.animation.ObjectAnimator} 類別有新的建構函式，可讓您一次使用兩個以上的屬性沿著路徑以動畫顯示座標。例如，下列動畫器使用 {@link android.graphics.Path} 物件，以動畫顯示檢視的 X 和 Y 屬性：</p>
<p>{@link android.animation.ObjectAnimator} 類別有新的建構函式，可讓您一次使用兩個以上的屬性沿著路徑以動畫顯示座標。
例如，下列動畫器使用 {@link android.graphics.Path} 物件，以動畫顯示視圖的 X 和 Y 屬性：
</p>
<pre>
ObjectAnimator mAnimator;
@@ -315,9 +382,11 @@ mAnimator.start();
</pre>
<h2 id="ViewState">動畫顯示檢視狀態變更</h2>
<h2 id="ViewState">動畫顯示視圖狀態變更</h2>
<p>{@link android.animation.StateListAnimator} 類別可讓您定義檢視狀態變更時所執行的動畫器。下列範例示範如何將 {@link android.animation.StateListAnimator} 定義為 XML 資源：</p>
<p>{@link android.animation.StateListAnimator} 類別可讓您定義視圖狀態變更時所執行的動畫器。
下列範例示範如何將 {@link
android.animation.StateListAnimator} 定義為 XML 資源：</p>
<pre>
&lt;!-- animate the translationZ property of a view when pressed -->
@@ -345,11 +414,21 @@ mAnimator.start();
&lt;/selector>
</pre>
<p>如果要將自訂的檢視狀態動畫連接到檢視，請依照此範例在 XML 資源檔案中使用 <code>selector</code> 元素定義動畫器，然後使用 <code>android:stateListAnimator</code> 屬性將它指派到您的檢視。如果要在程式碼中為檢視指派狀態清單動畫器，請使用 {@link android.animation.AnimatorInflater#loadStateListAnimator AnimationInflater.loadStateListAnimator()} 方法，然後使用 {@link android.view.View#setStateListAnimator View.setStateListAnimator()} 方法將動畫器指派到您的檢視。</p>
<p>如要將自訂的視圖狀態動畫連接到視圖，請依照此範例在 XML 資源檔案中使用 <code>selector</code> 元素定義動畫器，並使用 <code>android:stateListAnimator</code> 屬性將其指派到您的視圖。
<p>當您的風格主題延伸材料設計風格時，按鈕預設會有 Z 動畫。如果要避免在按鈕中出現這類行為，請將 <code>android:stateListAnimator</code> 屬性設定為 <code>@null</code>。</p>
如要在程式碼中為視圖指派狀態清單動畫器，請使用 {@link android.animation.AnimatorInflater#loadStateListAnimator
AnimationInflater.loadStateListAnimator()} 方法，然後使用 {@link android.view.View#setStateListAnimator View.setStateListAnimator()} 方法將動畫器指派到您的視圖。
<p>{@link android.graphics.drawable.AnimatedStateListDrawable} 類別可讓您在相關檢視的狀態變更之間，建立顯示動畫的可繪項目。Android 5.0 中的某些系統小工具預設會使用這些動畫。下列範例示範如何將 {@link android.graphics.drawable.AnimatedStateListDrawable} 定義為 XML 資源：</p>
</p>
<p>當您的設計風格延伸材料設計風格時，按鈕預設會有 Z 動畫。如果要避免在按鈕中出現這類行為，請將 <code>android:stateListAnimator</code> 屬性設定為 <code>@null</code>。
</p>
<p>{@link android.graphics.drawable.AnimatedStateListDrawable} 類別可讓您在相關視圖的狀態變更之間，建立顯示動畫的可繪項目。
Android 5.0 中的某些系統小工具預設會使用這些動畫。
下列範例示範如何將 {@link android.graphics.drawable.AnimatedStateListDrawable} 定義為 XML 資源：
</p>
<pre>
&lt;!-- res/drawable/myanimstatedrawable.xml -->
@@ -379,19 +458,28 @@ mAnimator.start();
<h2 id="AnimVector">動畫顯示矢量可繪</h2>
<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">矢量可繪</a>可以調整大小，但又不會喪失定義。{@link android.graphics.drawable.AnimatedVectorDrawable} 類別可讓您以動畫顯示矢量可繪的屬性。</p>
<p><a href="{@docRoot}training/material/drawables.html#VectorDrawables">矢量可繪</a>可以調整大小，但又不會喪失定義。
{@link android.graphics.drawable.AnimatedVectorDrawable} 類別可讓您以動畫顯示矢量可繪的屬性。
</p>
<p>您通常會在下列三個 XML 檔案中定義能可動矢量可繪：</p>
<ul>
<li>在 <code>res/drawable/</code> 中有 <code>&lt;vector&gt;</code> 元素的矢量可繪</li>
<li>在 <code>res/drawable/</code> 中有 <code>&lt;animated-vector&gt;</code> 元素的可動矢量可繪</li>
<li>在 <code>res/anim/</code> 中有 <code>&lt;objectAnimator&gt;</code> 元素的一或多個物件動畫器</li>
<li>在 <code>res/drawable/</code> 中包含 <code>&lt;vector&gt;</code> 元素的矢量可繪
</li>
<li>在 <code>res/drawable/</code> 中包含 <code>&lt;animated-vector&gt;</code> 元素的可動矢量可繪
</li>
<li>在 <code>res/anim/</code> 中包含 <code>&lt;objectAnimator&gt;</code> 元素的一或多個物件動畫器
</li>
</ul>
<p>可動的矢量可繪能以動畫顯示 <code>&lt;group&gt;</code> 和 <code>&lt;path&gt;</code> 元素的屬性。<code>&lt;group&gt;</code> 元素定義一組路徑或子群組，而 <code>&lt;path&gt;</code> 元素則定義要繪製的路徑。</p>
<p>可動的矢量可繪能以動畫顯示 <code>&lt;group&gt;</code> 和 <code>&lt;path&gt;</code> 元素的屬性。
<code>&lt;group&gt;</code> 元素定義一組路徑或子群組，而 <code>&lt;path&gt;</code> 元素則定義要繪製的路徑。
</p>
<p>當您定義要可動的矢量可繪時，請使用 <code>android:name</code> 屬性為群組和路徑指派唯一的名稱，以便從您的動畫器定義參考這些群組和路徑。例如：</p>
<p>當您定義要可動的矢量可繪時，請使用 <code>android:name</code> 屬性為群組和路徑指派唯一的名稱，以便從您的動畫器定義參考這些群組和路徑。
例如：</p>
<pre>
&lt;!-- res/drawable/vectordrawable.xml -->
@@ -413,7 +501,8 @@ mAnimator.start();
&lt;/vector>
</pre>
<p>可動的矢量可繪定義是依照名稱來參考矢量可繪中的群組和路徑：</p>
<p>可動的矢量可繪定義是依照名稱來參考矢量可繪中的群組和路徑：
</p>
<pre>
&lt;!-- res/drawable/animvectordrawable.xml -->
@@ -428,7 +517,9 @@ mAnimator.start();
&lt;/animated-vector>
</pre>
<p>動畫定義代表 {@link android.animation.ObjectAnimator} 或 {@link android.animation.AnimatorSet} 物件。此範例中的第一個動畫器會 360 度旋轉目標群組：</p>
<p>動畫定義代表 {@link android.animation.ObjectAnimator} 或 {@link
android.animation.AnimatorSet} 物件。此範例中的第一個動畫器會 360 度旋轉目標群組：
</p>
<pre>
&lt;!-- res/anim/rotation.xml -->
@@ -439,7 +530,9 @@ mAnimator.start();
android:valueTo="360" />
</pre>
<p>此範例中的第二個動畫器會將矢量可繪的路徑從一種形狀變成另外一種形狀。兩個路徑必須相容才能變形：這表示兩個路徑必須有相同數量的命令，每個命令必須有相同數量的參數。</p>
<p>此範例中的第二個動畫器會將矢量可繪的路徑從一種形狀變成另外一種形狀。
兩個路徑必須相容才能變形：意即兩個路徑必須有相同數量的命令，而每個命令必須有相同數量的參數。
</p>
<pre>
&lt;!-- res/anim/path_morph.xml -->
@@ -453,4 +546,5 @@ mAnimator.start();
&lt;/set>
</pre>
<p>如需詳細資訊，請參閱 {@link android.graphics.drawable.AnimatedVectorDrawable} 的 API 參考資料。</p>
<p>如需詳細資訊，請參閱 {@link
android.graphics.drawable.AnimatedVectorDrawable} 的 API 參考資料。</p>

78
docs/html-intl/intl/zh-tw/training/material/compatibility.jd
View File

@@ -20,47 +20,68 @@ page.title=維持相容性
</div>
<p>某些材料設計功能 (例如材料設計風格和自訂操作行為轉換) 只能在 Android 5.0 (API 級別 21) 以及更新版本中使用。不過，您還是可以將應用程式設計為在支援材料設計的裝置上執行時才使用這些功能，而且仍然與執行舊版 Android 的裝置相容。</p>
<p>某些材料設計功能如材料設計風格和自訂操作行為轉換等，只能在 Android 5.0 (API 級別 21) 及以上版本中使用。
然而，您還是可以將應用程式設計為在支援材料設計的裝置上執行時才使用這些功能，並仍然與執行舊版 Android 的裝置相容。
</p>
<h2 id="Theme">定義替代樣式</h2>
<p>您可以設定應用程式在支援材料設計風格的裝置上執行時才予以使用，在執行舊版 Android 的裝置上執行時則轉換成舊版的風格主題：</p>
<p>您可以設定應用程式在支援材料設計風格的裝置上執行時才予以使用，在執行舊版 Android 的裝置上執行時則轉換成舊版的設計風格：
</p>
<ol>
<li>在 <code>res/values/styles.xml</code> 中定義繼承自舊版風格主題 (例如 Holo) 的風格主題。</li>
<li>在 <code>res/values-v21/styles.xml</code> 中定義與材料設計風格相同名稱的風格主題。</li>
<li>在宣示說明檔案中將此風格主題設定為應用程式的風格主題。</li>
<li>在 <code>res/values/styles.xml</code> 中定義繼承自舊版設計風格 (例如 Holo) 的設計風格。
</li>
<li>在 <code>res/values-v21/styles.xml</code> 中定義與材料設計風格相同名稱的設計風格。
</li>
<li>在宣示說明檔案中將此設計風格設定為應用程式的設計風格。</li>
</ol>
<p class="note"><strong>注意：</strong>如果您的應用程式使用材料設計風格，但卻未以此方式提供替代風格主題，您的應用程式將無法在 Android 5.0 以前的版本上執行。
<p class="note"><strong>注意</strong>：若您的應用程式使用材料設計風格，但卻未以此方式提供替代設計風格，您的應用程式將無法在 Android 5.0 之前的版本上執行。
</p>
<h2 id="Layouts">提供替代版面配置</h2>
<p>如果您根據材料設計指南所設計的版面配置沒有使用 Android 5.0 (API 級別 21) 中導入的任何全新 XML 屬性，則這些版面配置就可以在舊版 Android 上運作。或者，您也可以提供替代的版面配置。您也可以提供替代的版面配置來自訂應用程式在舊版 Android 上要如何顯示。</p>
<p>若您根據材料設計指南所設計的版面配置並未使用任何 Android 5.0 (API 級別 21) 中推出的全新 XML 屬性，則這些版面配置就可以在舊版 Android 上運作。
<p>在 <code>res/layout-v21/</code> 內建立 Android 5.0 (API 級別 21) 的版面配置檔案，並在 <code>res/layout/</code> 內建立舊版 Android 的替代版面配置檔案。例如，<code>res/layout/my_activity.xml</code> 是 <code>res/layout-v21/my_activity.xml</code> 的替代版面配置。</p>
或者，您也可以提供替代的版面配置。您也可提供替代的版面配置以自訂應用程式在舊版 Android 上如何顯示。
</p>
<p>為了避免程式碼重複，請在 <code>res/values/</code> 內定義您的樣式，在 <code>res/values-v21/</code> 中針對新的 API 修改樣式，然後使用樣式繼承，在 <code>res/values/</code> 中定義基礎樣式，然後從 <code>res/values-v21/</code> 中的樣式繼承。</p>
<p>在 <code>res/layout-v21/</code> 內建立 Android 5.0 (API 級別 21) 的版面配置檔案，並在 <code>res/layout/</code> 內建立舊版 Android 的替代版面配置檔案。例如，<code>res/layout/my_activity.xml</code> 是 <code>res/layout-v21/my_activity.xml</code> 的替代版面配置。
</p>
<p>為了避免程式碼重複，請在 <code>res/values/</code> 內定義您的樣式，在 <code>res/values-v21/</code> 中針對新的 API 修改樣式，再使用樣式繼承，在 <code>res/values/</code> 中定義基礎樣式，然後從 <code>res/values-v21/</code> 中的樣式繼承。
</p>
<h2 id="SupportLib">使用支援程式庫</h2>
<p><a href="{@docRoot}tools/support-library/features.html#v7">v7 支援程式庫</a> r21 以及更新版本包含下列材料設計功能：</p>
<p><a href="{@docRoot}tools/support-library/features.html#v7">v7 支援程式庫</a> r21 以及更新版本包含下列材料設計功能：
</p>
<ul>
<li>當您套用其中一個 <code>Theme.AppCompat</code> 風格主題時，某些系統小工具的<a href="{@docRoot}training/material/theme.html">材料設計樣式</a>。</li>
<li>在 <code>Theme.AppCompat</code> 風格主題中的<a href="{@docRoot}training/material/theme.html#ColorPalette">色板風格主題屬性</a>。</li>
<li><a href="{@docRoot}training/material/lists-cards.html#RecyclerView">顯示資料集合</a>的 {@link android.support.v7.widget.RecyclerView} 小工具。</li>
<li>當您套用其中一個 <code>Theme.AppCompat</code> 設計風格時，某些系統小工具的<a href="{@docRoot}training/material/theme.html">材料設計樣式</a>。
</li>
<li>在 <code>Theme.AppCompat</code> 設計風格中的<a href="{@docRoot}training/material/theme.html#ColorPalette">色板設計風格屬性</a>。
</li>
<li><a href="{@docRoot}training/material/lists-cards.html#RecyclerView">顯示資料集合</a>的 {@link android.support.v7.widget.RecyclerView} 小工具。
</li>
<li><a href="{@docRoot}training/material/lists-cards.html#CardView">建立卡片</a>的 {@link android.support.v7.widget.CardView} 小工具。</li>
<li><a href="{@docRoot}training/material/drawables.html#ColorExtract">從影像提取顯著顏色</a>的 {@link android.support.v7.graphics.Palette} 類別。</li>
<li><a href="{@docRoot}training/material/drawables.html#ColorExtract">從影像提取顯著顏色</a>的 {@link android.support.v7.graphics.Palette} 類別。
</li>
</ul>
<h3>系統小工具</h3>
<p><code>Theme.AppCompat</code> 風格主題提供下列小工具的材料設計樣式：</p>
<p><code>Theme.AppCompat</code> 設計風格提供下列小工具的材料設計樣式：</p>
<ul>
<li>{@link android.widget.EditText}</li>
@@ -73,7 +94,8 @@ page.title=維持相容性
<h3>色板</h3>
<p>如果要取得材料設計樣式並使用 Android v7 支援程式庫自訂色板，請套用其中一個 <code>Theme.AppCompat</code> 風格主題：</p>
<p>如果要取得材料設計樣式並使用 Android v7 支援程式庫自訂色板，請套用其中一個 <code>Theme.AppCompat</code> 設計風格：
</p>
<pre>
&lt;!-- extend one of the Theme.AppCompat themes -->
@@ -87,16 +109,21 @@ page.title=維持相容性
<h3>清單和卡片</h3>
<p>在舊版 Android 中，透過 Android v7 支援程式庫可以使用 {@link android.support.v7.widget.RecyclerView} 和 {@link android.support.v7.widget.CardView} 小工具，但是有下列限制：</p>
<p>在舊版 Android 中，透過 Android v7 支援程式庫可以使用 {@link android.support.v7.widget.RecyclerView} 和 {@link
android.support.v7.widget.CardView} 小工具，但有下列限制：
</p>
<ul>
<li>{@link android.support.v7.widget.CardView} 只能使用額外的填補方式，有計畫地實作陰影。</li>
<li>{@link android.support.v7.widget.CardView} 不會裁剪與圓形邊角重疊的下方檢視。</li>
<li>{@link android.support.v7.widget.CardView} 只能使用額外的填補方式，有計畫地實作陰影。
</li>
<li>{@link android.support.v7.widget.CardView} 不會裁剪與圓形邊角重疊的下方視圖。
</li>
</ul>
<h3>相依性</h3>
<p>如果要在 Android 5.0 (API 級別 21) 以前的版本中使用這些功能，請在您的專案中包含 Android v7 支援程式庫做為 <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Gradle 相依性</a>：</p>
<p>如果要在 Android 5.0 (API 級別 21) 以前的版本中使用這些功能，請在您的專案中包含 Android v7 支援程式庫做為 <a href="{@docRoot}/sdk/installing/studio-build.html#dependencies">Gradle 相依性</a>：
</p>
<pre>
dependencies {
@@ -120,7 +147,9 @@ dependencies {
<li>繪製著色</li>
</ul>
<p>如果要維持與舊版 Android 的相容性，在您呼叫這些功能的 API 之前，請先在執行期間檢查系統 {@link android.os.Build.VERSION#SDK_INT version}：</p>
<p>如要維持與舊版 Android 的相容性，在呼叫這些功能的 API 之前，請先在執行期間檢查系統 {@link
android.os.Build.VERSION#SDK_INT version}：
</p>
<pre>
// Check if we're running on Android 5.0 or higher
@@ -131,4 +160,9 @@ if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
}
</pre>
<p class="note"><strong>注意：</strong>如果要指定應用程式支援的 Android 版本，請在您的宣示說明檔案中使用 <code>android:minSdkVersion</code> 和 <code>android:targetSdkVersion</code> 屬性。如果要在 Android 5.0 中使用材料設計功能，請將 <code>android:targetSdkVersion</code> 屬性設定為 <code>21</code>。如需詳細資訊，請參閱 <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">&lt;uses-sdk&gt; API 指南</a>。</p>
<p class="note"><strong>注意：</strong>如果要指定應用程式支援的 Android 版本，請在您的宣示說明檔案中使用 <code>android:minSdkVersion</code> 和 <code>android:targetSdkVersion</code> 屬性。
如果要在 Android 5.0 中使用材料設計功能，請將 <code>android:targetSdkVersion</code> 屬性設定為 <code>21</code>。
如需詳細資訊，請參閱 <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html">&lt;uses-sdk&gt; API 指南</a>。
</p>

45
docs/html-intl/intl/zh-tw/training/material/drawables.jd
View File

@@ -31,14 +31,22 @@ page.title=使用可繪項目
<h2 id="DrawableTint">為可繪項目資源著色</h2>
<p>如果使用 Android 5.0 (API 級別 21) 或更新版本，您可以對點陣圖和定義為 Alpha 遮罩的九宮格影像著色。您可以使用顏色資源或解析為顏色資源的風格主題屬性 (例如 <code>?android:attr/colorPrimary</code>) 為圖片著色。這些資產您通常只會建立一次，然後自動著色以符合您的風格主題。</p>
<p>若您使用 Android 5.0 (API 級別 21) 或以上版本，您可對點陣圖和定義為 Alpha 遮罩的九宮格影像著色。
您可使用顏色資源或解析為顏色資源的設計風格屬性 (如 <code>?android:attr/colorPrimary</code> 為圖片著色。
這些資產您通常只會建立一次，然後自動著色以符合您的設計風格。
</p>
<p>您可以使用 {@code setTint()} 方法對 {@link android.graphics.drawable.BitmapDrawable} 或 {@link android.graphics.drawable.NinePatchDrawable} 物件套用著色。您也可以使用 <code>android:tint</code> 和 <code>android:tintMode</code> 屬性，設定版面配置中的著色顏色和模式。</p>
<p>您可使用 {@code setTint()} 方法對 {@link android.graphics.drawable.BitmapDrawable} 或 {@link
android.graphics.drawable.NinePatchDrawable} 物件套用著色。您也可以使用 <code>android:tint</code> 和 <code>android:tintMode</code> 屬性，設定版面配置中的著色顏色和模式。
</p>
<h2 id="ColorExtract">從影像提取顯著顏色</h2>
<p>Android 支援程式庫 r21 和更新版本包含 {@link android.support.v7.graphics.Palette} 類別，可讓您從影像提取出顯著的顏色。此類別會提取下列顯著顏色：</p>
<p>Android 支援程式庫 r21 和更新版本包含 {@link
android.support.v7.graphics.Palette} 類別，可讓您從影像提取出顯著的顏色。此類別會提取下列顯著顏色：
</p>
<ul>
<li>鮮明</li>
@@ -49,34 +57,44 @@ page.title=使用可繪項目
<li>柔和 (淺色)</li>
</ul>
<p>如果要提取這些顏色，請將 {@link android.graphics.Bitmap} 物件傳遞到載入影像之背景執行緒中的 {@link android.support.v7.graphics.Palette#generate Palette.generate()} 靜態方法。如果您無法使用該執行緒，請改為呼叫 {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} 方法並提供接聽器。</p>
<p>如果要提取這些顏色，請將 {@link android.graphics.Bitmap} 物件傳遞到載入影像之背景執行緒中的 {@link android.support.v7.graphics.Palette#generate Palette.generate()} 靜態方法。
<p>您可以使用 <code>Palette</code> 類別中的 getter 方法 (例如 <code>Palette.getVibrantColor</code>) 從影像擷取顯著顏色。</p>
如果您無法使用該執行緒，請改為呼叫 {@link android.support.v7.graphics.Palette#generateAsync Palette.generateAsync()} 方法並提供接聽程式。
<p>如果要在專案中使用 {@link android.support.v7.graphics.Palette} 類別，請在應用程式的模組中加入下列 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 相依性</a>：</p>
</p>
<p>您可使用 <code>Palette</code> 類別中的 getter 方法 (如 <code>Palette.getVibrantColor</code> 從影像擷取顯著顏色。
</p>
<p>如果要在專案中使用 {@link android.support.v7.graphics.Palette} 類別，請在應用程式的模組中加入下列 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 相依性</a>：
</p>
<pre>
dependencies {
...
compile 'com.android.support:palette-v7:21.0.+'
compile 'com.android.support:palette-v7:21.0.0'
}
</pre>
<p>如需詳細資訊，請參閱 {@link android.support.v7.graphics.Palette} 類別的 API 參考資料。</p>
<p>如需詳細資訊，請參閱 {@link android.support.v7.graphics.Palette} 類別的 API 參考資料。
</p>
<h2 id="VectorDrawables">建立矢量可繪</h2>
<!-- video box -->
<a class="notice-developers-video"
href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
<a class="notice-developers-video" href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
<div>
<h3>影片</h3>
<p>Android Vector Graphics</p>
</div>
</a>
<p>在 Android 5.0 (API 級別 21) 或更新版本中，您可以定義矢量可繪，這種圖形可以調整大小但不會遺失定義。一個矢量影像只需要一個資產檔案，但是點陣圖影像的每一種螢幕密度都需要一個資產檔案。如果要建立矢量影像，您必須在 <code>&lt;vector&gt;</code> XML 元素內定義圖形的詳細資料。</p>
<p>在 Android 5.0 (API 級別 21) 或以上版本中，您可定義矢量可繪，這種圖形可以調整大小但不會遺失定義。
一個矢量影像只需要一個資產檔案，但點陣圖影像的每一種螢幕密度都需要一個資產檔案。
如果要建立矢量影像，您必須在 <code>&lt;vector&gt;</code> XML 元素內定義圖形的詳細資料。
</p>
<p>下列範例定義一個具有心形圖案的矢量影像：</p>
@@ -102,4 +120,7 @@ href="https://www.youtube.com/watch?v=wlFVIIstKmA" style="margin-top:18px">
&lt;/vector>
</pre>
<p>在 Android 中，矢量影像是以 {@link android.graphics.drawable.VectorDrawable} 物件代表。如需有關 <code>pathData</code> 語法的詳細資訊，請參閱 <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG 路徑參考資料</a>。如需有關繪製矢量可繪的屬性，請參閱<a href="{@docRoot}training/material/animations.html#AnimVector">動畫顯示矢量可繪</a>。</p>
<p>在 Android 中，{@link android.graphics.drawable.VectorDrawable} 物件代表矢量影像。
如需有關 <code>pathData</code> 語法的詳細資訊，請參閱 <a href="http://www.w3.org/TR/SVG11/paths.html#PathData">SVG 路徑參考資料</a>。如需有關繪製矢量可繪屬性的詳細資訊，請參閱<a href="{@docRoot}training/material/animations.html#AnimVector">動畫顯示矢量可繪</a>。
</p>

58
docs/html-intl/intl/zh-tw/training/material/get-started.jd
View File

@@ -8,7 +8,7 @@ page.title=開始使用
<ol>
<li><a href="#ApplyTheme">套用材料設計風格</a></li>
<li><a href="#Layouts">設計版面配置</a></li>
<li><a href="#Depth">指定在檢視中的高度</a></li>
<li><a href="#Depth">指定視圖中的高度</a></li>
<li><a href="#ListsCards">建立清單和卡片</a></li>
<li><a href="#Animations">自訂動畫</a></li>
</ol>
@@ -27,11 +27,11 @@ page.title=開始使用
<li style="margin-bottom:10px">
請閱讀<a href="http://www.google.com/design/spec">材料設計規格</a>。</li>
<li style="margin-bottom:10px">
對應用程式套用材料設計<strong>風格</strong>。</li>
對應用程式套用材料<strong>設計風格</strong>。</li>
<li style="margin-bottom:10px">
依照材料設計指南建立<strong>版面配置</strong>。</li>
<li style="margin-bottom:10px">
指定檢視的<strong>高度</strong>來投射出陰影。</li>
指定視圖的<strong>高度</strong>來投射出陰影。</li>
<li style="margin-bottom:10px">
使用系統<strong>小工具</strong>製作清單和卡片。</li>
<li style="margin-bottom:10px">
@@ -40,20 +40,27 @@ page.title=開始使用
<h3>維持向下相容性</h3>
<p>您可以在應用程式中加入多種材料設計功能，同時維持與 Android 5.0 之前版本的相容性。如需詳細資訊，請參閱<a href="{@docRoot}training/material/compatibility.html">維持相容性</a>。</p>
<p>您可在應用程式中加入多種材料設計功能，同時維持與 Android 5.0 之前版本的相容性。
如需詳細資訊，請參閱<a href="{@docRoot}training/material/compatibility.html">維持相容性</a>。
</p>
<h3>更新應用程式以納入材料設計功能</h3>
<p>如果要更新現有應用程式以納入材料設計功能，請依照下列材料設計指南更新版面配置。然後再加入深度、輕觸回饋和動畫。</p>
<p>如要更新現有應用程式以納入材料設計功能，請依照下列材料設計指南更新版面配置。
同時確保加入深度、輕觸回饋和動畫。
</p>
<h3>使用材料設計建立新應用程式</h3>
<p>如果您要使用材料設計功能建立新應用程式，<a href="http://www.google.com/design/spec">材料設計指南</a>可以提供您一致性的設計架構。請依照下列指南，使用 Android 架構中的新功能來設計和開發應用程式。</p>
<p>如果您要使用材料設計功能建立新應用程式，<a href="http://www.google.com/design/spec">材料設計指南</a>可以提供一致性的設計架構。
請依照下列指南，使用 Android 架構中的新功能來設計和開發應用程式。
</p>
<h2 id="ApplyTheme">套用材料設計風格</h2>
<p>如果要在應用程式中套用材料設計風格，請指定一個繼承自 <code>android:Theme.Material</code> 的樣式：</p>
<p>如要在應用程式中套用材料設計風格，請指定一個繼承自 <code>android:Theme.Material</code> 的樣式：
</p>
<pre>
&lt;!-- res/values/styles.xml -->
@@ -65,12 +72,16 @@ page.title=開始使用
&lt;/resources>
</pre>
<p>材料設計風格提供更新過的系統小工具，可以讓您設定小工具的色板和預設動畫做為輕觸回饋與操作行為轉換。如需詳細資訊，請參閱<a href="{@docRoot}training/material/theme.html">使用材料設計風格</a>。</p>
<p>材料設計風格提供已更新的系統小工具，可讓您設定系統小工具的色板和預設動畫，作為輕觸回饋與操作行為轉換。
如需詳細資訊，請參閱<a href="{@docRoot}training/material/theme.html">使用材料設計風格</a>。
</p>
<h2 id="Layouts">設計版面配置</h2>
<p>除了套用和自訂材料設計風格之外，您的版面配置也必須遵守<a href="http://www.google.com/design/spec">材料設計指南</a>。當您設計版面配置時，請注意下列事項：</p>
<p>除了套用和自訂材料設計風格之外，您的版面配置也必須遵守<a href="http://www.google.com/design/spec">材料設計指南</a>。
當您設計版面配置時，請注意下列事項：
</p>
<ul>
<li>基準線網格</li>
@@ -81,9 +92,11 @@ page.title=開始使用
</ul>
<h2 id="Depth">指定在檢視中的高度</h2>
<h2 id="Depth">指定視圖中的高度</h2>
<p>檢視可以投射出陰影，因此檢視的高度值會決定陰影的大小及其繪製順序。如果要設定檢視的高度，請在版面配置中使用 <code>android:elevation</code> 屬性：</p>
<p>檢視可以投射出陰影，因此檢視的高度值會決定陰影的大小及其繪製順序。
如要設定視圖的高度，請在版面配置中使用 <code>android:elevation</code> 屬性：
</p>
<pre>
&lt;TextView
@@ -95,14 +108,22 @@ page.title=開始使用
android:elevation="5dp" />
</pre>
<p>您可以使用新的 <code>translationZ</code> 屬性建立動畫，來反映檢視高度的短暫變化。高度變化可以用來<a href="{@docRoot}training/material/animations.html#ViewState">回應輕觸手勢</a>。</p>
<p>您可以使用新的 <code>translationZ</code> 屬性建立動畫，來反映視圖高度的短暫變化。
高度變化可以用來<a href="{@docRoot}training/material/animations.html#ViewState">回應輕觸手勢</a>。
<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/shadows-clipping.html">定義陰影和裁剪檢視</a>。</p>
</p>
<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/shadows-clipping.html">定義陰影和裁剪檢視</a>。
</p>
<h2 id="ListsCards">建立清單和卡片</h2>
<p>{@link android.support.v7.widget.RecyclerView} 是一個更容易插入的 {@link android.widget.ListView}，能支援不同的版面配置類型，並且提供更好的效能。{@link android.support.v7.widget.CardView} 可讓您在不同的應用程式之間，以一致的外觀顯示卡片內部的資訊。下列程式碼範例示範如何在版面配置中加入 {@link android.support.v7.widget.CardView}：</p>
<p>{@link android.support.v7.widget.RecyclerView} 是一個更容易插入的 {@link
android.widget.ListView} 版本，可支援不同的版面配置類型並提供更好的效能。{@link android.support.v7.widget.CardView} 可讓您在不同的應用程式之間以一致的外觀顯示卡片內部的資訊。
下列程式碼範例示範如何在版面配置中加入 {@link android.support.v7.widget.CardView}：
</p>
<pre>
&lt;android.support.v7.widget.CardView
@@ -114,12 +135,15 @@ page.title=開始使用
&lt;/android.support.v7.widget.CardView>
</pre>
<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/lists-cards.html">建立清單和卡片</a>。</p>
<p>如需詳細資訊，請參閱<a href="{@docRoot}training/material/lists-cards.html">建立清單和卡片</a>。
</p>
<h2 id="Animations">自訂動畫</h2>
<p>Android 5.0 (API 級別 21) 包含許多新的 API 可在應用程式中建立自訂動畫。例如，您可以啟用操作行為轉換，然後在操作行為內部定義離開轉換：</p>
<p>Android 5.0 (API 級別 21) 包含許多新的 API 以便在應用程式中建立自訂動畫。例如，您可以啟用操作行為轉換，並在操作行為內部定義離開轉換：
</p>
<pre>
public class MyActivity extends Activity {
@@ -144,4 +168,4 @@ public class MyActivity extends Activity {
<p>當您從這個操作行為開始另一個操作行為時，就會啟動離開轉換。</p>
<p>如需深入了解新的動畫 API，請參閱<a href="{@docRoot}training/material/animations.html">定義自訂動畫</a>。</p>
<p>如需深入了解新的動畫 API，請參閱<a href="{@docRoot}training/material/animations.html">定義自訂動畫</a>。</p>

30
docs/html-intl/intl/zh-tw/training/material/index.jd
View File

@@ -1,7 +1,8 @@
page.title=使用材料設計建立應用程式
page.type=design
page.image=images/material.png
page.metaDescription=了解如何對應用程式套用材料設計。
page.title=開發人員材料設計
page.type=設計
page.image=images/cards/material_2x.png
page.metaDescription=學習如何套用材料設計至您的應用程式。
@jd:body
@@ -10,24 +11,29 @@ page.metaDescription=了解如何對應用程式套用材料設計。
<h2>相依性和先決條件</h2>
<ul>
<li>Android 5.0 (API 級別 21)</li>
<li>Android Studio 0.8</li>
</ul>
</div>
</div>
<p>材料設計是一份廣泛綜合性的指南，引導您跨平台、跨裝置進行視覺、動態和互動的設計。如果要在 Android 應用程式中使用材料設計，請依照<a href="http://www.google.com/design/spec/material-design/introduction.html">材料設計規格</a>中的指示，使用 Android 5.0 (API 級別 21) 中的新元件和新功能。</p>
<p>材料設計是一份廣泛綜合性的指南，引導您跨平台、跨裝置進行視覺、動態和互動的設計。
如要在 Android 應用程式中使用材料設計，請依照<a href="http://www.google.com/design/spec/material-design/introduction.html">材料設計規格中的指示</a>，使用 Android 5.0 (API 級別 21) 中的新元件和新功能。
</p>
<p>本課程示範如何使用下列元素建立材料設計應用程式：</p>
<ul>
<li>材料設計風格</li>
<li>卡片和清單的小工具</li>
<li>自訂陰影和裁剪檢視</li>
<li>自訂陰影和裁剪視圖</li>
<li>矢量可繪</li>
<li>自訂動畫</li>
</ul>
<p>本課程也示範當您在應用程式中使用材料設計功能時，如何與 Android 5.0 (API 級別 21) 之前的版本維持相容性。</p>
<p>本課程也示範當您在應用程式中使用材料設計功能時，如何與 Android 5.0 (API 級別 21) 之前的版本維持相容性。
</p>
<h2>課程</h2>
@@ -41,15 +47,15 @@ page.metaDescription=了解如何對應用程式套用材料設計。
<dt><a href="{@docRoot}training/material/lists-cards.html">建立清單和卡片</a></dt>
<dd>了解如何使用系統小工具，建立外觀和操作方式一致的清單和卡片。</dd>
<dt><a href="{@docRoot}training/material/shadows-clipping.html">定義陰影和裁剪檢視</a></dt>
<dd>了解如何對檢視設定高度建立自訂陰影，以及如何裁剪檢視。</dd>
<dt><a href="{@docRoot}training/material/shadows-clipping.html">定義陰影和裁剪視圖</a></dt>
<dd>了解如何對視圖設定高度建立自訂陰影，以及如何裁剪視圖。</dd>
<dt><a href="{@docRoot}training/material/drawables.html">使用可繪項目</a></dt>
<dd>了解如何建立矢量可繪項目，以及如何對可繪資源著色。</dd>
<dt><a href="{@docRoot}training/material/animations.html">定義自訂動畫</a></dt>
<dd>了解如何使用分享元素對檢視建立自訂動畫和操作行為轉換。</dd>
<dd>了解如何使用分享元素對視圖建立自訂動畫和操作行為轉換。</dd>
<dt><a href="{@docRoot}training/material/compatibility.html">維持相容性</a></dt>
<dd>了解如何與 Android 5.0 之前的平台版本維持相容性。</dd>
</dl>
</dl>

85
docs/html-intl/intl/zh-tw/training/material/lists-cards.jd
View File

@@ -19,55 +19,79 @@ page.title=建立清單和卡片
</div>
<p>如果要在應用程式中使用材料設計樣式建立複雜的清單和卡片，可以使用 {@link android.support.v7.widget.RecyclerView} 和 {@link android.support.v7.widget.CardView} 小工具。</p>
<p>如要在應用程式中使用材料設計樣式建立複雜的清單和卡片，可以使用 {@link android.support.v7.widget.RecyclerView} 和 {@link android.support.v7.widget.CardView} 小工具。
</p>
<h2 id="RecyclerView">建立清單</h2>
<p>{@link android.support.v7.widget.RecyclerView} 小工具是比較進階和彈性的 {@link android.widget.ListView} 版本。這個小工具是一個用來顯示大型資料集的容器，只要維護少數幾個檢視，就可以非常有效率地捲動資料集。如果您的資料集元素在執行期間會根據使用者操作動作或網路事件而變更，就可以使用 {@link android.support.v7.widget.RecyclerView} 小工具。</p>
<p>{@link android.support.v7.widget.RecyclerView} 小工具是比較進階和彈性的 {@link android.widget.ListView} 版本。
這個小工具是一個用來顯示大型資料集的容器，只要維護少數幾個視圖，就可極有效率地捲動資料集。
當您的資料集元素在執行階段會根據使用者操作動作或網路事件而變更，請使用 {@link android.support.v7.widget.RecyclerView} 小工具。
<p>{@link android.support.v7.widget.RecyclerView} 類別會提供下列項目，簡化大型資料集的顯示和處理方式：</p>
</p>
<p>{@link android.support.v7.widget.RecyclerView} 類別會提供下列項目，簡化大型資料集的顯示和處理方式：
</p>
<ul>
<li>版面配置管理員，用來將項目定位</li>
<li>常見項目操作 (例如移除或新增項目) 的預設動畫</li>
</ul>
<p>您也可以針對 {@link android.support.v7.widget.RecyclerView} 小工具定義自訂的版面配置管理員。</p>
<p>您也可針對 {@link
android.support.v7.widget.RecyclerView} 小工具定義自訂的版面配置管理員。</p>
<img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106" />
<p class="img-caption">
<strong>圖 1.</strong><code>RecyclerView</code> 小工具。
</p>
<p>如果要使用 {@link android.support.v7.widget.RecyclerView} 小工具，您就必須指定配接器和版面配置管理員。如果要建立配接器，請延伸 {@link android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} 類別。實作的詳細情形則根據您的資料集和檢視類型而定。如需詳細資訊，請參閱下面的<a href="#RVExamples">範例</a>。</p>
<p>如果要使用 {@link android.support.v7.widget.RecyclerView} 小工具，您必須指定配接器和版面配置管理員。
如要建立配接器，請延伸 {@link
android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} 類別。實作的詳細情形根據您的資料集和檢視類型而定。
如需詳細資訊，請參閱下面的<a href="#RVExamples">範例</a>。
</p>
<div style="float:right">
<img src="{@docRoot}design/material/images/list_mail.png" alt="" width="250" height="426" />
<p class="img-caption" style="margin-left:8px">
<strong>圖 2</strong> - 使用 <code>RecyclerView</code> 的清單。
<strong>圖 2</strong> - 含有 <code>RecyclerView</code> 的清單。
</p>
</div>
<p><strong>版面配置管理員</strong>會將 {@link android.support.v7.widget.RecyclerView} 內的項目檢視定位，然後判斷何時要重複使用使用者不會再看到的項目檢視。如果要重複使用 (或者「回收」<em></em>) 某個檢視，版面配置管理員會要求配接器使用資料集中不同的元素取代檢視的內容。使用此方式回收檢視可以增進效能，避免建立不必要的檢視或執行耗費資源的 {@link android.app.Activity#findViewById findViewById()} 查詢。</p>
<p><strong>版面配置管理員</strong>會將 {@link
android.support.v7.widget.RecyclerView} 內的項目視圖定位，並判斷何時要重複使用使用者不會再看到的項目視圖。
如要重複使用 (或回收<em></em>) 某個視圖，版面配置管理員會要求配接器以資料集中不同的元素，取代視圖的內容。
使用此方式回收視圖可避免建立不必要的視圖或執行耗費資源的 {@link android.app.Activity#findViewById findViewById()} 查詢，以增進效能。
</p>
<p>{@link android.support.v7.widget.RecyclerView} 提供下列內建的版面配置管理員：</p>
<ul>
<li>{@link android.support.v7.widget.LinearLayoutManager} 會在垂直或水平捲動清單中顯示項目。</li>
<li>{@link android.support.v7.widget.LinearLayoutManager} 在垂直或水平捲動清單中顯示項目。
</li>
<li>{@link android.support.v7.widget.GridLayoutManager} 會在網格中顯示項目。</li>
<li>{@link android.support.v7.widget.StaggeredGridLayoutManager} 會在交錯網格中顯示項目。</li>
</ul>
<p>如果要建立自訂版面配置管理員，請延伸 {@link android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} 類別。</p>
<p>如要建立自訂版面配置管理員，請延伸 {@link
android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} 類別。</p>
<h3>動畫</h3>
<p>在 {@link android.support.v7.widget.RecyclerView} 中，預設已啟用新增和移除項目的動畫。如果要自訂這些動畫，請延伸 {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} 類別並使用 {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()} 方法。</p>
<p>在 {@link
android.support.v7.widget.RecyclerView} 中，預設已啟用新增和移除項目的動畫。如果要自訂這些動畫，請延伸 {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} 類別並使用 {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()} 方法。
</p>
<h3 id="RVExamples">範例</h3>
<p>下列程式碼範例示範如何在版面配置中加入 {@link android.support.v7.widget.RecyclerView}：</p>
<p>下列程式碼範例示範如何在版面配置中加入 {@link android.support.v7.widget.RecyclerView}：
</p>
<pre>
&lt;!-- A RecyclerView with some commonly used attributes -->
@@ -78,7 +102,9 @@ page.title=建立清單和卡片
android:layout_height="match_parent"/>
</pre>
<p>在版面配置中加入 {@link android.support.v7.widget.RecyclerView} 小工具之後，取得該物件的控制代碼、將控制代碼連線到版面配置管理員，然後連接配接器以便顯示資料：</p>
<p>一旦您在版面配置中加入 {@link android.support.v7.widget.RecyclerView} 小工具之後，先取得該物件的控制代碼、將控制代碼連線到版面配置管理員，再連接配接器以便顯示資料：
</p>
<pre>
public class MyActivity extends Activity {
@@ -108,7 +134,10 @@ public class MyActivity extends Activity {
}
</pre>
<p>配接器可以存取資料集中的項目、建立項目的檢視，並在原來的項目無法再顯示時，使用新的資料項目取代某些檢視的內容。下列程式碼範例簡單實作一個由使用 {@link android.widget.TextView} 小工具顯示的字串陣列所組成的資料集：</p>
<p>配接器可存取資料集中的項目、建立項目的視圖，並在原來的項目無法再顯示時，使用新的資料項目取代某些視圖的內容。
下列程式碼範例簡單實作一個由使用 {@link android.widget.TextView} 小工具顯示的字串陣列所組成的資料集：
</p>
<pre>
public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
@@ -171,19 +200,29 @@ public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
<h2 id="CardView">建立卡片</h2>
<p>{@link android.support.v7.widget.CardView} 會延伸 {@link android.widget.FrameLayout} 類別，可讓您跨平台以一致的外觀顯示卡片內部的資訊。{@link android.support.v7.widget.CardView} 小工具可以有陰影和圓形邊角。</p>
<p>{@link android.support.v7.widget.CardView} 會延伸{@link android.widget.FrameLayout} 類別，讓您跨平台以一致的外觀顯示卡片內部的資訊。{@link
android.support.v7.widget.CardView} 小工具可以有陰影和圓形邊角。
</p>
<p>如果要建立有陰影的卡片，請使用 <code>card_view:cardElevation</code> 屬性。在 Android 5.0 (API 級別 21) 以及更新版本上，{@link android.support.v7.widget.CardView} 使用實際高度和動態陰影，但是在較舊的版本上則只能有計畫地實作陰影。如需詳細資訊，請參閱<a href="{@docRoot}training/material/compatibility.html">維持相容性</a>。</p>
<p>如要建立有陰影的卡片，請使用 <code>card_view:cardElevation</code> 屬性。在 Android 5.0 (API 級別 21) 以及以上版本，{@link android.support.v7.widget.CardView} 使用實際高度和動態陰影，但在較舊的版本上只能有計畫地實作陰影。如需詳細資訊，請參閱<a href="{@docRoot}training/material/compatibility.html">維持相容性</a>。
<p>使用下列屬性可自訂 {@link android.support.v7.widget.CardView} 小工具的外觀：</p>
</p>
<p>使用下列屬性可自訂 {@link android.support.v7.widget.CardView} 小工具的外觀：
</p>
<ul>
<li>如果要在版面配置中設定圓角的半徑，請使用 <code>card_view:cardCornerRadius</code> 屬性。</li>
<li>如果要在版面配置中設定圓角的半徑，請使用 <code>card_view:cardCornerRadius</code> 屬性。
</li>
<li>如果要在程式碼中設定圓角的半徑，請使用 <code>CardView.setRadius</code> 方法。</li>
<li>如果要設定卡片的背景顏色，請使用 <code>card_view:cardBackgroundColor</code> 屬性。</li>
<li>如果要設定卡片的背景顏色，請使用 <code>card_view:cardBackgroundColor</code> 屬性。
</li>
</ul>
<p>下列程式碼範例示範如何在版面配置中加入 {@link android.support.v7.widget.CardView} 小工具：</p>
<p>下列程式碼範例示範如何在版面配置中加入 {@link android.support.v7.widget.CardView}小工具：
</p>
<pre>
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
@@ -212,7 +251,11 @@ public class MyAdapter extends RecyclerView.Adapter&lt;MyAdapter.ViewHolder> {
<h2 id="Dependencies">新增相依性</h2>
<p>{@link android.support.v7.widget.RecyclerView} 和 {@link android.support.v7.widget.CardView} 小工具都屬於 <a href="{@docRoot}tools/support-library/features.html#v7">v7 支援程式庫</a>。如果要在專案中使用這些小工具，請在應用程式的模組中加入下列 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 相依性</a>：</p>
<p>{@link android.support.v7.widget.RecyclerView} 和 {@link android.support.v7.widget.CardView} 小工具都屬於 <a href="{@docRoot}tools/support-library/features.html#v7">v7 支援程式庫</a>。
如要在專案中使用這些小工具，請在應用程式的模組中加入下列 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle 相依性</a>：
</p>
<pre>
dependencies {
@@ -220,4 +263,4 @@ dependencies {
compile 'com.android.support:cardview-v7:21.0.+'
compile 'com.android.support:recyclerview-v7:21.0.+'
}
</pre>
</pre>

88
docs/html-intl/intl/zh-tw/training/material/shadows-clipping.jd
View File

@@ -1,4 +1,4 @@
page.title=定義陰影和裁剪檢視
page.title=定義陰影和裁剪視圖
@jd:body
@@ -6,9 +6,9 @@ page.title=定義陰影和裁剪檢視
<div id="tb">
<h2>本課程示範</h2>
<ol>
<li><a href="#Elevation">指定檢視的高度</a></li>
<li><a href="#Shadows">自訂檢視陰影和外框</a></li>
<li><a href="#Clip">裁剪檢視</a></li>
<li><a href="#Elevation">指定視圖的高度</a></li>
<li><a href="#Shadows">自訂視圖陰影和外框</a></li>
<li><a href="#Clip">裁剪視圖</a></li>
</ol>
<h2>您也應該閱讀</h2>
<ul>
@@ -18,20 +18,29 @@ page.title=定義陰影和裁剪檢視
</div>
</div>
<p>材料設計為 UI 元素引入高度的概念。高度可以幫助使用者了解每個元素的相對重要性，然後讓使用者把焦點放在手邊的工作上。</p>
<p>材料設計為 UI 元素引入高度的概念。高度有助使用者了解每個元素的相對重要性並將焦點放在手邊的工作上。
</p>
<p>檢視的高度以 Z 屬性表示，判斷其陰影的視覺外觀：Z 值越高的檢視投射範圍越大，陰影就越柔和。Z 值較高的檢視會遮住 Z 值較低的檢視。不過，檢視的 Z 值不會影響檢視的大小。</p>
<p>視圖的高度以 Z 屬性表示，決定其陰影的視覺外觀：視圖的 Z 值越高，投射範圍越大，陰影也就越柔和。
Z 值較高的視圖會遮住 Z 值較低的視圖。然而，視圖的 Z 值不會影響視圖的大小。
</p>
<p>陰影是由較高的上層檢視繪製，因此也和標準檢視裁剪一樣，預設由上層檢視裁剪陰影。</p>
<p>陰影是由較高的上層視圖繪製，因此也和標準視圖裁剪一樣，預設由上層視圖裁剪陰影。
</p>
<p>當小工具在執行某些操作動作而暫時升高到檢視平面的上方時，高度對於建立動畫也非常有用。</p>
<p>當小工具在執行某些操作動作而暫時升高到視圖平面的上方時，高度對於建立動畫也非常實用。
</p>
<p>如需有關材料設計高度的詳細資訊，請參閱 <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">3D 空間中的物件</a>。</p>
<p>如需有關材料設計高度的詳細資訊，請參閱 <a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">3D 空間中的物件</a>。
</p>
<h2 id="Elevation">指派高度到您的檢視</h2>
<h2 id="Elevation">指定視圖的高度</h2>
<p>檢視的 Z 值有兩個部分： <ul>
<p>視圖的 Z 值有兩個部分：
<ul>
<li>高度：靜態部分。</li>
<li>解譯：用在動畫的動態部分。</li>
</ul>
@@ -39,24 +48,36 @@ page.title=定義陰影和裁剪檢視
<p><code>Z = elevation + translationZ</code></p>
<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" />
<p class="img-caption"><strong>圖 1</strong> - 不同檢視高度的陰影。</p>
<p class="img-caption"><strong>圖 1</strong> - 不同視圖高度的陰影。</p>
<p>如果要在版面配置定義中設定檢視的高度，請使用 <code>android:elevation</code> 屬性。如果要在操作行為的程式碼中設定檢視的高度，請使用 {@link android.view.View#setElevation View.setElevation()} 方法。</p>
<p>如要在版面配置定義中設定視圖的高度，請使用 <code>android:elevation</code> 屬性。
如果要在操作行為的程式碼中設定檢視的高度，請使用 {@link android.view.View#setElevation View.setElevation()} 方法。
</p>
<p>如果要設定檢視的解譯，請使用 {@link android.view.View#setTranslationZ View.setTranslationZ()} 方法。</p>
<p>如要在操作行為的程式碼中設定檢視的高度，請使用 {@link android.view.View#setTranslationZ
View.setTranslationZ()} 方法。</p>
<p>新的 {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} 和 {@link android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} 方法可以很輕易地賦予檢視高度栩栩如生的質感。如需詳細資訊，請參閱 {@link android.view.ViewPropertyAnimator} 的 API 參考資料和<a href="{@docRoot}guide/topics/graphics/prop-animation.html">屬性動畫</a>開發人員指南。</p>
<p>新的 {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} 和 {@link
android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} 方法可以很輕易地讓視圖高度變得栩栩如生。
如需詳細資訊，請參閱 {@link android.view.ViewPropertyAnimator}的 API 參考資料和<a href="{@docRoot}guide/topics/graphics/prop-animation.html">屬性動畫開發人員指南</a>。
<p>您也可以使用 {@link android.animation.StateListAnimator} 以宣告的方式指定這些動畫。當狀態變更觸發動畫時 (例如當使用者按下了按鈕)，這會特別有用。如需詳細資訊，請參閱<a href="{@docRoot}training/material/animations.html#ViewState">動畫顯示檢視狀態變更</a>。</p>
</p>
<p>您也可以使用 {@link android.animation.StateListAnimator} 以宣告的方式指定這些動畫。
當狀態變更觸發動畫時， 例如使用者按下按鈕，這會特別實用。
如需詳細資訊，請參閱<a href="{@docRoot}training/material/animations.html#ViewState">動畫顯示視圖狀態變更</a>。
</p>
<p>Z 值的測量單位為 dp (密度獨立像素)。</p>
<h2 id="Shadows">自訂檢視陰影和外框</h2>
<h2 id="Shadows">自訂視圖陰影和外框</h2>
<p>檢視背景可繪項目的邊界決定檢視陰影的預設形狀。<strong>外框</strong>代表圖形物件的外部形狀，而且會定義輕觸回饋的漣漪區域。</p>
<p>檢視背景可繪項目的邊界決定了視圖陰影的預設形狀。<strong>外框</strong>代表圖形物件的外部形狀，並可定義輕觸回饋的漣漪區域。
<p>我們來看看這個使用背景可繪項目定義的檢視：</p>
</p>
<p>我們來看看這個使用背景可繪項目定義的視圖：</p>
<pre>
&lt;TextView
@@ -77,23 +98,36 @@ page.title=定義陰影和裁剪檢視
&lt;/shape>
</pre>
<p>因為背景可繪項目定義了檢視的外框，所以檢視投射出有圓形邊角的陰影。如果提供自訂的外框，則會覆寫檢視陰影的預設形狀。</p>
<p>因為背景可繪項目定義了視圖的外框，所以視圖投射出有圓形邊角的陰影。
如果提供自訂的外框，則會覆寫視圖陰影的預設形狀。</p>
<p>在程式碼中定義檢視的自訂外框：<p>
<p>在程式碼中定義視圖的自訂外框：<p>
<ol>
<li>延伸 {@link android.view.ViewOutlineProvider} 類別。</li>
<li>覆寫 {@link android.view.ViewOutlineProvider#getOutline getOutline()} 方法。</li>
<li>使用 {@link android.view.View#setOutlineProvider View.setOutlineProvider()} 方法對檢視指定新的外框提供者。</li>
<li>使用 {@link
android.view.View#setOutlineProvider View.setOutlineProvider()} 方法對您的視圖指定新的外框提供者。</li>
</ol>
<p>您可以使用 {@link android.graphics.Outline} 類別中的方法，建立橢圓形外框和有圓形邊角的長方形外框。檢視的預設外框提供者會從檢視的背景取得外框。如果要避免檢視投射出陰影，請將檢視的外框提供者設定為 <code>null</code>。</p>
<p>您可以使用 {@link android.graphics.Outline} 類別中的方法，建立橢圓形外框和有圓形邊角的長方形外框。
視圖的預設外框提供者會從視圖的背景取得外框。
如果要避免視圖投射出陰影，請將視圖的外框提供者設定為 <code>null</code>。
</p>
<h2 id="Clip">裁剪檢視</h2>
<h2 id="Clip">裁剪視圖</h2>
<p>裁剪檢視可以讓您輕鬆地變更檢視的形狀。您可以裁剪檢視，讓檢視與其他設計元素有一致的外觀，或者變更檢視的形狀來回應使用者的輸入。您可以使用 {@link android.view.View#setClipToOutline View.setClipToOutline()} 方法或 <code>android:clipToOutline</code> 屬性，將檢視裁剪為其外框區域。依照 {@link android.graphics.Outline#canClip Outline.canClip()} 方法的定義，只有長方形、圓形和圓角長方形的外框才支援裁剪。</p>
<p>裁剪視圖可以讓您輕鬆地變更視圖的形狀。您可以裁剪視圖，讓視圖與其他設計元素有一致的外觀，或變更視圖的形狀來回應使用者的輸入。您可以使用 {@link android.view.View#setClipToOutline
View.setClipToOutline()} 方法或 <code>android:clipToOutline</code> 屬性，將視圖裁剪為其外框區域。
<p>如果要將檢視裁剪為可繪項目的形狀，請將可繪項目設定為檢視的背景 (如上所示)，然後呼叫 {@link android.view.View#setClipToOutline View.setClipToOutline()} 方法。</p>
根據 {@link android.graphics.Outline#canClip Outline.canClip()} 方法的定義，只有長方形、圓形和圓角長方形的外框才支援裁剪。
<p>裁剪檢視是一種耗費資源的操作，所以請不要將您用來裁剪檢視的形狀做成動畫。如果想要達到這種效果，請使用<a href="{@docRoot}training/material/animations.html#Reveal">顯示效果</a>動畫。</p>
</p>
<p>如要將視圖裁剪為可繪項目的形狀，請將可繪項目設定為視圖的背景 (如上所示)，然後呼叫 {@link android.view.View#setClipToOutline View.setClipToOutline()} 方法。
</p>
<p>裁剪視圖是一種耗費資源的操作，所以請不要將您用來裁剪視圖的形狀做成動畫。
如果想要達到這種效果，請使用<a href="{@docRoot}training/material/animations.html#Reveal">顯示效果</a>動畫。</p>

56
docs/html-intl/intl/zh-tw/training/material/theme.jd
View File

@@ -8,7 +8,7 @@ page.title=使用材料設計風格
<ol>
<li><a href="#ColorPalette">自訂色板</a></li>
<li><a href="#StatusBar">自訂狀態列</a></li>
<li><a href="#Inheritance">風格主題個別檢視</a></li>
<li><a href="#Inheritance">設計風格個別視圖</a></li>
</ol>
<h2>您也應該閱讀</h2>
<ul>
@@ -27,9 +27,12 @@ page.title=使用材料設計風格
<li>操作行為轉換動畫</li>
</ul>
<p>您可以根據品牌特性，使用您控制的色板來自訂材料設計風格的外觀。您可以使用風格主題屬性，為行為欄和狀態列著色，如<a href="#fig3">圖 3</a> 所示。</p>
<p>您可根據品牌特性，使用您控制的色板以自訂材料設計風格的外觀。
您可以使用風格主題屬性，為行為欄和狀態列著色，如<a href="#fig3">圖 3</a> 所示。
</p>
<p>系統小工具經過全新設計，有輕觸回饋動畫。您可以為應用程式自訂色板、輕觸回饋動畫，以及操作行為轉換。</p>
<p>系統小工具經過全新設計，有輕觸回饋動畫。您可以為應用程式自訂色板、輕觸回饋動畫，以及操作行為轉換。
</p>
<p>材料設計風格定義為：</p>
@@ -39,33 +42,39 @@ page.title=使用材料設計風格
<li><code>@android:style/Theme.Material.Light.DarkActionBar</code></li>
</ul>
<p>如需您可以使用的材料樣式清單，請參閱 {@link android.R.style R.style} 的 API 參考資料。</p>
<p>如需您可以使用的材料樣式清單，請參閱 {@link android.R.style R.style} 的 API 參考資料。
</p>
<!-- two columns, dark/light material theme example -->
<div style="width:700px;margin-top:25px;margin-bottom:10px">
<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:170px;margin:0 auto">
<p style="margin-top:8px;font-size:12px"><strong>圖 1.</strong>深色材料設計風格</p>
<p style="margin-top:8px;font-size:12px"><strong>圖 1</strong>.深色材料設計風格</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:170px;margin:0 auto">
<p style="margin-top:8px;font-size:12px"><strong>圖 2.</strong>淺色材料設計風格</p>
<p style="margin-top:8px;font-size:12px"><strong>圖 2</strong>.淺色材料設計風格</p>
</div>
</div>
<br style="clear:left">
</div>
<p class="note">
<strong>注意：</strong>材料設計風格只能在 Android 5.0 (API 級別 21) 以及更新版本中使用。<a href="{@docRoot}tools/support-library/features.html#v7">v7 支援程式庫</a>針對某些小工具提供使用材料設計樣式的風格主題，並且支援自訂色板。如需詳細資訊，請參閱<a href="{@docRoot}training/material/compatibility.html">維持相容性</a>。
<strong>注意：</strong>材料設計風格只能在 Android 5.0 (API 級別 21) 及以上版本中使用。
<a href="{@docRoot}tools/support-library/features.html#v7">v7 支援程式庫</a>針對某些小工具提供使用材料設計樣式的設計風格，並支援自訂色板。
如需詳細資訊，請參閱<a href="{@docRoot}training/material/compatibility.html">維持相容性</a>。
</p>
<h2 id="ColorPalette">自訂色板</h2>
<p style="margin-bottom:30px">如果要自訂風格主題的基礎顏色來搭配您的品牌，在繼承材料設計風格時，請使用風格主題屬性定義您的自訂顏色：</p>
<p style="margin-bottom:30px">如要自訂設計風格的基礎顏色來搭配您的品牌，在繼承材料設計風格時，請使用設計風格屬性定義您的自訂顏色：
</p>
<pre>
&lt;resources>
@@ -91,17 +100,32 @@ page.title=使用材料設計風格
<h2 id="StatusBar">自訂狀態列</h2>
<p>材料設計風格可以讓您輕鬆自訂狀態列，因此您可以指定符合品牌的顏色，並且提供足夠的對比來顯示白色的狀態圖示。如果要設定狀態列的自訂顏色，請在延伸材料設計風格時使用 <code>android:statusBarColor</code> 屬性。<code>android:statusBarColor</code> 預設會繼承 <code>android:colorPrimaryDark</code> 的值。</p>
<p>材料設計風格可讓您輕鬆自訂狀態列，因此，您可指定符合品牌的顏色，並提供足夠的對比來顯示白色的狀態圖示。
如要設定狀態列的自訂顏色，請在延伸材料設計風格時使用 <code>android:statusBarColor</code> 屬性。
<p>您也可以自行繪製狀態列。例如，如果您想要在相片上面顯示透明的狀態列，但是搭配一點深色的漸層，確保可以看見白色的狀態圖示。請將 <code>android:statusBarColor</code> 屬性設定為 <code>&#64;android:color/transparent</code>，並且視需要調整視窗標幟。您也可以使用 {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} 方法顯示動畫或進行淡化。</p>
<p class="note">
<strong>注意：</strong>狀態列必須與主要工具列有清楚區分的輪廓，除非您要在這些列後面顯示全版的豐富圖像或媒體內容，或者使用漸層來確保圖示清晰可見。
<code>android:statusBarColor</code> 預設會繼承 <code>android:colorPrimaryDark</code> 的值。
</p>
<p>當您自訂導覽列和狀態列時，請讓兩者都變成透明，或者只修改狀態列。在其他所有狀況下，導覽列都必須保持黑色。</p>
<p>您也可以自行繪製狀態列。例如，若您想在相片上面顯示透明的狀態列，卻想搭配一點深色的漸層以確保白色的狀態圖示清晰可見。
請將 <code>android:statusBarColor</code> 屬性設定為 <code>&#64;android:color/transparent</code>，並且視需要調整視窗標幟。
您也可以使用 {@link android.view.Window#setStatusBarColor Window.setStatusBarColor()} 方法顯示動畫或進行淡化。
</p>
<p class="note">
<strong>注意：</strong>狀態列應該與主要工具列有清楚區分的輪廓，除非您想在這些列後面顯示全版的豐富圖像或媒體內容，或使用漸層以確保圖示清晰可見。
<h2 id="Inheritance">風格主題個別檢視</h3>
</p>
<p>XML 版面配置定義中的元素可以指定 <code>android:theme</code> 屬性，參考風格主題資源。這個屬性會修改元素和所有子元素的風格主題，這在改變介面特定部份的風格主題色板時很有用。</p>
<p>當您自訂瀏覽列和狀態列時，請讓兩者都變成透明，或者只修改狀態列。
在其他所有狀況下，瀏覽列都必須保持黑色。</p>
<h2 id="Inheritance">設計風格個別視圖</h3>
<p>XML 版面配置定義中的元素可以指定 <code>android:theme</code> 屬性，參考設計風格資源。
此屬性會修改元素和所有子元素的設計風格，對於改變介面特定部份的設計風格色板非常實用。
</p>

5
docs/html/design/design_toc.cs
View File

@@ -24,7 +24,10 @@
pt-br-lang="Material Design"
ru-lang="Material Design"
zh-cn-lang="材料设计"
zh-tw-lang="材料設計">
zh-tw-lang="材料設計"
in-lang="Desain Bahan"
vi-lang="Material Design"
>
Material for Android</a></div>
</li>

23
docs/html/training/training_toc.cs
View File

@@ -1609,6 +1609,15 @@ results."
<a href="<?cs var:toroot ?>training/material/index.html"
description=
"How to implement material design on Android."
zh-cn-lang="面向开发者的材料设计"
zh-tw-lang="開發人員材料設計"
ja-lang="マテリアル デザインでのアプリ作成"
es-lang="Crear aplicaciones con Material Design"
pt-br-lang="Material Design para desenvolvedores"
ko-lang="개발자를 위한 머티리얼 디자인"
ru-lang="Создание приложений с помощью Material Design"
in-lang="Desain Bahan untuk Pengembang"
vi-lang="Material Design cho Nhà phát triển"
>Creating Apps with Material Design</a>
</div>
<ul>
@@ -1620,6 +1629,8 @@ results."
pt-br-lang="Como iniciar"
ko-lang="시작하기"
ru-lang="Начало работы"
in-lang="Memulai"
vi-lang="Bắt đầu"
>
Getting Started
</a>
@@ -1632,6 +1643,8 @@ results."
pt-br-lang="Como usar o tema do Material"
ko-lang="머티어리얼 테마 사용"
ru-lang="Использование темы Material Design"
in-lang="Menggunakan Tema Bahan"
vi-lang="Sử dụng Chủ đề Material"
>
Using the Material Theme
</a>
@@ -1644,6 +1657,8 @@ results."
pt-br-lang="Como criar listas e cartões"
ko-lang="목록 및 카드 생성"
ru-lang="Создание списков и подсказок"
in-lang="Membuat Daftar dan Kartu"
vi-lang="Tạo Danh sách và Thẻ"
>
Creating Lists and Cards
</a>
@@ -1656,6 +1671,8 @@ results."
pt-br-lang="Como definir sombras e recortar visualizações"
ko-lang="그림자 정의 및 뷰 클리핑"
ru-lang="Определение теней и обрезка представлений"
in-lang="Mendefinisikan Bayangan dan Memangkas Tampilan"
vi-lang="Định nghĩa Đổ bóng và Dạng xem Cắt hình"
>
Defining Shadows and Clipping Views
</a>
@@ -1668,6 +1685,8 @@ results."
pt-br-lang="Como trabalhar com desenháveis"
ko-lang="Drawable 사용"
ru-lang="Работа с элементами дизайна"
in-lang="Bekerja dengan Drawable"
vi-lang="Làm việc với Nội dung vẽ được"
>
Working with Drawables
</a>
@@ -1680,6 +1699,8 @@ results."
pt-br-lang="Como definir animações personalizadas"
ko-lang="사용자지정 애니메이션 정의"
ru-lang="Определение настраиваемой анимации"
in-lang="Mendefinisikan Animasi Custom"
vi-lang="Định nghĩa Hoạt hình Tùy chỉnh"
>
Defining Custom Animations
</a>
@@ -1692,6 +1713,8 @@ results."
pt-br-lang="Como manter a compatibilidade"
ko-lang="호환성 유지"
ru-lang="Обеспечение совместимости"
in-lang="Mempertahankan Kompatibilitas"
vi-lang="Duy trì Tính tương thích"
>
Maintaining Compatibility
</a>