• Trang chủ
  • Tin công nghệ
    sublime-text-3

    SublimeText: 10 plugin hổ trợ JavaScript

    Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

    Những tính năng mới trong C# 7

    Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

    Những tính năng mới trong C# 6

    5 Design Pattern mà developer nên biết

    5 Design Pattern mà developer nên biết

    Live Stream và những điều có thể bạn chưa biết

    Live Stream và những điều có thể bạn chưa biết

    10 ngôn ngữ lập trình được sử dụng nhiều nhất để đóng góp mã nguồn mở

    10 ngôn ngữ lập trình được sử dụng nhiều nhất để đóng góp mã nguồn mở

    Machine Learning góp phần cải thiện chiến lược Digital Marketing của bạn như thế nào?

    Machine Learning góp phần cải thiện chiến lược Digital Marketing của bạn như thế nào?

    7 công nghệ nổi bật phát triển mạnh năm 2018

    7 công nghệ nổi bật phát triển mạnh năm 2018

    Bitcoin đã được khai thác 80% tổng lượng

    Bitcoin đã được khai thác 80% tổng lượng

  • Lập trình Android
  • Java & Java EE
  • Thiết kế web
    Hướng dẫn thêm nút chia sẻ ZALO cho website

    Hướng dẫn thêm nút chia sẻ ZALO cho website

    sublime-text-3

    SublimeText: 10 plugin hổ trợ JavaScript

    sublime-text-3

    Sublime Text 3 và các plugin cần thiết cho lập trình Laravel

    Top xu hướng thiết kế web cho năm 2017

    Top xu hướng thiết kế web cho năm 2017

    Tạo Layout đơn giản với DIV và CSS

    Tạo Layout đơn giản với DIV và CSS

    Tạo ứng dụng Swing bằng Netbean

    Backlink là gì? Cách tạo backlink?

    Tạo ứng dụng Swing bằng Netbean

    Giới thiệu về HTML5 và CSS3

  • Lập trình C#
    Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

    Tag Helpers trong ASP.NET Core MVC

    Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

    Những tính năng mới trong C# 7

    Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

    Những tính năng mới trong C# 6

    Hướng dẫn sử dụng Crystal Report với Visual Studio

    Hướng dẫn sử dụng Crystal Report với Visual Studio

    7 thủ thuật Windows Group Policy trong Windows 10

    7 thủ thuật Windows Group Policy trong Windows 10

    5 cách để học lập trình nhanh hơn

    Ví dụ minh họa Client-Server trong C#

    Remotting

    Remotting

    Debug chương trình với VS.NET

    Debug chương trình với VS.NET

    Tạo Form có hình dạng bất kỳ trong C#

    Tạo Form có hình dạng bất kỳ trong C#

  • Lập trình PHP
    php-mysql

    Sử dụng mệnh đề WHERE của câu lệnh SELECT trong PHP và MySQL

    php-mysql

    Sử dụng câu lệnh SELECT trong PHP và MySQL

    php-mysql

    Lấy giá trị của cột tự tăng của record vừa được thêm mới

    php-mysql

    MySQL prepared statements trong PHP

    php-mysql

    Sử dụng INSERT trong MySQL & PHP

    php-mysql

    Tạo cơ sở dữ liệu và bảng trong MySQL bằng PHP

    sublime-text-3

    Sublime Text 3 và các plugin cần thiết cho lập trình Laravel

    WordPress-Cách chia bài viết dài thành nhiều trang

    WordPress-Làm nổi bật comment của tác giả bài viết

