Ở bài trước chúng ta đã được giới thiệu về layout trong android, hôm nay khoa hoc lap trinh android sẽ cùng các bạn thực hành vẽ giao diện áp dụng các layout đó. Vẽ giao diện sử dụng LinearLayout. Có lẽ các bạn đã quá quen thuộc với facebook, hôm nay mình sẽ vẽ giao diện form đăng nhập của facebook như sau. Layout demo Ở đây mình không hướng dẫn các bạn vẽ giống hệt ảnh mà chỉ làm sao cho các bạn hiểu vấn đề và có thể giải quyết nó. Các bạn chuẩn bị 1 icon facebook trong thư mục drawable và bắt đầu nhé. Nhìn hình các bạn có thể phân tích giao diện thành những phần nhỏ, các control được trải dài từ trên xuống dưới nên ta sẽ dùng 1 LinearLayout có kiểu vertical. Trên cùng là 1 ImageView để hiển thị icon, tiếp là 1 LinearLayout có kiểu horizontal chứa 2 TextView. Các control còn lại các bạn vẽ bình thường, các bạn có thể tham khảo đoạn XML mẫu của tôi. <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="schemas.android.com/apk/res/android" xmlns:app="schemas.android.com/apk/res-auto" xmlns:tools="schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#cc076fed" androidrientation="vertical" androidaddingBottom="@dimen/activity_vertical_margin" androidaddingLeft="@dimen/activity_horizontal_margin" androidaddingRight="@dimen/activity_horizontal_margin" androidaddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context=".MainActivity" tools:showIn="@layout/activity_main" androidadding="20dp"> <ImageView android:layout_width="120dp" android:layout_height="120dp" android:layout_gravity="center" android:background="@drawable/iconfb" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" androidrientation="horizontal" androidaddingTop="30dp"> <TextView android:layout_width="0px" android:layout_height="wrap_content" android:layout_weight="1" android:gravity="right" androidaddingRight="20dp" android:text="Tiếng Việt" android:textColor="#b4b0b0" android:textSize="25sp" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" androidaddingLeft="20dp" android:text="Thay đổi" android:textColor="#f9f3f3" android:textSize="25sp" /> </LinearLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" androidrientation="vertical" androidaddingTop="100dp" androidaddingBottom="50dp"> <EditText androidaddingTop="30dp" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="Email hoặc điện thoại" android:textColor="#e80a0909" android:textSize="30sp" /> <EditText androidaddingTop="30px" android:layout_width="fill_parent" android:layout_height="wrap_content" android:hint="Mật khẩu" android:textColor="#e80a0909" android:textSize="30sp" /> </LinearLayout> <Button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Đăng nhập" android:textSize="30sp" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" androidaddingTop="100px" android:text="Đăng ký Facebook " android:textColor="#f9f3f3" android:textSize="25sp" /> <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" androidaddingTop="50dp" android:text="Quên mật khẩu?" android:textColor="#f9f3f3" android:textSize="25sp" /> </LinearLayout> Đây là kết quả khi ta chạy app. Layout demo Để cho các control đẹp lung linh, các bạn sẽ phải tìm hiểu thêm về selector, các bạn có thể tham khảo. Vẽ giao diện sử dụng RelativeLayout. Vẫn với hình trên nhưng tôi sẽ dùng relativelayout để vẽ. Các bạn chú ý đặt id cho các control sao cho gọn và dễ nhớ. Các bạn có thể tham khảo đoạn XML của mình <RelativeLayout xmlns:android="schemas.android.com/apk/res/android" xmlns:app="schemas.android.com/apk/res-auto" xmlns:tools="schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#cc076fed" androidadding="20dp" androidaddingBottom="@dimen/activity_vertical_margin" androidaddingLeft="@dimen/activity_horizontal_margin" androidaddingRight="@dimen/activity_horizontal_margin" androidaddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context=".MainActivity" tools:showIn="@layout/activity_main"> <ImageView android:id="@+id/imgIcon" android:layout_width="120dp" android:layout_height="120dp" android:layout_centerHorizontal="true" android:background="@drawable/iconfb" /> <ImageView android:id="@+id/imgPoint" android:layout_width="5dp" android:layout_height="5dp" android:layout_below="@+id/imgIcon" android:layout_centerHorizontal="true" android:layout_marginTop="80dp" android:background="#d1c3c3" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/imgIcon" android:layout_marginTop="70dp" android:layout_toLeftOf="@id/imgPoint" androidaddingRight="20dp" android:text="Tiếng Việt" android:textColor="#b4b0b0" android:textSize="25sp" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/imgIcon" android:layout_marginTop="70dp" android:layout_toRightOf="@id/imgPoint" androidaddingLeft="20dp" android:text="Thay đổi" android:textColor="#efe6e6" android:textSize="25sp" /> <EditText android:id="@+id/edtUser" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/imgPoint" android:layout_marginTop="80dp" android:hint="Email hoặc điện thoại" android:textSize="30sp" /> <EditText android:id="@+id/edtPass" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/edtUser" android:layout_marginTop="10dp" android:hint="Mật khẩu" android:textSize="30sp" /> <Button android:id="@+id/btnLogin" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/edtPass" android:layout_marginTop="80dp" android:background="#3363b6" android:hint="Đăng nhập" android:textSize="30sp" /> <TextView android:id="@+id/txtSignUp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/btnLogin" android:layout_centerHorizontal="true" android:layout_marginTop="50dp" android:text="Đăng ký Facebook" android:textSize="25sp" /> <TextView android:id="@+id/txtPassError" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/txtSignUp" android:layout_centerHorizontal="true" android:layout_marginTop="50dp" android:text="Quên mật khẩu?" android:textSize="25sp" /> <ImageView android:layout_marginTop="50dp" android:layout_below="@id/txtSignUp" android:layout_marginLeft="50dp" android:layout_toRightOf="@id/txtPassError" android:background="@drawable/sign" android:layout_width="40dp" android:layout_height="40dp" /> Và đây là kết quả thu được: Layout demo Vừa rồi tôi đã thiết kế form đăng nhập của facebook, nếu dùng RelativeLayout ta có thể vẽ được mọi thứ nhưng việc căn ke sao cho chuẩn nhé. Ở đây mình dang build trên genymotion màn 1280 x 768 nhé, nếu bạn nào chưa có Device riêng các bạn có thể sử dụng genymotion hoặc bluestack. Chúc các bạn thành công!
