CHƯƠNG VII: Xử lý giao diện nâng cao (tt)

CUSTOM LAYOUT
(LƯU HÀNH NỘI BỘ)
NỘI DUNG

1. Giới thiệu

2. Thiết kế ứng dụng với Custom – Listview

3. Thiết kế ứng dụng với Custom - Gridview
1. Giới thiệu

ListView

Custom ListView
Vì sao phải Costum layout

Để xây dựng được ListView có hai đối

tượng trở lên trong mỗi dòng như trên,
thì ta phải kế thừa
từ ArrayAdapter và override phương thức
getView.

Custom ListView
 layout.simple_list_item_1
Data
LayoutListView.xml
(Image + String)

DATA DATA
ADAPTER ADAPTER

1. Khởi tạo dữ liệu cho mảng arr (còn gọi là data source)
 String arr[]={"Teo","Ty","Bin","Bo"};
2. Khai báo Array Adapter và Gán Data source vào ArrayAdapter
 ArrayAdapter<String>adapter=new ArrayAdapter<>(MainActivity.this,
android.R.layout.simple_list_item_1, arr);
3. Khai báo Listview và Đưa Adapter vào ListView
 ListView lv;
 lv.setAdapter(adapter);
2. Thiết kế ứng dụng với Costum – Listview

6
5
4
7

1
2
3
Các bước thực hiện:

B1: Xây dựng Layout cho activity_main.xml, Layout đơn giản, chỉ gồm 1
ListView
Các bước thực hiện:

B2: Xây dựng Layout activity_for_linear.xml, Layout này sẽ được gọi đến khi
ta click vào một hàng trong ListView
Các bước thực hiện:

B3:tạo thêm layout_listview.xml dùng để Custom lại ListView, dưới đây là

cấu trúc XML của nó:
Các bước thực hiện:

B4 : Dưới đây là các class hỗ trợ xử lý nghiệp vụ:

Các bước thực hiện:
Class Phone:
public class Phone {
private int Img;
private String NamePhone;
public int getImg() {
return Img;
}
public void setImg(int Img) {
this.Img = Img;
}
public String getNamePhone() {
return NamePhone;
}
public void setNamePhone(String NamePhone) {
this.NamePhone = NamePhone; } }
Các bước thực hiện:
Class MainActivity:
public class MainActivity extends Activity {

private String [] arrayName = {"Điện thoại Sky","Điện thoại

SamSung","Điện thoại IP","Điện thoại HTC","Điện thoại LG","Điện
thoại WP"};
private int []imageName =
{R.drawable.sky,R.drawable.samsung,R.drawable.ip,R.drawable.htc,R.
drawable.lg,R.drawable.wp};
private ListView listViewDemo;
//Sử dụng MyArrayAdapter thay thì ArrayAdapter
private MyArrayAdapter adapterDanhSach;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
listViewDemo = (ListView) findViewById(R.id.listview);
ArrayList<Phone>arrphone = new ArrayList<Phone>();
 Các bước thực hiện:
//Khởi tạo đối tượng adapter và gán Data source
adapterDanhSach = new MyArrayAdapter(MainActivity.this,
R.layout.layout_listview, arrphone);
// lấy custom layout
/*thiết lập data source*/);
listViewDemo.setAdapter(adapterDanhSach); );//gán Adapter vào
Lisview
//Duyệt danh sách mảng dữ liệu
for (int i = 0; i < arrayName.length; i++) {
Phone myphone = new Phone();
myphone.setNamePhone(arrayName[i]);
myphone.setImg(imageName[i]);
arrphone.add(myphone);
 //gọi hàm cập nhật giao diện
adapterDanhSach.notifyDataSetChanged();
}
Các bước thực hiện:
//Viết sự kiện khi click vào đối tượng trong ListView
listViewDemo.setOnItemClickListener(new
AdapterView.OnItemClickListener() {
  @Override
public void onItemClick(AdapterView<?> arg0, View
arg1, int arg2, long arg3) {
Intent intent1 = new Intent(MainActivity.this,SubActivity.class);
Bundle bundle = new Bundle();
bundle.putString("TITLE", arrayName[arg2]);
intent1.putExtras(bundle);
startActivity(intent1);
}
  });
Các bước thực hiện:
Class SubActivity:
public class SubActivity extends Activity {

private Bundle extra;

EditText edtdthoai;
@Override

protected void onCreate(Bundle savedInstanceState) {

// TODO Auto-generated method stub
super.onCreate(savedInstanceState);

setContentView(R.layout.activity_for_linear);
edtdthoai = (EditText)findViewById(R.id.edtdthoai);
extra = getIntent().getExtras();

String title = extra.getString("TITLE");

Edtdthoai.setText(title)

Toast.makeText(SubActivity.this, title, Toast.LENGTH_LONG).show();

}
Các bước thực hiện:
Class MyArrayAdapter:
public class MyArrayAdapter extends ArrayAdapter<Phone>{

Activity context = null;

ArrayList<Phone>myArray = null;

int LayoutId;
Các bước thực hiện:

 * Constructor này dùng để khởi tạo các giá trị

 * từ MainActivity truyền vào

 * @param context : là Activity từ Main

 * @param layoutId: Là layout custom do ta tạo (layout_listview.xml)

 * @param arr : Danh sách nhân viên truyền từ Main

public MyArrayAdapter(Activity context, int LayoutId,ArrayList<Phone>arr) {

super(context, LayoutId,arr);

// TODO Auto-generated constructor stub

this.context = context;

this.LayoutId = LayoutId;

this.myArray = arr; }
Các bước thực hiện:
 * hàm dùng để custom layout, ta phải override lại hàm này
 * từ MainActivity truyền vào
 * @param position : là vị trí của phần tử trong danh sách điện thoại
 * @param convertView: convertView, dùng nó để xử lý Item
 * @param parent : Danh sách điện thoại truyền từ Main
 * @return View: trả về chính convertView
 */
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
// TODO Auto-generated method stub
LayoutInflater inflater = context.getLayoutInflater();
convertView = inflater.inflate(LayoutId, null);
final Phone myphone = myArray.get(position);
//dòng lệnh lấy ImageView ra để hiển thị hình ảnh điện thoại
final ImageView imgitem =
(ImageView)convertView.findViewById(R.id.imgAvatar);
imgitem.setImageResource(myphone.getImg());
//dòng lệnh lấy TextView ra để hiển thị tên điện thoại
final TextView myname =
(TextView)convertView.findViewById(R.id.tvTitle);
myname.setText(myphone.getNamePhone());
return convertView;
3. Thiết kế ứng dụng với Costum - Gridview
Yêu cầu: Xây dựng ứng dụng có giao diện như sau, sử dụng Custom
GridView. Mỗi Ô trong GridView sẽ có 2 đối tượng: ImageView (Chứa hình
ảnh) và TextView (chứa tên ảnh). Khi chúng ta click vào một dòng trong
GridView, chương trình sẽ gọi đến một Activity mới có dạng như sau