Bài 3: Thiết kế giao diện android

Microsoft PowerPoint Bai 3 Thiet ke giao dien pptx 13092021 THIẾT KẾ GIAO DIỆN N G U Y Ễ N C H Í H I Ế U N g u y ễ n C h í H i ế u 2 1 2 13092021 NỘI DUNG N g u y ễ n C h í H i ế u 2 0 2 1 3 Các k. Các khái niệm cơ bản Một số điều khiển phổ biến Bố cục giao diện Quy tắc thiết kế giao diện

13/09/2021 THIẾT KẾ GIAO DIỆN N G U Y Ễ N C H Í H I Ế U N g u y ễ n C h í H i ế u 2 13/09/2021 N g u y ễ n C h í H i ế u Các khái niệm Một số điều khiển phổ biến NỘI DUNG Bố cục giao diện Quy tắc thiết kế giao diện 2 2021 N g u y ễ n C h í H i ế u CÁC KHÁI NIỆM CƠ BẢN 13/09/2021 ĐƠN VỊ ĐO • inch (Inches), mm (Millimeters) • Kích thước hình thiết bị • pt (Points) • 1pt=1/72 inch • px (Pixels): số điểm ảnh • Thiết bị có độ phân giải cao số điểm ảnh nhiều • Dùng để đo kích thước ảnh N g u y ễ n C h í 2 H i ế u 5 N g u y ễ n C h í H i ế u ĐƠN VỊ ĐO • dp (Densityi n d e p e n d e n t P i x e ls ) • Đơn vị đo chiều d i v ậ t lý ( d p = i n ch ) • Google thường dùng đo hình thiết bị • Mộ t d p c ó t h ể chứa hay nhiều px N g u y ễ n C h í H i ế u 2 13/09/2021 N g u y ễ n C h í H i ế u ĐƠN VỊ ĐO • dpi (Dots Per Inch) • Số điểm 1inch (160dp) hình thiết bị N g u y ễ n C h í 2 H i ế u 7 N g u y ễ n C h í H i ế u 𝑝𝑥 = 𝑑𝑝 ∗ 𝑑𝑝𝑖 160 • Ví dụ Cho hình loại xxhdpi kích thước 1080 x 1920 px Cho biết kích thước hình theo dp? ĐƠN VỊ ĐO N g u y ễ n C h í H i ế u 2 13/09/2021 ĐƠN VỊ ĐO • sp (Scale-independent Pixels) • Mơ tả kích thước font chữ N g u y ễ n C h í H i ế u 2 2 1 N g u y ễ n C h í H i ế u CÁC KHÁI NIỆM CƠ BẢN N g u y ễ n 10 C h í H i ế u • T ấ t c ả g i a o d i ệ n t ro n g An d r o i d đ ợ c x â y d ự n g t c c V i e w v Vi e w G ro u p 13/09/2021 VIEW/WIDGET • View đối tượng vẽ hình ứng dụng tương tác với người dùng qua kiện: click, touch, keydown, … • TextView, • EditText, • Button, • ListView, •… N g u y ễ n C h í H i ế u 2 1 2 1 11 VIEW • Hai cách khai báo view Khai báo tĩnh: viết mã *.xml hay kéo thả trực tiếp N g u y ễ n 12 C h í H i ế u 13/09/2021 VIEW • Hai cách khai báo view Khai báo động: *.java TextView textView = new TextView(this); textView.setLayoutParams(new ViewGroup.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)); textView.setText("Hi All!"); layoutMain.addView(textView); N g u y ễ n C h í H i ế u 2 1 13 VIEW • Properties: chiều rộng, chiều dài, màu sắc, … • Listeners: xử lý kiện (click, touch, keydown, …) người dùng tương tác với view • Focus: chọn view bật view khác hay có dấu nháy chuẩn bị nhập liệu • Visibility: hiển thị/ẩn view N g u y ễ n 14 C h í H i ế u 2 1 13/09/2021 VIEW • Property • Là cặp khóa-giá trị (key-value) • Trong *.xml, thuộc tính bắt đầu namespace android android:layout_width="match_content" android:layout_height="wrap_content“ android:text_size="20sp" android:text="Hello World!" N g u y ễ n C h í H i ế u 2 1 2 1 15 VIEWGROUP • Tập hợp View hay ViewGroup khác • Được tổ chức theo phân cấp • ViewGroup: LinearLayout, RelativeLayout, … N g u y ễ n 16 C h í H i ế u 13/09/2021 VIEWGROUP ViewGroup View N g u y ễ n C h í H i ế u ViewGroup View View View View 2 1 17 N g u y ễ n C h í H i ế u MỘT SỐ VIEW PHỔ BIẾN 2021 18 13/09/2021 MỘT SỐ VIEW PHỔ BIẾN • View • TextView • EditText • SearchView • Button • Switch/ToogleButton •… N g u y ễ n C h í H i ế u 2 1 2 19 MỘT SỐ VIEW PHỔ BIẾN N g u y ễ n 20 C h í H i ế u 13/09/2021 N g u y ễ n C h í H i ế u N g u y ễ n C h í H i ế u 32 2021 31 BỐ CỤC GIAO D IỆN 2021 13/09/2021 BỐ CỤC GIAO DIỆN • FrameLayout • LinearLayout • RelativeLayout • GridLayout N g u y ễ n C h í H i ế u 2 3 2 33 BỐ CỤC GIAO DIỆN N g u y ễ n 34 C h í H i ế u 13/09/2021 N g u y ễ n C h í H i ế u FRAMELAYOUT • Mặc định, view thêm vào đặt chồng lên vị trí top-left • Thường dùng cho Fragment 2 2 35 N g u y ễ n C h í H i ế u FRAMELAYOUT • Thuộc tính layout_gravity dùng xác định vị trí View con: • center, • left, • right, • top, • bottom, • … N g u y ễ n 36 C h í H i ế u 13/09/2021 LINEARLAYOUT • Bố cục View theo cấu trúc ngăn xếp • Chiều ngang (horizontal) • Chiều dọc (vertical) N g u y ễ n C h í 2 H i ế u 37 N g u y ễ n C h í H i ế u LINEARLAYOUT • Một s ố th uộc tín h L in ear Lay o u t • orien ta ti o n : h oriz on t a l , v er tica l • l ayout _w id th, l ayout _he ig h t • … • Một s ố th uộc tín h x ác địn h v ị tr í Vie w con: • l ayout _gr av i ty • l ayout _w eig h t N g u y ễ n 38 C h í H i ế u 2 13/09/2021 N g u y ễ n C h í H i ế u RELATIVELAYOUT • Một V ie w x ác địn h theo m ối liên h ệ v ới Vie w kh ác h ay thàn h ph ần ch a n ó thơn g qua id • Một s ố th uộc tín h x ác địn h View : • l ayout _ ab ov e , lay out_b el o w • l ayout _ al ig n L ef t, l ayout _ al ig n P a re n tL ef t, … • … N g u y ễ n C h í H i ế u 2 2 39 GRIDLAYOUT • Một số thuộc tính GirdLayout 0,0 • rowCount, columnCount • Một số thuộc tính xác định View con: 1,1 2,1 • layout_row, layout_column • rowSpan, columnSpan N g u y ễ n 40 C h í H i ế u 13/09/2021 1 0,0 N g u y ễ n C h í H i ế u 1,0 1,1 1,2 2 2021 41 N g u y ễ n C h í H i ế u ĐỊNH NGHĨA STYLE 42 13/09/2021 N g u y ễ n C h í H i ế u 2 2 4 43 DRAWABLE\VALUES N g u y ễ n 44 C h í H i ế u 13/09/2021 QUY TẮC THIẾT KẾ GIAO DIỆN N g u y ễ n C h í H i ế u 2 45 MATERIAL DESIGN (ANDROID) • Phong cách thiết kế Google giới thiệu vào năm 2014 • Giao diện phẳng, đơn giản • Sử dụng màu sắc làm bật giao diện, thường có màu (primary), màu phụ (accent) • Giữa view có nhiều khoảng trắng • Hiệu ứng chuyển động tự nhiên N g u y ễ n 46 C h í H i ế u 2 13/09/2021 UI & UX • Color • Khai báo tập tin res/values/color.xml #3F51B5 #303F9F #FF4081 N g u y ễ n C h í H i ế u 2 2021 47 N g u y ễ n C h í UI & UX H i ế u 48 13/09/2021 UI & UX • Icon N g u y ễ n C h í H i ế u 2 2 49 N g u y ễ n C h í H i ế u UI & UX • Typography • Hai font chữ chuẩn Android: • Roboto • Noto • Noto sử dụng để hiển thị ngôn ngữ mà Roboto không hỗ trợ N g u y ễ n 50 C h í H i ế u 13/09/2021 N g u y ễ n C h í H i ế u UI & UX N g u y ễ n C h í H i ế u 52 2021 51 UI & UX 2021 13/09/2021 N g u y ễ n C h í H i ế u UI & UX N g u y ễ n C h í H i ế u 54 2021 53 UI & UX 2021 13/09/2021 N g u y ễ n C h í H i ế u UI & UX N g u y ễ n C h í H i ế u 56 2021 5 55 UI & UX 2021 13/09/2021 N g u y ễ n C h í H i ế u UI & UX 2021 2 57 BÀI TẬP • Thiết kế giao diện số ứng dụng • Quản lý chi tiêu • Dự báo thời tiết • Chat: Zalo, Messger N g u y ễ n 58 C h í H i ế u 13/09/2021 TÀI LIỆU THAM KHẢO “Android Developers,” Google, [Online] Available: https://developer.android.com/ [Accessed 04 04 2019] Trương Thị Ngọc Phượng, “Lập trình Android”, Nhà xuất Thời đại, 2014 Bill Phillips et al., “Android Programming, The Big Nerd Ranch Guide, 2nd Edition”, Big Nerd Ranch Guides, 2015 N g u y ễ n 59 C h í H i ế u 2 ... TẮC THIẾT KẾ GIAO DIỆN N g u y ễ n C h í H i ế u 2 45 MATERIAL DESIGN (ANDROID) • Phong cách thiết kế Google giới thiệu vào năm 2014 • Giao diện phẳng, đơn giản • Sử dụng màu sắc làm bật giao diện, ... NỘI DUNG Bố cục giao diện Quy tắc thiết kế giao diện 2 2021 N g u y ễ n C h í H i ế u CÁC KHÁI NIỆM CƠ BẢN 13/09/2021 ĐƠN VỊ ĐO • inch (Inches), mm (Millimeters) • Kích thước hình thiết bị • pt... & UX 2021 2 57 BÀI TẬP • Thiết kế giao diện số ứng dụng • Quản lý chi tiêu • Dự báo thời tiết • Chat: Zalo, Messger N g u y ễ n 58 C h í H i ế u 13/09/2021 TÀI LIỆU THAM KHẢO ? ?Android Developers,”