1page.title=Material Design cho Android 2page.tags=Material,design 3page.type=thiết kế 4page.image=images/cards/design-material-for-android_2x.jpg 5 6@jd:body 7 8<!-- developer docs box --> 9<a class="notice-developers right" href="{@docRoot}training/material/index.html"> 10 <div> 11 <h3>Tài liệu cho Nhà phát triển</h3> 12 <p>Tạo ứng dụng với Material Design</p> 13 </div> 14</a> 15 16<!-- video box --> 17<a class="notice-developers-video" href="https://www.youtube.com/watch?v=p4gmvHyuZzw"> 18<div> 19 <h3>Video</h3> 20 <p>Giới thiệu Material Design</p> 21</div> 22</a> 23 24<!-- video box --> 25<a class="notice-developers-video" href="https://www.youtube.com/watch?v=YaG_ljfzeUw"> 26<div> 27 <h3>Video</h3> 28 <p>Giấy và Mực: Những vật liệu quan trọng</p> 29</div> 30</a> 31 32<!-- video box --> 33<a class="notice-developers-video" href="https://www.youtube.com/watch?v=XOcCOBe8PTc"> 34<div> 35 <h3>Video</h3> 36 <p>Material Design trong Google I/O App</p> 37</div> 38</a> 39 40 41 42<p itemprop="description">Material design là một hướng dẫn toàn diện về thiết kế 43trự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ợ 44nhữ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 45trong <a href="http://www.google.com/design/spec">đặc tả material design</a> và sử dụng 46nhữ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> 47 48<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> 49 50<ul> 51 <li>Một giao diện mới</li> 52 <li>Widget mới cho các dạng xem phức tạp</li> 53 <li>API mới cho đổ bóng và hoạt hình tùy chỉnh</li> 54</ul> 55 56<p>Để biết thêm thông tin về triển khai material design trên Android, hãy xem 57<a href="{@docRoot}training/material/index.html">Tạo ứng dụng với Material Design</a>.</p> 58 59 60<h3>Giao diện Material</h3> 61 62<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 63bả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> 64 65<!-- two columns --> 66<div style="width:700px;margin-top:25px;margin-bottom:20px"> 67<div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 68 <img src="{@docRoot}design/material/images/MaterialDark.png" width="500" height="238" /> 69 <div style="width:140px;margin:0 auto"> 70 <p style="margin-top:8px">Giao diện material tối</p> 71 </div> 72</div> 73<div style="float:left;width:250px;margin-right:0px;"> 74 <img src="{@docRoot}design/material/images/MaterialLight.png" width="500" height="238" /> 75 <div style="width:140px;margin:0 auto"> 76 <p style="margin-top:8px">Giao diện material sáng</p> 77 </div> 78</div> 79<br style="clear:left"/> 80</div> 81 82<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 83</a>.</p> 84 85 86<h3>Danh sách và Thẻ</h3> 87 88<p>Android cung cấp hai loại widget mới để hiển thị thẻ và danh sách bằng phong cách 89và hoạt hình material design:</p> 90 91<!-- two columns --> 92<div style="width:700px;margin-top:25px;margin-bottom:20px"> 93<div style="float:left;width:250px;margin-left:40px;margin-right:60px;"> 94 <img src="{@docRoot}design/material/images/list_mail.png" width="500" height="426" /> 95 <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> 96 có hỗ trợ nhiều kiểu bố trí khác nhau và cải thiện hiệu năng.</p> 97</div> 98<div style="float:left;width:250px;margin-right:0px;"> 99 <img src="{@docRoot}design/material/images/card_travel.png" width="500" height="426" /> 100 <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 101 thẻ với diện mạo và cảm nhận nhất quán.</p> 102</div> 103<br style="clear:left"/> 104</div> 105 106<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 107và Thẻ</a>.</p> 108 109 110<h3>Đổ bóng Dạng xem</h3> 111 112<p>Bên cạnh các thuộc tính X và Y, dạng xem trong Android nay có 113thê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> 114 115<ul> 116<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> 117<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> 118</ul> 119 120<div style="width:290px;margin-left:35px;float:right"> 121 <div class="framed-nexus5-port-span-5"> 122 <video class="play-on-hover" autoplay> 123 <source src="{@docRoot}design/material/videos/ContactsAnim.mp4"/> 124 <source src="{@docRoot}design/videos/ContactsAnim.webm"/> 125 <source src="{@docRoot}design/videos/ContactsAnim.ogv"/> 126 </video> 127 </div> 128 <div style="font-size:10pt;margin-left:20px;margin-bottom:30px"> 129 <em>Để phát lại phim, nhấp vào màn hình thiết bị</em> 130 </div> 131</div> 132 133<p>Để biết thêm thông tin, hãy xem phần <a href="{@docRoot}training/material/shadows-clipping.html">Định nghĩa 134Đổ bóng và Dạng xem Cắt hình</a>.</p> 135 136 137<h3>Hoạt hình</h3> 138 139<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, 140thay đổi trạng thái xem và chuyển tiếp hoạt động.</p> 141 142<p>Những API này cho phép bạn:</p> 143 144<ul> 145<li style="margin-bottom:15px"> 146Phả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>. 147</li> 148<li style="margin-bottom:15px"> 149Ẩn và hiện dạng xem bằng hoạt hình <strong>hiện hình tròn</strong>. 150</li> 151<li style="margin-bottom:15px"> 152Chuyể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. 153</li> 154<li style="margin-bottom:15px"> 155Tạo hoạt hình tự nhiên hơn bằng <strong>chuyển động cong</strong>. 156</li> 157<li style="margin-bottom:15px"> 158Tạ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>. 159</li> 160<li style="margin-bottom:15px"> 161Thể 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. 162</li> 163</ul> 164 165<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 166cho 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> 167 168<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 169Tùy chỉnh</a>.</p> 170 171 172<h3>Nội dung vẽ được</h3> 173 174<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> 175 176<ul> 177<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 178cho các biểu tượng trong ứng dụng đơn sắc.</li> 179<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 180màu cho chúng theo thời gian chạy.</li> 181<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ừ 182hình ảnh bitmap.</li> 183</ul> 184 185<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 186Nội dung Vẽ được</a>.</p> 187
