THIẾT KẾ GIAO DIỆN TRÊN ANDROID Bài 4: Các widget lựa chọn

THIẾT KẾ GIAO DIỆN TRÊN ANDROID Bài 4: Các widget lựa chọn Nội dung học Tổng quan Listview Spinner Gridview Autocomplex TextView Tổng quan Collection Widget  RadioButton CheckButton thích hợp cho việc chọn từ số tùy chọn  Khi số lựa chọn lớn hơn, dùng widget khác kiểu như: listbox, combobox, drop-down list, picture gallery, v.v  Android data adapter cung cấp giao diện chung cho selection list (các danh sách cho phép chọn) từ mảng nhỏ nội dung từ CSDL  Selection view – widget hiển thị danh sách lựa chọn mà adapter cung cấp để người dùng thực chọn lựa đây: ListView, Spinner, GridView, AutoCompleteTextView, Galery Tổng quan Selection Widget ListView,GridView, AutoCompleteTextView, Spinner Tổng quan Collection Widget Displaying/Selecting Options DATA Raw data Formatted & bound data DATA ADAPTER Destination layout Holding a ListView 5 Tổng quan Collection Widget Sử dụng ArrayAdapter  Loại adapter đơn giản ArrayAdapter Ta bọc đối tượng loại mảng Java java.util.List instance từ bên ListActivity (Chú ý: Activity…)  Sử dụng mảng liệu định sẵn ArrayAdapter String [] arr={“this”, “is”, “a”, “really”, “silly”, “list”} ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, arr);  Dữ liệu từ Data source (arr) gắn vào ArrayAdapter, ArrayAdapter gắn vào ListView Tổng quan Collection Widget Sử dụng ArrayAdapter  Tham số constructor ArrayAdapter : this, context Activity tại, bạn viết MainActivity.this  Tham số thứ resource ID view hiển thị danh sách ( thường ListView , chẳng hạn định nghĩa resource : android.R.layout.simple_list_item_1 trên) Trong android layout Listview mà Android xây dựng sẵn Còn simple_list_item_1.xml lưu thư mục /res/layout/  Tham số thứ 3: arr (data source), bạn truyền vào ArrayList ListView  List biểu diễn nhiều dòng liệu theo hàng dọc, chia làm phần:  Section Divider: để tổ chức item thành nhóm dễ quản lý  Line Items: chứa nhiều loại liệu khác checkbox, icon, action buttons…  ListView ví dụ đơn giản List ListView  Ví dụ 1: giao diện có control:  ListView : dùng để hiển thị mảng liệu  TextView có màu đỏ : Dùng để hiển thị vị trí giá trị phần tử chọn ListView click vào Hiển thị vị trí tên thẻ Khi chọn vào thẻ ListView  Ví dụ 1: ListView (1 of 4) Dưới nội dung activity_main.xml:Đặt id cho Listview list bạn định dạng thêm số đặc tính khác cho thẻ cần 10 GridView  GridView  GridView ViewGroup hiển thị phần tử lưới chiều, thiết kế theo chiều dọc ngang Thông thường chiều cố định, chiều lại thiết kế  Các item chèn tự động vào lưới ListAdapter Cố định chiều ngang, Cuốn theo chiều dọc Cố định chiều dọc, Cuốn theo chiều ngang 21 GridView  GridView  Một vài thuộc tính để xác định số column size là:  android:numColumns số cột hiển thị  android:verticalSpacing khoảng trống item với lưới theo hàng  android:horizontalSpacing khoảng trống item với lưới cột  android:columnWidth độ rộng cột  android:stretchMode độ dãn cột để thuộc tính auto_fit cho android:numColumns, độ rộng cột tự động dãn 22 GridView  Ví dụ GridView  Tạo ứng dụng chứa lưới hinh ảnh bên, chọn vào ảnh, thông báo hiển thị vị trí hình ảnh hiển thị Các bước tạo:  Tạo project: HelloGridView  Chèn ảnh vào thư mục res/drawable/ Mở tệp res/layout/main.xml  version="1.0" chèn nội dung sau: 23 GridView  Ví dụ GridView  Mở tệp HelloGridView.java chèn đoạn code sau vào phương thức onCreate() @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); GridView gridview = (GridView) findViewById(R.id.gridview); gridview.setAdapter(new ImageAdapter(this)); gridview.setOnItemClickListener(new OnItemClickListener() { public void onItemClick(AdapterView parent, View v, int position, long id) { Toast.makeText(MainActivity.this, "" + position, Toast.LENGTH_SHORT).show(); } }); } 24 GridView  Ví dụ GridView  Tạo mộ class tên ImageAdapter kế thừa BaseAdapter: public class ImageAdapter extends BaseAdapter { private Context mContext; public ImageAdapter(Context c) { mContext = c; } public int getCount() { return mThumbIds.length;} public Object getItem(int position) { return null;} public long getItemId(int position) { return 0; } // create a new ImageView for each item referenced by the Adapter public View getView(int position, View convertView, ViewGroup parent) { ImageView imageView; if (convertView == null) { // if it's not recycled, initialize some attributes imageView = new ImageView(mContext); imageView.setLayoutParams(new GridView.LayoutParams(85, 85)); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); imageView.setPadding(8, 8, 8, 8); } else { imageView = (ImageView) convertView; } imageView.setImageResource(mThumbIds[position]); return imageView; } 25 GridView  Ví dụ GridView // references to our images private Integer[] mThumbIds = { R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7, R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7, R.drawable.sample_0, R.drawable.sample_1, R.drawable.sample_2, R.drawable.sample_3, R.drawable.sample_4, R.drawable.sample_5, R.drawable.sample_6, R.drawable.sample_7 }; } 26 GridView  Demo  Gridview AutocompleteTextView  Đối với thiết bị di động, việc hỗ trợ nhập liệu nhanh cho người sử dụng điều cần thiết  Với auto-completion, người dùng gõ, phần text nhập dùng làm tiết đầu tố để lọc liệu, so sánh phần text nhập với danh sách lựa chọn  Từ phù hợp hiển thị danh sách lựa chọn đó, giống Spinner, ta chọn từ cần lấy  Người sử dụng nhập từ (khơng có danh sách) lựa chọn từ danh sách hiển thị AutocompleteTextView  AutoCompleteTextView lớp EditText, kế thừa số thuộc tính EditText như: color, font…  Như hình dưới: ta cần nhập ký tự new đầu tiên, lọc từ có ký tự đầu new Đây khơng phải Spinner mà AutoCompleteTextView  Các bước sau mô tả cách thiết lập AutoCompleteTextView cung cấp từ gợi ý từ mảng có sẵn , sử dụng ArrayAdapter: AutocompleteTextView  (1) Thêm thẻ AutoCompleteTextView vào layout  Trong AutoCompleteTextView thuộc tính android:completionThreshold số ký tự tối thiểu mà người dùng nhập để hiển thị danh sách từ gợi ý tương tự AutocompleteTextView  (2) Định nghĩa mảng liệu chứa từ gợi ý Ví dụ tạo mảng liệu chứa tên thành phố định nghĩa tệp xml thư mục (res/values/strings.xml): Afghanistan Albania Algeria American Samoa Andorra Angola Anguilla AutocompleteTextView  (3) Sử dụng đoạn code sau để hiển thị từ gợi ý lên AutoCompleteTextView: // Get a reference to the AutoCompleteTextView in the layout AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.autocomplete_country); // Get the string array String[] countries = getResources().getStringArray(R.array.countries_array); // Create the adapter and set it to the AutoCompleteTextView ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, countries); textView.setAdapter(adapter); AutocompleteTextView  Demo  AutocompleteTextview Tổng kết học  Tổng quan selection widget  Listview  Spinner  Gridview  Autocomplex TextView ... selectionwidgets; import import import import import import import android. app.Activity; android. os.Bundle; android. view.View; android. widget. AdapterView; android. widget. ArrayAdapter; android. widget. Spinner;... android. app.ListActivity; import android. os.Bundle; import android. view.View; import android. widget. ArrayAdapter; import android. widget. ListView; import android. widget. TextView; public class ArrayAdapterDemo... cấp giao diện chung cho selection list (các danh sách cho phép chọn) từ mảng nhỏ nội dung từ CSDL  Selection view – widget hiển thị danh sách lựa chọn mà adapter cung cấp để người dùng thực chọn