| 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> |
| <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> |
| <!-- res/drawable/myrect.xml --> |
| <shape xmlns:android="http://schemas.android.com/apk/res/android" |
| android:shape="rectangle"> |
| <solid android:color="#42000000" /> |
| <corners android:radius="5dp" /> |
| </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> |