11-6 드로어 레이아웃

드로어 레이아웃 - 옆에서 열리는 화면 구성

• 드로어 레이아웃(DrawerLayout)은 왼쪽이나 오른쪽에서 손가락을 스와이프에 따라 밀려 나오는 기능을 한다.

dependencies {
	...
    implementation 'androidx.drawerlayout:drawerlayout:1.1.1'
}

• Activity 레이아웃 XML의 루트태그를 DrawerLayout으로 선언한다.
• DrawerLayout 하위에 2개의 뷰 태그를 선언한다.(태그 종류는 상관이 없다.)
  • 첫번째 태그는 기본 화면을 설정한다.
  • 두번째 태그는 화면을 밀었을 때의 나오는 메뉴를 설정한다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawer">
    <androidx.appcompat.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="Activity"
            android:gravity="center"/>


    </androidx.appcompat.widget.LinearLayoutCompat>
  
    <TextView
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        android:background="#FFFF00"
        android:text="Drawer"/>

</androidx.drawerlayout.widget.DrawerLayout>

• 기본적으로 LinearLayoutCompat 부분이 나온다.
  
• 옆으로 밀었을 때 2번째 태그인 TextView가 나온다.
  

---

토글 버튼 적용

• 액션바에 토글 버튼을 추가하여 Drawer 화면을 불러올 수 있다.

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.drawer_open, R.string.drawer_close)
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        toggle.syncState() // 햄버거 아이콘 설정
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        if(toggle.onOptionsItemSelected(item)){ // 토글 이벤트 처리
            return true
        }
        return super.onOptionsItemSelected(item)
    }
}

• 액션바 대신 툴바를 사용하면 Drawer화면이 나올때 툴바까지 덮어져서 나온다.