Lập trình android và ứng dụng trong các hệ thống iots (android trong điều khiển, IoTs,WearOS)

THS NGUYỄN VĂN HIỆPTS TRẦN ĐỨC THIỆN TS TRẦN MẠNH SƠN LẬP TRÌNH ANDROID VÀ ỨNG DỤNG TRONG CÁC HỆ THỐNG IOTS ANDROID TRONG ĐIỀU KHIỂN, IOTS, WEAROS hát hành nội tộc NHÀ XUẤT BẢN ĐẠI HỌC

Trang 1

LẬP TRÌNH ANDROID

VÀ ỨNG DỤNG TRONG CÁC HỆ THỐNG IOTS (ANDROID TRONG ĐIỀU KHIỂN, IOTS, WEAROS)

60

NGUYỄN VĂN HIỆP

TRẦN ĐỨC THIỆN

TRẦN MẠNH SƠN

Trang 2

THS NGUYỄN VĂN HIỆP

TS TRẦN ĐỨC THIỆN

TS TRẦN MẠNH SƠN

LẬP TRÌNH ANDROID

VÀ ỨNG DỤNG TRONG CÁC HỆ THỐNG IOTS (ANDROID TRONG ĐIỀU KHIỂN, IOTS, WEAROS)

hát hành nội tộc

NHÀ XUẤT BẢN ĐẠI HỌC QUỐC GIA

THÀNH PHỐ HỒ CHÍ MINH - NĂM 2022

Trang 4

LỜI GIỚI THIỆU

Những năm 2000, điện thoại thông minh (smartphone) là một khái niệm rất xa xỉ Người giàu thì cũng chỉ có thể “sang chảnh” với các điện thoại “đập đá” đúng nghĩa Nhưng chúng ta đã thật sự chứng kiến sự thay đổi như vũ bão của thế giới smartphone Rất nhiều hãng điện thoại mới nổi, thành công mang đến cho người dùng sự tiếp cận dễ dàng hơn bao giờ hết Điện thoại thông minh giờ đã thông minh hơn, với sự tích hợp của AI (trí tuệ nhân tạo), người dùng như có thêm trợ lý đắc lực hiểu mình hơn nữa Smartphone ngày càng đa dạng, trải dài trên các phân khúc từ cao cấp đến bình dân Giới trẻ hầu như ai cũng có smartphone, mọi thứ bắt đầu liên kết hầu hết với nhau qua internet Thế giới trở nên phẳng hơn, mọi tương tác liên quan đến đời sống tinh thần, vật chất được số hóa và chia sẻ.Với sự thống trị hiện tại của Android trong thế giới smartphone và trong bối cảnh cuộc cách mạng công nghiệp 4.0 đang tiến đến gõ cửa từng nhà, quyển sách này mong muốn mang đến cho người đọc những nền tảng

cơ bản, cốt lõi của việc lập trình di động ứng dụng điều khiển, giám sát thiết bị

Quyển sách này được viết dựa trên hai quyển “Lập trình Android

cơ bản” và “Lập trình Android trong ứng dụng điều khiển” của cùng tác giả, do NXB Đại học Quốc gia Thành phố Hồ Chí Minh xuất bản trước đây Chính vì vậy, một số khái niệm cơ bản đã được bỏ bớt, hướng đến phần ứng dụng thực tế, các hệ thống giám sát điều khiển thông qua thiết bị Android được cải tiến, chỉnh sửa, bổ sung

Tác giả hi vọng sau khi đọc quyển sách này, người đọc có thể tự xây dựng một số hệ thống điều khiển thông minh cơ bản phù hợp với nhu cầu

cụ thể Hoặc đơn giản là trang bị những kiến thức để việc trải nghiệm các thiết bị smarthome (nhà thông minh) dễ dàng và thuận tiện hơn!

Chân thành cảm ơn sự ủng hộ của quý độc giả, mọi góp ý về nội dung vui lòng gởi về email: hiepspkt@hmcute.edu.vn

Thân ái!

Trang 6

MỤC LỤC

Lời giới thiệu 3

Chương 1: Giới thiệu về Android .13

1.1 Định nghĩa về Android .13

1.2 Một số nền tảng Android .15

Chương 2: Thiết kế Layout trong Android Studio .17

2.1 Đặt vấn đề .17

2.2 Các loại Layout tiêu chuẩn trong Android 18

2.3 Relative Layout 19

2.4 Linear Layout .23

2.5 Table Layout .31

2.6 Grid Layout .33

2.7 Frame Layout .34

2.8 Constraint Layout .36

Chương 3: Các điều khiển giao diện người dùng .42

3.2 Các đối tượng UI cơ bản và thuộc tính quan trọng 43

3.2.1 Các thuộc tính quan trọng của một UI 43

3.2.2 Các đối tượng UI cơ bản 47

