Lab2: XÂY DỰNG GIAO DIỆN TRONG ANDROID

Giảng viên: TS. Nguyễn Thị Bích Ngân

I. Tóm tắt lý thuyết

1
2
2. ListView: là dạng sắp xếp các control theo dạng dạnh danh sách từ trên xuống dưới.

Cách tạo ListView đơn giản

Để có thể hiện thị dữ liệu lên listview ta cần có 3 thành phần:

– Data Source: Nguồn dữ liệu mà người dùng muốn hiển thị lên listview (là dữ liệu tĩnh, từ file, hoặc từ
internet,..)
– ListView: là control để hiện thị dữ liệu
– Adapter: Là phần để kết nối dữ liệu giữa DataSource và ListView
Cách tạo ListView đơn giản
Để sử dụng ListView ta có thể tạo bằng cách sử dụng giao diện như sau: Từ cửa số Pallete chọn ListView
trong nhóm Containers rồi đưa vào ứng dụng ta sẽ được giao diện ban đầu như sau:

3
Sau khi đưa listview vào trong giao diện ta có file xml layout có khai báo như sau:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="fill_parent"
android:layout_height="50dp"
android:text="What do you choice operator system?"
android:id="@+id/textView"
android:background="#ffff00" />

<ListView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/dsHDH" />
</LinearLayout>

Đưa dữ liệu hiển thị lên trên listview:

Lấy dữ liệu từ mảng cố định: ta sẽ xử lý trong file MainActivity.java như sau:

4
 public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.listview_one);
String[] values = new String[] {"Android", "iPhone", "Windows
Mobile","Blackberry", "WebOS", "Ubuntu", "Windows7", "Max OS
X","Linux", "OS/2" };
ListView lv=(ListView)findViewById(R.id.dsHDH);
ArrayAdapter<String> adap=new ArrayAdapter<String>(this,

android.R.layout. support_simple_spinner_dropdown_item
,values);
lv.setAdapter(adap);
}
}
Gõ tên file (giả sử là listView_values.xml) -> chon Finish. Ta sẽ gõ nội dung cho file listView_values.xml
như sau:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="myHDHs">
<item >Android</item>
<item >Windows</item>
<item >Linux</item>
<item >iOS</item>
<item >Windows Mobile</item>
<item >Ubuntu</item>
</string-array>
</resources>

Trong file xml ta tạo một mảng string có tên là myHDHs chứa danh sách các hệ điều hành. Mỗi hệ điều
hành sẽ được đặt trong cặp thẻ <item> </item>
Khi tạo xong trong android tự động gán cho mảng myHDHs một mã trong R.java như sau:
public static final int myarray=0x7f0b0000;

Trong file MainActivity.java ta chỉ cần thay đổi câu lệnh:

String[] values = new String[] { "Android", "iPhone", "WindowsMobile", "Blackberry", "WebOS",
"Ubuntu", "Windows7", "Max OS X", "Linux", "OS/2" };
Bằng câu lệnh mới:
String[] values = getResources().getStringArray(R.array.myHDHs);

Để có thể xử lý khi người dùng chọn một mục trong ListView ta có thể thêm đoạn xử lý như sau:

5
 final TextView chon=(TextView) findViewById(R.id.textView);
lv.setOnItemClickListener(
new AdapterView.OnItemClickListener() {
public void onItemClick(AdapterView<?> arg0,
View arg1,
int arg2,
long arg3) {
chon.setText("day la lua chon cua toi la: " +
values[arg2]);
}
});

Đoạn code trên sẽ hiển hệ điều hành đã TextView ở phía trên ListView.

II. Nội dung thực hành

Bài tập 1: Hãy xây dựng ứng dụng sau từ dữ liệu tĩnh và dữ liệu trong file xml (giống như trong
phần lý thuyết)

Bài tập 2: Hiệu chỉnh lại listview đã xây dựng ở bài lại như sau:

6
Hướng dẫn thực hiện:
Bước 0: copy hình ảnh vào thư mục drawable

Bước 1: Thiết kế lớp Flag

