آموزش ساخت Custom spinner در اندروید (بخش اول)

بعد از آشنایی با ویجت Spinner در اندروید مقدماتی نوبت آن رسیده تا ظاهری دلخواه و شخصی بسازیم. اینکار به وسیله Custom spinner در اندروید صورت می‌‌گیرد. پس ما قصدا داریم به شما آموزش دهیم تا با Custom Spinner یا Spinner سفارشی، ظاهر شخصی دلخواه خود را بسازید تا هر نوع ویجت که مدنظر دارید درون آیتم‌های Spineer نمایش داده شود.

ابتدا یک نمونه Spinner ساده با Adapter پیش فرض اندروید می‌سازیم.

کدهای xml

activity_main.xml:
 <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Spinner
android:id="@+id/spinner"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

کدهای کلاس MainActivty

MainActivity.java:
public class MainActivity extends AppCompatActivity
{
Spinner spinner;
ArrayList<String> list1;
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
SetupView();
list1=new ArrayList<>(Arrays.asList("Ali","Reza","Ahmad"));
ArrayAdapter<String> adapter=new ArrayAdapter<String>(this,android.R.layout.simple_spinner_dropdown_item,list1);
            spinner.setAdapter(adapter);
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener()
{
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id)
{
Toast.makeText(MainActivity.this,list1.get(position)+" : "+position , Toast.LENGTH_SHORT).show();
}
@Override
public void onNothingSelected(AdapterView<?> parent)
{
}
});
}
private void SetupView()
{
spinner=findViewById(R.id.spinner);
}
}

تمام کدهای بالا در دوره اندروید مقدماتی توضیح داده شده و نیاز به توضیح دوباره نیست.

خروجی کدهای بالا

 

در ادامه یک Custom spinner می‌سازیم که دارای با آیتم‌های عنوان و عکس باشد. در ابتدا عکس‌های مورد نیاز را درون پوشه drawable قرار می‌دهیم، سپس مثل قبل یک Spinner در فایل xml می‌سازیم.

Main_Activity2.java:
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Main2Activity">
<Spinner
android:id="@+id/spinnerSofaType"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="32dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="32dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>

در ادامه یک کلاس مدل برای آیتم‌های Spinner به اسم SofaType می‌سازیم که دارای یک آیدی، عنوان و تصویر برای هر آیتم است.

SofaType.java:
public class SofaType
{
private int Id;
private String SofaTypeTitle;
private int ImageId;
public SofaType()
{
}
public SofaType( String sofaTypeTitle, int imageId)
{
SofaTypeTitle = sofaTypeTitle;
ImageId = imageId;
}
public SofaType(int id, String sofaTypeTitle, int imageId)
{
Id = id;
SofaTypeTitle = sofaTypeTitle;
ImageId = imageId;
}
public int getId()
{
return Id;
}
public void setId(int id)
{
Id = id;
}
public String getSofaTypeTitle()
{
return SofaTypeTitle;
}
public void setSofaTypeTitle(String sofaTypeTitle)
{
SofaTypeTitle = sofaTypeTitle;
}
public int getImageId()
{
return ImageId;
}
public void setImageId(int imageId)
{
ImageId = imageId;
}
}

در ادامه کلاس Adapter سفارشی را می‌سازیم.

MySpinnerAdapter.java:
public class MySpinnerAdapter extends BaseAdapte
{
Context context;
int resource;
ArrayList<SofaType> sofaTypeList;
public MySpinnerAdapter(Context context, int resource, ArrayList<SofaType> sofaTypeList){
this.context=context;
this.resource=resource;
this.sofaTypeList=sofaTypeList;
}
@Override
public int getCount()
{
   return sofaTypeList.size();
}
@Override
public SofaType getItem(int position)
{
return sofaTypeList.get(position);
}
@Override
public long getItemId(int position)
{
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
 SofaType sofaType=sofaTypeList.get(position);
ViewHolder holder;
if(convertView==null){
LayoutInflater inflater= (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
convertView=inflater.inflate(resource,parent,false);
holder=new ViewHolder(convertView);
holder.FillItem(sofaType,position);
convertView.setTag(holder);
}else{
holder= (ViewHolder) convertView.getTag();
holder.FillItem(sofaType,position);
}
return convertView;
}
class ViewHolder{
    TextView txtTitle;
    ImageView img1;
public ViewHolder(View view){
txtTitle=(TextView) view.findViewById(R.id.txtTitle);
 img1=(ImageView)view.findViewById(R.id.img1);
}
public void FillItem(SofaType sofaType, final int position){
txtTitle.setText(sofaType.getSofaTypeTitle());
img1.setImageResource(sofaType.getImageId());
img1.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(View v)
{
Toast.makeText(context,position+" " , Toast.LENGTH_SHORT).show();
}
});
}
}
}

در بالا کلاس MySpinnerAdapter را ساختیم که از کلاس BaseAdapter ارث‌بری می‌کند و توابع کلاس BaseAdapter را بازنویسی کردیم. ادامه پیاده‌سازی برنامه را در قسمت بعد انجام می‌دهیم.