Tùy biến (Custom) lại Spinner
Nếu chúng ta muốn hiển thị hình ảnh, chuỗi dữ liệu trong đối tượng Spinner thì chúng ta phải tùy biến lại. Để tùy biến trước tiên chúng ta cần là tạo một lớp kế thừa từ lớp Adapter mặc định.
Spinner code trong XML:
<Spinner android:id="@+id/simpleSpinner " android:layout_width="fill_parent" android:layout_height="wrap_content" /> Cách xây dựng lớp CustomAdapter kế thừa từ lớp BaseAdapter:
public class CustomAdapter extends BaseAdapter { @Override public int getCount() { return 0; } @Override public Object getItem(int i) { return null; } @Override public long getItemId(int i) { return 0; } @Override public View getView(int i, View view, ViewGroup viewGroup) { return null; } Lớp BaseAdapter là lớp trừu tượng, vì vậy khi kế thừa từ lớp này chúng ta cần phải ghi đè (override) lại các phương thức của nó. Các phương thức này đã giải thích trong bài BaseAdapter.
Cách xây dựng lớp CustomAdapter kế thừa từ lớp ArrayAdapter:
public class MyAdapter extends ArrayAdapter { public MyAdapter(Context context, int resource, int textViewResourceId, List objects) { super(context, resource, textViewResourceId, objects); } @Override public int getCount() { return super.getCount(); } @Override public View getView(int position, View convertView, ViewGroup parent) { return super.getView(position, convertView, parent); } } Đoạn code trên chúng kế thừa từ lớp ArrayAdapter và ghi đè (override) lại các phương thức của nó. Các phương thức này đã giải thích trong bài ArrayAdapter.
Ví dụ: Trong ví dụ này chúng ta sẽ làm ứng dụng gồm có một Spinner để hiển thị tên các nước cùng với lá cờ nước đó. Tiến hành tạo project, vào thư mục res /layout -> activity_main.xml thiết kế giao diện sau:
Bước 1: Tạo một project tên là ListViewBaseAdapter: File->New->Android Application Project điền các thông tin ->Next ->Finish
Bước 2: Mở res -> layout -> xml (hoặc) activity_main.xml và thêm code trong Relative Layout.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="hiepsiit.com.customspinner.MainActivity" > <Spinner android:id="@+id/simpleSpinner" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="50dp" /> </RelativeLayout> Bước 3: Tạo mới một Layout custom_spinner_items.xml vào trong thư mục layout và thêm vào 2 widget ImageView, TextView sẽ được trong Spinner.
<?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"> <ImageView android:id="@+id/imageView" android:layout_width="50dp" android:layout_height="50dp" android:padding="5dp" android:src="@drawable/ic_launcher" /><!--Make sure image is present in Drawable folder--> <TextView android:id="@+id/textView" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center" android:padding="@dimen/activity_horizontal_margin" android:text="Demo" android:textColor="#000" /> </LinearLayout> Bước 4: Tạo mới một lớp CustomAdapter.java bên trong package và thêm code sau:
package hiepsiit.com.customspinner; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView; public class CustomAdapter extends BaseAdapter{ Context context; int flags[]; String[] countryNames; LayoutInflater inflter; public CustomAdapter(Context applicationContext, int[] flags, String[] countryNames) { this.context = applicationContext; this.flags = flags; this.countryNames = countryNames; inflter = (LayoutInflater.from(applicationContext)); } @Override public int getCount() { return flags.length; } @Override public Object getItem(int i) { return null; } @Override public long getItemId(int i) { return 0; } @Override public View getView(int i, View view, ViewGroup viewGroup) { view = inflter.inflate(R.layout.custom_spinner_items, null); ImageView icon = (ImageView) view.findViewById(R.id.imageView); TextView names = (TextView) view.findViewById(R.id.textView); icon.setImageResource(flags[i]); names.setText(countryNames[i]); return view; } } Bước 5: Mở src -> package -> MainActivity.java
Trong bước này chúng ta khởi tạo Spinner. Tiếp theo, chúng ta tạo 2 mảng, 1 mảng cho image, 1 mảng cho tên image. Lưu các hình ảnh vào thư mục drawable.
package hiepsiit.com.customspinner; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.widget.AdapterView; import android.widget.AdapterView.OnItemSelectedListener; import android.widget.Spinner; import android.widget.Toast; public class MainActivity extends Activity implements OnItemSelectedListener{ String[] countryNames={"India","China","Australia","Portugle","America","New Zealand"}; int flags[] = {R.drawable.india, R.drawable.china, R.drawable.australia, R.drawable.portugle, R.drawable.america, R.drawable.new_zealand}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //Getting the instance of Spinner and applying OnItemSelectedListener on it Spinner spin = (Spinner) findViewById(R.id.simpleSpinner); spin.setOnItemSelectedListener(this); CustomAdapter customAdapter=new CustomAdapter(getApplicationContext(),flags,countryNames); spin.setAdapter(customAdapter); } @Override public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3) { // TODO Auto-generated method stub Toast.makeText(getApplicationContext(), countryNames[arg2], Toast.LENGTH_LONG).show(); } @Override public void onNothingSelected(AdapterView<?> arg0) { // TODO Auto-generated method stub } } Ứng dụng này được phát triển bởi adt bundle, android 4.2 sử dụng minimum sdk 11 and target sdk 21.
Kết quả khi chạy ứng dụng
Chọn một dòng trên ListView:
Cập nhật công nghệ từ Youtube tại link: https://www.youtube.com/channel/UCOxeYcvZPGf-mGLYSl_1LuA/videos
Để tham gia khóa học công nghệ truy cập link: http://thuvien.hocviendaotao.com
Mọi hỗ trợ về công nghệ email: dinhanhtuan68@gmail.com