No Result
View All Result
Học Lập Trình
  • Trang chủ
  • Tin công nghệ
    sublime-text-3

    SublimeText: 10 plugin hổ trợ JavaScript

    Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

    Những tính năng mới trong C# 7

    Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

    Những tính năng mới trong C# 6

    5 Design Pattern mà developer nên biết

    5 Design Pattern mà developer nên biết

    Live Stream và những điều có thể bạn chưa biết

    Live Stream và những điều có thể bạn chưa biết

    10 ngôn ngữ lập trình được sử dụng nhiều nhất để đóng góp mã nguồn mở

    10 ngôn ngữ lập trình được sử dụng nhiều nhất để đóng góp mã nguồn mở

    Machine Learning góp phần cải thiện chiến lược Digital Marketing của bạn như thế nào?

    Machine Learning góp phần cải thiện chiến lược Digital Marketing của bạn như thế nào?

    7 công nghệ nổi bật phát triển mạnh năm 2018

    7 công nghệ nổi bật phát triển mạnh năm 2018

    Bitcoin đã được khai thác 80% tổng lượng

    Bitcoin đã được khai thác 80% tổng lượng

  • Lập trình Android
  • Java & Java EE
  • Thiết kế web
    Hướng dẫn thêm nút chia sẻ ZALO cho website

    Hướng dẫn thêm nút chia sẻ ZALO cho website

    sublime-text-3

    SublimeText: 10 plugin hổ trợ JavaScript

    sublime-text-3

    Sublime Text 3 và các plugin cần thiết cho lập trình Laravel

    Top xu hướng thiết kế web cho năm 2017

    Top xu hướng thiết kế web cho năm 2017

    Tạo Layout đơn giản với DIV và CSS

    Tạo Layout đơn giản với DIV và CSS

    Tạo ứng dụng Swing bằng Netbean

    Backlink là gì? Cách tạo backlink?

    Tạo ứng dụng Swing bằng Netbean

    Giới thiệu về HTML5 và CSS3

  • Lập trình C#
    Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

    Tag Helpers trong ASP.NET Core MVC

    Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

    Những tính năng mới trong C# 7

    Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

    Những tính năng mới trong C# 6

    Hướng dẫn sử dụng Crystal Report với Visual Studio

    Hướng dẫn sử dụng Crystal Report với Visual Studio

    7 thủ thuật Windows Group Policy trong Windows 10

    7 thủ thuật Windows Group Policy trong Windows 10

    5 cách để học lập trình nhanh hơn

    Ví dụ minh họa Client-Server trong C#

    Remotting

    Remotting

    Debug chương trình với VS.NET

    Debug chương trình với VS.NET

    Tạo Form có hình dạng bất kỳ trong C#

    Tạo Form có hình dạng bất kỳ trong C#

  • Lập trình PHP
    php-mysql

    Sử dụng mệnh đề WHERE của câu lệnh SELECT trong PHP và MySQL

    php-mysql

    Sử dụng câu lệnh SELECT trong PHP và MySQL

    php-mysql

    Lấy giá trị của cột tự tăng của record vừa được thêm mới

    php-mysql

    MySQL prepared statements trong PHP

    php-mysql

    Sử dụng INSERT trong MySQL & PHP

    php-mysql

    Tạo cơ sở dữ liệu và bảng trong MySQL bằng PHP

    sublime-text-3

    Sublime Text 3 và các plugin cần thiết cho lập trình Laravel

    WordPress-Cách chia bài viết dài thành nhiều trang

    WordPress-Làm nổi bật comment của tác giả bài viết

No Result
View All Result
Học Lập Trình
No Result
View All Result

Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

qadmin by qadmin
12/05/2020
in Lập trình Android
0 0
0
Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình
0
SHARES
2.7k
VIEWS
Share on FacebookShare on Twitter

Mỗi Activity thường sử dụng một Layout để hiển thị với người dùng. Để ứng dụng thu hút người dùng thì layout luôn là một phần không thể thiếu. Layout chính là phần giao diện, là bộ mặt mà người dùng trực tiếp nhìn vào.

Việc viết layout trong Android không phải là khó vì Android Studio có hỗ trợ kéo thả. Về Layout trong Android thì code5s.com cũng đã có một bài viết nói về vấn đề này, giới thiệu một số thông tin cơ bản về Layout trong Android. Nhưng thiết kế Layout với trải nghiệm tốt, hỗ trợ nhiều kích thước màn hình khác nhau thì lại không phải là dễ.

1. Các loại layout trong Android

Trong Android thì có nhiều loại layout, mỗi loại sẽ có tác dụng riêng. Phần này sẽ giới thiệu với các bạn các loại layout hay được sử dụng nhất khi thiết kế giao diện cho ứng dụng

LinearLayout

LinearLayout có lẽ là loại layout hay được sử dụng nhất vì tính đơn giản của nó. LinearLayout sẽ bố trí các view theo dạng khối và không đè lên nhau. LinearLayout có hai chiều bố trí bố cục là:

  • Vertical Orientation – các view bên trong sẽ được sắp xếp theo chiều dọc. Điều này cũng có nghĩa là mỗi view sẽ chiếm 1 hàng.
  • Horizontal Orientation – Tương tự nhưng theo chiều ngang. Điều này cũng có nghĩa là mỗi view sẽ chiếm 1 cột.

