드로어 레이아웃

드로어 레이아웃(DrawerLayout)은 액티비티 화면에 보이지 않던 내용이 왼쪽이나 오른쪽에서 손가락의 움직임에 따라 밀려 나오는 기능을 한다. 마치 서랍같다고 해서 drawer 라고 한다. 마찬가지로 드로어 레이아웃 역시 플레이 스토어에 적용되어 있다.

드로어 레이아웃을 사용하려면 의존성을 추가해야한다.

dependencies {

    implementation 'androidx.drawerlayout:drawerlayout:1.1.1'
}

드로어 레이아웃에서는 레이아웃의 순서가 중요한데, root 를 드로어로 할 경우, 하위 첫번째 뷰 또는 뷰 그룹은 콘텐츠 영역을 구성하고, 그 다음에 나오는 뷰 또는 뷰 그룹이 드로어 영역을 구성한다. 두번째 요소에서 layout_gravity 속상 값에 따라 드로어가 나오는 방향이 달라지며, 이 속성이 없을 경우 드로어가 설정되지 않는다.

<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/teal_200"
        android:orientation="vertical" >
    </LinearLayout>


    <TextView
        android:id="@+id/TextView1"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:text="TextView1"
        android:textColor="#FFF59D" />
</androidx.drawerlayout.widget.DrawerLayout>

툴바와 드로어

툴바에 드로어를 꺼내는 버튼을 추가하기 위한 코드

class MainActivity : AppCompatActivity() {
    lateinit var toggle : ActionBarDrawerToggle
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        toggle = ActionBarDrawerToggle(this, binding.drawer,R.string.open, R.string.close)

        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        toggle.syncState()
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        // 이벤트가 토글 버튼에서 발생하면
        if (toggle.onOptionsItemSelected(item))  {
            Log.d("Info", "toggle!!")
            return true
        }
        return super.onOptionsItemSelected(item)
    }
}