1page.title=Định nghĩa Đổ bóng và Dạng xem Cắt hình 2 3@jd:body 4 5<div id="tb-wrapper"> 6<div id="tb"> 7<h2>Bài học này hướng dẫn bạn cách</h2> 8<ol> 9 <li><a href="#Elevation">Gán Độ cao cho Dạng xem của Bạn</a></li> 10 <li><a href="#Shadows">Tùy chỉnh Đổ bóng và Viền của Dạng xem</a></li> 11 <li><a href="#Clip">Dạng xem Cắt hình</a></li> 12</ol> 13<h2>Bạn cũng nên đọc</h2> 14<ul> 15 <li><a href="http://www.google.com/design/spec">Đặc tả phong cách Material Design</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Material Design trên Android</a></li> 17</ul> 18</div> 19</div> 20 21<p>Material design giới thiệu độ cao cho phần tử UI. Độ cao giúp người dùng hiểu được 22tầ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> 23 24<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 25bó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 26có 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> 27 28<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, 29được cắt bởi dạng xem mẹ theo mặc định.</p> 30 31<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 32mặt phẳng dạng xem khi thực hiện một hành động nào đó.</p> 33 34<p>Để biết thêm thông tin về độ cao trong material design, hãy xem 35<a href="http://www.google.com/design/spec/what-is-material/objects-in-3d-space.html">Đối tượng 36trong không gian 3D</a>.</p> 37 38 39<h2 id="Elevation">Gán Độ cao cho Dạng xem của Bạn</h2> 40 41<p>Giá trị Z của một dạng xem có hai thành phần: 42 43<ul> 44<li>Độ cao: Thành phần tĩnh.</li> 45<li>Độ dịch: Thành phần động được sử dụng cho hoạt hình.</li> 46</ul> 47 48<p><code>Z = elevation + translationZ</code></p> 49 50<img src="{@docRoot}training/material/images/shadows-depth.png" width="580" height="261" alt="" /> 51<p class="img-caption"><strong>Hình 1</strong> - Đổ bóng cho các độ cao dạng xem khác nhau.</p> 52 53<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> 54. Để đặ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 55{@link android.view.View#setElevation View.setElevation()}.</p> 56 57<p>Để đặt độ dịch của dạng xem, hãy sử dụng phương thức {@link android.view.View#setTranslationZ 58View.setTranslationZ()}.</p> 59 60<p>Các phương thức {@link android.view.ViewPropertyAnimator#z ViewPropertyAnimator.z()} và {@link 61android.view.ViewPropertyAnimator#translationZ ViewPropertyAnimator.translationZ()} mới cho phép 62bạ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 63{@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> 64.</p> 65 66<p>Bạn cũng có thể sử dụng {@link android.animation.StateListAnimator} để 67quy đị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 68trạ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 69<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> 70 71<p>Giá trị Z được đo bằng dp (điểm ảnh độc lập với mật độ).</p> 72 73 74<h2 id="Shadows">Tùy chỉnh Đổ bóng và Viền của Dạng xem</h2> 75 76<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. 77<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 78gợn sóng cho phản hồi chạm.</p> 79 80<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> 81 82<pre> 83<TextView 84 android:id="@+id/myview" 85 ... 86 android:elevation="2dp" 87 android:background="@drawable/myrect" /> 88</pre> 89 90<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> 91 92<pre> 93<!-- res/drawable/myrect.xml --> 94<shape xmlns:android="http://schemas.android.com/apk/res/android" 95 android:shape="rectangle"> 96 <solid android:color="#42000000" /> 97 <corners android:radius="5dp" /> 98</shape> 99</pre> 100 101<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 102viề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> 103 104<p>Để định nghĩa viền tùy chỉnh cho một dạng xem trong mã của bạn:<p> 105 106<ol> 107<li>Mở rộng lớp {@link android.view.ViewOutlineProvider}.</li> 108<li>Ghi đè phương thức {@link android.view.ViewOutlineProvider#getOutline getOutline()}.</li> 109<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 110android.view.View#setOutlineProvider View.setOutlineProvider()}.</li> 111</ol> 112 113<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 114{@link android.graphics.Outline}. Trình cung cấp viền mặc định cho dạng xem sẽ lấy viền 115từ 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ó 116thành <code>null</code>.</p> 117 118 119<h2 id="Clip">Dạng xem Cắt hình</h2> 120 121<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 để 122nhấ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. 123Bạ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 124View.setClipToOutline()} hoặc thuộc tính <code>android:clipToOutline</code>. Chỉ 125viề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 126{@link android.graphics.Outline#canClip Outline.canClip()}.</p> 127 128<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 129(như minh họa bên trên) và gọi phương thức {@link android.view.View#setClipToOutline View.setClipToOutline()} 130.</p> 131 132<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 để 133cắ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> 134