3.3 Bài tập về UI Control 47

Chương 4: Xây dựng ứng dụng IoTs sử dụng Firebase 57

4.2 Định nghĩa Firebase 57

4.2.1 Content Delivery Network 60

4.2.2 Dữ liệu thời gian thực - Firebase Realtime Database .60

4.2.3 Cách thức hoạt động của cơ sở dữ liệu thời gian thực 61

4.3 Xây dựng một dự án đơn giản sử dụng Google Firebase 63

4.3.1 Bài toán 1 63

4.3.2 Bài toán 2 74

Chương 5: Điều khiển thiết bị qua tin nhắn SMS 89

5.1 Đặt vấn đề 89

5.2 Phần mềm trên điện thoại Android 90

Trang 7

5.2.1 Xây dựng giao diện bằng phần mềm SMS_Control 91

5.2.2 Chương trình trên hoạt động như thế nào 97

5.3 Bộ điều khiển 98

5.4 Kết nối phần cứng và chương trình Arduino 100

Chương 6: Sử dụng Google Maps trong ứng dụng giám sát, định vị .109

6.1 GPS là gì 109

6.1.1 Cách thức hoạt động của vệ tinh .109

6.1.2 Cách xác định vị trí theo kinh độ và vĩ độ 110

6.2 Google Maps 111

6.2.1 Xây dựng ứng dụng đơn giản giám sát thiết bị dùng Google Maps 112

6.2.2 Viết chương trình cho ứng dụng xác định vị trí bằng Google Maps 113

6.3 Viết chương trình cho thiết bị nhận tin nhắn yêu cầu và gửi lại vị trí 134

6.3.1 Thiết kế giao diện chính 134

6.3.2 Yêu cầu thiết bị cấp quyền cho ứng dụng 134

6.3.3 Phần code chính trong MainsActivity.java 134

6.4 Mô phỏng .141

Chương 7: Điều khiển và giám sát thiết bị qua Bluetooth .144

7.2 Phần mềm trên điện thoại Android .145

7.2.1 Xây dựng ứng dụng đơn giản 145

Chương 8: Ứng dụng công nghệ OCR trong điều khiển 163

8.2 Định nghĩa về công nghệ OCR 163

8.3 Ứng dụng công nghệ OCR điều khiển led 7 màu 164

8.3.1 Yêu cầu 164

8.3.2 Sơ đồ hệ thống 165

Trang 8

8.3.3 Thiết kế ứng dụng trên Android .165

8.3.4 Thiết kế bộ điều khiển 175

Chương 9: Ứng dụng cảm biến gia tốc trong điều khiển 180

9.2 Phần mềm trên điện thoại Android .181

Chương 10:Ứng dụng công nghệ nhận dạng giọng nói 196

10.2 Ứng dụng trên điện thoại Android 197

Chương 11: Sử dụng Blynk tạo ứng dụng điều khiển với Google Assistant .213

11.2 Xây dựng ứng dụng với Blynk .214

11.2.1 Giới thiệu về app Blynk 214

11.2.2 Tạo mới dự án trên Blynk 215

11.3 Đăng nhập và cài đặt trên IFTTT 219

Chương 12: Wear OS và ứng dụng điều khiển 228

12.2 Tạo một Database Firebase 229

12.3 Tạo một ứng dụng trên smartphone 233

12.4 Tạo một ứng dụng trên smartwatch 235

12.5 Mạch điều khiển ESP8266 đọc dữ liệu từ Firebase 239

Tổng kết 242

Tài liệu tham khảo 243

Trang 9

DANH MỤC HÌNH ẢNH

Hình 1.1 Chiếc điện thoại T-Mobile G1 14

Hình 1.2 Các phiên bản hệ điều hành Android và thời gian phát hành 14 Hình 2.1 Sơ đồ thừa kế giữa các thành phần giao diện trong Android 17

Hình 2.2 Thiết kế một giao diện sử dụng Relative Layout 19

Hình 2.3 Màn hình ứng dụng khi chạy máy ảo 23

Hình 2.4 Hình ảnh minh họa cho margin và padding 24

Hình 2.5 Kết quả màn hình sau thiết kế 26

Hình 2.6 Kết quả hiển thị trên màn hình khi thiết kế Linear Layout dọc 28

Hình 2.7 Thiết kế các Layout lồng vào nhau 30

Hình 2.8 Kết quả hiển thị trên máy ảo các Layout lồng vào nhau 30

Hình 2.9 Thiết kế màn hình đăng nhập dùng Table Layout 31

Hình 2.10 Mô phỏng xây dựng màn hình đăng nhập dùng Table Layout 33

Hình 2.11 Thiết kế các nút nhấn sử dụng Frame Layout 34

Hình 2.12 Sử dụng các Layout thiết kế giao diện máy tính đơn giản 36

