스피너에 이미지를 추가하는 예제입니다.
실행시키면 다음처럼 화면 중앙에 스피너가 보입니다. 디폴트로 사과가 선택된 상태입니다.
스피너를 터치하면 선택 가능한 목록에 이미지와 문자열이 같이 보입니다.
항목을 선택하면 선택된 항목이 바뀌고 해당 문자열을 화면에 보여줍니다.
다음 과정을 통해 예제를 테스트 해 볼 수 있습니다.
1. drawable 폴더에 스피너에 넣을 이미지를 추가합니다. 다음 링크에 있는 이미지를 사용했습니다.
https://www.flaticon.com/packs/gastronomy-set
2. 스피너에 보여줄 spinner_row.xml 레이아웃 파일을 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/imageview_spinner_image"
android:layout_width="32dp"
android:layout_height="32dp" />
<TextView
android:id="@+id/textview_spinner_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="@+id/imageview_spinner_image"
android:padding="5dp"
android:text=""
android:textColor="@color/colorAccent"
android:textSize="15sp" />
</RelativeLayout> |
3. 액티비티에 보여줄 activity_main.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="match_parent"
android:gravity="center"
tools:context=".MainActivity">
<Spinner
android:id="@+id/spinner_main_fruits"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:spinnerMode="dropdown" />
</LinearLayout> |
4. 스피너를 위한 CustomSpinnerAdapter.java 커스텀 어댑터 코드 파일을 작성합니다.
package com.tistory.webnautes.imagespinner;
import android.content.Context;
import androidx.annotation.NonNull;
import androidx.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.TextView;
public class CustomSpinnerAdapter extends ArrayAdapter<String> {
String[] spinnerNames;
int[] spinnerImages;
Context mContext;
public CustomSpinnerAdapter(@NonNull Context context, String[] names, int[] images) {
super(context, R.layout.spinner_row);
this.spinnerNames = names;
this.spinnerImages = images;
this.mContext = 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 mViewHolder = new ViewHolder();
if (convertView == null) {
LayoutInflater mInflater = (LayoutInflater) mContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = mInflater.inflate(R.layout.spinner_row, parent, false);
mViewHolder.mImage = (ImageView) convertView.findViewById(R.id.imageview_spinner_image);
mViewHolder.mName = (TextView) convertView.findViewById(R.id.textview_spinner_name);
convertView.setTag(mViewHolder);
} else {
mViewHolder = (ViewHolder) convertView.getTag();
}
mViewHolder.mImage.setImageResource(spinnerImages[position]);
mViewHolder.mName.setText(spinnerNames[position]);
return convertView;
}
private static class ViewHolder {
ImageView mImage;
TextView mName;
}
} |
5. MainActivity.java 액티비티 코드를 작성합니다.
package com.tistory.webnautes.imagespinner;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.Spinner;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
private Spinner spinner_fruits;
String[] spinnerNames;
int[] spinnerImages;
int selected_fruit_idx = 0;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
spinner_fruits = (Spinner)findViewById(R.id.spinner_main_fruits);
// 스피너에 보여줄 문자열과 이미지 목록을 작성합니다.
spinnerNames = new String[]{"사과", "가지", "바나나", "블루베리"};
spinnerImages = new int[]{R.drawable.apple
, R.drawable.aubergine
, R.drawable.banana
, R.drawable.blueberries};
// 어댑터와 스피너를 연결합니다.
CustomSpinnerAdapter customSpinnerAdapter = new CustomSpinnerAdapter(MainActivity.this, spinnerNames, spinnerImages);
spinner_fruits.setAdapter(customSpinnerAdapter);
// 스피너에서 아이템 선택시 호출하도록 합니다.
spinner_fruits.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
selected_fruit_idx = spinner_fruits.getSelectedItemPosition();
Toast.makeText(MainActivity.this, spinnerNames[selected_fruit_idx], Toast.LENGTH_LONG).show();
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
}
});
}
} |
참고
https://github.com/codingdemos/SpinnerImages
최초작성 2019. 2. 26
최종작성 2020. 5. 12
