Chapter04-User-interface_publish (1)

Machine Translated by Google
PHÁT TRIỂN ĐIỆN THOẠI DI ĐỘNG

GIAO DIỆN NGƯỜI DÙNG
NỘI DUNG
Giao diện người dùng đồ họa
Widget và bố cục
Vài ví dụ
GIAO DIỆN NGƯỜI DÙNG ĐỒ HỌA
(Mẫu điều khiển chế độ xem mô hình - MVC)

Model-View-Controller (MVC) là một mẫu thiết kế phần mềm quan trọng được
giới thiệu lần đầu tiên với hệ thống Xerox-Smalltalk80 với mục tiêu chính
là tách biệt (1) giao diện người dùng, (2) hoạt động kinh doanh và (3)
logic đầu vào.
Nhà phát triển Android thấy mẫu này như thế nào? Mô
hình. Bao gồm mã Java và các đối tượng API được sử dụng để thể hiện vấn
đề kinh doanh và quản lý hành vi cũng như dữ liệu của ứng dụng.
Xem. Tập hợp các màn hình mà người dùng nhìn thấy và tương tác.
Bộ điều khiển. Được triển khai thông qua HĐH Android, chịu trách nhiệm giải
thích thông tin đầu vào của người dùng và hệ thống. Đầu vào có thể đến từ nhiều
nguồn khác nhau như bi xoay, bàn phím, màn hình cảm ứng, chip GPS, cảm biến
tiệm cận, gia tốc kế, v.v. và thông báo cho Mô hình và/hoặc Chế độ xem (thường
thông qua lệnh gọi lại và trình nghe đã đăng ký) thay đổi cho phù hợp .
(Tạo giải pháp phù hợp với MVC)

Nhà phát triển Android nên biết
Đầu vào có thể được gửi đến ứng dụng từ nhiều thành phần vật lý/logic khác nhau. Việc phản ứng với những tín hiệu đó
thường được xử lý bằng các phương thức gọi lại. Thông thường có rất nhiều trong số đó, bạn muốn tìm hiểu cách chọn cái
phù hợp.
Việc chuyển sang các trạng thái trong vòng đời gắn liền với logic trong mô hình. Ví dụ: nếu buộc phải Tạm dừng, bạn có
thể muốn lưu dữ liệu chưa được cam kết.
Cơ chế thông báo được sử dụng để thông báo cho người dùng về các sự kiện quan trọng xảy ra bên ngoài ứng dụng hiện tại
(chẳng hạn như tin nhắn văn bản hoặc email đến, pin yếu, biến động của thị trường chứng khoán, v.v.) và từ đó chọn cách
tiếp tục.
Lượt xem không giới hạn về mặt thẩm mỹ và chức năng. Tuy nhiên những hạn chế về mặt vật lý như kích thước,
và khả năng tăng tốc phần cứng (hoặc thiếu) có thể ảnh hưởng đến cách quản lý các thành phần đồ họa.
(Mẫu MVC: khung nhìn - giao diện người dùng)

Giao diện đồ họa của Android thường được triển khai dưới dạng tệp XML (mặc dù chúng cũng có thể
được tạo động từ mã Java)
Giao diện người dùng Android về mặt khái niệm tương tự như một trang HTML thông thường
Theo cách tương tự như tương tác trên trang web, khi người dùng Android chạm vào màn hình, bộ điều khiển sẽ diễn
giải thông tin đầu vào và xác định phần cụ thể nào của màn hình cũng như các cử chỉ có liên quan.
Dựa trên thông tin này, nó cho mô hình biết về sự tương tác theo cách mà "trình nghe gọi lại" hoặc trạng thái
vòng đời thích hợp có thể được đưa vào hoạt động.
Không giống như ứng dụng web (làm mới các trang của nó sau khi có yêu cầu rõ ràng từ người dùng), dịch vụ nền
Android không đồng bộ có thể lặng lẽ thông báo cho bộ điều khiển về một số thay đổi trạng thái (chẳng hạn như đạt
đến tọa độ nhất định trên bản đồ) và đến lượt nó thay đổi trạng thái của chế độ xem có thể được kích hoạt; tất cả
những điều này mà không cần sự can thiệp của người dùng.
(Mẫu thiết kế giao diện người dùng Android)

Để thảo luận về Mẫu thiết kế giao diện người dùng Android mới nhất (2013), hãy xem video: https://www.youtube.com/
watch?v=Jl3-lzlzOJI
Bạn có thể lấy bộ sưu tập các video hướng dẫn hàng tuần do chính những người thuyết trình thực hiện từ trang này
(truy cập vào ngày 6 tháng 9 năm 2014)
https://www.youtube.com/results?search_query=android+design+in+action
(Lớp XEM)
Lớp View là thành phần cơ bản nhất của Android mà từ đó các giao diện người dùng có thể được tạo ra. Nó hoạt
động như một nơi chứa các phần tử có thể hiển thị.
Chế độ xem chiếm một vùng hình chữ nhật trên màn hình và chịu trách nhiệm vẽ và xử lý sự kiện.
Widget là các lớp con của View. Chúng được sử dụng để tạo các thành phần UI tương tác như nút, hộp kiểm, nhãn,
trường văn bản, v.v.
Bố cục là các vùng chứa có cấu trúc vô hình được sử dụng để chứa các Chế độ xem khác và bố cục lồng nhau.
(Sử dụng XML để thể hiện UI)
<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android” xmlns:tools=“http://schemas.android.com/tools”
android:layout_width=“match_parent” android:layout_height=“match_parent”
android:paddingBottom=“@dimen/activity_vertical_margin” android:paddingLeft=“@dimen/activity_horizontal_margin”
android:paddingRight=“@dimen/activity_horizontal_margin” android:paddingTop=“@dimen/activity_vertical_margin”
tools:context=“csu.matos.gui_demo.MainActivity” >
<EditText android:id=“@+id/editText1” android:layout_width=“wrap_content” android:layout_height=“wrap_content”
android:layout_alignParentTop=“true” android:layout_centerHorizontal=“true”
android:layout_marginTop=“36dp” android:text=“@string/edit_user_name”
android:ems=“12” >
<requestFocus/>
</EditText>
<Button android:id=“@+id/button1” android:layout_width=“wrap_content” android:layout_height=“wrap_content”
android:layout_below=“@+id/editText1” android:layout_centerHorizontal=“true”
android:layout_marginTop=“48dp” android:text=“@string/btn_go” />
</RelativeLayout>
(Lồng nhau bố cục XML)

Tệp dạng xem XML của Android bao gồm một thiết kế bố cục có sự sắp xếp theo cấp bậc của các phần tử chứa trong đó.
Các phần tử bên trong có thể là các tiện ích cơ bản hoặc bố cục lồng nhau do người dùng xác định chứa các nhóm xem
riêng của chúng.
Một Hoạt động sử dụng phương thức setContentView(R.layout.xmlfilename) để hiển thị chế độ xem trên màn hình của
thiết bị.
<Bố trí tuyến tính
xmlns:android=“http://schemas.android.com/apk/res/android” android:layout_width=
“match_parent” android:layout_height= “wrap_content” android:orientation=“horizontal” >
Widget và các bố cục lồng nhau khác
</LinearLayout>
(Đặt chế độ xem để hoạt động)

Xử lý các tiện ích và bố cục thường bao gồm các thao tác sau Đặt thuộc tính: Ví dụ:
khi làm việc với TextView, bạn đặt màu nền, văn bản, phông chữ,
căn chỉnh, kích thước, phần đệm, lề, v.v.
Thiết lập trình nghe: Ví dụ: một hình ảnh có thể được lập trình để phản hồi các sự kiện khác nhau như: nhấp
chuột, nhấn lâu, di chuột qua, v.v.
Đặt tiêu điểm: Để đặt tiêu điểm vào một chế độ xem cụ thể, bạn gọi phương thức .requestFocus() hoặc sử dụng thẻ XML
<requestFocus />
Đặt mức độ hiển thị: Bạn có thể ẩn hoặc hiển thị chế độ xem bằng cách sử dụng setVisibility(…)
Bố cục tuyến tính Bố cục tương đối Bố cục bảng Một

