Drawer Menu 항목의 우측에 커스텀 뷰(Custom View) 달기

Drawer Menu는 안드로이드의 표준화된 메뉴입니다. 이 UI는 단순히 메뉴로써의 기능 뿐만이 아니라 다양한 정보를 사용자에게 제공할 수 있습니다. 이를 위해 Drawable의 특정 메뉴 항목의 우측에 커스텀 뷰를 달게 되면, 이 커스텀 뷰의 내용을 변경함으로써 어떤 정보를 사용자에게 전달할 수 있게 됩니다. 이 글은 이처럼 Drawable의 특정 메뉴 항목에 커스텀 뷰를 추가하는 코드를 정리합니다.

Drawer Menu를 추가하기 위해서는 Activity의 Layout에서 기본적으로 com.google.android.material.navigation.NavigationView를 사용하게 됩니다. 이를 NavigationView를 통해 메뉴의 각 항목에 접근할 수 있고, 접근된 메뉴에 원하는 View를 지정할 수 있게 됩니다. 아래 코드처럼요.

navigationView = findViewById<NavigationView>(R.id.main_navigation_view)

    ...

navigationView.getMenu().getItem(4).setActionView(R.layout.drawer_menu_item_collecting_data_searched_items_count)

위의 코드는 5번째 메뉴에 대한 커스텀 뷰를 R.layout.drawer_menu_item_collecting_data_searched_items_count으로 지정하고 있습니다. R.layout.drawer_menu_item_collecting_data_searched_items_count에 대한 코드는 다음과 같습니다.

<?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="match_parent"
    android:gravity="center_vertical"
    android:orientation="vertical" >

    <TextView
        android:background="@drawable/rounding_box"
        android:id="@+id/tvResultItemCount"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:textSize="@dimen/very_small_text_size"
        android:paddingVertical="2dp"
        android:paddingHorizontal="10dp"
        android:text="0" />

</LinearLayout>

위의 뷰를 좀더 시각적으로 안정감 있도록 배경을 rounding_box라는 Drawable로 지정하였는데요. rounding_box 코드는 다음과 같습니다.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/uiColor" />
    <padding
        android:left="45px"
        android:top="15px"
        android:right="45px"
        android:bottom="15px" />
    <corners android:radius="30px" />
</shape>

앞서 언급했던 것처럼 Drawer Menu의 항목에 대한 커스텀 뷰의 내용을 변경함으로써 정보를 사용자에게 전달한다고 했는데, 커스텀 뷰를 변경하는 코드의 예는 다음과 같습니다.

navigationView.getMenu().getItem(4).actionView.findViewById<TextView>(R.id.tvResultItemCount).text = "999"

[Android] Custom Dialog 만들기

Custom Dialog를 만들기 위해 Dialog를 상속받으면 Title부터 OK, Cancel 처리를 위한 버튼까지 모두 만들어줘야 합니다. 손을 좀 줄이고자 상속의 개념이 아닌 AlertDialog.Builder를 이용해 Custom Dialog를 만들 수 있습니다. 먼저 Custom Dialog의 UI를 구성하는 레이아웃을 아래처럼 정의합니다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <Spinner
        android:id="@+id/spLayers"
        android:layout_marginHorizontal="40dp"
        android:layout_height="wrap_content"
        android:layout_width="match_parent" />

</LinearLayout>

Spinner 하나만 존재하는 단순한 UI입니다. 이 레이아웃의 파일 명을 edit_target_layer_dialog.xml이라고 하겠습니다.

이제 Dialog를 표시하는 코드입니다.

val builder = AlertDialog.Builder(mainActivity)
val inflater = mainActivity.getSystemService(LAYOUT_INFLATER_SERVICE) as LayoutInflater
val view = inflater.inflate(R.layout.edit_target_layer_dialog, null)

val spLayers = view.findViewById<Spinner>(R.id.spLayers)
var layerList = ArrayList<String>()

// layerList에 Spinner를 채울 문자열 항목 구성

val adapter = ArrayAdapter(mainActivity, android.R.layout.simple_spinner_dropdown_item, layerList)

spLayers.adapter = adapter
spLayers.setSelection(0)

builder.setView(view)

val listener = DialogInterface.OnClickListener() { dialog: DialogInterface, which: Int ->
    if (which == DialogInterface.BUTTON_POSITIVE) {
        Log.v("DIP2K", spLayers.selectedItem.toString())
    } else if (which == DialogInterface.BUTTON_NEGATIVE) {
        Log.v("DIP2K", "CANCEL")
    }
}

builder.setPositiveButton("확인", listener)
builder.setNegativeButton("취소", listener)

val dlg = builder.create()
dlg.setTitle("편집 대상 레이어")
dlg.show()

결국 아래와 같은 대화상자를 볼 수 있습니다.