안드로이드 커스텀 스피너 ( 스피너에 이미지 넣기 )

스피너에 이미지를 추가하는 예제입니다.

실행시키면 다음처럼 화면 중앙에 스피너가 보입니다. 디폴트로 사과가 선택된 상태입니다.

 

스피너를 터치하면 선택 가능한 목록에 이미지와 문자열이 같이 보입니다.

 

항목을 선택하면 선택된 항목이 바뀌고 해당 문자열을 화면에 보여줍니다.

 

다음 과정을 통해 예제를 테스트 해 볼 수 있습니다.

1. 액티비티에 보여줄 activity_main.xml 레이아웃 파일에 스피너를 추가합니다.

2. drawable 폴더에 스피너에 넣을 이미지를 추가합니다.

 

3. 스피너에 보여줄 spinner_row.xml 레이아웃 파일을 추가합니다.

 

<?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="vertical">


    <TextView
        android:id="@+id/sub_spinner_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:text="부가 메뉴"
        android:textAlignment="center"
        android:textColor="#ffffff"
        android:textSize="25dp"
        android:visibility="gone"/>


    <LinearLayout
        android:id="@+id/sub_spinner_item_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/sub_menu_spinner_item_image"
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:src="@drawable/ic_launcher_background"/>

        <TextView
            android:layout_marginLeft="10dp"
            android:layout_gravity="center"
            android:text="test"
            android:id="@+id/sub_menu_spinner_item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp" />

    </LinearLayout>

</LinearLayout>

 

 

 

 

4. 스피너를 위한 CustomSpinnerAdapter.java 커스텀 어댑터 코드 파일을 작성합니다.

 

package com.example.jeon.bread_mobil_car_app.sub_manu;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.example.jeon.bread_mobil_car_app.R;

public class sub_menu_spinner_adapter extends ArrayAdapter<String> {

    String [] spinnerNames;
    int[] spinnerImages;
    Context context;

    public sub_menu_spinner_adapter(@NonNull Context context, String[] spinnerNames, int[] spinnerImages ) {
        super(context, R.layout.sub_menu_spinner_row);
        this.spinnerNames = spinnerNames;
        this.spinnerImages = spinnerImages;
        this.context = context;
    }

    @Override
    public View getDropDownView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        return getView(position,convertView,parent);
    }


    @Override
    public int getCount() {
        return spinnerNames.length;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {

        ViewHolder sub_menu_view_holder = new ViewHolder();

        if (convertView == null) {
            LayoutInflater mInflater  = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
           // LayoutInflater mInflater = LayoutInflater.from(context);
            convertView = mInflater.inflate(R.layout.sub_menu_spinner_row, parent, false);

            sub_menu_view_holder.sub_menu_spinner_item_image = (ImageView) convertView.findViewById(R.id.sub_menu_spinner_item_image);
            sub_menu_view_holder.sub_menu_spinner_item = (TextView) convertView.findViewById(R.id.sub_menu_spinner_item);

            sub_menu_view_holder.sub_spinner_title = (TextView)convertView.findViewById(R.id.sub_spinner_title);
            sub_menu_view_holder.sub_spinner_item_layout = (LinearLayout)convertView.findViewById(R.id.sub_spinner_item_layout);
            convertView.setTag(sub_menu_view_holder);
        } else {
            sub_menu_view_holder = (ViewHolder) convertView.getTag();
        }

        if (position == 0) {
            sub_menu_view_holder.sub_spinner_title.setVisibility(View.VISIBLE);
            sub_menu_view_holder.sub_spinner_item_layout.setVisibility(View.GONE);
        } else {
            sub_menu_view_holder.sub_spinner_title.setVisibility(View.GONE);
            sub_menu_view_holder.sub_spinner_item_layout.setVisibility(View.VISIBLE);
        }

        sub_menu_view_holder.sub_menu_spinner_item_image.setImageResource(spinnerImages[position]);
        sub_menu_view_holder.sub_menu_spinner_item.setText(spinnerNames[position]);


        return convertView;
    }

    private static class ViewHolder{

        TextView sub_spinner_title;
        LinearLayout sub_spinner_item_layout;

        ImageView sub_menu_spinner_item_image;
        TextView sub_menu_spinner_item;

    }
}

 

5. MainActivity.java 액티비티 코드를 작성합니다.

 

 

        String[] spinnerNames = new String[]{"부가 메뉴","이용 안내", "운행 이력", "사고 및 정비 문의", "개선 제안"};
        int[] spinnerImages = new int[]{R.drawable.ic_launcher_background,R.drawable.ic_launcher_background,R.drawable.ic_launcher_background,R.drawable.ic_launcher_background,R.drawable.ic_launcher_background};

        //어댑터 연결
        sub_menu_spinner_adapter spinner_adapter = new sub_menu_spinner_adapter(context,spinnerNames,spinnerImages);
        main_title_image.setAdapter(spinner_adapter);

        // 아이템 선택 리스너
        main_title_image.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView parent, View view, int position, long id) {
                int getIndex = main_title_image.getSelectedItemPosition();

                if(getIndex == 1){
                    Toast.makeText(getApplicationContext(),"1번",Toast.LENGTH_SHORT).show();
                }else if(getIndex == 2){
                    Toast.makeText(getApplicationContext(),"2번",Toast.LENGTH_SHORT).show();
                }else if(getIndex == 3){
                    Toast.makeText(getApplicationContext(),"3번",Toast.LENGTH_SHORT).show();
                }else if(getIndex == 4){
                    Toast.makeText(getApplicationContext(),"4번",Toast.LENGTH_SHORT).show();
                }

            }

            @Override
            public void onNothingSelected(AdapterView parent) {

            }
        });

참고

https://github.com/codingdemos/SpinnerImages