Đặt các khung nhìn bên trong của nó theo chiều ngang Một ViewGroup cho phép bạn định vị các phần tử ViewGroup đặt các phần tử bằng cách sử dụng cách sắp xếp
hoặc bố trí theo chiều dọc. tương đối với nhau. hàng và cột.
(Một mẫu WIDGETS Android phổ biến)
Chế độ xem văn bản tự động hoàn thành
Một phiên bản của tiện ích EditText cung cấp
các đề xuất tự động hoàn thành khi nhập
TimePicker-AnalogClock-DatePicker Điều khiển biểu
DatePicke là một tiện ích cho phép chọn mẫu Bao gồm nhiều tiện ích biểu mẫu khác nhau, như nút hình ảnh, Chế độ xem danh sách
tháng, ngày và năm trường văn bản, hộp kiểm và nút radio. Chế độ xem hiển thị các mục trong danh sách cuộn theo chiều
dọc. Các mục được lấy từ ListAdapter.
https://developer.android.com/guide/topics/ui/declaring-layout#CommonLayouts
(Chỉnh sửa GUI: phiên bản XML)

Android coi bố cục dựa trên XML là tài nguyên, do đó các tệp bố cục được lưu trữ trong thư
mục res/layout bên trong dự án Android của bạn.
Trình
khám phá ứng dụng
Thư mục tài
nguyên
Phiên bản XML
của một cửa sổ

(Chỉnh sửa GUI: phiên bản WYSIWYG)

Công cụ thiết kế màn hình cho phép bạn vận hành từng màn hình bằng trình soạn thảo WYSIWIG hoặc XML
GUI
Bảng màu
Thư mục Thuộc tính
tài nguyên của widget
WYSIWYG
màn hình
(Các công cụ dùng để tạo
Giao diện Android)
Các công cụ thay thế để tạo ứng dụng và GUI Android:
Android Studio. Dựa trên IDE IntelliJ IDEA. Chức năng tương đương với
Nhật với Plugin ADT.
thực http://developer.android.com/sdk/installing/studio.html
SDK Android. Bàn làm việc được sắp xếp hợp lý dựa trên Eclipse+ADT trong một
ĐẾN
cài đặt đơn giản hơn http://developer.android.com/sdk/ bưu kiện.
index.html
NBAndroid. Bàn làm việc dựa trên TRÊN NetBeans+ADT.

http://www.nbandroid.org/2014/07/android-plugin-for-gradle-011012.html
DroidDraw Thiết kế GUI rất đơn giản, chưa hoàn chỉnh, chưa được tích hợp vào
IDE Eclipse đã lỗi thời! http://www.droiddraw.org/
App Inventor (có tính giáo dục, rất hứa hẹn & đầy tham vọng, 'ẩn mình'
mã hóa…) http://appinventor.mit.edu/
BỐ CỤC
Bố cục GUI của Android là các vùng chứa có cấu trúc được xác định trước
và chính sách vị trí như tương đối, tuyến tính ngang, dạng lưới, v.v.
Bố cục có thể được lồng vào nhau, do đó, một ô, hàng hoặc cột của một ô nhất định
bố cục có thể là một bố cục khác.
TIỆN ÍCH VÀ BỐ CỤC (FrameLayout)

FrameLayout là loại bộ chứa GUI đơn giản nhất.
Nó hữu ích như một thùng chứa ngoài cùng chứa một cửa sổ.
Cho phép bạn xác định mức độ sử dụng của màn hình (chiều cao, chiều rộng).
Tất cả các phần tử con của nó được căn chỉnh ở góc trên cùng bên trái của màn hình
TIỆN ÍCH VÀ BỐ CỤC (LinearLayout)

LinearLayout hỗ trợ chiến lược lấp đầy trong đó các phần tử mới được xếp chồng lên nhau theo kiểu ngang
hoặc dọc.
Nếu bố cục có hướng dọc, các hàng mới sẽ được đặt chồng lên nhau.
Bố cục ngang sử dụng chính sách vị trí cột cạnh nhau.

chiều
TIỆN ÍCH VÀ BỐ CỤC
theo
dọc
(LinearLayout – thiết lập
thuộc tính)
Việc định cấu hình LinearLayout thường yêu cầu bạn

