UI Component 분리시키기

앞에서 살펴본 것을 바탕으로 유저와의 인터랙션을 담당하는 UI Component를 액티비티에서 분리시키는 작업을 진행해보았다.

UI Component의 역할

• 사용자의 입력(e.g. 버튼 클릭)을 수신한다.
• 입력을 상위 레이어 Activity에게 보고한다.
• 그리고 Activity가 bind하는 결과값을 UI에 반영되도록 업데이트한다.

목표

구현해야할 기본적인 NavigationDrawer의 기능

• Navigation Drawer를 열고 닫을 수 있다.
• Drawer의 아이템을 클릭할 수 있다.
• Activity는 클릭된 Drawer 아이템을 보고받는다.

디자인

android.widget 패키지만 분리한 클래스들은 `WidgetView`라는 postfix규칙을 사용하여 이름을 짓는다.

 

View와 View Controller를 분리시키기

NavDrawerWidgetView는 NavigationDrawer UI를 구성하는 클래스이다.

 

기존의 Activity는 onCreate()에서 setContentView(view) 메소드를 실행하여, xml 뷰를 액티비티와 연결한다.

하지만NavDrawerWidgetView가 XML과 연결되어 있는 UI Component이므로, Activity에서 setContentView(NavDrawerWidgetView)를 하여 WidgetView와 Activity를 연결한다.

예제

// [WidgetView]와 [XML]의 연결
// NavDrawerWidgetView
class NavDrawerWidgetView(
    val layoutInflater: LayoutInflater,
    val parent: ViewGroup?,
    @LayoutRes val layoutId: Int
) {
    private val rootView: View = layoutInflater.inflate(layoutId, parent, attachToRoot)
}

// UI Controller(policy) 역할만을 남겨두고 UI는 WidgetView 클래스로 분리시킨다.
class MainActivity : AppCompatActivity(), NavDrawerWidgetView.Listener {

    private lateinit var widgetView : NavDrawerWidgetView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        widgetView = widgetViewFactory.createNavDrawerWidgetView(null)
        setContentView(widgetView.getRootView())        // [Activity]와 [WidgetView]의 연결
    }
}

 

 

 

실행결과