Ở bài trước chúng ta đã được tìm hiểu về cách debug (gỡ lỗi) chương trình Android bằng Android Studio. Thật ra là cũng chỉ sơ lược được về các lỗi thường gặp và cách xử lý chung nhất mà thôi, còn trong quá trình làm việc sẽ có vô số lỗi mà mình không thể tổng quát hết. Show Mà thôi, lần này chúng ta sang bài học mới. Trước khi sang bài mới, đề nghị các bạn chuẩn bị kiểm tra miệng... à quên, kiểm tra mắt: Ở phần kết luận trong bài HƯỚNG DẪN DEBUG CƠ BẢN mình có đề cập đến việc tại sao nút khai báo ở ví dụ phần 2 (gỡ bug) lại không hiển thị. Vậy thì hôm nay chúng ta sẽ giải quyết nó. Quẫy thôi! Nội dungĐể có thể thực hành bài này trôi chảy, các bạn cần phải nắm chắc:
Ngoài ra ở bài này các bạn sẽ được biết về:
ViewView là gì? View đơn giản là một thành phần hiển thị trên màn hình.
Vậy chúng ta có thể phán chắc nịch luôn: Cái gì hiển thị trên màn hình thì nó là View. Trong Android có rất nhiều loại View, phù hợp nhiều nhu cầu. Bản thân lập trình viên cũng có thể tự tạo ra view của riêng mình bằng cách code các lớp Java extends từ lớp View. Tí nữa ở cuối bài biết đâu sẽ có ví dụ, hí hí. Một số loại View tiêu biểu là (mình lấy ví dụ ở bản Android 6.0 mới):
Các View có những thuộc tính khác nhau, gọi là các attributes. Ví dụ như EditText thì có attributes là maxLength (số ký tự tối đa) và maxLines (số dòng tối đa). TextView thì có fontSize (cỡ chữ) và inputType (kiểu nhập: số / chữ / email,…). Tuy nhiên các View đều có một số attributes chung như:
ViewGroupVề bản chất, Viewgroup cũng là một View (Extends từ class View), nhưng cái khác là nó có thể chứa được các View khác bên trong. Các ViewGroup thường sử dụng: LinearLayoutQuá nổi tiếng, được sử dụng rất nhiều. Các View con cấp 1 trong Layout này sẽ được sắp xếp chỉ theo 1 hướng: Dọc hoặc ngang (Vertical / Horizontal), chỉ định bằng thuộc tính android:orientation. Ví dụ: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" 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="com.howkteam.helloworld.MainActivity"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello K-Team!"/> <SeekBar style="@style/Widget.AppCompat.SeekBar.Discrete" android:layout_width="match_parent" android:layout_height="wrap_content" android:max="10" android:progress="3" android:id="@+id/seekBar"/> </LinearLayout>Ta sẽ được kết quả là một màn hình với một nút và một seekbar trên dưới: Trong LinearLayout nhiều khả năng là bạn sẽ thấy có các thuộc tính sau hay được dùng:
RelativeLayoutKhác với LinearLayout, RelativeLayout và các Layout con của nó hiển thị bằng các quan hệ với các layout trong cùng một layout mẹ, hoặc với chính layout mẹ.
Ví dụ: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/label" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Email"/> <EditText android:id="@+id/inputEmail" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@id/label"/> <Button android:id="@+id/btnLogin" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/inputEmail" android:layout_alignParentLeft="true" android:layout_marginRight="5dp" android:text="Login"/> </RelativeLayout>Với đoạn code trên, chúng ta sẽ có:
Tiếp theo, giả sử chúng ta có 2 button với kích cỡ khác nhau như sau do nội dung bên trong hoàn toàn khác: XML Code: <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=".MainActivity"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="1245678901234567890"/> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@id/button1" android:layout_below="@id/button1" android:text="CANCEL IT"/> </RelativeLayout>Để 2 nút này có độ dài ngang bằng nhau, chúng ta sẽ khiến cho nút thứ 2 căn lề phải theo nút thứ nhất bằng cách thêm code vào attributes cho button thứ 2: android:layout_alignRight="@id/button1"Kết quả là: Bằng cách này, 2 thành phần sẽ được sắp xếp theo chiều dọc trên dưới, 2 lề trái phải sẽ tự điều chỉnh chiều rộng của 2 Button. FrameLayoutFrameLayout là dạng layout rất đơn giản: Tất cả những view nằm trong đều được nhồi nhét phía trong nó. Và nếu bạn cần một layout sắp xếp theo trục tọa độ Z (giống z-index trong CSS) thì đây chính là lựa chọn phù hợp cho bạn. Ví dụ: <FrameLayout android:id="@+id/frame_layout" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <ImageView android:id="@+id/child1" android:layout_width="match_parent" android:layout_height="match_parent" android:contentDescription="Image" android:src="@mipmap/ic_launcher" /> <TextView android:id="@+id/child2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Child 2" android:layout_gravity="top|left" /> <TextView android:id="@+id/child3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Child 3" android:layout_gravity="top|right" /> </FrameLayout>Kết quả: Chúng ta sẽ có một ImageView với kích thước lấp đầy FrameLayout, và 2 TextView đè lên ImageView đó. Và nếu 2 TextView ở trên cùng một vị trí thì TextView có id child3 sẽ đè lên child2. Drawables là gì?Drawables là…
Thêm vào đó, drawables có các đặc điểm:
Để vô thư mục /drawables của Android, trong Android Studio, các bạn chuột phải vào thư mục res > drawable: Drawable có thể được đặt vào trong màn hình ứng dụng Android rất dễ dàng bằng ImageView hoặc đặt dưới dạng background của một View nào đó. Để nhập drawable vào project thì rất đơn giản: Chỉ việc copy vào thư mục drawable đã mở ở trên. Android Studio sẽ tự động nhận diện hình và đưa nó vào project: Để sử dụng drawable chúng ta thường gặp 2 dạng: Với ImageView: Gọi qua tham chiếu @drawable/<tên_file_không_bao_gồm_đuôi> của thuộc tính android:src như sau: <ImageView android:id="@+id/child1" android:layout_width="match_parent" android:layout_height="match_parent" android:contentDescription="@string/app_name" android:src="@drawable/hucau" />Và ta được: Với background của các View khác: Gọi qua tham chiếu drawable/<tên_file_không_bao_gồm_đuôi> của thuộc tính android:background: <TextView android:textColor="@color/colorAccent" android:background="@drawable/hucau" android:textSize="50sp" android:id="@+id/child2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Child 2" android:layout_gravity="top|start" />Lúc này ảnh đã thành nền của TextView và sẽ đi theo TextView đó: Xét về các loại drawable thì chúng ta có những loại sau:
Cách lắp View vào ActivityĐể đưa View vào Activity trong Android chúng ta cần qua 3 bước:
Ví dụ: MainActivity.java tương ứng với layout activity_main.xml: Cài đặt layout cho activity bằng phương thức setContentView. protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }Liên kết giữa Java Object với View bằng phương thức findViewById. Toàn bộ code của class MainActivity.java sẽ như sau: TextView textView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); textView = (TextView) findViewById(R.id.child2); }TextView textView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); FrameLayout frameLayout = (FrameLayout) findViewById(R.id.frame_layout); TextView product = new TextView(this); product.setText("Hello Kteam"); frameLayout.addView(product); } Đây cũng chính là lý do ở bài MỘT SỐ CÁCH DEBUG CƠ BẢN, Button ở ví dụ cuối cùng không hiển thị, do thiếu phương thức addView của Linear Layout bao ngoài nó. Và chúng ta được: Kết luậnQua bài này chúng ta đã nắm được View là gì, ViewGroup là gì, và cách đổ View vào Activity. Ngoài ra chúng ta đã có cái nhìn sơ bộ về Drawables và cách sử dụng Drawables trong ứng dụng. Bài sau chúng ta sẽ tìm hiểu về INTENT & MANIFEST TRONG LẬP TRÌNH ANDROID Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”. Thảo luậnNếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng. |