đặt các thuộc tính sau:
hướng (dọc, ngang) mô hình
điền (match_parent, quấn_contents )
trọng lượng, 1 , 2 , …N )
( 0 trọng lực (trên, dưới,
giữa, … ) phần đệm (dp – dev .

Nằm ngang pixel ) lề ( dp – dev . pixel độc lập )
Thuộc tính android :orientation có thể được đặt thành

ngang cho cột hoặc dọc cho hàng.
Sử dụng setOrientation() để thay đổi thời gian chạy.

(LinearLayout - Điền mô hình)

Các widget có “kích thước tự nhiên” dựa trên văn bản đi kèm của chúng (hiệu ứng dây cao su)
Đôi khi, bạn có thể muốn tiện ích của mình được phân bổ không gian cụ thể (chiều cao, chiều rộng) ngay cả khi không có văn
bản nào được cung cấp ban đầu (như trường hợp hộp văn bản trống được hiển thị bên dưới).
kích thước tự nhiên
không gian màn hình trống


125 dp
(LinearLayout - Điền mô hình) 320 dp
Tất cả các tiện ích bên trong LinearLayout bao gồm các thuộc tính 'width' và 'height':
android:layout_width
android:layout_height
Các giá trị được sử dụng để xác định chiều cao và chiều
rộng có thể là: Kích thước cụ thể chẳng hạn như 125dp (nhúng pixel độc
lập với thiết bị) quấn_content cho biết tiện ích chỉ nên lấp đầy không
320 x 480 dpi
gian tự nhiên của nó. match_parent (trước đây gọi là 'fill_parent') cho biết tiện ích muốn lớn bằng tiện ích gốc kèm theo.
Mã số:
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android” android:id=“@+id/myLinearLayout”
android:layout_width=“match_parent” android:layout_height=“match_parent” android: nền=“#ff0033cc” android:orientation=“vertical”
android:padding=“6dp”>
<TextView android:id=“@+id/labelUserName” android:layout_width=“match_parent” android:layout_height=“wrap_content” android: nền = “#ffff0066”
android:text=“ Tên người dùng” android:textColor=“#ff000000” android:textSize=“16sp” android:textStyle=“bold”/>
<EditText android:id=“@+id/ediName” android:layout_width=“match_parent” android:layout_height=“wrap_content” android:textSize=“18sp” />
<Button android:id=“@+id/btnGo” android:layout_width=“125dp” android:layout_height=“wrap_content” android:text=“Go” android:textStyle=“bold”/>
</LinearLayout>
(Cùng một phiên bản

XML khác nhau)
Kể từ khi giới thiệu Android 4 .x, những thay

Bố cục XML tương tự
được hiển thị trên

đổi trong SDK giúp bố cục hiển thị đồng đều
hơn trên cả 4 thiết bị (mục .x và mới hơn
bánh gừng
đích là cung cấp trải nghiệm Android liền
mạch, độc lập với nhà cung cấp, phần cứng và
nhà phát triển).
Bố cục XML tương tự

được hiển thị trên Kitkat
Thông số XML được sử dụng trong ví dụ trước x
trông khác khi hiển thị trên 4 thiết bị .và
cũ hơn (xem hình bên phải, vui lòng chú ý hiện
tượng chảy màu xảy ra ở phía trên nút GO,
thông tin thêm về vấn đề này trong Phụ lục)
(Bố trí tuyến tính - Trọng lượng)
Không gian thừa còn lại chưa được xác nhận trong bố cục có thể là
được gán cho bất kỳ thành phần bên trong nào của nó bằng cách thiết lập
Thuộc tính trọng lượng. Sử dụng 0 nếu chế độ xem không nên
kéo dài. Trọng lượng càng lớn thì càng lớn
Mất: 2 /(1+1+2) không gian dành cho tiện ích đó.
không gian màn hình Ví dụ: đặc tả XML cho cửa sổ này tương tự
đến ví dụ trước.
Các điều khiển TextView và Button có thêm
thuộc tính: android:layout_weight="1"
trong khi đó các Chỉnh sửa điều khiển có
văn bản android:layout_weight="2"
Hãy nhớ rằng, giá trị mặc định là 0

(Bố trí tuyến tính - Trọng lực)
Trọng lực được sử dụng để cho biết cách điều khiển sẽ căn chỉnh
trên màn hình.
Theo mặc định, các tiện ích được căn trái và căn trên cùng.
Bạn có thể sử dụng thuộc tính XML
android:layout_Gravity=“…” để thiết lập các cách sắp xếp khác
có thể có: trái, giữa, phải, trên, dưới, v.v.
Nút có quyền
bố cục_trọng lực
(LinearLayout - Phần đệm)

Thuộc tính đệm chỉ định lề trong của tiện ích (tính bằng đơn vị dp).
Lề trong là khoảng trống thừa giữa đường viền của “ô” của tiện ích và nội dung tiện ích thực tế.
Sử dụng
thuộc tính android:padding hoặc
gọi phương thức setPadding() khi chạy.
Không gian xung quanh 'màu xanh'

Chào thế giới xung quanh văn bản thể hiện
phần đệm của chế độ xem bên trong

(LinearLayout – Phần đệm và lề)

Phần đệm và Lề biểu thị khoảng cách bên trong và bên ngoài giữa một tiện ích và bối cảnh được bao gồm và
xung quanh nó (tương ứng).
Tiện ích-1
Lề trên
Phần đệm trên cùng
Tiện ích-2
Nội dung hiển thị của Widget-3
Đệm đáy
Lề dưới
(LinearLayout - Đặt lề trong có phần
đệm)
Ví dụ: Hộp EditText đã được thay đổi để bao

gồm 30dp phần đệm xung quanh
<Chỉnh sửaVăn bản
android:id=“@+id/ediName”
android:layout_width= “match_parent”
android:layout_height= “wrap_content”
android:textSize=“18sp”
android:padding=“30dp”/>
...
(LinearLayout - Đặt lề
Tăng không gian giữa các widget ngoài)
Các widget –theo mặc định– được hiển thị chặt chẽ
cạnh nhau.
Để tăng khoảng cách giữa chúng, hãy sử

dụng thuộc tính android:layout_margin
<Chỉnh sửaVăn bản
Sử dụng khoảng cách mặc định giữa các widget

android:id=“@+id/ediName”
android:layout_width=“match_parent”
android:layout_height=“wrap_content”
android:textSize=“18sp”
android:layout_margin=“6dp”>
</EditText>
...
TIỆN ÍCH VÀ BỐ CỤC (RelativeLayout)

Vị trí của một tiện ích trong một InteractiveLayout dựa trên mối quan hệ vị trí của nó với các tiện ích
khác trong vùng chứa cũng như vùng chứa chính.
MỘT Ví dụ:
A ở trên cùng của cha mẹ
C ở dưới A, ở bên phải
B C B ở dưới A, bên trái C
(RelativeLayout - Đề cập đến container)

Bên dưới có một mẫu các thuộc tính boolean XML định vị khác nhau (đúng/sai) rất hữu ích cho việc
sắp xếp một tiện ích dựa trên vị trí của vùng chứa chính của nó.
android:layout_alignParentTop
android:layout_alignParentBottom
android:layout_alignParentLeft
android:layout_alignParentRight
android:layout_centerInParent
android:layout_centerVertical
android:layout_centerHorizontal
(RelativeLayout - Tham khảo các widget khác)

android:layout_alignTop=“@+id/wid1” chiều rộng1 chiều rộng2
chiều rộng1 chiều rộng2

android:layout_alignBottom =“@+id/wid1”
chiều rộng1
android:layout_alignLeft=“@+id/wid1”
rộng2
chiều rộng1
android:layout_alignRight=“@+id/wid1” rộng2
(RelativeLayout - Tham
khảo các widget khác)
Ví dụ1: Hình ảnh hiển thị một màn hình được

thiết kế bằng WYSIWYG Editor. Chúng tôi cố gắng
sắp xếp nút được xác định là wid2. Quan sát vị
trí của nó được mô tả trực quan bằng các đường
(màu xanh lá cây) tham chiếu chế độ xem wid1 đã
được vẽ. Cả hai chế độ xem đều có cùng một đáy,
cùng một bên phải, nhưng Wig2 có độ cao 36dps
tương ứng với Wid1.
<Nút android:id=“@+id/wid2”
android:layout_width=“wrap_content”
android:layout_alignBottom=“@+id/wid1”
android:layout_alignRight=“@+id/wid1”
android:layout_marginBottom=“36dp”
android:text=“@string/wid2”/>
(RelativeLayout - Tham khảo các widget khác)

Khi sử dụng vị trí tương đối, bạn cần: Sử dụng số
nhận dạng (thuộc tính android:id) trên tất cả các thành phần mà bạn sẽ đề cập đến. Các
phần tử XML được đặt tên bằng cách sử dụng @+id/... Ví dụ: một EditText có thể được gọi: android:id=“@+id/
txtUserName” Chỉ phải đề cập đến các tiện ích đã được xác định. Ví dụ: một điều khiển mới được đặt bên dưới txtUserName
EditText có thể tham chiếu đến nó bằng cách sử dụng android:layout_below=“@+id/txtUserName”
<RelativeLayout <EditText android:id=“@+id/txtUserName” android:layout_width=“match_parent”
xmlns:android=“http://schemas.android.com/apk/res/android” android:layout_height=“wrap_content” android:layout_alignParentLeft=“true”
android:id=“@+id/myRelativeLayout” android:layout_width=“match_parent” android:layout_below=“@+id/lblUserName” android:padding=“ 20dp”/>
android:layout_height=“match_parent” android: nền=“#ff000099” > <Chế độ <Button android:id=“@+id/btnGo” android:layout_width=“wrap_content”
xem văn bản android:layout_height=“wrap_content”
android:id=“@+id/lblUserName” android:layout_width=“match_parent” android:layout_alignRight=“ @+id/txtUserName”
android:layout_height=“wrap_content” android:layout_alignParentLeft=“true” android:layout_below=“@+id/txtUserName”
android:layout_alignParentTop=“true” android:background=“#ffff0066” android:text= “Đi” android:textStyle=“bold”/> android:text=“
Tên người dùng” android:textColor=“#ff000000” android:textStyle=“bold”/> <Button android:id=“@+id/btnCancel” android:layout_width=“wrap_content”
android:layout_below=“@+id/txtUserName”
android:layout_toLeftOf=“@+id/btnGo”
android :text=“Hủy” android:textStyle=“đậm”/>
</RelativeLayout>
TIỆN ÍCH VÀ BỐ CỤC (TableLayout)

TableLayout của Android sử dụng mẫu lưới để định vị các tiện ích của bạn.
Giống như ma trận 2D, các ô trong lưới được xác định theo hàng và cột.
Các cột rất linh hoạt, chúng có thể co lại hoặc giãn ra để chứa nội dung của chúng.
Phần tử TableRow được sử dụng để xác định một hàng mới trong đó các widget có thể được phân bổ.
Số lượng cột trong TableRow được xác định bằng tổng số tiện ích cạnh nhau được đặt trên hàng.
(TableLayout - Thiết lập số cột)

Số cột cuối cùng trong bảng được xác định bởi Android
Ví dụ: nếu TableLayout của bạn có ba hàng một

hàng có hai tiện ích,
một hàng có ba tiện ích và
một hàng cuối cùng có bốn tiện ích,
Sẽ có ít nhất bốn cột trong bảng, với các chỉ số cột: 0, 1, 2, 3
0 1
0 1 2
0 1 2 3
(TableLayout – ví dụ)
Màn hình hiển thị nhiều món khác nhau trong thực đơn nhà hàng
McDonald's [*]. TableLayout có 4 TableRows, với 3 cột ở hàng đầu
tiên (nhãn) và 4 ô ở mỗi hàng trong số 3 hàng còn lại (mặt hàng,
Calo, Giá và nút Mua)
<TableLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:id=“@+id/myTableLayout” android:layout_width=“match_parent”
android:layout_height=“match_parent” android:orientation=“vertical” android:padding=“6dp”>
<Dòng bảng>
<TextView android:background=“#FF33B5E5” android:text=“Item”/>

<TextView android:layout_marginLeft=“5dp” android:background=“#FF33B5E5” android:text=“Calo”/>
<TextView android:layout_marginLeft=“5dp” android:background=“#FF33B5E5” android:text=“Giá $”/>
</TableRow>
<Xem android:layout_height=“1dp” android:background=“#FF33B5E5”/>
<Dòng bảng>
<TextView android:text=“Big Mac”/>

<TextView android:rabity=“center” android:text=“530”/>
<TextView android:Grity=“center” android:text=“3.99”/>
<Button android:id=“@+id/btnBuyBigMac” android:rabity=“center” android:text=“Buy”/> </
TableRow>
<Xem android:layout_height=“1dp” android:background=“#FF33B5E5”/>
 void onCreate(Bundle saveInstanceState)
<LinearLayout android:id=“@+id/myLinearLayout”
{ super.onCreate(savedInstanceState);
... >
setContentView(R.layout.activity_main);
<TextView android:text=“ Màn hình đăng nhập
edtUserName = (EditText) findViewById(R.id.edtUserName); btnGo
ACME” ... /> <EditText android:id=“@+id/ = (Nút) findViewById(R.id.btnGo);
...
edtUserName” ... /> <Button
}
android:id=“@+id/btnGo” ... /> </LinearLayout> ...
}
TIỆN ÍCH VÀ BỐ CỤC (ngữ cảnh Android)