7
public class Flag {
int id;
String name;
public Flag(int id, String name) {
this.id = id;
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public static ArrayList initFlag(){
ArrayList<Flag> arrayList = new ArrayList<>();
arrayList.add(new Flag(R.drawable.vietnam, "Viet Nam"));
arrayList.add(new Flag(R.drawable.ecuador, "Ecuador"));
arrayList.add(new Flag(R.drawable.estonia, "Estonia"));
arrayList.add(new Flag(R.drawable.france, "France"));
arrayList.add(new Flag(R.drawable.italy, "Italy"));
arrayList.add(new Flag(R.drawable.laos, "Laos"));
arrayList.add(new Flag(R.drawable.vietnam, "Viet Nam"));
arrayList.add(new Flag(R.drawable.ecuador, "Ecuador"));
arrayList.add(new Flag(R.drawable.estonia, "Estonia"));
arrayList.add(new Flag(R.drawable.france, "France"));
arrayList.add(new Flag(R.drawable.italy, "Italy"));
arrayList.add(new Flag(R.drawable.laos, "Laos"));
arrayList.add(new Flag(R.drawable.vietnam, "Viet Nam"));
arrayList.add(new Flag(R.drawable.ecuador, "Ecuador"));
arrayList.add(new Flag(R.drawable.estonia, "Estonia"));
arrayList.add(new Flag(R.drawable.france, "France"));
arrayList.add(new Flag(R.drawable.italy, "Italy"));
arrayList.add(new Flag(R.drawable.laos, "Laos"));
return arrayList;
}
}

8
Bước 2: Thiết kế FlagAdapter

public class FlagAdapter extends ArrayAdapter {

Context context;
ArrayList<Flag> arrayList;
int layout;

public FlagAdapter(@NonNull Context context, int resource, @NonNull

ArrayList<Flag> objects) {
super(context, resource, objects);
this.context = context;
this.arrayList = objects;
this.layout = resource;

@NonNull
@Override
public View getView(int position, @Nullable View convertView, @NonNull
ViewGroup parent) {

Flag flag = arrayList.get(position);

if(convertView == null){
convertView = LayoutInflater.from(context).inflate(layout,null);
}

ImageView img = convertView.findViewById(R.id.imageFlag);

img.setImageResource(flag.getId());
TextView txt = convertView.findViewById(R.id.flagName);
txt.setText(flag.getName());

return convertView;
}
}

9
Bước 3: Thiết kế giao diện cho Main và layout_row

Giao diện của layout Main

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.vudinhai.bt_listview.MainActivity">

<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/list"/>
</LinearLayout>

Thiết kế layout cho từng dòng của listview: layout_row

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="16dp">

<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:id="@+id/imageFlag"
android:scaleType="centerCrop"/>

<TextView
android:layout_marginLeft="16dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/flagName"
android:textSize="24sp"
android:gravity="center"
android:layout_gravity="center"/>

</LinearLayout>

10
Bước 4: xây dựng code MainActivity.java

public class MainActivity extends AppCompatActivity {

ListView list;
ArrayList<Flag> arrayList;
FlagAdapter flagAdapter;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

list = findViewById(R.id.list);

arrayList = Flag.initFlag();
flagAdapter = new FlagAdapter(MainActivity.this,
R.layout.layout_row,
arrayList);

list.setAdapter(flagAdapter);
}
}

Bước 5: Chạy và kiểm tra kết quả

Bài tập 3: Hãy hiệu chỉnh lại ứng dụng trong bài tập 10 của Lab1 để có thể lưu thông tin đăng nhập cho lần
đăng nhập sau:

Bài tập 4: Thiết kế giao diện như hình bên dưới và thực hiện chức năng lấy các thông tin đã nhập và chọn
gởi qua activity thể hiện thông tin cá nhân đã nhập

11
Bài 5. Thiết kế giao diện như hình bên dưới và thực hiện các chức năng:

- Nhập các thông tin của nhân viên, sau đó nếu click Nhập NV thì sẽ thêm vào danh sách
nhân viên bên dưới.
- Nhân viên nào được check thì khi click nút xoá sẽ xoá item đó.
--HẾT--

12