Nếu bạn chưa hình dung ra thì mình minh họa bằng hình vẽ bên dưới. Tại ví dụ này, LinearLayout được thiết lập là Vertical Orientation.

Do đó Text View, Edit Text, và Button được canh chỉnh theo chiều dọc (từ trên xuống dưới).

RelativeLayout

RelativeLayout là loại layout mà ở đó vị trí các widget (Text Views, Buttons,…)  phụ thuộc vào vị trí các widget khác hoặc view cha.

Ví dụ về RelativeLayout như hình bên dưới.

Trong hình trên, nút “Forgot password” phục thuộc vào vị trí của nút ” Login”. Nếu vị trí nút “Login” thay đổi thì nút “Forgot password” cũng thay đổi theo.

Còn với nút “Register a new Account” được căn chỉnh theo view cha, nó luôn nằm ở phía cuối cùng của view cha.

ListView/RecyclerView

Như tên gọi, ListView là layout để hiển thị các view con dưới dạng danh sách. Bản thân widget này được thiết kế theo mô hình MVC. Do đó để xây dựng được danh sách thì ListView cần thêm một Adapter nữa.

Đây là một trong những Layout rất hữu ích và rất hay được sử dụng trong các ứng dụng cần hiển thị dữ liệu có cấu trúc giống nhau như: Đọc báo, quản lý file,…

RecyclerView cũng giống với ListView, nhưng được bổ sung thêm nhiều tính năng hơn.

GridView

GridView là một View Layout ở đó các item (hình ảnh, file, …) được đặt trong một Grid (lưới) như hình dưới đây

Về cơ bản cách xây dựng GridView rất giống với Listview, cũng cần một Adapter để có thể đưa dữ liệu hiển thị trên GridView.

Trên đây là những loại Layout rất cơ bản và hay sử dụng trong ứng dụng Android. Tuy nhiên, như các bạn biết Android là hệ điều hành mở nên các thiết bị Android cũng cực kì đa dạng với đủ các loại kích thước và hình dáng.

Vậy làm thế nào để ứng dụng của chúng ta hiển thị đẹp trên tất cả các loại màn hình đây?

2. Thiết kế giao diện hỗ trợ nhiều loại màn hình trong Android

Như đã đề cập ở phần trên, Android là một hệ điều hành mã nguồn mở được sử dụng với nhiều loại thiết bị khác nhau. Khi đó các nhà phát triển sẽ phải đối mặt với việc ứng dụng sẽ hiển thị trên các màn hình  có độ phân giải khác nhau.

Trước khi tìm hiểu chi tiết cách hỗ trợ đa kích thước và độ phân của màn hình. Chúng ta cần biết một số thuật ngữ sau:

– Độ phân giải – Resolution: là số pixel trên màn hình thiết bị. Ví dụ 480×800, …
– Mật độ điểm ảnh – Density(dpi): là số pixel trong một khu vực cụ thể. Thường là số pixel trên mỗi inch. Đây là thước đo chất lượng màn hình.
– Hướng màn hình – Orientation: Là cách màn hình được định hướng. Điện thoại thì chỉ có 2 trường hợp: xoay ngang (Landscape) hoặc dọc (Protrait).

Thiết kế dựa vào kích thước màn hình

Trong Android thì người ta có định nghĩa về kích thước màn hình  như sau:

From (inch)To (inch)Android name
24small
around 4around 4normal
from around 47large
710xlarge

Nếu muốn hỗ trợ tất cả các kích thước màn hình này, chúng ta phải ánh xạ  android name này vào một cấu trúc thư mục bên trong thư mục res của dự án.

Quy ước được Android sử dụng là thêm tên này vào cuối từ layout. Ví dụ layout-small, layout-normal,…. Vì vậy, bên trong thư mục res chúng ta sẽ có một cấu trúc như thế này:

Khi chạy ứng dụng, với mỗi kích thước màn hình thì layout ở thư mục tương ứng sẽ được hiển thị. Còn nếu không có thư mục layout nào phù hợp mới kích thước màn hình đó thì thư mục layout mặc định sẽ được hiển thị

