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

35 132 0
  • Loading ...
    Loading ...
    Loading ...

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

Tài liệu liên quan

Thông tin tài liệu

Ngày đăng: 06/03/2019, 09:33

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
- Xem thêm -

Xem thêm: 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

Từ khóa liên quan