در این مبحث "چگونگی ایجاد یکی دیگر از ابزارک های اندرویدی" را یاد خواهیم گرفت که چگونه یک اسپینر سفارشی در اندرویدی ایجاد کنیم. Spinners یکی از ابزارک های اندرویدی است که به کاربر اجازه می دهد یک مورد را از یک لیست انتخاب کند. موارد لیست توسط یک Spinner Adapter کنترل میشود. این مطلب برای کسانی مفید است که با مفاهیم اولیه برنامه نویسی اندروید آشنایی دارند.

اسپینرها راهی سریع برای انتخاب یک مقدار از یک مجموعه ارائه می دهند. در حالت پیش فرض ، یک اسپینر مقدار انتخاب شده فعلی خود را نشان می دهد و با لمس آن، یک منوی کشویی با تمام مقادیر موجود نمایش داده می شود که کاربر از این طریق می تواند یک مورد دیگر را انتخاب کند. حال توضیحات را بهتر است با یک مثال ادامه دهیم.

مثال: یک لیست از ماههای سال ایجاد میکنیم و با انتخاب یک مورد، آن مورد را در یک پیام (Toast) نمایش می دهیم.

1) یک اکتیویتی جدید ایجاد کنید. در لایه مربوط به اکتیویتی یک Spinner قرار دهید:

<Spinner
        android:id="@+id/mSpinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

2) در کلاس اکتیویتی و خارج از onCreate متغییر اسپینر را تعریف کنید و آنرا در داخل onCreate مقدار دهی کنید:

// Declare the variable outside onCreate
    private Spinner spinner;

3) در داخل onCreate:

     مقدار اسپینر
     ایجاد یک لیست داده
     تعریف یک ArrayAdapter

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_custom_spinner);

        // Array of Months acting as a data pump
        String[] objects = {"January", "February", "March", "April", "May",
                "June", "July", "August", "September", "October", "November", "December"};

        // Typecasting the variable here
        spinner = (Spinner) findViewById(R.id.mSpinner);

        // Declaring an Adapter and initializing it to the data pump
        ArrayAdapter<String> adapter = new ArrayAdapter<>(
                getApplicationContext(), android.R.layout.simple_list_item_1, objects);

        // Setting Adapter to the Spinner
        spinner.setAdapter(adapter);

        // Setting OnItemClickListener to the Spinner
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override // Defining the Callback methods here
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(getApplicationContext(),
                        spinner.getItemAtPosition(position).toString(), Toast.LENGTH_LONG)
                        .show();
            }

            @Override // Defining the Callback methods here
            public void onNothingSelected(AdapterView<?> parent) {

            }
        });
    }

همانطور که میبینید روش های پاسخ به انتخاب کاربر نیز با OnItemSelectedListener به متغییر اسپینر اضافه شده است.

پس از اجرای و مشاهده این اکتیویتی نتیجه به صورت زیر است:

اکنون می دانید چگونه Spinner که یکی از ویجت های اندروید هست را اجرا کنید.

در ادامه میخواهیم یک Spinner سفارشی در Android ایجاد کنیم:

بنابراین چرا معطلید، بیایید ببینیم چگونه Spinner سفارشی را پیاده سازی کنیم. به آنچه می خواهیم ایجاد کنیم نگاهی بیندازید:

این بیشتر شبیه یک اسپینر "واقعی و عملی" است. میتوانید کدهای قبلی را تغییر دهید و یا یک اکتیویتی جدید برای ادامه مبحث ایجاد کنید.
  مراحل ایجاد یک اسپینر سفارشی:
1) قبل از onCreate:

     آرایه ای از مواردی را که باید در Spinner نمایش داده شود اعلام کنید
     یک آرایه با شناسه منبع تصاویر مربوطه را که باید با موارد نمایش داده شود اعلام کنید. (واضح است باید قبل از این کار تصاویری را در drawable قرار داده باشید. این مثال ما دارای چهار آیتم است پس به چهار تصویر نیاز دارید)

// Declaring the String Array with the Text Data for the Spinners
    String[] Languages = {"Select a Language", "C# Language", "JAVA Language",
            "Katlin Language", "PHP Language"};

// Declaring the Integer Array with resource Id's of Images for the Spinners
    Integer[] images = {0, R.drawable.prog_c, R.drawable.prog_java,
            R.drawable.prog_katlin, R.drawable.prog_php};

2) و در داخل onCreate:

// Declaring and typecasting a Spinner
   Spinner mySpinner = (Spinner) findViewById(R.id.mSpinner);

// Setting a Custom Adapter to the Spinner
   mySpinner.setAdapter(new MyAdapter(this, R.layout.custom, Languages));

حالا میبینید که در کد فوق کلاس MyAdapter استفاده شده است ولی ما هنوز آنرا ایجاد نکرده ایم. این کلاس را در مرحله 4 ایجاد می کنیم.

3) حالا بیایید یک لایه دلخواه به نام custom_spinner_item.xml ایجاد کنیم:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:padding="3dip">

    <ImageView
        android:id="@+id/imgLanguage"
        android:layout_width="48dp"
        android:layout_height="48dp" />

    <TextView
        android:id="@+id/tvLanguage"
        android:layout_width="wrap_content"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        tools:text="Text Here" />
</LinearLayout>

4) پس از روش onCreate:

     آداپتور سفارشی MyAdapter را تعریف میکنیم:

// Creating an Adapter Class
    public class MyAdapter extends ArrayAdapter {

        public MyAdapter(Context context, int textViewResourceId, String[] objects) {
            super(context, textViewResourceId, objects);
        }

        public View getCustomView(int position, View convertView,
                                  ViewGroup parent) {

            // Inflating the layout for the custom Spinner
            LayoutInflater inflater = getLayoutInflater();
            View layout = inflater.inflate(R.layout.custom_spinner_item, parent, false);

            // Declaring and Typecasting the textview in the inflated layout
            TextView tvLanguage = (TextView) layout
                    .findViewById(R.id.tvLanguage);

            // Setting the text using the array
            tvLanguage.setText(Languages[position]);

            // Setting the color of the text
            tvLanguage.setTextColor(Color.rgb(75, 180, 225));

            // Declaring and Typecasting the imageView in the inflated layout
            ImageView img = (ImageView) layout.findViewById(R.id.imgLanguage);

            // Setting an image using the id's in the array
            img.setImageResource(images[position]);

            // Setting Special atrributes for 1st element
            if (position == 0) {
                // Removing the image view
                img.setVisibility(View.GONE);
                // Setting the size of the text
                tvLanguage.setTextSize(20f);
                // Setting the text Color
                tvLanguage.setTextColor(Color.BLACK);

            }

            return layout;
        }

        // It gets a View that displays in the drop down popup the data at the specified position
        @Override
        public View getDropDownView(int position, View convertView,
                                    ViewGroup parent) {
            return getCustomView(position, convertView, parent);
        }

        // It gets a View that displays the data at the specified position
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            return getCustomView(position, convertView, parent);
        }
    }

امیدوارم این مطلب برای شما مفید بوده باشد.

برای نمونه کدها و برنامه قابل اجرا به لینک زیر مراجعه کنید:

https://github.com/AppAfzar/android_utilities

نویسنده: هاشمی