안드로이드 Spinner (ComboBox, Select input) 만들기

프로젝트에서 아이템 카테고리 별로 분류하기 위해서 이미지 데이터 전송시, 패션 아이템을 분류할 수 있는 spinner 기능을 추가하였다.

 

- SubActivity.xml

우선 Spinner를 하나 생성해준다.

    <Spinner
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="@+id/ImageSend"
        app:layout_constraintStart_toStartOf="@+id/ImageSend"
        app:layout_constraintTop_toBottomOf="@+id/ImageSend">
    </Spinner>

 

- SubAcitivity.java

spinner 객체를 id를 통해 찾고, 원하는 select option들을 문자열 배열에 넣어준다.

그리고 배열의 요소들을 ArrayAdapter를 통해 배열 요소들을 spinner에 띄울 수 있다.

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

        // ComboBox를 위한 spinner
        spinner = (Spinner)findViewById(R.id.spinner);
        items = new String[]{"Choose category", "Jacket", "Top", "Bottom", "Accs"};
        spinner.setOnItemSelectedListener(this);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, items);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spinner.setAdapter(adapter);
        
        ...
  }

해당 클래스는 AdapterView.OnItemSelectedListener 인터페이스를 상속한다. 상속과 함께 아래 두 메소드를 오버라이딩한다. select된 문자열의 인덱스를 position 파라미터로 전달 받아 그 값을 다음과 같이 조회해볼 수 있다.

    public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
        category = items[position];
    }

    @Override
    public void onNothingSelected(AdapterView<?> parent) {
        //
    }

spinner은 위 부분까지 구현이 완료되었고,

내 프로젝트에 다른 부분과 연동하기 위해 수정된 부분은

 

1) MyAPI.java의 Multipart 바디에 category 변수 값을 추가해주었고,

2) 물론 retrofit 객체로 build해서 보낼 때 해당 값도 함께 build해주었으며,

3) Django app의 models.py에 category 컬럼을 추가하고 migrate 한 뒤,

4) Django app의 serializer에 해당 필드 값을 추가해주었으며,

5) Django app의 views.py에서 DB에 값을 저장하는 부분에도 해당 필드 값을 추가해 주었다.

Workbench에서 해당 테이블에 category column이 추가된 것을 확인할 수 있다.

안드로이드 디바이스에서 바뀐 화면을 확인해봤다.

수정해준 페이지에 위와 같이 카테고리를 설정할 수 있게 되었다.