Bài 8: Textview, EditText, Button, ImageView

Qua bài về layout chắc mọi người đã nắm cơ bản qua về View và ViewGroup rồi đúng không nhỉ, và giờ ta sẽ đi đào sâu vào hơn nữa.Lẽ ra mình sẽ giới thiệu về ViewGroup trước tuy nhiên lại đụng đến View con nên mình sẽ hướng dẫn về View trước và sau đó là ViewGroup.

Hôm nay chúng ta sẽ tìm hiểu về 4 view cơ bản và sử dụng nhiều nhất khi bạn lập trình Android đó là: TextView, EditText, Button và ImageView, thực ra còn rất nhiều các View khác và bạn sẽ được đụng đến ở những bài thực hành trong loạt Series này.

Bây giờ bạn nhìn vào hình ảnh phía dưới đây coi có phân biệt đâu là view nào không nhé:

Các View cơ bản trong Android

Các View cơ bản trong Android

Và dưới đây là đoạn code mình dùng để thiết kế giao diện bên trên bạn có thể copy bỏ vào một file layout của bạn để xem là sẽ thấy y chang vậy:


Ở ảnh trên mình đã sử dụng tất cả các view mình nói trong bài viết này, đánh dấu theo thứ tự là :

1.ImageView

Đây là một View khá cơ bản chuyên dùng để hiển thị hình ảnh là chủ yếu, bất kỳ bạn thấy màn hình nào mà có hình ảnh thì đa phần đây chính là ImageView.ImageView sử dụng rất là đơn giản chỉ việc set đường dẫn hình ảnh vào trong là nó hiển thị thôi.

Đường dẫn ở đây có thể từ internet hoặc là từ local của thiết bị android.Bạn xem đoạn code đã dùng cho hình ảnh phía trên là sẽ hiểu:


Để xem những thuộc tính ở trên là gì nào:

android:layout_gravity : canh lề cho view so với kích thước màn hình/view, ở trên mình chọn center nghĩa là ảnh này sẽ nằm ở giữa màn hình thiết bị của bạn, view nào cũng có thể dùng thuộc tính này nhé.

android:src : đây là nơi bạn để đường dẫn hình ảnh của bạn để ImageView nó hiển thị lên giao diện màn hình, đường dẫn ở đây có thể từ internet (https://thangcoder.com/wp-content/uploads/2016/08/thangcoder.png), hoặc từ thiết bị bằng một Drawable, bạn sẽ học ở phần sau khi xem video sẽ hiểu thôi nhé.

Ở trên mình set ảnh từ một drawable , có nghĩa là trong thư mục drawable ở project mình có một tấm ảnh tên là thangcoder.png nên android sẽ tự hiểu và hiển thị lên.Bạn không biết thư mục drawable ở đâu thì xem lại bài viết Bài 4: Cấu trúc Project trong lập trình Android nhé.

android:layout_width/height: đây là chiều cao và chiều rộng của View nhé các bạn, và các bạn lưu ý là bất kì view nào cũng phải có hai thuộc tính này vì nó là bắt buộc, chiều cao chiều rộng có 2 thuộc tính quan trọng đó là :

  • match_parent : chiều cao/rộng toàn màn hình, có nghĩa màn hình bạn to chừng nào nó sẽ to theo chừng đó
  • wrap_content : chiều cao/rộng vừa với kích thước của view, ví dụ bạn bỏ vào một ảnh kích thước 20dp x 20dp thì nó chỉ to y chang 20dp chứ không to hơn

2.TextView

Đây là một view cũng rất phổ biến chuyên để hiển thị các đoạn văn bản lên, thằng này rất dễ dùng và tùy chỉnh cũng dễ nữa nên cũng không có gì đặc sắc cả.Những thuộc tính cơ bản của nó như set màu chữ, kích thước chữ, font, text… y chang mấy thuộc tính CSS cho văn bản trong CSS vậy đó.Đoạn code TextView ở trên như sau:


android:textStyle : đây là thuộc tính để các bạn set kiểu chữ cho văn bản mà TextView sẽ hiển thị , nó có các giá trị như: bold, italic, nomal … (đậm/in nghiêng/ bình thường)

android:gravity : canh lề cho các thuộc tính bên trong view, ở trên mình có nói thằng android:layout_gravity là để canh lề cho view so với kich thước màn hình/view, coòn thằng android:gravity là canh lề các đối tượng bên trong so với view đó.Y chang thuộc tính padding của CSS, còn layout_gravity thì giống như margin .

Ở view trên mình set giá trị “center” có nghĩa là tất cả văn bản trong TextView sẽ canh lên giữa với TextView đó.

android:text : đây là nơi các bạn ghi chữ vào, bạn có thể set cứng chứ như trên hoặc là dùng code thuần để chèn chữ vào và mình sẽ ví dụ trong video ở dưới nhé, cái này bạn phải học qua java sẽ hiểu hơn.

android:layout_width/height : y chang bên trên mình đã giải thích.

3.EditText

View này dùng để cho người dùng nhập văn bản, số… vào để truyền dữ liệu hay tính toán gì đó.Ví dụ bạn làm một ứng dụng máy tính bỏ túi thì khi ghi số vào thì bạn sẽ dùng EditText để người dùng nhập, chứ TextView thì không làm được điều này.


Những thuộc tính này cũng y chang như TextView thôi:

android:hint : thuộc tính này nhằm chèn một đoạn văn mờ ở trong EditText nhằm gợi ý cho người dùng biết sẽ làm gì, bạn xem hình ảnh ở phía trên là thấy.

android:layout_margin : thuộc tính dùng để canh lề cho view so với màn hình hoặc view khác, ở đây nếu bạn không ghi layout_marginLeft/Right/Top/Bottom thì mặc định nó sẽ canh lề trái-phải-trên-dưới luôn nhé, y chang CSS luôn, mình nghĩ bạn nào học qua css thì mấy thuộc tính View này rất dể hiểu luôn.

4.Button

Đây chính là View mà nhiều người dùng đến nhất bởi vì nó thường dùng để bắt các sự kiện Click mà đa phần ứng dụng nào cũng có cả.


Tất cả các thuộc tính trên mình đã nói rồi , ở mỗi view sẽ có một thuộc tính tên là android:id mình chỉ để ở Button để ví dụ thôi nhé. Đây là thuộc tính rất quan trọng dùng để phần biệt các View với nhau, ví dụ một màn hình có 2 nút Button thì hai nút này sẽ phân biệt với nhau bởi thuộc tính id ở trên.

Và dự vào ID này để bạn sẽ xử lí các sự kiện trong android và mình sẽ nói đến ở bài 11 trong loạt series này nhé.

Dưới đây là video hướng dẫn dành cho các bạn nào muốn trực quan hơn và chưa hiểu thì hãy xem qua nhé.

Video tìm hiểu về các view cơ bản trong android

Tải source code


Mọi ý kiến thắc mắc và góp ý xin các bạn cứ comment bên dưới blog nhé.Chúc các bạn thành công!

Tiếp theo

Bài 8: Textview, EditText, Button, ImageView
5 (100%) 3 votes

One Response

  1. Erma04 October 23, 2017

Add Comment

*