Hình 2.13 Thiết kế giao diện ứng dụng sử dụng Constraint Layout 37

Hình 2.14 Kết quả màn hình ứng dụng khi chạy máy ảo 40

Hình 3.1 Cách sắp xếp các View, ViewGroup 42

Hình 3.2 Chọn kích thước màn hình thiết kế trong Android Studio 44

Hình 3.3 Độ phân giải pixel trong Android 44

Hình 3.4 Kích thước tính theo đơn vị dp 45

Hình 3.5 Kích thước dp trong Android 45

Hình 3.6 Ví dụ về kích thước sp 46

Hình 3.7 Biểu diễn của các đơn vị đo trên cùng một màn hình 46

Hình 3.8 Giao diện ứng dụng tính chỉ số BMI 48

Hình 3.9 Giao diện thiết kế ứng dụng BMI 51

Hình 3.10 Kết quả chạy trên máy tính ảo 56

Hình 4.1 Firebase hỗ trợ nhiều nền tảng 58

Hình 4.2 Phần cứng kết nối sử dụng NODEMCU 8266 63

Hình 4.3 Vào mục Setting 63

Hình 4.4 Vào mục Android SDK 65

Hình 4.5 Vào SDK Tools 66

Trang 10

Hình 4.6 Vào mục Tools\Firebase 67

Hình 4.7 Vào mục Realtime Database 67

Hình 4.8 Vào mục Save and retrieve data 68

Hình 4.9 Kết quả Database thêm một Child tên là LED 68

Hình 4.10 Code trong mục Rules 69

Hình 4.11 Thông báo tại cửa sổ Firebase 69

Hình 4.12 Kết quả chạy trên máy ảo: a) khi Led sáng, b) khi Led tắt 73

Hình 4.13 Sơ đồ chân module NodeMCU 8266 74

Hình 4.14 Ảnh thực tế DHT11 76

Hình 4.15 Kết nối NodeMCU 8266 với DHT11 76

Hình 4.16 Phần cứng kết nối cơ bản cho hệ thống 77

Hình 4.17 Xây dựng ứng dụng trên Android Studio 77

Hình 4.18 Tạo một dự án Firebase 80

Hình 4.19 Một dự án Firebase lưu trữ dữ liệu thời gian thực 81

Hình 4.20 Hoạt động của Realtime Data Firebase 85

Hình 4.21 Lấy Firebase_host 88

Hình 5.1 Hệ thống điều khiển thiết bị qua SMS 89

Hình 5.2 Giao diện ứng dụng điều khiển SMS_Control 91

Hình 5.3 SIM900 99

Hình 5.4 Board TDGGSM_900 100

Hình 5.5 Board GPRS Shield-EFCom 100

Hình 5.6 Sơ đồ kết nối phần cứng 101

Hình 5.7 Giao tiếp SIM900 qua hai chân khác chân Tx, Rx mặc định 102

Hình 6.1 Hệ thống định vị toàn cầu GPS 110

Hình 6.2 Xác định vị trí bằng công thức lượng giác 111

Hình 6.3 Hình biểu tượng của ứng dụng Google Maps mới cập nhật 111

Hình 6.4 Giao diện Google Maps trên điện thoại 112

Hình 6.5 Theo dõi định vị thiết bị từ một thiết bị khác 113

Hình 6.6 Tạo một Project mới 113

Hình 6.7 Các bước tiến hành xin API key 114

Hình 6.8 Tạo một API key cho ứng dụng 115

Hình 6.9 File Google_maps_api.xml 115

Hình 6.10 Vào trang web xin API key 116

Trang 11

Hình 6.11 Tạo một API key 116

Hình 6.12 API key sau khi đã tạo 117

Hình 6.13 Điền API key vào file xml 117

Hình 6.14 Thêm dịch vụ của Google vào chương trình 118

Hình 6.15 Giao diện chính của ứng dụng xác định vị trí 118

Hình 6.16 Giao diện chính của ứng dụng thông báo vị trí 134

Hình 6.17 Các yêu cầu quyền cơ bản cho ứng dụng 135

Hình 6.18 Giao diện chính hiển thị vị trí 141

Hình 6.19 Tin nhắn yêu cầu gửi tới và phản hồi bằng tin nhắn vị trí 142

Hình 6.20 Giao diện chính của ứng dụng theo dõi vị trí 142

Hình 6.21 Giá trị được biểu thị và vị trí thiết bị được hiển thị trên Google Maps 143

Hình 7.1 Sơ đồ điều khiển thiết bị bằng Bluetooth 144

Hình 7.2 Giao diện điều khiển của ứng dụng 146

Hình 7.3 Giao diện khi đèn được bật 146

Hình 7.4 Module Bluetooth HC05/06 159

Hình 7.5 Sơ đồ kết nối Ardunio Uno R3 với HC-05 160

