– Tôi sẽ có một ví dụ cụ thể để bạn thực hành về trường hợp này, bạn hãy tập trung theo dõi và thực hành lại. Tôi nghĩ bài này rất thú vị.
– Bây giờ bạn mở AVD lên và nhấn tổ hợp phím ctrl+ F11 để xoay ngang màn hình, Tôi sẽ làm ví dụ về màn hình nằm ngang.
– Bạn xem màn hình trên Tôi chia ra làm 2. Bên trái cho phép nhập thông tin sinh viên, bên phải cho phép hiển thị danh sách sinh viên đã nhập. Bạn chú ý là ListView Tôi làm là Custom Layout (Mỗi dòng Lớn có 2 loại dữ liệu: mã và tên cùng 1 dòng. giới tính, năm sinh, quê quán cùng 1 dòng và chữ nhỏ hơn có màu đó in nghiêng).
– Ngày sinh dùng DatePickerDialog
– Nơi sinh dùng AutoCompleteTextView. Mỗi lần nhấn “Nhập Sv” thì chương trình sẽ cập nhật động nơi sinh vào DataSource của nó, chú ý là không cho phép trùng lắp. Trong các lần nhập nơi sinh tiếp theo thì nó phải tự động lọc giúp người sử dụng nhập lẹ hơn.
– Ta bắt đầu vào chi tiết ứng dụng.
1- Đây là cấu trúc thư mục trong ứng dụng:
-Nhìn vào cấu trúc thì bạn thấy có 2 Layout, layout chính là activity_main.xml, còn layout sinhvien_item_layout.xml là Tôi dùng để custom lại ListView (nó sẽ được xử lý trong classMyArrayAdapter).
2- Thiết kế giao diện với màn hình nằm ngang (xem hình):
– Dưới đây là Outline activity_main.xml:
– Nếu như nhìn vào Outline mà bạn có thể thiết kế được giao diện như trên thì Tôi nghĩ bạn đã thật sự hiểu về Layout, tuy nhiên Tôi vẫn cung cấp Source XML, bạn xem tham khảo
android:id = "@+id/LinearLayout1" android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity" > < LinearLayout android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:background = "#FFF0E1" android:orientation = "vertical" > < TextView android:id = "@+id/textView1" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:background = "#008000" android:text = "Nhập Thông Tin Sinh Viên:" android:textColor = "#FFFFFF" /> < TableLayout android:layout_width = "wrap_content" android:layout_height = "wrap_content" > < TableRow android:id = "@+id/tableRow2" android:layout_width = "wrap_content" android:layout_height = "wrap_content" > < TextView android:id = "@+id/textView3" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Mã:" /> < EditText android:id = "@+id/editMa" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_span = "2" > < requestFocus /> </ EditText > </ TableRow > < TableRow android:id = "@+id/tableRow3" android:layout_width = "wrap_content" android:layout_height = "wrap_content" > < TextView android:id = "@+id/textView4" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Tên:" /> < EditText android:id = "@+id/editTen" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_span = "2" /> </ TableRow > < TableRow android:id = "@+id/tableRow4" android:layout_width = "wrap_content" android:layout_height = "wrap_content" > < TextView android:id = "@+id/textView5" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Giới tính:" /> < CheckBox android:id = "@+id/chkGt" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_span = "2" android:text = "Là Nữ" /> </ TableRow > < TableRow android:id = "@+id/tableRow5" android:layout_width = "wrap_content" android:layout_height = "wrap_content" > < TextView android:id = "@+id/textView6" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Ngày sinh:" /> < EditText android:id = "@+id/editNgaySinh" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:inputType = "date" android:text = "25/09/1989" /> < Button android:id = "@+id/btnNgaySinh" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "..." /> </ TableRow > < TableRow android:id = "@+id/tableRow6" android:layout_width = "wrap_content" android:layout_height = "wrap_content" > < TextView android:id = "@+id/textView7" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:text = "Nơi sinh:" /> < AutoCompleteTextView android:id = "@+id/autoCompleteNS" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:completionThreshold = "1" android:layout_span = "2" android:ems = "10" /> </ TableRow > < TableRow android:id = "@+id/tableRow7" android:layout_width = "wrap_content" android:layout_height = "wrap_content" > < Button android:id = "@+id/btnNhap" android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_column = "1" android:gravity = "center" android:text = "Nhập SV" /> </ TableRow > </ TableLayout > </ LinearLayout > < LinearLayout android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:layout_weight = "1" android:background = "#EAEAEA" android:orientation = "vertical" > < TextView android:id = "@+id/textView2" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:background = "#000040" android:text = "Danh Sách Sinh Viên:" android:textColor = "#FFFFFF" /> < ListView android:id = "@+id/lvsinhvien" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:layout_weight = "1" > </ ListView > </ LinearLayout > </ LinearLayout > |
– còn đây là của sinhvien_item_layout.xml:
<? xml version = "1.0" encoding = "utf-8" ?> android:layout_width = "match_parent" android:layout_height = "match_parent" android:orientation = "vertical" > < TextView android:id = "@+id/txtMaVaTen" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:textSize = "15sp" /> < TextView android:id = "@+id/txtThongTinKhac" android:layout_width = "match_parent" android:layout_height = "wrap_content" android:textColor = "#800000" android:textSize = "10sp" android:textStyle = "italic" /> </ LinearLayout > |
-3 -Bạn xem cấu trúc class xử lý nghiệp vụ:
– class Student:
package tranduythanh.com; import java.util.Date; /** * Class dùng để lưu trữ thông tin của sinh viên * id: Mã * name: Tên * gender: giới tính, true là nữ * birthday: lưu năm sinh * placeOfBirth: nơi sinh * @author drthanh * */ public class Student { private String id; private String name; private boolean gender; private Date birthday; private String placeOfBirth; public String getId() { return id; } public void setId(String id) { this .id = id; } public String getName() { return name; } public void setName(String name) { this .name = name; } public boolean isGender() { return gender; } public void setGender( boolean gender) { this .gender = gender; } public Date getBirthday() { return birthday; } public void setBirthday(Date birthday) { this .birthday = birthday; } public String getPlaceOfBirth() { return placeOfBirth; } public void setPlaceOfBirth(String placeOfBirth) { this .placeOfBirth = placeOfBirth; } public Student(String id, String name, boolean gender, Date birthday, String placeOfBirth) { super (); this .id = id; this .name = name; this .gender = gender; this .birthday = birthday; this .placeOfBirth = placeOfBirth; } public Student() { super (); } } |
– 4 class MyArrayAdapter (class dùng để Custom Listview):
package tranduythanh.com; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Locale; import android.app.Activity; import android.view.View; import android.view.ViewGroup; import android.widget.ArrayAdapter; import android.widget.TextView; /** * Đây là class dùng để custom layout * Bạn đã được học trước đó * Class này sẽ lấy layout: sinhvien_item_layout.xml * @author drthanh * */ public class MyArrayAdapter extends ArrayAdapter<Student> { Activity context; int resourceId; ArrayList<Student>arrStudent; public MyArrayAdapter(Activity context, int resource, ArrayList<Student> objects) { super (context, resource, objects); this .context=context; this .resourceId=resource; this .arrStudent=objects; } @Override public View getView( int position, View convertView, ViewGroup parent) { if (convertView== null ) { //gắn Layout vào Activity convertView= context.getLayoutInflater().inflate(resourceId, null ); } //Lấy Textview để lưu mã và tên TextView txtMaTen=(TextView) convertView.findViewById(R.id.txtMaVaTen); //Lấy TextView để lưu giới tính, năm sinh, nơi sinh TextView txtKhac=(TextView) convertView.findViewById(R.id.txtThongTinKhac); //Lấy sinh viên thứ position Student s=arrStudent.get(position); txtMaTen.setText(s.getId()+ " - " +s.getName()); //Dùng SimpleDateFormat để định dạng ngày tháng dd/MM/YYYY -> 22/12/2012 SimpleDateFormat dft= new SimpleDateFormat( "dd/MM/yyyy" ,Locale.getDefault()); txtKhac.setText((s.isGender()? "Nữ-" : "Nam-" )+ dft.format(s.getBirthday())+ " - " + s.getPlaceOfBirth()); return convertView; } } |
-5- class MainActivity để xử lý nghiệp vụ:
package tranduythanh.com; import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Date; import java.util.Locale; import android.os.Bundle; import android.app.Activity; import android.app.DatePickerDialog; import android.app.DatePickerDialog.OnDateSetListener; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.widget.ArrayAdapter; import android.widget.AutoCompleteTextView; import android.widget.Button; import android.widget.CheckBox; import android.widget.DatePicker; import android.widget.EditText; import android.widget.ListView; import android.widget.Toast; public class MainActivity extends Activity { ListView lvSinhvien; //Cặp đôi để Custom ListView MyArrayAdapter adapterSinhvien; ArrayList<Student> arrSinhvien= new ArrayList<Student>(); EditText editMa,editTen,editNamsinh; CheckBox chkGender; Button btnNamsinh,btnNhapsv; AutoCompleteTextView autoTextNs; //Cặp đôi để dùng cho AutoCompleteTextView ArrayList<String>arrAuto= new ArrayList<String>(); ArrayAdapter<String>adapterAuto; @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); getFormWidgets(); addEventsForWidgets(); //fakeData(); } /** * hàm lấy các widgets */ public void getFormWidgets() { editMa=(EditText) findViewById(R.id.editMa); editTen=(EditText) findViewById(R.id.editTen); editNamsinh=(EditText) findViewById(R.id.editNgaySinh); chkGender=(CheckBox) findViewById(R.id.chkGt); autoTextNs=(AutoCompleteTextView) findViewById(R.id.autoCompleteNS); btnNamsinh=(Button) findViewById(R.id.btnNgaySinh); btnNhapsv=(Button) findViewById(R.id.btnNhap); lvSinhvien=(ListView) findViewById(R.id.lvsinhvien); //Gán DataSource cho Adapter ListView adapterSinhvien= new MyArrayAdapter( this , R.layout.sinhvien_item_layout, arrSinhvien); //Gán Adapter vào ListView lvSinhvien.setAdapter(adapterSinhvien); } /** * Hàm thiết lập sự kiện cho Button */ public void addEventsForWidgets() { btnNamsinh.setOnClickListener( new OnClickListener() { @Override public void onClick(View arg0) { // TODO Auto-generated method stub processBirthday(); } }); btnNhapsv.setOnClickListener( new OnClickListener() { @Override public void onClick(View v) { processInput(); } }); } /** * Hàm hiển thị DatePickerDialog để chọn năm sinh */ public void processBirthday() { OnDateSetListener callBack= new OnDateSetListener() { @Override public void onDateSet(DatePicker arg0, int arg1, int arg2, int arg3) { editNamsinh.setText(arg3+ "/" +arg2+ "/" +arg1); } }; //Ở đây Tôi chưa xử lý lấy ngày tháng năm trên EditText đưa vào DatePicker //Bạn tự làm DatePickerDialog dateDialog= new DatePickerDialog( this , callBack, 1989 , 9 , 25 ); dateDialog.setTitle( "Birthday" ); dateDialog.show(); } /** * Hàm xử lý nhập dữ liệu từ giao diện */ public void processInput() { String ma=editMa.getText()+ "" ; String ten=editTen.getText()+ "" ; String ns=editNamsinh.getText()+ "" ; String nois=autoTextNs.getText()+ "" ; boolean gt=chkGender.isSelected(); SimpleDateFormat dft= new SimpleDateFormat( "dd/MM/yyyy" ,Locale.getDefault()); try { Student s= new Student(ma, ten, gt, dft.parse(ns), nois); arrSinhvien.add(s); //Thêm mới xong thì gọi hàm dưới cập nhập lại giao diện adapterSinhvien.notifyDataSetChanged(); //Xử lý cho Autocomplete về nơi sinh processAutoComplete(nois); } catch (ParseException e) { Toast.makeText( this , e.toString(), Toast.LENGTH_LONG).show(); } } /** * Hàm xử lý Autocomplete Nơi sinh * @param data */ public void processAutoComplete(String data) { //Chạy từ đầu chí cuối nếu trùng thì thoát khỏi hàm for ( int i= 0 ;i<arrAuto.size();i++) { String x=arrAuto.get(i); if (x.trim().equalsIgnoreCase(data.trim())) return ; } //nếu xuống đây được tức là chưa tồn tại-> đừa vào arrAuto arrAuto.add(data); //Đưa vào ADapter adapterAuto= new ArrayAdapter<String>( this , android.R.layout.simple_list_item_1, arrAuto); //đưa Adapter vào AutoComplete autoTextNs.setAdapter(adapterAuto); } public void fakeData() { Student s1= new Student( "1" , "Đoàn Ái Nương" , true , new Date( 1980 - 1900 , 2 , 2 ), "TP. Hồ Chí Minh" ); Student s2= new Student( "2" , "Nguyễn Thùy Trang" , true , new Date( 1982 - 1900 , 3 , 3 ), "Lâm Đồng" ); Student s3= new Student( "3" , "Hoàng Văn Phúc" , false , new Date( 1970 - 1900 , 4 , 4 ), "Hà Nội" ); Student s4= new Student( "4" , "Đinh Hồng Lợi" , false , new Date( 1972 - 1900 , 4 , 4 ), "Bắc Giang" ); Student s5= new Student( "5" , "Nguyễn Hoàng Uyên" , true , new Date( 1970 - 1900 , 4 , 4 ), "Huê" ); arrSinhvien.add(s1); arrSinhvien.add(s2); arrSinhvien.add(s3); arrSinhvien.add(s4); arrSinhvien.add(s5); adapterSinhvien.notifyDataSetChanged(); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.activity_main, menu); return true ; } } |
– Bạn xem Tôi giải thích trong coding luôn rồi.
– Chú ý là bạn có thể yêu cầu ứng dụng chạy theo màn hình nằm ngang trong code (bạn viết trongonCreate):
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
– Bạn hãy cố gắng làm bài này vì Tôi cảm thấy nó rất hay về ý tưởng thiết kế và kỹ thuật lập trình.
– Bạn có thể Tải code mẫu tại đây: http://www.mediafire.com/?m0jeop2fb83ib3u
– Bài tập tiếp theo bạn sẽ được thực hành về GridView, một control cũng cần phải lưu tâm.
– Chúc bạn thành công
http://duythanhcse.wordpress.com/
Leave a Reply