Trên Android, Ngữ cảnh xác định không gian làm việc hợp lý mà ứng dụng có thể tải và truy cập tài nguyên trên đó. Khi một
tiện ích được tạo, nó sẽ được gắn vào một Ngữ cảnh cụ thể. Bằng cách liên kết với môi trường đó, nó có thể truy cập vào các thành viên
khác của hệ thống phân cấp mà nó được sắp xếp trên đó. Đối với một 'ứng dụng một hoạt
động' đơn giản -giả sử MainActivity- phương thức getApplicationContext() và tham chiếu
MainActivity.this trả về kết quả tương tự.
Một ứng dụng có thể có nhiều hoạt động. Do đó, đối với một ứng dụng nhiều hoạt động, chúng tôi có một ngữ cảnh ứng dụng và một ngữ cảnh
cho từng hoạt động của mình, mỗi sản phẩm tốt để tiếp cận những gì có sẵn trong bối cảnh đó.
Giả sử giao diện người dùng trong res/layout/activity_main.xml đã được tạo. Ứng dụng có thể gọi bố cục này bằng cách sử
dụng câu lệnh: setContentView(R.layout.activity_main);
Các tiện ích được xác định XML riêng lẻ, chẳng hạn như btnGo sau này được liên kết với ứng dụng Java bằng cách sử dụng câu
lệnh findViewByID(...) như trong: Button btnGo = (Button) findViewById(R.id.btnGo);
Trong đó R là lớp được tạo tự động để theo dõi các tài nguyên có sẵn cho ứng dụng. Cụ thể R.id... là tập hợp các tiện ích
được xác định trong bố cục XML (Sử dụng Package Explorer của Eclipse, xem nội dung /gen/package/R.java của bạn).
Đề xuất: Mã nhận dạng của tiện ích được sử dụng trong bố cục XML và mã Java có thể giống nhau. Thật thuận tiện khi thêm
tiền tố vào mỗi mã định danh để chỉ ra bản chất của nó. Một số tùy chọn là txt, btn, edt, rad, chk, v.v.
Hãy cố gắng nhất quán.
(Đính kèm người nghe vào widget)
Hãy xem xét màn hình bên phải. Để làm cho tiện
ích nút 'Đi' phản hồi nhanh khi người dùng nhấn
nút đó, chúng tôi có thể thêm trình xử lý cho sự
kiện nhấp chuột.
Nút btnGo = (Nút) findViewById(R.id.btnGo);
btnGo.setOnClickListener( OnClickListener mới() {
@Ghi đè
public void onClick(View v) { //
lấy tên người dùng và xác thực dựa trên một số cơ sở dữ
liệu // đưa thêm một số logic vào đây...
});
Lưu ý: Các 'người nghe' thông thường khác theo dõi các sự kiện như: thay đổi văn bản, nhấn, nhấn và giữ, chọn, lấy nét, v.v.
(Chế độ xem văn bản)
Trong Android nhãn hoặc hộp văn bản được gọi là TextView.
TextView thường được sử dụng để hiển thị chú thích hoặc tin nhắn văn bản.
TextView không thể chỉnh sửa được nên không cần dữ liệu đầu vào.
Văn bản được hiển thị có thể bao gồm ký tự định dạng \n (dòng mới)
Bạn cũng có thể sử dụng định dạng HTML bằng cách đặt văn bản thành:
Html.fromHtml(“<b>bold</b> string”)
TIỆN ÍCH VÀ BỐ CỤC (Chế độ xem văn bản)

Ví dụ:
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
android:orientation=“vertical” android:padding=“6dp”>
android:layout_height=“wrap_content” android:background=“@color/holo_blue_bright”
android:text=“(Lời bài hát) 99 chai bia” android:textAppearance=“?android:attr/textAppearanceLarge”/>
android:layout_height=“wrap_content” android:layout_marginTop=“6dp” android:background=“@color/gray_light” android:text=“\n\t99 chai bia
trên tường, 99 chai bia. Lấy một cái xuống và vượt qua nó xung quanh, 98
”
chai bia trên tường.\n\n\t98 chai bia trên tường, 98 chai bia. Lấy một cái xuống và chuyền vòng quanh, 97 chai bia trên tường. \n\n\t97 chai bia trên tường, 97 chai bia.Lấy một chai xuống và
chuyền vòng quanh, 96 chai bia trên tường...
android: textSize=“14sp”/> </LinearLayout>

TIỆN ÍCH VÀ BỐ CỤC (Nút)

Tiện ích Nút cho phép mô phỏng hành động nhấp vào GUI.
Nút là một lớp con của TextView. Do đó, việc định dạng bề mặt của nút cũng giống như cài đặt của TextView.
Bạn có thể thay đổi hành vi mặc định của một nút bằng cách cung cấp thông số kỹ thuật drawable.xml tùy chỉnh để áp
dụng làm nền. Trong các thông số kỹ thuật đó, bạn chỉ ra hình dạng, màu sắc, đường viền, góc, độ dốc và hành vi dựa
trên các trạng thái (được nhấn, lấy tiêu điểm). Thông tin thêm về vấn đề này trong phần phụ lục.
<Button android:id=“@+id/btnClickMeNow”
android:layout_width=“120dp” android:layout_height= “wrap_content”
android:layout_graveity=“center” android:layout_marginTop=“5dp”
android:rabity=“center” android: đệm=“5dp”
android:text=“Nhấp vào tôi ngay!” android:textColor=“#ffff0000”
android:textSize=“20sp” android:textStyle=“bold”/>
(Kết nối nhiều nút)

Ví dụ này cho thấy một cách khác để kết
lớp công khai MainActivity mở rộng Hoạt động triển khai OnClickListener {
TextView txtMsg;
nối nhiều nút. Quan sát cách hoạt động
Nút btnBegin, btnExit; chính triển khai giao diện

@Ghi đè OnClickListener.
khoảng trống công khai onCreate(Gói đã lưuInstanceState) { Phương thức onClick bắt buộc sẽ kiểm
super.onCreate(savedInstanceState);
tra nút nào trong số nhiều nút đã
setContentView(R.layout.activity_main );
gửi tín hiệu và tiếp tục từ đó.
txtMsg = (TextView) findViewById(R.id.txtMsg);
btnBegin = (Nút) findViewById(R.id.btnBegin);
btnExit = (Nút) findViewById(R.id.btnExit);
btnBegin.setOnClickListener(cái này);
btnExit.setOnClickListener(cái này);
}//onTạo
@Ghi đè
khoảng trống công khai trênClick(Xem v) {
if (v.getId() == btnBegin.getId()) txtMsg.setText(“1-Bạn đã nhấp vào nút 'BEGIN'”);
if (v.getId() == btnExit.getId()) txtMsg.setText(“2-Bạn đã nhấp vào nút 'EXIT'”);
}//trong một cái nhấp chuột
}
(ImageView và ImageButton)
ImageView và ImageButton cho phép nhúng hình ảnh vào ứng dụng của bạn (gif, jpg, png, v.v.).
Mỗi tiện ích có một thuộc tính android:src hoặc android:background (trong bố cục XML) để chỉ định hình ảnh nào
sẽ sử dụng.
Hình ảnh được lưu trữ ở dạng “res/drawable” (phiên bản độ phân giải trung bình, cao, x-high, xx-high và xxx-
high tương ứng của cùng một hình ảnh có thể được lưu trữ để sử dụng sau này với các loại màn hình khác nhau).
android:padding=“6dp” android:orientation=“vertical”>
<ImageButton android:id=“@+id/imgButton1”
android:layout_width=“wrap_content” android:layout_height=“wrap_content”
android:src=“@drawable/ic_launcher”/>
<ImageView android:id=“@+id/imgView1”
android:layout_width=“200dp” android:layout_height=“150dp”
android:scaleType=“fitXY” android:src=“@drawable/flowers1”/>
</LinearLayout>
Thông tin chi tiết có tại: https://material.io/design/iconography/#grid-keyline-shapes

(Nút - kết hợp hình ảnh & văn bản)

Một tiện ích Nút phổ biến có thể hiển thị văn bản và hình ảnh đơn giản như bên dưới
<Bố trí tuyến tính
. . .
<Nút
android:layout_width= “wrap_content”
android:layout_height= “wrap_content”
android:drawableLeft=“@drawable/ic_launcher”
android:rabity= “left|center_vertical”
android:padding=“15dp”
android:text=“Nhấp vào tôi”/>
</LinearLayout>
TIỆN ÍCH VÀ BỐ CỤC (Biểu tượng
được sử dụng như thế nào trong Android?)

Biểu tượng là những hình ảnh nhỏ được sử dụng để thể hiện bằng đồ họa ứng dụng của bạn và/hoặc các phần của ứng dụng đó. Họ có thể
xuất hiện ở các phần khác nhau của ứng dụng, bao gồm:
mdpi (761 byte)
Màn hình chính hdpi (1.15KB)
1x = 48 × 48 pixel
1,5x = 72 72 px
Cửa sổ trình khởi chạy. Đường cơ sở
Trình đơn tùy chọn

x-hdpi (1,52KB) xx-hdpi (2,47KB)
Thanh hành động 2x = 96 x 96 px 3x = 144 144 px
Thanh trạng thái
Giao diện nhiều tab.
Hộp thoại bật lên
Chế độ xem danh sách
GỢI Ý: Một số trang web cho phép bạn chuyển đổi miễn phí ảnh của mình thành tập tin hình ảnh dưới nhiều định dạng khác nhau.
Vàvậy hãy thử:
kích thước định dạng như BẰNG png, .jpg, .gif, vân vân. Vì ví dụ
http://www.prodraw.net/favicon/index.php
https://material.io/design/iconography/
(Hộp EditText)
Tiện ích EditText là phần mở rộng của TextView cho phép
người dùng nhập dữ liệu.
Ngoài văn bản thuần túy, tiện ích này có thể hiển thị văn
bản có thể chỉnh sửa được định dạng bằng các kiểu HTML như
in đậm, in nghiêng, gạch chân, v.v.). Việc này được thực
hiện bằng Html.fromHtml(html_text)
Di chuyển dữ liệu vào và ra khỏi hộp EditText thường được