Hình 8.1 Giới thiệu về công nghệ OCR 164

Hình 8.2 Sơ đồ hệ thống ứng dụng công nghệ OCR trong điều khiển led màu 165

Hình 8.3 Giao diện ứng dụng OCR điều khiển led 166

Hình 8.4 Liên kết ứng dụng OCR với Firebase 168

Hình 8.5 Tạo biến dữ liệu thời gian thực trên Firebase 168

Hình 8.6 Giao diện Android SDK 169

Hình 8.7 Giao diện ứng dụng khi mới mở lên 173

Hình 8.8 Một số kết quả nhận dạng chữ từ hình ảnh chụp 174

Hình 8.9 Giá trị biến LED trên Firebase thay đổi khi nhận dạng chữ blue 174

Hình 8.10 Giá trị biến LED trên Firebase thay đổi khi nhận dạng chữ green 175

Hình 8.11 Hình ảnh led đa màu Anode chung 176

Hình 8.12 Kết nối NodeMCU với led đa màu 176

Hình 9.1 Cảm biến gia tốc trong điện thoại 180

Hình 9.2 Giao diện của ứng dụng 181

Trang 12

Hình 9.3 Giao diện điều khiển 182

Hình 9.4 Sơ đồ kết nối phần cứng 194

Hình 10.1 Giao diện ứng dụng Android 197

Hình 10.2 Kết nối Ardunio với HC05 và ba led đơn 210

Hình 11.1 Sơ đồ hệ thống điều khiển với Google Assistant 214

Hình 11.2 Giao diện đăng nhập Blynk 215

Hình 11.3 Tạo một ứng dụng mới với Blynk 215

Hình 11.4 Chọn phần cứng cho dự án Blynk 216

Hình 11.5 Thông báo gửi mã Auth Token đến tài khoản liên kết 216

Hình 11.6 Hộp widget của Blynk 217

Hình 11.7 Giao diện xây dựng các Button điều khiển 217

Hình 11.8 Thiết lập các thuộc tính cho nút Button trong Blynk 218

Hình 11.9 Thiết lập chân kết nối cho nút nhấn 219

Hình 11.10 Khởi chạy Blynk 219

Hình 11.11 Tạo một applet trên IFTTT 220

Hình 11.12 Tạo điều kiện This 221

Hình 11.13 Liên kết Google Assistant với IFTTT 221

Hình 11.14 Chọn loại trigger cho IFTTT 222

Hình 11.15 Thiết lập các câu lệnh trigger cho sự kiện This 223

Hình 11.16 Thiết lập sự kiện That 223

Hình 11.17 Chọn dịch vụ webhooks cho sự kiện That 224

Hình 11.18 Chọn hành động cho webhooks 224

Hình 11.19 Thiết lập các thuộc tính cho hành động (action) 224

Hình 11.20 Hoàn thành thiết lập IFTTT 225

Hình 11.21 Thiết lập cho điều khiển tắt led 1 225

Hình 11.22 Kết quả sau khi hoàn thành thiết lập cho hai led 226

Hình 11.23 Phần cứng kết nối NodeMCU 226

Hình 12.1 Giao diện của ứng dụng Google Home 229

Hình 12.2 Tạo dự án Firebase mới 230

Hình 12.3 Chép file json và project Android 230

Hình 12.4 Hướng dẫn tích hợp Firebase vào Android project 231

Hình 12.5 Chọn dự án Android để tích hợp Firebase 232

Hình 12.6 Thêm package name để add dự án vào Firebase 232

Trang 13

Hình 12.7 Thiết lập cho phép đọc ghi dữ liệu lên Data Firebase 232

Hình 12.8 Tạo dữ liệu cho Data Firebase 233

Hình 12.9 Thêm các thư viện Firebase vào Gradle 233

Hình 12.10 Thêm thư viện vào Build.Gradle(app) 234

Hình 12.11 Thiết kế giao diện cho ứng dụng trên điện thoại 234

Hình 12.12 Xây dựng code cho file MainActivity.java 235

Hình 12.13 Kết quả quan sát Firebase khi chạy ứng dụng 235

Hình 12.14 Tạo ứng dụng cho đồng hồ thông minh 236

Hình 12.15 Thiết lập ứng dụng Wear OS mới 236

Hình 12.16 Giao diện xây dựng ứng dụng Wear OS 237

Hình 12.17 Xem địa chỉ IP của đồng hồ thông minh 237

Hình 12.18 Vào cửa sổ command “Android Debugging bridge” 238

Hình 12.19 Dòng lệnh để kết nối đồng hồ thông minh với máy tính 238

Hình 12.20 Debugging thông qua wifi giữa máy tính và đồng hồ 238

Hình 12.21 Module thu phát wifi ESP8266 NodeMCU Mini D1 239

Hình 12.22 Hướng dẫn lấy authCode của dự án Firebase 241

