Lập trình android C6 các đối tượng đồ họa trên android

Ch

ng 6

CÁC

IT

NG

H A

TRÊN ANDROID

Lê V n H nh



N I DUNG
1.Gi i thi u
2.Basic View
3.Picker View
4.Display View

5.Additional View


1. GI I THI U
• View là đ n v c n b n c a giao di n đ ho trên
Android. M t View đ i di n cho m t widget.
• View là các thành ph n xây d ng nên ng d ng, view h

tr vi c xây d ng các t ng tác gi a ng i dùng và ng
d ng c n xây d ng
• M t View đ c
android.view.View.

d n

su t

t

các

class:

• M i View đ c xác đ nh b i id. Id c a View ph i có đ nh
d ng “@+id/tenView”.
VD: android:id="@+id/textView1"


1. GI I THI U

• Phân lo i View:

o Basic View: là nh ng đ i t ng View th ng xuyên s
d ng nh TextView, EditText, Button, …
o Picker View: t o ra các view cho phép ng i dùng l a
ch n m t option, ngày tháng hay th i gian nào đó.
o Display View: hi n th hình
ImageSwitcher.

nh nh

Gallery và

o Menu: dùng đ t o giao di n menu l a ch n

o Additional View: nh ng đ i t
AnalogClock và DigitalClock

ng View nh


1. GI I THI U

• M t s thu c tính dung chung (cho đa s các view):
– Style: n u không s d ng, hình th c c a view s theo
d ng m c đ nh. Ng c l i s đ nh d ng hình th c
khác l cho view.
VD:


1. GI I THI U

