Chuong 3 xay dung giao dien co ban

Chương 3: Xây dựng giao diện cơ bản

Nội dung
Chương 3
Xâ d
Xây dựng giao diện cơ bản
i diệ
bả

 Android Manifest
 Widget
 Layout
ayout

Nguyễn Nam Trung
Email : 

Android Manifest

Android Manifest (tt)

 AndroidManifest.xml để mô tả những
thông tin quan trọng của nó cho hệ
thống Android.
Android

 Ví dụ nội dung tập tin AndroidManifest.xml:

 Tên cho Java package của ứng dụng.
 Mô tả các thành phần của ứng dụng:
activity, service, broadcast receiver hoặc

content provider.
 Thông báo những permission.
 Cho biết level thấp nhất của Android API.
API
 ...

Trường CĐ Công Nghệ Thông Tin TP.HCM

<?xml version="1.0" encoding="utf-8"?>
encoding="utf
<
manifest xmlns:android="http://schemas
xmlns:android=" />android com/apk/res/android"
package="at.exam"
android:versionCode="1"
android:versionName="1.0">
android:label="@string/app_name">
<activity android:name=".Example" android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion="3" />
<
</manifest>

1


Chương 3: Xây dựng giao diện cơ bản

Widget

Widget

 Các widget sử dụng để tạo giao diện (Edit Text, Text
View...) đều là lớp con của lớp View.
 Một số widget hay được dùng để tạo giao diện:
 TextView
 EditText
 Button
 ToggleButton
 CheckBox
 RadioButton
 RatingBar
 ListView

TextView

EditText

• Được dùng để trình bày một dòng chữ (nhãn) trên layout.
• Một số thuộc tính:

• Là đối tượng nhằm cung cấp cho người sử dụng công cụ
để nhập vào các giá trị.

• Một số thuộc tính:

: thiết lập cách thức hiển thị nội dung
 android:textStyle : kiểu thể hiện font chữ (bold, italic,...)
 android:textColor : màu sắc font chữ
 android:textSize : kích thước font chữ

 android:typeface

• Ví dụ:
android:id="@+id/txtView"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:textColor="@color/text_color"
android:textSize="28px"
android:text="You were expecting something profound?"
/>

Trường CĐ Công Nghệ Thông Tin TP.HCM

:tự động in hoa ký tự đầu
:cấu hình chỉ cho phép nhập số
 android:singleLine :chỉ cho phép nhập trên một dòng
 android:capitalize
 android:digits

• Ví dụ:
android:id="@+id/edtEdit"

android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="Enter the word here"
android:capitalize="words"
/>

2


Chương 3: Xây dựng giao diện cơ bản

Button

ToggleButton

• Button là subclass của TextView, do đó hầu hết tất cả
các thuộc tính được trình bày đều có thể áp dụng cho đối
này
tượng Button này.

• Button có thể thể hiện được 2
trạng thái đóng/mở.

android:id="@+id/cmdAndroid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="10dp”
android:background="@drawable/android_button"
/>

OnClickListener cmdAndroidClick = new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
Toast.makeText(formstuff.this, "Beep Bop",
Toast.LENGTH_SHORT).show();
}
};

CheckBox
• Là đối tượng cung cấp cho người dùng công cụ lựa chọn
hay không chọn một tiêu chí hoặc tùy chọn nào đó.
kB
android:id="@+id/chkAndroid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="check it out"
/>

OnClickListener chkAndroidClick
() {
= new OnClickListener()
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if (((CheckBox)v).isChecked() == true)
//checked
else

//uncheck
}};

Trường CĐ Công Nghệ Thông Tin TP.HCM

gg
android:id="@+id/tcmdAndroid"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOn="Vibrate On"
android:textOff="Vibrate Off"
/>
OnClickListener tcmdAndroidClick = new OnClickListener() {
@O
e
de
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
ToggleButton _tcmdAndroid = (ToggleButton)v;
if(_tcmdAndroid.isChecked() == true)
//checked
else
//unchecked
}};

RadioButton

• Tương tự CheckBox nhưng tại một thời điểm chỉ có thể 1

lựa chọn duy nhất.
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
>
android:id="@+id/optRed"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Red"
d id t t "R d"
android:checked="true”/>
android:id="@+id/optBlue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Blue”/>
</RadioGroup>

3


Chương 3: Xây dựng giao diện cơ bản

RatingBar
• Cung cấp cho người dùng công cụ đánh giá, xếp hạng.
android:id="@+id/ratAndroid"
android:layout_width="wrap_content"

android:layout_height="wrap_content"
android:numStars="5"
/>

Layout

OnRatingBarChangeListener ratAndroidChange
= new OnRatingBarChangeListener() {
@Override
public void onRatingChanged(RatingBar ratingBar, float rating,
boolean fromUser) {
// TODO Auto-generated method stub
Toast.makeText(formstuff.this, "Rating: " + rating,
Toast.LENGTH_SHORT).show();
}};

Layout
Linear Layout Relative Layout

Linear Layout
Table Layout

Grid View

• Là một ViewGroup cho phép hiển thị
các thành phần con bên trong theo
một chiều nhất định (ngang hoặc
dọc).
android:orientation="horizontal"

android:layout_width="fill_parent"
android:layout
y
_height="fill
g
_p
parent"
android:layout_weight="1"
>
</LinearLayout>

Trường CĐ Công Nghệ Thông Tin TP.HCM

4


Chương 3: Xây dựng giao diện cơ bản

Linear Layout – Properties

Relative Layout

• android:orientation : sắp xếp các widget con của

• Sắp xếp các thành phần con dựa trên
mối quan hệ với các thành phần khác
h ặ với
ới biên
biê của
ủ layout.

l
t
hoặc

layout theo chiều ngang hay dọc.
• android:layout_weight : ngăn cách giữa các widget

con của layout.
• android:gravity : thiết lập cách thức widget con

được thể hiện như thế nào so với layout cha.
• android:padding : tạo khoảng cách giữa các widget

con bên trong layout.
top
left
right

android:layout_width="fill_parent"
android:layout_height="fill_parent”>
android:id="@+id/lblTypeHere"
android:text="Type here"
android:layout_width="fill_parent"
android:layout_height="wrap_content”/>
android la o t height " rap content”/>
android:id="@+id/txtContent"
android:layout_width="fill_parent"

android:layout_height="wrap_content"
android:layout_below="@id/lblTypeHere”/>
</RelativeLayout>

bottom

Table Layout
• Sắp xếp các thành phần con dựa trên
1 lưới các ô ngang và dọc.
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1”>
<TableRow>
android:layout_column="1"
android:text="Open..."
p
g
p
android:padding="3dip”/>
android:text="Ctrl-O"
android:layout_gravity="right"
android:padding="3dip”/>
</TableRow>
</TableLayout>

Trường CĐ Công Nghệ Thông Tin TP.HCM

Absolute Layout

• Sắp xếp các thành phần con
dựa theo tọa độ x, y. của mỗi
p
thành phần.
android:id="@+id/widget0“
android:layout_width="fill_parent“
android:layout_height="fill_parent">
android:id="@+id/widget30"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
y
_x="10px"
p
android:layout
android:layout_y="2px"/>
android:id="@+id/widget31"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_x="30px"
android:layout_y="202px"/>
</AbsoluteLayout>

5

Chương 3: Xây dựng giao diện cơ bản

Giới thiệu công cụ DroidDraw


Q & A

Trường CĐ Công Nghệ Thông Tin TP.HCM

6