Trang 14

là không biết đến nó Đặc biệt, các thiết bị di động từ giá rẻ đến cao cấp, các hãng khác nhau đều trang bị hệ điều hành Android cho thiết bị của mình.Ban đầu, Android được phát triển bởi Tổng công ty Android, với sự

hỗ trợ tài chính từ Google và sau này Công ty Android được chính Google mua lại vào năm 2005 Android ra mắt vào năm 2007 cùng với tuyên bố thành lập Liên minh Thiết bị Cầm tay mở (Open Handset Alliance, viết tắt OHA), một hiệp hội gồm các công ty phần cứng, phần mềm, và viễn thông với mục tiêu đẩy mạnh các tiêu chuẩn mở cho các thiết bị di động Chiếc điện thoại đầu tiên chạy Android được bán vào năm 2008, chính là T-Mobile G1 do HTC sản xuất như trong Hình 1.1

Hình 1.1 Chiếc điện thoại T-Mobile G1

Trang 15

Android có mã nguồn mở được Google phát hành theo Giấy phép Apache Giấy phép Apache là một giấy phép phần mềm tự do của Quỹ Phần

mềm Apache (Apache Software Foundation - ASF) Giấy phép Apache bắt

buộc phải có thông báo bản quyền và lời phủ nhận Tương tự như các giấy phép phần mềm tự do khác, Giấy phép Apache trao cho người dùng phần mềm quyền tự do sử dụng phần mềm với bất kỳ mục đích nào như phân phối, chỉnh sửa, và phân phối bản có sửa đổi của phần mềm, theo các điều khoản của giấy phép, mà không lo lắng tới phí bản quyền Chính mã nguồn

mở cùng với một giấy phép không có nhiều ràng buộc đã cho phép các nhà phát triển thiết bị, mạng di động và các lập trình viên tự do điều chỉnh

và phân phối Android Ngoài ra, Android còn có một cộng đồng lập trình viên đông đảo chuyên viết các ứng dụng để mở rộng chức năng của thiết

bị bằng một loại ngôn ngữ lập trình Java có sửa đổi

Hình 1.2 Các phiên bản hệ điều hành Android và thời gian phát hành

Những yếu tố này đã giúp Android trở thành nền tảng điện thoại thông minh phổ biến nhất thế giới, vượt qua Symbian OS vào quý 4 năm

2010, và được các công ty công nghệ lựa chọn khi họ cần một hệ điều hành không nặng nề, có khả năng tinh chỉnh, và giá rẻ chạy trên các thiết

bị công nghệ cao thay vì xây dựng một hệ điều hành cho riêng mình Do

đó Android đã được thiết kế để không chỉ chạy trên điện thoại và máy tính

Trang 16

bảng mà còn xuất hiện trên ti-vi, máy chơi game và các thiết bị điện tử khác Bản chất mở của Android cũng khích lệ một đội ngũ đông đảo lập trình viên và những người đam mê sử dụng mã nguồn mở để tạo ra những

dự án do cộng đồng quản lý Những dự án này bổ sung các tính năng cao cấp cho những người dùng thích tìm tòi hoặc đưa Android vào các thiết bị ban đầu chạy hệ điều hành khác

Android chiếm 87,7% thị phần điện thoại thông minh trên toàn thế giới vào thời điểm quý 2 năm 2017, với tổng cộng 2 tỷ thiết bị đã được kích hoạt và 1,3 triệu lượt kích hoạt mỗi ngày Sự thành công của hệ điều hành cũng khiến nó trở thành mục tiêu trong các vụ kiện liên quan đến bằng phát minh, góp mặt trong cái gọi là “cuộc chiến điện thoại thông minh” giữa các công ty công nghệ Điển hình có một thời gian dài Samsung và Apple liên tục kiện tục các bên vi phạm bản quyền của nhau 1

Hệ điều hành Android liên tục được cập nhật, và đến nay nó trải qua nhiều phiên bản khác nhau và sẽ còn tiếp tục Hình đồ họa ghi lại các cột mốc phát triển chính của hệ điều hành này được trình bày trong Hình 1.2

1.2 Một số nền tảng Android

Android không chỉ được thiết kế để chạy trên điện thoại, máy tính bảng (tablet), thiết bị di động có kích thước lớn (phable) Android chạy trên các thiết bị có đủ hình dạng và kích thước, mang đến cho bạn cơ hội lớn để tiếp tục tương tác với người dùng Và Android được thiết kế chuyên dùng và hướng đến các đối tượng khác nhau

Android TV là hệ điều hành được tùy biến xây dựng chạy trên các

ti-vi thông minh Thị trường ti-vi thông minh giờ rất sôi động Nội dung xem trực tiếp phong phú, chất lượng cao Chính vì vậy Android TV mong muốn mang đến những trải nghiệm mới cho người dùng Android TV tạo ứng dụng cho phép người dùng trải nghiệm nội dung của ứng dụng trên màn hình lớn

