[Android][Kotlin] 햄버거 (Navigation Drawer) 만들기

이미 진행중인 프로젝트에 바로 코드를 추가 하기엔 위험부담이 커서

새로운 프로젝트에 우선 만들어 본 후, 제대로 작동 할 경우 원 프로젝트에 적용해보는 방식으로 진행했다

 

의외로 간단하게 완성됐는데 내 플젝으로 옮기는 과정에서 같은 코드인데 작동을 안하는 문제가 있어서 하루종일 머리 싸맸으나..

원인을 찾은김에 기록용으로 작성하는 포스팅

 

 

 

 

 

MainActivity.xml

 

 

DrawerLayout > Content(나는 [scrollView > Constraint] + [Constraint]로 짬) + LinearLayout(햄버거 UI 들어갈 부분)

이렇게 짜줘야하는데 가장 중요한건 꼭! 무조건! 콘텐츠가 위에 있어야한다

햄버거 부분을 가장 하단에 짜줘야 안드 상에서는 위에 올린게 되어서 제대로 작동한다.... 이게 오류의 원인이었음 ㅠㅠ

 

 

 

콘텐츠 부분 상단에 들어갈 툴바 코드

                <androidx.appcompat.widget.Toolbar
                    android:id="@+id/toolbar"
                    android:layout_width="0dp"
                    android:layout_height="94dp"
                    android:minHeight="?android:attr/actionBarSize"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent"
                    tools:layout_conversion_absoluteHeight="56dp"
                    tools:layout_conversion_absoluteWidth="411dp" />

 

 

햄버거부분 xml 코드 (UI는 아직..)

<LinearLayout
        android:id="@+id/hamburger"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity='start'
        android:background="@android:color/white"
        android:orientation="vertical">

        <TextView
            android:id="@+id/alarm_hamburger_startpage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="update"
            android:padding="20dp"
            android:text="알림확인"
            android:textColor="@android:color/black" />

        <TextView
            android:id="@+id/wishlist_hamburger_startpage"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="update"
            android:padding="20dp"
            android:text="위시리스트"
            android:textColor="@android:color/black" />

 

 

 

 

String.xml

resources 안에 추가

<resources>
	<string name="open">open</string>
    	<string name="close">close</string>

 

 

 

 

 

 

MainActivity.kt

 

클래스 바로 안에 토글 설정해주고

class MainActivity : AppCompatActivity() {


    private var mDrawerToggle : ActionBarDrawerToggle? = null

 

onCreate 안에 두 줄 써준 후

그 다음부터는 OnClickListener로 각 텍스트뷰마다 클릭시 원하는 액션을 설정해주면 된다 

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_mainpage)
        

		mDrawerToggle = ActionBarDrawerToggle(this, drawer_layout, toolbar, R.string.open, R.string.close)
        	mDrawerToggle!!.syncState()
        
        
        	alarm_hamburger_startpage.setOnClickListener {
            		// set action here
            
            
            		/* 얘는 햄버거가 다시 들어가는(닫히는) 코드라 꼭 필요한건 아님 */
            		drawer_layout!!.closeDrawer(GravityCompat.START)
        	}

 

 

 

 

 

 

 

 

 

참고한 영상

https://youtu.be/Muade904YnQ