외로운 Nova의 작업실

안드로이드 앱 프로그래밍 - 16(제트팩 라이브러리 - 드로어 레이아웃) 본문

Programming/Kotlin - Android

안드로이드 앱 프로그래밍 - 16(제트팩 라이브러리 - 드로어 레이아웃)

Nova_ 2023. 1. 26. 13:35

- 드로어 레이아웃

드로어 레아이웃은 액티비티 화면에 보이지 않던 내용이 왼쪽이나 오른쪽에서 손가락의 움직임에 따라 밀려 나오는 기능을 말합니다. 드로어 레이아웃의 특징은 xml에 드로어 레이아웃 태그안에 첫번째 태그는 화면에 그냥 보여주고 두번째 태그는 스와이프를 해야 밀려나오게합니다. 따라서 드로어 레이아웃을 만들때는 그 안에 태그가 2개 있어야합니다.

 

- 그래들 파일에 드로어 레이아웃 선언

implementation "androidx.drawerlayout:drawerlayout:1.1.1"

 

- 메인 액티비티.xml

이제 메인액티비티.xml에 드로어 레이아웃 자리를 만들어줍니다. 보통 최상위에 두어서 드로어가 전체화면에서 나오게 만듭니다. 또한 드로어 레이아웃 안의 첫번째 태그와 두번째태그를 적절히 만들어줍니다. xml만 선언해도 드로어가 적용됩니다.

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:id="@+id/drawer">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Main Activity!"
            android:textColor="#000000"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:textSize="32dp"/>
    </androidx.constraintlayout.widget.ConstraintLayout>

    <TextView
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:text="I am Drawer!"
        android:textStyle="bold"
        android:textColor="#FFFFFF"
        android:background="#FF0000"
        android:gravity="center"
        android:layout_gravity= "start"/>

</androidx.drawerlayout.widget.DrawerLayout>

 

- 메인 액티비티.kt

xml만 사용해도 드로어가 적용되지만 토글버튼을 이용해 드로어가 열리고 닫히는 기능도 넣어보겠습니다. 아래와 같이 코드를 짜시면 됩니다.

class MainActivity : AppCompatActivity() {
    //토클객체 선언
    lateinit var toggle: ActionBarDrawerToggle
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        val binding = ActivityMainBinding.inflate(layoutInflater) //activity_main_xml 파일의 객체들을 가져옵니다.
        setContentView(binding.root) //activity_main_xml을 화면에 출력합니다.

        //액션바에 토클 버튼 적용
        toggle = ActionBarDrawerToggle(this, binding.drawer, R.string.open_drawer, 
        	R.string.closed_drawer) //토글버튼 객체 가져오기
        supportActionBar?.setDisplayHomeAsUpEnabled(true) //토글버튼 사용
        toggle.syncState() // 뒤로가기 버튼말고 서랍여는 버튼으로 교체
    }

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

}

 

- 실행

Comments