Android Auto là hệ điều hành được tùy biến cho các xe hơi Nhằm

mang đến các trải nghiệm giải trí, công việc tuyệt vời Các trải nghiệm dẫn đường, nghe nhạc, xem phim, sẽ được nâng lên một tầm mới Khi viết ứng dụng với Android Auto, bạn sẽ không phải lo lắng sự khác biệt

về phần cứng của thiết bị như độ phân giải màn hình, giao diện phần mềm, nút bấm và điều khiển cảm ứng Người dùng có thể truy cập ứng dụng của bạn thông qua ứng dụng Android Auto trên điện thoại của họ

1 Một số thông tin được lấy từ trang Bách khoa toàn thư mở wikipedia.org.

Trang 17

Hoặc, khi được kết nối với các loại xe tương thích, các ứng dụng trên thiết bị cầm tay chạy Android 5.0 trở lên có thể giao tiếp với trải nghiệm Android Auto.

Wear OS (trước đây là Android Wear) là hệ điều hành Android

được tùy biến xây dựng cho các thiết bị đeo Đồng hồ thông minh giúp bạn luôn kết nối với sức khỏe bản thân Bạn có thể theo dõi các hoạt động hằng ngày của mình như thông tin thân nhiệt, nhịp tim, bước chân đi, giờ ngủ, đọc nhanh các tin nhắn, email,…

Google Chrome OS được thiết kế dùng trình duyệt web Google

Chrome là giao diện người dùng chính, và như vậy nó chủ yếu là để làm việc với các ứng dụng web Giao diện người dùng được đơn giản hóa tối

đa, giống như trong trình duyệt Google Chrome Do trình duyệt web là ứng dụng duy nhất tồn tại trong thiết bị, Google Chrome OS nhắm vào những người dùng dành hầu hết thời gian làm việc với máy tính của họ trên internet Lợi thế mạnh nhất của Chrome OS chính là tốc độ khởi động, cũng

vì là hệ điều hành trong một trình duyệt web nên Chrome OS rất nhẹ và đơn giản Tính năng tiện lợi nhất của Chrome OS là người dùng có thể kết nối bất cứ ở đâu nếu có internet và Chrome OS, vì nó sử dụng tài khoản cá nhân trên nền tảng đám mây nên dữ liệu, lịch sử của bạn sẽ không bị mất

Android Things cho phép bạn tạo các thiết bị thông minh, được kết

nối với nhiều ứng dụng công nghiệp, người bán lẻ và công nghiệp khác nhau Lợi thế của Android Things là phát triển ứng dụng cho thiết bị của bạn bằng các công cụ phát triển Android, giao diện lập trình ứng dụng (API) và tài nguyên cùng với API mới, cung cấp I/O và thư viện cấp thấp cho các thành phần phổ biến như cảm biến nhiệt độ, bộ điều khiển hiển thị và hơn thế nữa Xây dựng các thiết bị trên các giải pháp phần cứng chìa khóa trao tay với hệ thống module được chứng nhận (SoM) và các

bo mạch phát triển giúp đơn giản hóa nguyên mẫu cho quy trình sản xuất Google hỗ trợ cung cấp hình ảnh, bản cập nhật và bản sửa lỗi hệ thống để bạn có thể tập trung vào việc tạo ra các sản phẩm hấp dẫn Ngoài ra, bạn có thể đẩy các bản cập nhật hệ thống này và bản cập nhật ứng dụng của riêng bạn lên thiết bị bằng Android Things Console

Trang 18

đó bạn cũng có thể tạo một lớp Layout tùy biến của mình, bằng cách tạo một lớp mở rộng từ ViewGroup Hình 2.1 minh họa sơ đồ thừa kế giữa các thành phần giao diện trong Android.

Hình 2.1 Sơ đồ thừa kế giữa các thành phần giao diện trong Android

Trang 19

2.2 Các loại Layout tiêu chuẩn trong Android

Bảng 2.1 Các loại Layout tiêu chuẩn trong Android

Relative Layout Relative Layout là một ViewGroup, nó hiển thị

các View con của nó theo vị trí có tương đối với nhau Việc sắp xếp các View trên màn hình tốn

ít tài nguyên hơn, tuy nhiên do có quan hệ qua lại nên khi tùy chỉnh các thành phần cần chú ý

để tránh sự thay đổi không theo ý muốn Đây

là Layout mặc định thay cho Linear Layout ở các phiên bản kế tiếp của Android Studio.Linear Layout Linear Layout bố trí tất cả các thành phần

con của nó theo một hướng duy nhất, theo chiều dọc hoặc chiều ngang Những phiên bản Android Studio ban đầu chọn Linear Layout làm Layout mặc định