thực hiện bằng Java thông qua các phương thức sau:
txtBox.setText(“someValue”) và txtBox.getText().toString()
TIỆN ÍCH VÀ BỐ CỤC (hộp EditText)

Hộp EditText có thể được đặt để chấp nhận các chuỗi đầu vào thỏa mãn
một mẫu cụ thể như: số (có và không có
số thập phân hoặc dấu hiệu), số điện thoại, ngày, giờ, uris, v.v.
Việc đặt hộp EditText để chấp nhận một lựa chọn dữ liệu cụ thể -
type, được thực hiện thông qua mệnh đề XML
android:inputType=“lựa chọn”, trong đó các lựa chọn bao gồm bất kỳ
các giá trị duy nhất được hiển thị trong hình. Bạn có thể kết hợp
các loại, ví dụ: textCapWords|textAutoCorreg Chấp nhận
văn bản viết hoa mọi từ, những từ không chính xác là
tự động thay đổi (ví dụ 'the' được chuyển đổi thành
'cái', v.v.)
MỘT SỐ VÍ DỤ (Màn hình đăng nhập)

Trong ví dụ này, chúng ta sẽ tạo một màn hình đăng nhập đơn giản có nhãn (TexView), hộp văn bản (EditText) và một
Cái nút. Khi hộp EditTex được chú ý, hệ thống sẽ cung cấp bàn phím ảo được tùy chỉnh cho
loại đầu vào được cung cấp cho hộp nhập (viết hoa và đánh vần). Nhấp vào nút sẽ hiển thị thông báo Toast
lặp lại tên người dùng được cung cấp.
Cài đặt
văn bản
Gợi ý Viết hoa
&chính tả
Vô hiệu hóa
cái nút
Tóm tắt
hộp tin nhắn

VÀI VÍ DỤ
(Bố cục màn hình đăng nhập)

<TextView android:id=“@+id/txtLogin”
android:layout_width=“match_parent” android:layout_height=“wrap_content”
android:background=“@android:color/holo_blue_light” android:text=“@string/ACME_Login_Screen”
android:textSize=“20sp” android:textStyle=“bold” />
<EditText android:id=“@+id/edtUserName”
android:layout_marginTop=“2dp” android:hint=“@string/Enter_your_First_and_Last_name”
android:inputType=“textCapWords |textAutoCorreg” android:textSize=“18sp”>
<requestFocus/>
</EditText>
<Button android:id=“@+id/btnLogin”
android:layout_width=“82dp” android:layout_height=“wrap_content”
android:layout_marginTop=“2dp” android:text=“@string/login”/>
</LinearLayout>
MỘT SỐ VÍ DỤ (Bố
cục màn hình đăng nhập - res/values/strings.xml)


<tài nguyên>
<string name=“app_name”>GuiDemo</string>
<string name=“action_settings”>Cài đặt</string>
<string name=“login”>đăng nhập</
string> <string name=“ACME_Login_Screen”> Màn hình đăng nhập
ACME </string> <string name=“Enter_your_First_and_Last_name”>Nhập họ và tên của bạn</
string> </resources>
VÀI VÍ DỤ
(Màn hình đăng nhập MainActivity)