Như bạn có thể thấy, mỗi thư mục chứa các file layout có tên giống nhau. Điều duy nhất thay đổi là nội dung bên trong các file layout đó

Ví dụ, nếu chúng ta mở file main.xml, trong hai thư mục này, bạn sẽ thấy giá trị margin được thiết kế khác nhau tùy vào kích thước của màn hình

Như vậy là đã xong màn hình dọc. Thế còn màn hình ngang thì sao? Nếu người dùng xoay ngang màn hình thì có thể thiết kế layout dành riêng cho nó không?

Tất nhiên là có thể rồi! bạn làm tương tự như trên và chỉ cần thêm -land vào cuối thư mục layout.

Như vậy là chúng ta có thể hỗ trợ khá nhiều loại màn hình trong Android

Thiết kế dựa vào mật độ điểm ảnh(DPI)

Với các màn hình có kích thước khác nhau thì phân chia thư mục layout như trên. Đồng thời chúng ta cũng cần lưu ý đến trường hợp có cùng kích thước (ví dụ cùng màn hình 5.5 inch) nhưng lại có mật độ điểm ảnh(DPI) khác nhau.

Để giải quyết vấn đề này thì chúng sẽ phân chia thư mục drawable.

Mật độ điểm ảnh sẽ ảnh hưởng trực tiếp lên việc hiển thị các ảnh, icon sử dụng trong ứng dụng. Đó là lý do tại sao chúng ta phải tạo nhiều thư mục drawable

Tương tự, ta có bảng quy ước sau:

DensityAndroid name
Smallaround 120 dpi (ldpi)
Normalaround 160 dpi (mdpi)
Higharound 240 dpi (hdpi)
x-Higharound 320 dpi (xhdpi)

Cũng giống như việc phân chia các thư mục layout, các thư mục drawable sẽ có cấu trúc như sau. Vì vậy, chúng ta sẽ có:

Như vậy là chúng ta sẽ hoàn thành tìm hiểu layout trong android. Cũng như cách thiết kế layout để ứng dụng có thể hiển thị tốt trên nhiều màn hình khác nhau.

Tags: androidhọc lập trìnhmobile
Previous Post

Android Notification

Next Post

5 Design Pattern mà developer nên biết

qadmin

qadmin

Related Posts

Shape Drawables trong Android

Shape Drawables trong Android

13/09/2020
5 Design Pattern mà developer nên biết

5 Design Pattern mà developer nên biết

30/07/2020
Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

Android Notification

04/07/2020
Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

Sử dụng DialogFragment trong Android

04/07/2020
Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

Sử dụng SharedPreferences để lưu trữ thông tin

04/07/2020
Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

Các ví dụ cơ bản cho lập trình Android

12/05/2020
Next Post
5 Design Pattern mà developer nên biết

5 Design Pattern mà developer nên biết

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

You might also like

Hướng dẫn thêm nút chia sẻ ZALO cho website

Hướng dẫn thêm nút chia sẻ ZALO cho website

08/07/2021
sublime-text-3

SublimeText: 10 plugin hổ trợ JavaScript

16/01/2021
Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

Tag Helpers trong ASP.NET Core MVC

13/12/2020
Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

Những tính năng mới trong C# 7

03/12/2020
Hướng dẫn sử dụng Layout trong Android và thiết kế giao diện hổ trợ nhiều loại màn hình

Những tính năng mới trong C# 6

03/12/2020
php-mysql

Sử dụng mệnh đề WHERE của câu lệnh SELECT trong PHP và MySQL

13/11/2020
Học Lập Trình

Code5s.com được xây dựng với mong muốn mang lại những bài học hữu ích, thiết thực, và chất lượng cho mọi người.

Chuyên mục

Công cụ Java & Java EE Lập trình Android Lập trình C# Lập trình PHP Thiết kế web Tin công nghệ Tips Tài liệu Wearable Web Services XML

Kết nối

  • Trang chủ
  • Tin công nghệ
  • Lập trình Android
  • Java & Java EE
  • Thiết kế web
  • Lập trình C#
  • Lập trình PHP

© 2020 Code5s.com

No Result
View All Result
  • Trang chủ
  • Tin công nghệ
  • Lập trình Android
  • Java & Java EE
  • Thiết kế web
  • Lập trình C#
  • Lập trình PHP

© 2020 Code5s.com

Welcome Back!

Login to your account below

Forgotten Password?

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In