Table Layout Table Layout là một view, nó nhóm các View

con thành các dòng và các cột

Grid Layout Grid Layout sử dụng một mạng lưới các dòng

mỏng và vô hạn để tách khu vực bản vẽ của nó thành: các hàng, các cột, và các ô (cell) Nó hỗ trợ cả việc bắc qua (span) các hàng và các cột, mà cùng nhau cho phép một thành phần giao diện để chiếm một phạm vi hình chữ nhật gồm nhiều ô.Frame Layout Frame Layout là một đối tượng giữ chỗ ở trên

màn hình mà bạn có thể sử dụng để hiển thị một khung nhìn duy nhất

Absolute Layout Absolute Layout làm bạn có thể chỉ định chính

xác vị trí của các View con trong nó Sắp xếp các View con theo đúng tọa độ x, y trong thành phần cha

Trang 21

Code file activity_main.xml:

<?xml version=”1.0” encoding=”utf-8”?>

<RelativeLayout xmlns:android=”http://schemas.android.com/

apk/res/android”

xmlns:app=”http://schemas.android.com/apk/res-auto” xmlns:tools=”http://schemas.android.com/tools”

Trang 22

Một số thuộc tính thường dùng khi sử dụng Relative Layout:

Bảng 2.2 Các thuộc tính thường dùng trong Relative Layout

android:layout_above Đặt tiện ích (widget) hiện tại

nằm kế sau widget có id được chỉ ra

android:layout_alignBaseline Đặt widget này lên cùng dòng

với widget có id được chỉ raandroid:layout_alignBottom Canh sao cho đáy của widget

hiện thời trùng với đáy của widget có id được chỉ ra

android:layout_alignLeft Đặt cạnh trái của widget hiện

thời trùng với cạnh trái của widget có id được chỉ ra

android:layout_alignParentBottom Nếu thiết lập là true thì widget

hiện thời sẽ được canh xuống đáy của widget chứa nó

android:layout_alignParentLeft Nếu được thiết lập là true thì

widget hiện thời sẽ canh trái so với widget chứa nó

android:layout_alignParentRight Nếu được thiết lập là true thì

widget hiện thời sẽ canh phải so với widget chứa nó

android:layout_alignParentTop Nếu được thiết lập là true thì

widget hiện thời sẽ canh lên đỉnh widget chứa nó

android:layout_alignRight Canh phải của widget hiện thời

trùng với cạnh phải của widget

có id được chỉ ra

Trang 23

android:layout_alignTop Canh đỉnh của widget hiện thời

trùng với đỉnh của widget có id được chỉ ra

android:layout_

alignWithParentIfMissing Nếu thiết lập là true, thì widget sẽ được canh theo widget chứa

nó nếu các thuộc tính canh của widget không có

android:layout_below Đặt widget hiện thời ngay sau

widget có id được chỉ raandroid:layout_centerHorizontal Nếu thiết lập là true thì widget

hiện thời sẽ được canh giữa theo chiều ngang widget chứa nóandroid:layout_centerInParent Nếu thiết lập là true thì widget

hiện thời sẽ được canh chính giữa theo chiều phải trái và trên dưới so với widget chứa nóandroid:layout_centerVertical Nếu thiết lập là true thì widget

hiện thời sẽ được canh chính giữa theo chiều dọc widget chứa nó

android:layout_toLeftOf Đặt cạnh phải của widget hiện

thời trùng với cạnh trái của widget có id được chỉ ra

android:layout_toRightOf Đặt cạnh trái của widget hiện

thời trùng với cạnh phải của widget có id được chỉ ra

Trang 25

Layout_marginleft Quy định khoảng cách bên trái

của widget

Layout phân chia cho widget

Hình 2.4 Hình ảnh minh họa cho margin và padding

Để hiểu rõ hơn về Linear Layout, chúng ta sẽ tìm hiểu các ví dụ dưới

đây Lưu ý: các ví dụ chủ yếu phân tích các Layout do đó sẽ dùng phương

pháp thiết kế giao diện từ file XML, không hướng dẫn lập trình chức năng

ở phần này

Ví dụ 2.2: Thiết kế screen gồm 4 cột màu, có độ rộng bằng nhau.

Với yêu cầu như vậy, chúng ta có thể sử dụng các Layout như: Linear Layout, Table Layout, Relative Layout để thiết kế Ở đây, tôi sử dụng Linear Layout để giải quyết yêu cầu này

Trang 26

<LinearLayout xmlns:android=”http://schemas.android.com/

Code trên ta thấy thuộc tính orientation được gán giá trị là horizontal

để các widget trong nó được sắp xếp theo chiều ngang

Thuộc tính android:weightSum được sử dụng để tính tổng weight của các widget trong Linear Layout Thuộc tính android:layout_weight (của

các widget nằm bên trong Linear Layout) là độ rộng của widget này so với các widget khác, ta thấy ở code trên giá trị của thuộc tính android:layout_weight ở cả bốn TextView là “25”, do đó độ rộng của mỗi cột màu là