lớp công khai MainActivity mở rộng ActionBarActivity
{ TextView txtLogin; EditText edtUserName; Nút btnĐăng
nhập; @Ghi
đè public void onCreate(Bundle saveInstanceState)
setContentView(R.layout.activity_main);
txtLogin = (TextView) findViewById(R.id.txtLogin);
edtUserName = (EditText) findViewById(R.id.edtUserName);
btnLogin = (Nút) findViewById(R.id.btnLogin);
btnLogin.setOnClickListener(new OnClickListener()
{ @Override
public void onClick(View v)
{ String userName = edtUserName.getText().toString();
if (userName.equals(“Maria Macarena”))
{ txtLogin.setText(“ OK, vui lòng
đợi…”); Toast.makeText(getApplicationContext(), “Chào mừng ”+ userName, Toast.LENGTH_SHORT).show();
btnLogin.setEnabled(false); }
“
else Toast.makeText(getApplicationContext(), tên người không phải là NGƯỜI DÙNG hợp lệ”, Toast.LENGTH_SHORT).show();
dùng
+ } });// onClick }// onCreate
…
TIỆN ÍCH VÀ BỐ CỤC (Hộp kiểm)

Hộp kiểm là một nút có hai trạng thái đặc biệt có thể được chọn
hoặc bỏ chọn.
Một màn hình có thể bao gồm bất kỳ số lượng Hộp kiểm bao gồm lẫn
nhau (độc lập) nào. Bất cứ lúc nào, có thể chọn nhiều Hộp kiểm
trong GUI.
Trong ví dụ “CaféApp” của chúng tôi, màn hình bên phải hiển thị
hai điều khiển CheckBox, chúng được sử dụng để chọn các tùy chọn
'Kem' và 'Đường'. Trong hình ảnh này, cả hai hộp đều được 'chọn'.
Khi người dùng nhấn nút 'Thanh toán', thông báo Toast sẽ xảy ra
sự cố lặp lại sự kết hợp các lựa chọn hiện tại được giữ bởi các
hộp kiểm.
VÀI VÍ DỤ
(CaféApp - bố cục)
android:padding=“6dp” android:orientation=“vertical”>
<TextView android:id=“@+id/labelCoffee”
android:background=“#ff993300” android:text=“@string/coffee_addons”
android:textColor=“ @android:màu/trắng” android:textStyle=“đậm” />
<CheckBox android:id=“@+id/chkCream”
android:text=“@string/cream” android:textStyle=“bold” />
<CheckBox android:id=“@+id/chkSugar”
android:text=“@string/sugar” android:textStyle=“bold” />
<Button android:id=“@+id/btnPay”
android:text=“@string/pay” android:textStyle=“bold” />
</LinearLayout>
VÀI VÍ DỤ
(CaféApp - res/giá trị/chuỗi)

<tài nguyên>
<string name=“app_name”>GuiDemo</string> <string
name=“action_settings”>Cài đặt</string> <string name=“click_me”>Nhấp
vào tôi</string> <string name=“sugar”>Sugar< /string>
<string name=“cream”>Kem</string> <string
name=“coffee_addons”>Có gì khác trong cà phê của
bạn?</string> <string name=“pay”>Thanh toán</string> </resources >

VÀI VÍ DỤ
(Hoạt động chính của CaféApp)

lớp công khai MainActivity mở rộng Hoạt
động { CheckBox chkCream,
chkSugar; Nút
btnPay;
@Ghi đè public void onCreate(Bundle
saveInstanceState)
setContentView(R.layout.activity_main); //
liên kết các điều khiển XMl bằng mã Java chkCream =
(CheckBox)findViewById(R.id.chkCream); chkSugar =
(CheckBox)findViewById(R.id.chkSugar);
btnPay = (Nút) findViewById(R.id.btnPay); //
LISTENER: nối dây nút-sự kiện-&-code
btnPay.setOnClickListener(new
OnClickListener()
“
{ @Override public void & kem ”;
“
onClick(View v) { String msg = & Đường";
“Coffee ”; if (chkCream.isChecked()) msg += if (chkSugar.isChecked()) msg +=
Toast.makeText(getApplicationContext(), msg, Toast.LENGTH_SHORT).show(); //đi ngay và tính chi phí... }//onClick }); }// onTạo
…
TIỆN ÍCH VÀ BỐ CỤC (RadioButton)

Nút radio (như CheckBox) là nút hai trạng thái có thể được chọn hoặc không được
chọn.
Các nút radio có liên quan về mặt logic thường được đặt cùng nhau trong một thùng
chứa RadioGroup. Vùng chứa buộc các nút radio kèm theo hoạt động như các bộ chọn
loại trừ lẫn nhau. Nghĩa là, việc chọn một nút radio sẽ bỏ chọn tất cả các nút
khác.
Các thuộc tính về mặt phông chữ, kiểu, màu sắc, v.v. được quản lý theo cách tương
tự như cài đặt TextView.
Bạn có thể gọi phương thức isChecked() để xem liệu một RadioButton cụ thể có được
chọn hay thay đổi trạng thái của nó hay không bằng cách gọi hàm chuyển đổi().
VÀI VÍ DỤ
Ví dụ
Chúng tôi mở rộng ví dụ
về CaféApp trước đó bằng
cách thêm điều khiển
Nhóm phát thanh
RadioGroup cho phép người
dùng chọn một loại cà
phê từ ba tùy chọn có sẵn.
Tổng hợp lựa chọn

VÀI VÍ DỤ
<TextView android:id=“@+id/textView1”
android:layout_width= “match_parent” android:layout_height= “wrap_content”
android:background=“#ff993300” android:text=“@string/kind_of_coffee”
android:textColor=“ #ffffff” android:textStyle=“đậm”/>
<RadioGroup android:id=“@+id/radioGroupCoffeeType”
android:layout_width= “match_parent” android:layout_height= “wrap_content”>
<RadioButton android:id=“@+id/radDecaf”
android:layout_width= “wrap_content” android:layout_height= “wrap_content”
android:text=“@string/decaf”/>
<RadioButton android:id=“@+id/radExpresso”
android:text=“@string/expresso”/>
<RadioButton android:id=“@+id/radColombian”
android:checked=“true” android:text=“@string/Colombian”/>
</RadioGroup>
VÀI VÍ DỤ
(CaféApp - MainActivity)
lớp công khai MainActivity mở rộng Hoạt động {
CheckBox chkCream, chkSugar; Nút btnPay;
RadioGroup radCoffeeType; RadioButton radDecaf, radExpresso, radColombian;

@Ghi đè
khoảng trống công khai onCreate(Gói đã lưuInstanceState) { btnPay.setOnClickListener( OnClickListener mới() {

super.onCreate(savedInstanceState); @Ghi đè
setContentView(R.layout.main); khoảng trống công khai trênClick(Xem v) {
chkCream = (CheckBox) findViewById(R.id.chkCream); Thông điệp chuỗi = “Cà phê ”;

“
chkSugar = (CheckBox) findViewById(R.id.chkSugar); tin nhắn if (chkCream.isChecked()) += & kem ”;
“
btnPay = (Nút) findViewById(R.id.btnPay); if (chkSugar.isChecked()) tin nhắn += & Đường";
radCoffeeType = (RadioGroup) findViewById(R.id.radioGroupCoffeeType); // lấy số ID nút radio đã chọn
radDecaf = (RadioButton) findViewById(R.id.radDecaf); int radioId = radCoffeeType.getCheckedRadioButtonId();
radExpresso = (RadioButton) findViewById(R.id.radExpresso); // so sánh Id của đã chọn với ID RadioButtons riêng lẻ
radColombian = (RadioButton) findViewById(R.id.radColombian); if (radColombian.getId() == radioId) msg = “Colombian ” + msg;
// tương tự bạn có thể sử dụng .isChecked() trên mỗi RadioButton
if (radExpresso.isChecked()) msg = “Expresso ” + msg;
// tương tự bạn có thể sử dụng .isChecked() trên mỗi RadioButton
if (radDecaf.isChecked()) msg = “Decaf ” + msg;
Toast.makeText(getApplicationContext(), msg, 1).show();
// đi ngay và tính chi phí...

}// trong một cái nhấp chuột
});
}// onTạo
}// lớp học

TIỆN ÍCH VÀ BỐ CỤC (Khác)

XML Kiểm soát chuỗi tiêu điểm:
android: khả năng khả năng hiển thị được đặt đúng/sai
hiển thị android: màu nền, hình ảnh, có thể vẽ
<requestFocus/> phản ứng với sự tương tác của người dùng
Các phương thức Java:
myButton.requestFocus()
myTextBox.isFocused()
myWidget.setEnabled()
myWidget.isEnabled()
(Sử dụng tài nguyên @string)

Một cách lập trình tốt trong Android là KHÔNG nhập trực tiếp các chuỗi ký tự dưới dạng giá trị tức thời cho thuộc tính
bên trong tệp xml.
Ví dụ: nếu bạn đang xác định TextView để hiển thị vị trí của trụ sở chính công ty, thì không nên sử dụng mệnh
đề như android:text=“Cleveland” (quan sát nó tạo ra chuỗi Cảnh báo [I18N] Mã hóa cứng
“Cleveland”, nên sử dụng tài nguyên @string )
Thay vào đó bạn nên áp dụng quy trình hai bước, trong đó
1. Bạn viết chuỗi ký tự –say trụ sở – trong res/values/string.xml. Nhập <string name=“trụ sở chính”>Cleveland</string>
2. Bất cứ khi nào cần chuỗi, hãy cung cấp tham chiếu đến chuỗi bằng ký hiệu @string/headquarter.
Ví dụ: trong ví dụ của chúng tôi, bạn nên nhập android:text=“@string/headquarter”
TẠI SAO?
Nếu chuỗi được sử dụng ở nhiều nơi và giá trị thực của nó thay đổi, chúng tôi chỉ cập nhật mục nhập tệp tài nguyên một
lần. Nó cũng cung cấp một số hỗ trợ cho việc quốc tế hóa - dễ dàng thay đổi chuỗi tài nguyên từ ngôn ngữ này sang ngôn
ngữ khác.
(Studio tài sản Android)

Liên kết: http://romannurik.github.io/AndroidAssetStudio/ [Đã truy cập vào ngày 14/9/2014]
Công cụ này cung cấp một số tùy chọn để tạo các biểu tượng chất lượng cao và các thành phần hiển thị khác thường thấy
trong ứng dụng Android.
Trình tạo biểu tượng Máy phát điện khác Công cụ cộng đồng
Biểu tượng trình khởi chạy Trình tạo khung thiết bị Gen Trình tạo kiểu thanh hành động Android
Biểu tượng thanh và tab hành động chín bản vá đơn giản. Trình tạo màu Holo của Android
Biểu tượng thông báo
Chỉ báo ngăn điều hướng
Biểu tượng chung

(Đo các yếu tố đồ họa)

H. Dpi là gì (còn được gọi là dp và ppi)?: Là viết tắt của số chấm trên mỗi inch. Nó gợi ý thước đo màn hình
chất lượng. Bạn có thể tính toán nó bằng công thức sau:
= ℎ 2 + ℎ ℎ 2/ ℎ
Ví dụ:
G1 (thiết bị cơ sở 320 480) 155,92 dpi (3,7 inch theo đường chéo)
Nexus (480 800) 252,15 dpi
HTC One (1080 1920) 468 dpi (4,7 in)
Samsung S4 (1080 1920) 441 dpi (5,5 in)
Câu hỏi: Sự khác biệt giữa các đơn vị dp, dim và sp trong Android là gì?
dp: Điểm ảnh không phụ thuộc vào mật độ – là đơn vị trừu tượng dựa trên mật độ vật lý của màn hình. Các đơn vị này là
so với màn hình 160 dpi, do đó, một dp là một pixel trên màn hình 160 dpi. Sử dụng nó để đo bất cứ thứ gì ngoại trừ phông chữ.
sp: Pixel không phụ thuộc vào tỷ lệ – tương tự như đơn vị dp mật độ tương đối nhưng được sử dụng cho tùy chọn kích thước phông chữ.

Minh họa cách nền tảng Android ánh xạ mật độ và kích thước màn hình thực tế với cấu hình kích thước và mật
độ tổng quát. Một bộ sáu mật độ tổng quát: ldpi
~120dpi (thấp)
Một bộ bốn kích thước màn hình tổng
mdpi ~160dpi (trung
quát Màn hình lớn tối thiểu 960dp Màn
bình) hdpi ~240dpi
hình lớn 720dp tối thiểu 640dp Màn
(cao) xhdpi ~320dpi (cực
hình bình thường 480dp tối thiểu 470dp
cao) xxhdpi ~480dpi (cực cao)
Màn hình nhỏ 320dp tối thiểu 426dp 320dp
Xxxhdpi ~640dpi (cực cực cao)
https://developer.android.com/guide/practices/screens_support.html

H. Hãy cho tôi một ví dụ về cách sử dụng đơn vị dp.
Giả sử bạn thiết kế giao diện cho điện thoại G1 có 320x480 pixel (Mật độ trừu tượng là 160 – Xem
Mục nhập AVD, pixel thực tế được xác định là: [2*160] [3*160] )
Giả sử bạn muốn đặt nút 120dp ở giữa màn hình. Ở chế độ dọc, bạn có thể phân bổ 320 pixel ngang dưới dạng [ 100
+ 120 + 100]. Ở chế độ Phong cảnh, bạn có thể phân bổ 480 pixel thành [ 180 + 120 + 180].
XML sẽ là
<Nút
android:id=“@+id/button1”
180 120 180
android:layout_width=“120dp”
android:layout_rabity=“center”
android:text=“@+id/go_caption”/> 480
Nếu ứng dụng được triển khai trên các thiết bị có độ phân giải cao hơn, nút vẫn được ánh xạ tới giữa màn hình.
(Công cụ xem thứ bậc)

Phần Cây thành phần cho phép khám phá giao diện người dùng được hiển thị
(Tùy chỉnh widget)

Người dùng có thể điều chỉnh sự xuất hiện của một widget.
Ví dụ: tiện ích nút có thể được sửa đổi bằng cách thay đổi hình
dạng, đường viền, màu sắc, lề, v.v.
Các hình dạng cơ bản bao gồm: hình chữ nhật, hình bầu dục, đường thẳng và hình tròn.
Ngoài những thay đổi trực quan, phản ứng của tiện ích đối với
tương tác của người dùng có thể được điều chỉnh cho các sự kiện
như: Đã tập trung, Đã nhấp, v.v.
Hình này hiển thị các tiện ích EditText và Button như thường được
hiển thị bởi một thiết bị chạy SDK4.3 (Ice Cream). Hai tiện ích
dưới cùng (Chế độ xem văn bản và Nút) lần lượt là phiên bản tùy
chỉnh của hai điều khiển đó.

Hình ảnh hiển thị phản hồi trực quan được cung cấp cho người dùng khi nhấp vào tiện ích Nút tiêu chuẩn và
tiện ích Nút tùy chỉnh. Giả sử thiết bị chạy theo SDK4.3
Hành vi
tiêu chuẩn –
các nút chuyển
sang màu xanh
khi được nhấn.
Hành vi tùy chỉnh – các nút chuyển sang màu xám đậm với
đường viền màu cam khi được nhấn.


Quan sát phản hồi nhất thời của các hộp EditText tiêu chuẩn và tùy chỉnh khi người dùng chạm vào các tiện
ích kích hoạt sự kiện 'Tập trung'.
Khi tập trung vào
hộp tiêu chuẩn sẽ
hiển thị màu xanh lam
điểm mấu chốt
Hộp tùy
chỉnh được tập
trung hiển thị khung

xung quanh màu cam

Khi người dùng chạm vào hộp EditText tùy chỉnh, một dải màu sẽ được áp dụng cho hộp để hiển thị hình ảnh
phản hồi trấn an người dùng về lựa chọn của mình.
3. Tiện ích EditText
1. Tùy chỉnh không tập trung tùy chỉnh tập trung hiển thị
Tiện ích EditText, đường viền đường viền màu cam

màu xám 2. Tiện ích EditText đã
nhấp vào hiển thị dải màu chuyển sắc
tuyến tính màu vàng và đường viền màu cam


Tổ chức ứng dụng
Định nghĩa các mẫu tùy chỉnh cho

Tiện ích Nút và EditText
Bố cục tham chiếu các vật dụng tiêu chuẩn

và tùy chỉnh

Bố cục hoạt động
android:layout_width=“match_parent” android:layout_height =“match_parent”
<EditText android:id=“@+id/editText1”
android:layout_marginBottom= “5dp” android:ems=“10”
android:inputType=“text” android:text=“@string/standard_edittext”>
<requestFocus/>
</EditText>
<Button android:id=“@+id/button1”
android :layout_width=“120dp” android:layout_height=“wrap_content”
android:layout_marginBottom=“15dp” android:text=“@string/standard_button”/>
<EditText android:id=“@+id/editText2”
android:layout_width=“ match_parent” android:layout_height=“wrap_content”
android:layout_marginBottom=“5dp” android:background=“@drawable/custom_edittext”
android:ems=“10” android:inputType=“text” android:text=“@string/custom_edittext” /
> <Button android:id=“@+id/button2”
android:background=“@drawable/custom_button” android:text=“@string/custom_button”/ > </
LinearLayout>

Tài nguyên: res/drawable/custom_button.xml
<selector xmlns:android=“http://schemas.android.com/apk/res/android”>
<item android:state_press=“true” >
<shape android:shape=“hình chữ
nhật”> <góc android:radius=“10dp”/
> <solid android:color=“#ffc0c0c0”/
> <đệm android:left=“10dp” android:top=“10dp” android:right=“10dp” android:bottom=“10dp”/> <đột
quỵ android:width=“1dp” android:color=“#ffFF6600”/> </
shape> </
item>
<item android:state_press=“ false”>
<shape android:shape=“hình chữ
nhật”> <corners
android:radius=“10dp”/> <solid
android:color=“#ffE0E6FF”/> <đệm android:left=“10dp” android:top=“ 10dp” android:right=“10dp”
android:bottom=“10dp”/> <đột quỵ android:width=“2dp”
android:color=“#ff777B88”/> </shape> </item> </selector>


Tài nguyên: res/drawable/custom_edittext.xml
<selector xmlns:android=“http://schemas.android.com/apk/res/android”> <item
android:state_press=“true” > <shape
android:shape=“hình chữ nhật”>
<gradient android:angle=“90” android:centerColor=“#FFffffff” android:endColor=“#FFffcc00” android:startColor=“#FFffffff” android:type=“tuyến tính ”/>
<đột quỵ android:width=“2dp” android:color=“#FFff6600”/>
<corners android:radius=“0dp”/>
<padding android:left=“10dp” android:top=“6dp” android :right=“10dp” android:bottom=“6dp”/> </shape>
</item>
<item
android:state_focus=“true”> <shape>
<solid
android:color=“#FFffffff”/><đột quỵ android:width=“2dp” android:color=“#FFff6600”/> <corners
android:radius=“0dp”/><padding android:left=“10dp” android:top=“6dp” android:right=“10dp ” android:bottom=“6dp”/> </shape> </item> <item>
 <shape> <Stroke android:width=“1dp” android:color=“#ff777777”/><solid
android:color=“#ffffffff ”/> <corners android:radius=“0dp”/><padding android:left=“10dp” android:top=“6dp” android:right=“10dp”
android:bottom=“6dp” /> </shape> </item> </selector>

(Sửa màu nền bị chảy máu)

Bạn có thể thay đổi màu của bố cục bằng cách thêm vào bố cục XML mệnh đề android:background=“#44ff0000” (màu được đặt thành màu đỏ bán
trong suốt).
Vấn đề là màu sắc của bố cục dường như được đặt lên trên các điều khiển khác khiến chúng trông 'bị nhòe' như trong hình bên dưới (phải).
Mặc dù tẻ nhạt, nhưng có một giải pháp là xác nhận lại diện mạo của các tiện ích bị bôi bẩn bằng cách đặt rõ ràng một giá trị trong
thuộc tính XML android:background tương ứng của chúng. Hình bên trái bao gồm các phép gán rõ ràng cho nền của các tiện ích.
2
3
1. android:background=“@android:drawable/edit_text” 2.
android:background=“@android:drawable/editbox_dropdown_light_frame” 3.
android:background=“@android:drawable/btn_default”
(Chủ đề màu sắc hữu ích)

Màn hình hiển thị màu sắc có trong Holo-Theme của Android.
Bộ màu Holo-Theme mang đến một bảng màu hài hòa

màu sắc được đề xuất cho tất cả các ứng dụng của bạn. Những lợi ích:
thiết kế đồng nhất, trải nghiệm người dùng đồng nhất, vẻ đẹp (?)…
Bạn có thể muốn thêm các mục sau vào

tệp res/values/colors.xml. Ví dụ về cách sử dụng:
android:background=“@color/holo_blue_light”

<tài nguyên>
<color name=“holo_blue_light”>#ff33b5e5</color>
<color name=“holo_blue_dark”>#ff0099cc</color>
<color name=“holo_blue_bright”>#ff00ddff</color>
<color name=“gray_light”>#fff0f0f0</color>
<color name=“gray_dark”>#ff313131</color>
<color name=“gray_bright”>#ffd0d0d0</color>
</tài nguyên>
https://stackoverflow.com/questions/3769762/web-colors-in-an-android-color-xml-resource-file

Chapter04-User-interface_publish (1)

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter04-User-interface_publish (1)

Uploaded by

Copyright:

Available Formats

Machine Translated by Google

PHÁT TRIỂN ĐIỆN THOẠI DI ĐỘNG

GIAO DIỆN NGƯỜI DÙNG ĐỒ HỌA

(Mẫu điều khiển chế độ xem mô hình - MVC)

GIAO DIỆN NGƯỜI DÙNG ĐỒ HỌA

(Tạo giải pháp phù hợp với MVC)

GIAO DIỆN NGƯỜI DÙNG ĐỒ HỌA

(Mẫu MVC: khung nhìn - giao diện người dùng)

GIAO DIỆN NGƯỜI DÙNG ĐỒ HỌA

(Mẫu thiết kế giao diện người dùng Android)

GIAO DIỆN NGƯỜI DÙNG ĐỒ HỌA

GIAO DIỆN NGƯỜI DÙNG ĐỒ HỌA

(Sử dụng XML để thể hiện UI)

<RelativeLayout xmlns:android=“http://schemas.android.com/apk/res/android” xmlns:tools=“http://schemas.android.com/tools”

<EditText android:id=“@+id/editText1” android:layout_width=“wrap_content” android:layout_height=“wrap_content”

<Button android:id=“@+id/button1” android:layout_width=“wrap_content” android:layout_height=“wrap_content”

android:layout_marginTop=“48dp” android:text=“@string/btn_go” />

GIAO DIỆN NGƯỜI DÙNG ĐỒ HỌA

(Lồng nhau bố cục XML)

<Bố trí tuyến tính

“match_parent” android:layout_height= “wrap_content” android:orientation=“horizontal” >

Widget và các bố cục lồng nhau khác

GIAO DIỆN NGƯỜI DÙNG ĐỒ HỌA

(Đặt chế độ xem để hoạt động)

Bố cục tuyến tính Bố cục tương đối Bố cục bảng Một

GIAO DIỆN NGƯỜI DÙNG ĐỒ HỌA

(Một mẫu WIDGETS Android phổ biến)

Chế độ xem văn bản tự động hoàn thành

Một phiên bản của tiện ích EditText cung cấp

các đề xuất tự động hoàn thành khi nhập

TimePicker-AnalogClock-DatePicker Điều khiển biểu

dọc. Các mục được lấy từ ListAdapter.

GIAO DIỆN NGƯỜI DÙNG ĐỒ HỌA

(Chỉnh sửa GUI: phiên bản XML)

khám phá ứng dụng

Thư mục tài

Phiên bản XML

của một cửa sổ

GIAO DIỆN NGƯỜI DÙNG ĐỒ HỌA

(Chỉnh sửa GUI: phiên bản WYSIWYG)

Thư mục Thuộc tính

tài nguyên của widget

GIAO DIỆN NGƯỜI DÙNG ĐỒ HỌA

(Các công cụ dùng để tạo

Giao diện Android)

Các công cụ thay thế để tạo ứng dụng và GUI Android:

NBAndroid. Bàn làm việc dựa trên TRÊN NetBeans+ADT.

TIỆN ÍCH VÀ BỐ CỤC (FrameLayout)

TIỆN ÍCH VÀ BỐ CỤC (LinearLayout)

Bố cục ngang sử dụng chính sách vị trí cột cạnh nhau.

Việc định cấu hình LinearLayout thường yêu cầu bạn

điền (match_parent, quấn_contents )

( 0 trọng lực (trên, dưới,

giữa, … ) phần đệm (dp – dev .

Thuộc tính android :orientation có thể được đặt thành

Sử dụng setOrientation() để thay đổi thời gian chạy.

TIỆN ÍCH VÀ BỐ CỤC

(LinearLayout - Điền mô hình)

không gian màn hình trống

TIỆN ÍCH VÀ BỐ CỤC

(LinearLayout - Điền mô hình) 320 dp

TIỆN ÍCH VÀ BỐ CỤC

(Cùng một phiên bản

Kể từ khi giới thiệu Android 4 .x, những thay