• Ph ng th c findViewById(R.id.id c a view):
– Dùng đ tìm đ i t ng view có id đ c ch ra trong
file xml.
– Ph ng th c findViewById(R.id.id c a view) s tr
v m t đ i t ng ki u View nên ta c n ép ki u đ i
t ng đ c tr v thành ki u c n dung (Button,

EditText, …). Nh v y, t đây ta có th g i các
ph ng th c khác đ thay đ i các thu c tính c a đ i
t ng view c n dùng.
– VD:
Button btnOpen = (Button) findViewById(R.id.btnOpen);
btnOpen.setOnClickListener(new View.OnClickListener() {
publicvoid onClick(View v) {
displayToast("You have clicked the Open button");
}


1. GI I THI U

• Tham kh o v giá tr c a màu s c (trong Android dùng
hex
color):
t i
v
t i . Giao
di n nh sau:


2. BASIC VIEW
G m các view
– TextView: hi n th n i dung v n b n
– EditText: là m t class con c a TextView, b sung
thêm kh n ng cho phép ch nh s a đo n text đang
hi n th trên nó.
– Button: Nút nh n.
– ImageButton: Nút nh n có h tr hi n th hình nh.

2. BASIC VIEW

– CheckBox: cho phép ch n l a. Có hai tr ng thái:
Checked ho c Unchecked.
– RadioButton: c ng là lo i ch n l a (nên c ng có hai
tr ng thái: Checked và Unchecked.

– RadioGroup: đ c s d ng đ nhóm m t ho c nhi u
đ i t ng RadioButton. Cho phép ch đ c check
ch n m t RadioButton trong cùng m t group.
– ToggleButton: Th hi n hai tr ng thái: Check ho c
Uncheck có s d ng đèn báo (light indicator).


2. BASIC VIEW

2.1. Button:

java.lang.Object
android.view.View
android.widget.TextView
android.widget.Button

• Ph ng th c btnOpen.setOnClickListener(): đ gán cho đ i
t ng btnOpen m t đ i t ng d ng đ l ng nghe s ki n ng i
nh n click lên đ i t ng btnOpen.
• Interface OnClickListener: M t button mu n x lý đ c s
ki n khi ng i dùng click lên Button thì đ i t ng đó ph i cài

đ t (implement) l i interface OnClickListener. Interface này ch
có duy nh t m t ph ng th c là public void onClick(View v).
• Thu c tính Style: thay đ i d ng th c khác cho Button
VD: style="?android:attr/buttonStyleSmall"
. . .

/>


2. BASIC VIEW
2.1. Button: (gi s đã có button có id là btnOpen) (tt)
• Ví d : (s không xây d ng m t class riêng bi t đ x lý s ki n
ng i dùng click lên đ i t ng btnOpen mà s s d ng inner
class ngay trong file nh ph n code sau:
publicclass main extends Activity {
@Override
publicvoid onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
Button btnOpen = (Button) findViewById(R.id.btnOpen);
btnOpen.setOnClickListener(new View.OnClickListener() {
publicvoid onClick(View v) {
displayToast("You have clicked the Open button");
}
});
}
}

2. BASIC VIEW
2.1. Button: (gi s đã có button có id là btnOpen) (tt)
• Gi i thích ví d :
 ây là m t cách khai báo t t m t inner class và ghi đè
(override) l i ph ng th c là public void onClick(View v)
c a interface OnClickListener. Trên ph ng th c onClick
này ta g i ph ng th c displayToast() đã đ c cài đ t
trong class.
 B ng cách này khi ng i dùng nh n lên đ i t ng btnOpen
thì h th ng s g i ph ng th c onClick k trên. Tham s
View v đi kèm đ c truy n theo ph ng th c onClick chính
là đ i t ng mà ng i dùng m i t ng tác (trong tr ng
h p này c ng chính là đ i t ng btnOpen). Ta có th s
d ng ph ng th c getId đ l y v id c a đ i t ng đ c g i
kèm.


2. BASIC VIEW

2.2. ImageButton:

java.lang.Object
android.view.View
android.widget.ImageView

android.widget.ImageButton

•

i t ng ImageButton c ng t ng t nh Button
nh ng
có
h
tr
thêm
thu c
tính
android:src="@drawable/icon" đ gán hình n n cho
ImageButton.

• L u ý:
o t t c các hình nh s d ng trên giao di n c a ng d ng
android c n ph i đ t trong th m c res/drawable
o Tên các file hình nh này ch đ
z], [0-9], _ (d u g ch d i)

c dùng các ký t sau: [a-


2. BASIC VIEW

2.3. CheckBox:

java.lang.Object
android.view.View
android.widget.TextView
android.widget.Button
android.widget.CompoundButton
android.widget.CheckBox

(gi s đã có CheckBox có id là chkSave)
• T o liên k t đ i t ng CheckBox:
CheckBox checkBox = (CheckBox) findViewById(R.id.chkSave);

• G n đ i t
CheckBox:

ng l ng nghe s

ki n ng

i dùng nh n lên

VD:
checkBox.setOnClickListener(new View.OnClickListener()
{
publicvoid onClick(View v)
{
// vi t mã l nh t i đây
}
});


2. BASIC VIEW
2.3. CheckBox: (tt)
• Thu c tính style: thay đ i d ng th c khác cho CheckBox
VD: android:id="@+id/star"
android:text=“Phái n "

android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

android:id="@+id/star"

style="?android:attr/starStyle"
android:text=“Phái n "
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

• Thu c tính checked: thi t l p tr ng thái đ
ch n cho CheckBox
android:checked="true"

c (hay không đ

c)


2. BASIC VIEW
2.3. CheckBox: (gi s đã có CheckBox có id là chk1) (tt)

• Ph

ng th c:

– setChecked(boolean): nh n giá tr Boolean, giúp thi t l p d u
check trên checkbox. Khi Boolean là
• true: thi t l p d u check (VD: chk1.setchecked(true))

• false: xóa d u check
(VD:chk1.setchecked(false))
• isChecked(): th ng dùng trong hàm OnClick đ ki m tra
CheckBox hi n t i đang tr ng thái checked hay unchecked.
VD:
checkBox.setOnClickListener(new View.OnClickListener()
{
publicvoid onClick(View v)
{
if (((CheckBox)v).isChecked())
{
displayToast ("CheckBox is checked");
chk1.setChecked(false);
}
else
{
displayToast ("CheckBox is unchecked");
chk1.setChecked(false);
}
}
});


2. BASIC VIEW

2.3. ToggleButton:

java.lang.Object
android.view.View
android.widget.TextView

android.widget.Button

android.widget.CompoundButton
android.widget.ToggleButton

• Cách s d ng và thu c tính c a ToggleButton c ng
t ng t nh CheckBox
• ToggleButton có b sung thêm đèn báo (light
indicator) đ làm n i b t ToggleButton.


2. BASIC VIEW

2.4. RadioButton:

java.lang.Object
android.view.View

android.widget.TextView
android.widget.Button
android.widget.CompoundButton
android.widget.RadioButton

• Cách s d ng và thu c tính c a RadioButton c ng
t ng t nh CheckBox


2. BASIC VIEW

2.5. RadioGroup:

java.lang.Object
android.view.View
android.view.ViewGroup
android.widget.LinearLayout
android.widget.RadioGroup

• Cách s d ng và thu c tính c a RadioButton c ng t
nh CheckBox
• Tham kh o:

ng t

/>

2. BASIC VIEW

2.5. RadioGroup: (gi s đã có CheckBox có id là rad)

• VD1: Group g m 2 RadioButton. Khi check ch n RadioButton
có id là rdb1 thì rdb2 t đ ng chuy n thành tr ng thái
unchecked. T ng t , n u ch n l i rdb2 thì rdb1 t đ ng
chuy n thành tr ng thái unchecked.


android:id="@+id/rdbGp1"

android:layout_width="fill_parent“
android:layout_height="wrap_content"
android:orientation="vertical“

>


android:id="@+id/rdb1“

android:layout_width="fill_parent“
android:layout_height="wrap_content“
android:text="Option 1“ />


android:id="@+id/rdb2“

android:layout_width="fill_parent“
android:layout_height="wrap_content"
android:text="Option 2“
/>

</RadioGroup>


2. BASIC VIEW

2.5. RadioGroup: (gi s đã có RadioGroup có id là rdbGp1)
• VD2: hi n th ID c a RadioButton đ

c Check

// t o liên k t đ n RadioGroup có id là rdbGp1

RadioGroup radioGroup = (RadioGroup)findViewById(R.id.rdbGp1);
/*gán cho radioGroup đ i t ng s x lý s ki n khi mà l a
ch n c a các RadioButton trong RadioGroup rdbGp1 thay đ i */
radioGroup.setOnCheckedChangeListener(new
OnCheckedChangeListener()
{
publicvoid onCheckedChanged(RadioGroup group, int checkedId)
{
//displays the ID of the RadioButton that is checked
displayToast(Integer.toString(checkedId));
}
});


2. BASIC VIEW

2.6. TextView:

java.lang.Object
android.view.View
android.widget.TextView

• Hi n th đo n v n b n (không th ch nh s a)
• Thu c tính:

– android:fontFamily xác đ nh Fontch cho TextView.
VD: android:fontFamily =“tahoma”

– android:background xác đ nh màu n n
VD: android:background =“#ffooooff”

– android:textStyle xác đ nh FontStyle cho TextView.
VD: android:textStyle =“bold”

– android:textSize xác đ nh FontSize cho TextView.
VD: android:textSize =“25sp”

– android:textAppearance xác đ nh FontSize cho TextView

v i FontSize là các h ng s đ nh s n: textAppearanceLarge,
textAppearanceMedium, textAppearanceSmall.

VD: android:textAppearance="?android:attr/textAppearanceMedium”


2. BASIC VIEW

2.6. TextView:
• Thu c tính: (tt)
– android:textColor xác đ nh màu ch cho TextView.
VD: android:textColor =“@android:color/red-dark”

– android:text xác đ nh chu i s hi n th trên TextView.
VD: android:text =“Nhap so nguyen duong”

• Ph

ng th c:

– setText: hi n th thông tin lên control TextView

VD:

txt1.setText(“Hello world”);

– getText(): l y thông tin bên trong control TextView
VD:

`

String msg=txt1.getText().toString();


2. BASIC VIEW
2.7. EditText:

java.lang.Object
android.view.View
android.widget.TextView
android.widget.EditText

2.7.1. Gi i thi u: Là m t sub class c a TextView. Ngoài
ch c n ng hi n th m t đo n v n b n nh TextView ta
còn có th ch nh s a đo n text trên EditText
2.7.2. Thu c tính:

– Các thu c tính t

ng t

nh

TextView g m: fontFamily,

background, textStyle, textSize, textAppearance


2. BASIC VIEW
2.7. EditText:

2.7.2. Thu c tính:

• android:hint xu t hi n l i nh c trong EditText.
VD: android:hint=“Nh p s

d

ng"

• android:password: g m 2 giá tr

true/false (m c đ nh là
false), cho phép EditText hi n th m t đo n text d i d ng các
ký t đ c bi t nh m che d u n i dung c a đo n text
• android:editable: g m 2 giá tr true (cho, là giá tr m c
đ nh) ho c false (không cho) phép ch nh s a n i dung trong
EditText
• android:inputType: giúp đ nh ki u bàn phím (ch xu t hi n
s , ký t bình th ng, ký t bình th ng kèm ký hi u @, …)
s xu t hi n khi EditText nh n focus
VD:

Hay

android:inputType="textEmailAddress"
android:inputType="numberSigned"