Trang 28

Ví dụ 2.3: Thiết kế screen có bốn hàng màu, với hàng màu đỏ

và vàng có độ cao gấp đôi so với hai hàng màu còn lại.

<LinearLayout xmlns:android=”http://schemas.android.com/

Thuộc tính android:orientation của Linear Layout được gán giá trị

là vertical do đó các widget trong Layout sẽ được sắp xếp theo chiều dọc Các nội dung còn lại thì tương tự như trên Các bạn có thể thay đổi giá trị

Trang 33

<TableLayout xmlns:android=”http://schemas.android.com/

Từ code trên ta thấy để tạo thêm các hàng cho bảng ta sẽ dùng thẻ

<TableRow> </TableRow>, các widget ở mỗi hàng sẽ nằm trong cặp thẻ này Số cột của bảng phụ thuộc vào hàng có số widget lớn nhất Bảng sử dụng trong ví dụ này có kích thước là ba hàng và hai cột

Thuộc tính android:StretchColumns=“*” cho phép căn đều độ rộng các cột trong bảng Ngoài ra, EditText để nhập mật khẩu sử dụng thuộc tính android:inputType=“textPassword” để hiển thị các dữ liệu được nhập vào ở dạng ký tự “*”

Trang 36

<FrameLayout xmlns:android=”http://schemas.android.com/

Bài tập tổng hợp, dựa vào các Layout đã tìm hiểu ở trên, hãy thiết kế Screen như hình dưới

Trang 37

Hình 2.12 Sử dụng các Layout đã trình bày thiết kế giao diện máy tính

đơn giản 2.8 Constraint Layout

Một constraint là phần mô tả làm thế nào để một View nên được định

vị trên màn hình tương đối với các phần tử khác trong Layout Bạn có thể xác định một constraint cho một hay nhiều mặt của một View bằng các chế

độ kết nối bất kỳ sau đây:

• Điểm neo nằm trên một View khác

• Một cạnh của Layout

• Một guideline vô hình

Bởi Layout của từng View được định nghĩa bởi sự kết hợp với các phần

tử khác nhau trong Layout Bạn có thể tạo một giao diện phức tạp với hệ thống cây nhiều nhánh (kiểu View Hierachy) Mặc dù nó có khái niệm tương tự như Relative Layout nhưng Constraint Layout linh hoạt hơn và được thiết kế sử dụng hoàn toàn từ công cụ Layout Editor mới Và trong các phiên bản Android Studio mới, đây được chọn làm Layout mặc định khi thiết kế

Các loại của constaint bạn có thể xác định như sau:

• Kết nối phía bên các cạnh của Layout

• Kết nối phía bên của một View sang bên tương ứng với Layout Ví

dụ kết nối phía trên của một View vào mép trên cùng của Constraint Layout

Trang 38

• Kết nối phía bên cạnh của một View.

• Kết nối phía bên cạnh của một View đến phía đối diện của một View khác

Ví dụ 2.7: Kết nối cạnh trên (top) của View A vào cạnh dưới (bottom) của View B, như vậy thì A luôn luôn ở bên dưới B.

Chỉnh thẳng hàng với một View Canh thẳng hàng các cạnh của một View để các cạnh và góc của View khác tương tự Ví dụ sắp xếp bên trái của View A đến phía bên trái của View B sao cho chúng được xếp chồng theo chiều dọc và canh trái

Chỉnh cơ bản với một View Căn đường cơ bản của văn bản nằm trong View với một đường cơ bản của văn bản trong View khác Sử dụng điều này để gắn kết các View theo chiều ngang khi các văn bản trong View quan trọng hơn là căn các cạnh trong view

Khi bạn thêm một constraint vào View, bạn xem trong công cụ Layout Editor Bạn có thể kéo để đặt lại vị trí của View và thêm những constraint để đảm bảo bố trí của bạn đáp ứng các kích cỡ màn hình khác nhau một cách thích hợp

Ví dụ 2.8: Viết giao diện của ứng dụng tính chỉ số BMI (sẽ có ở chương sau).

Hình 2.13 Thiết kế giao diện ứng dụng sử dụng Constraint Layout

Trang 39

Để thiết kế được giao diện như trên thì ta có thể sử dụng các Layout

ở trên và ở phần này tôi sẽ sử dụng Constraint Layout để thiết kế Các bạn

sẽ thấy đây là layout rất tiện lợi và đang được Google khuyến khích dùng.Code file activity_main.xml:

Trang 40

app:layout_constraintRight_toRightOf=”@id/

constraintlayout”/>

</android.support.constraint.ConstraintLayout>

Định dạng
Số trang	246
Dung lượng	24,93 MB