Bài 5: How to work with layouts and widgets

How to work with layouts and widgets

 - An introduction to layouts and widgets

 - How to work with layouts

 - How to work with widgets

----------------------

1. An introduction to layouts and widgets
 - Layout định nghĩa cấu trúc cho giao diện người dùng. Các loại layout sau:
   
 - Widgets các đối tượng dùng để tạo giao diện trong android. Danh sách các loại widgets:

   Sau đây là hệ thống phân lớp của Android widgets và layout.

2. How to work with layouts:
2.1 Linear layout: Hay được sử dụng nhất, cho phép bố trí các phần tử trong nó theo dạng nằm ngang hoặc nằm dọc bằng cách sử dụng thuộc tính android:orientation=:
       "horizontal" sắp xếp theo hàng ngang 
       "vertical" sắp xếp hàng dọc.

Giải thích một số thuộc tính:
 + android:layout_width: độ rộng của thành phần wrap_content hoặc match_parrent
 + android:layout_height: độ cao của thành phần
         . wrap_content: co nhỏ vừa nội dung chứa nó
         . match_parrent (fill_parrent tương tự như match_parrent nhưng dùng cho <= API 8): giãn nội dung bằng thằng chứa nó
 + android:layout_weight: độ rộng của thành phần so với các thành phần khác, ví dụ trong một hàng ngang có chứa 3 button lần lượt set giá trị weight = 2, weight = 1, weight = 1 thì kích thước chiều ngang của 3 button lần lượt chiếm: 50%, 25% và 25% chiều ngang.

 + android:gravity: canh trọng tâm của view của chính nó.
 
 + android:layout_gravity: Canh trọng tâm của view so với phần cha của nó.

 + android:padding: Canh các đối tượng phía trong cách biên một khoảng cách (dp)
      Ví dụ: Trong đối tượng A set giá trị android:padding = "5dp" tức là các khoảng cách từ đối tượng B tới các cạnh đối tượng A lần lượt là "5dp".

       . Các thuộc tính: android:paddingLeft="5dp" tức là khoảng cách (1) trong hình dưới bằng 5dp

       . Các thuộc tính: android:paddingTop="5dp" tức là khoảng cách (2) trong hình dưới bằng 5dp

       . Các thuộc tính: android:paddingRight="5dp" tức là khoảng cách (3) trong hình dưới bằng 5dp

       . Các thuộc tính: android:paddingLeft="5dp" tức là khoảng cách (4) trong hình dưới bằng 5dp

 + android:layout_margin: Canh vị trí của đối tượng  với lề của layout một khoảng cách nào đó (dp)

Ví dụ 1: Thiết kế một Linear layout với 2 button xếp theo một cột (vertical orientation)

Ví dụ 2: Thiết kế LinearLayout như sau

Ví dụ 3: Thiết kế LinearLayout như sau

Outline:

Mã code xml:

<LinearLayout 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:orientation="vertical"

    android:paddingBottom="5dp">

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal"

        android:layout_marginBottom="5dp">

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="4" />

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="5" />

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="6" />

        <Button

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:text="+" />

    </LinearLayout>

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="horizontal" >

        <LinearLayout

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_weight="3"

            android:orientation="vertical" >

            <LinearLayout

                android:layout_width="match_parent"

                android:layout_height="0dp"

                android:layout_marginBottom="5dp"

                android:layout_weight="3"

                android:orientation="horizontal" >

                <Button

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:text="1" />

                <Button

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:text="2" />

                <Button

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:text="3" />

            </LinearLayout>

            <LinearLayout

                android:layout_width="match_parent"

                android:layout_height="0dp"

                android:layout_weight="3"

                android:orientation="horizontal" >

                <Button

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="2"

                    android:text="0" />

                <Button

                    android:layout_width="0dp"

                    android:layout_height="wrap_content"

                    android:layout_weight="1"

                    android:text="." />

            </LinearLayout>

        </LinearLayout>

        <LinearLayout

            android:layout_width="0dp"

            android:layout_height="match_parent"

            android:layout_weight="1"

            android:orientation="vertical" >

            <Button

                android:layout_width="match_parent"

                android:layout_height="match_parent"

                android:text="=" />

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

Ví dụ 4: Thiết kế giao diện máy tính cá nhân đơn giản

Outline:

Mã nguồn XML:

<LinearLayout 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:orientation="vertical"

       android:padding="5dp">

    <LinearLayout

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:orientation="vertical"

       android:layout_marginBottom="5dp">

        <EditText

              android:id="@+id/editText_hienthi"

              android:layout_width="match_parent"

              android:layout_height="wrap_content"

              android:ems="10"

              android:gravity="right" >

              <requestFocus />

        </EditText>

    </LinearLayout>

    <LinearLayout

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:orientation="horizontal" >

      

        <Button

              android:id="@+id/btn_0"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="0" />

        <Button

              android:id="@+id/btn_1"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="1" />

        <Button

              android:id="@+id/btn_2"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="2" />

        <Button

              android:id="@+id/btn_3"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="3" />

    </LinearLayout>

    <LinearLayout

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:orientation="horizontal" >

        <Button

              android:id="@+id/btn_4"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="4" />

        <Button

              android:id="@+id/btn_5"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="5" />

        <Button

              android:id="@+id/btn_6"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="6" />

        <Button

              android:id="@+id/btn_7"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="7" />

    </LinearLayout>

    <LinearLayout

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:orientation="horizontal" >

        <Button

              android:id="@+id/btn_8"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="8" />

        <Button

              android:id="@+id/btn_9"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="9" />

        <Button

              android:id="@+id/btn_xoa"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="C" />

        <Button

              android:id="@+id/btn_tinh"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="=" />

    </LinearLayout>

    <LinearLayout

       android:layout_width="match_parent"

       android:layout_height="wrap_content"

       android:orientation="horizontal" >

        <Button

              android:id="@+id/btn_cong"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="+" />

        <Button

              android:id="@+id/btn_tru"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="-" />

        <Button

              android:id="@+id/btn_nhan"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="*" />

        <Button

              android:id="@+id/btn_chia"

              android:layout_width="wrap_content"

              android:layout_height="wrap_content"

              android:layout_weight="1"

              android:text="/" />

    </LinearLayout>

</LinearLayout>

2.2 Table layout:

2.3 RelativeLayout:
- RelativeLayout là một view group hiển thị các thành phần con dựa vào mối quan hệ vị trí giữa chúng với nhau hoặc giữa chúng với thành phần cha chứa nó.
- Một số thuộc tính:

- Ví dụ 1: Dùng RelativeLayout tạo giao diện như sau

  Mã XML:

<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"

    tools:context="com.example.relativelayout.MainActivity" >

       <TextView

        android:id="@+id/lblEmail"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:padding="5dp"

        android:text="Email" />

      

       <EditText

        android:id="@+id/edEmail"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@id/lblEmail" />

      

       <TextView

        android:id="@+id/lblPassword"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@id/edEmail"

        android:layout_marginTop="10dp"

        android:padding="5dp"

        android:text="Password" />

      

       <EditText

        android:id="@+id/edPassword"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_below="@id/lblPassword"

        android:layout_marginBottom="10dp" />

      

       <Button

        android:id="@+id/btnLogin"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentLeft="true"

        android:layout_below="@id/edPassword"

        android:layout_centerHorizontal="false"

        android:layout_centerInParent="false"

        android:layout_centerVertical="false"

        android:layout_marginRight="10dp"

        android:text="Login" />

      

       <Button

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="false"

        android:layout_alignTop="@id/btnLogin"

        android:layout_toRightOf="@id/btnLogin"

        android:text="Cancel" />

</RelativeLayout>

- Ví dụ 2: Dùng RelativeLayout tạo giao diện như sau

  Mã XML:

<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">

    <TextView

        android:id="@+id/tvURL"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:paddingTop="15dp"

        android:text="URL:" />

    <EditText

        android:id="@+id/edtURL"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_alignBaseline="@id/tvURL"

        android:layout_toRightOf="@id/tvURL" />

    <Button

        android:id="@+id/btnGo"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignRight="@id/edtURL"

        android:layout_below="@id/edtURL"

        android:text="Go" />

    <Button

        android:id="@+id/btnClear"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_alignTop="@id/btnGo"

        android:layout_toLeftOf="@id/btnGo"

        android:text="Clear" />

</RelativeLayout>

2.4: FrameLayout:


2.5: GridLayout:

2.6 TabHost Layout:
- Một TabHost Layout gồm có 3 phần : TabHost, TabWidget và FrameLayout

. TabHost: Là container chính chứa các Tab buttons và Tab contents
. TabWidget: Để định dạng cho các Tab buttons : Nhãn , icon, …
. FrameLayout: là container để chứa các layout cho Tab contens. Chỉ có FrameLayout là view group được dùng cho Tab contents, không thể dùng các loại Layout khác.
- Ví dụ: tạo giao diện như sau

3. How to work with widgets:
3.1: TextView:
 - Text không thể chỉnh sửa trực tiếp bởi người dùng. Thường sử dụng kèm với một đối tượng widgets khác.
- Các thuộc tính liên quan của TextView:
  + android:text="Text": giá trị của chính label
  + android:typeface
  + android:textStyle  Kiểu chữ: bold, italic hoặc bold và italic
  + android:textColor="#FF00000" Định dạng màu chữ (RGB hex format)

3.2: EditText:
- EditText là class con của TextView
- Các thuộc tính liên quan của EditView:
  + android:autoText
  + android:capitalize
  + android:digits
  + android:singleLine 
  + android:numeric 
  + android:password
  + android:phoneNumber

3.3: Button:
- Button là class con của TextView
- Các thuộc tính liên quan của Button:
  + 
  + 
  + 

3.4: CheckBox:

3.5: RadioButton:

3.6: Spinner:

3.7: ProgressBar:

3.8: SeekBar:

3.9: RatingBar:

3.10: ImageView:

3.11: ImageButton:

3.12: DatePicker:

3.13: TimePicker:

3.14: CalendarView:

3.15: ScrollView:


--------------------
Bài tập:
1.

2.

3.