앱만들기 9. (Navigation Menu 커스텀)

저번처럼 navi툴을 (만들어진 것)을 쓰지않고

직접 커스텀 해보는것 

empty 툴 이용

 

---

layout 설정이 이번에는 다른때와 달리 drawer사용

androidx.drawerlayout.widget.DrawerLayout

내부에 Linear 사용button만들어줌id지정

 

app -> res -> layout 파일에 새로운 resource파일 생성함activity_drawer.xml 생성(가제)

Linear Layout사용해주고

내부에 width와 height조절

android:layout_gravity="start" 을 추가했는데, 이게 무슨뜻이지?

 

layout_gravity : 대상이 되는 뷰의 부모 컨테이너의 공간에서의 위치를 정렬할 때 사용

gravity : 뷰안의 내용을 정렬할 때 사용(텍스트뷰는 글자가 내용이 되고, 이미지뷰는 이미지가 내용이 됨)

출처: https://nkcnow.tistory.com/178 [CHOONIE'S PROGRAMMING NOTE]

 

 

 top

 해당 위젯을 윗쪽에 위치 시킵니다. 이때 사이즈에 변화는 없습니다.

 bottom

 해당 위젯을 하단에 위치 시킵니다. 이때 사이즈에 변화는 없습니다.

 left

 해당 위젯을 왼쪽에 위치 시킵니다. 이때 사이즈에 변화는 없습니다.

 right

 해당 위젯을 오른쪽에 위치 시킵니다. 이때 사이즈에 변화는 없습니다.

 center_vertical

 해당 위젯을 세로 중앙에 위치 시킵니다. 이때 사이즈에 변화는 없습니다.

 fill_vertical

 해당 위젯의 세로를 부모 뷰그룹의 사이즈에 맞게 늘려 채워줍니다.

 center_horizontal

 해당 위젯을 가로 중앙에 위치 시깁니다. 이때 사이즈에 변화는 없습니다.

 fill_horizontal

 해당 위젯의 가로를 부모 뷰그룹의 사이즈에 맞게 늘려 채워줍니다.

 center

 해당 위젯을 정중앙에 위치 시킵니다. 이때 사이즈의 변화는 없습니다.

 fill

 해당 위젯을 가로/세로 길이를 부모 뷰그룹의 사이즈에 맞게 늘려 채워줍니다.

 clip_vertical

 해당 위젯의 세로 길이가 부모 뷰그룹보다 클 경우 넘어서는 부분은 잘라냅니다.

 clip_horizontal

 해당 위젯의 가로 길이가 부모 뷰그룹 보다 클 경우 넘어서는 부분은 잘라냅니다.

 start

 해당 위젯을 부모 뷰그룹의 시작점에 위치 시켜 줍니다. 이때 사이즈의 변화는 없습니다.

 end

 해당 위젯을 부모 뷰그룹의 마지막에 위치 시켜 줍니다. 이때 사이즈의 변화는 없습니다.

출처: https://freehoon.tistory.com/24 [훈잇 블로그]

 

android:layout_width="match_parent"
android:layout_height="wrap_content"

<!-- 가로는 부모의 길이만큼 ,세로는 감싸는 정도만큼-->

 

버튼의 기능 말고도 Linear만으로 메뉴를 만들 수 있음

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#8572A6"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="test 메뉴"
/>

 

 

 

android:layout_margin="10dp" 로 적당히 간격만들어주기

 

layout xml파일을 main에 연결시켜줘야 함

<include layout="@layout/activity_drawer"/>
<!-- activity drawer layout을 이곳에 포함(연결)시켜라 라는뜻-->

 

추가

drawerLayout.setDrawerListener(listener);
drawerView.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
return true;
}
});

 

 

//기능 추가 가능
DrawerLayout.DrawerListener listener = new DrawerLayout.DrawerListener() {
@Override
public void onDrawerSlide(@NonNull View drawerView, float slideOffset) {
// 슬라이드했을때 상태값가져옴
}

@Override
public void onDrawerOpened(@NonNull View drawerView) {

}// open완료되었을때 호출

@Override
public void onDrawerClosed(@NonNull View drawerView) {
// 슬라이드 메뉴 닫혔을때
}

@Override
public void onDrawerStateChanged(int newState) {
// 상태 바뀌었을때
}
};

 

 

 

버튼 추가

Button btn_close = (Button)findViewById(R.id.btn_close);
btn_close.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
drawerLayout.closeDrawers();
}
});

 

왜 여기서 closeDrawer가 아닌 closeDrawers를쓰는지?

 

---

결과

코드

main.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"
    android:id="@+id/drawer_layout"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <Button
            android:id="@+id/btn_open"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="열려라 참깨!"/>

    </LinearLayout>
    <include layout="@layout/activity_drawer"/>
<!--    activity drawer layout을 이곳에 포함(연결)시켜라 라는뜻-->




</androidx.drawerlayout.widget.DrawerLayout>

java

package com.example.customnaviexample;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.drawerlayout.widget.DrawerLayout;

import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private DrawerLayout drawerLayout;
    private View drawerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        drawerLayout = (DrawerLayout)findViewById(R.id.drawer_layout);
        drawerView = (View)findViewById(R.id.drawer);

        Button btn_open = (Button)findViewById(R.id.btn_open);
        btn_open.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                drawerLayout.openDrawer(drawerView);
            }
        });

        Button btn_close = (Button)findViewById(R.id.btn_close);
        btn_close.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                drawerLayout.closeDrawers();
            }
        });

        drawerLayout.setDrawerListener(listener);
        drawerView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return true;
            }
        });



    }
    //기능 추가 가능
    DrawerLayout.DrawerListener listener = new DrawerLayout.DrawerListener() {
        @Override
        public void onDrawerSlide(@NonNull  View drawerView, float slideOffset) {

        }

        @Override
        public void onDrawerOpened(@NonNull  View drawerView) {

        }

        @Override
        public void onDrawerClosed(@NonNull View drawerView) {

        }

        @Override
        public void onDrawerStateChanged(int newState) {

        }
    };
}

drawer.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="#C1B4D8"
    android:id="@+id/drawer"
    android:orientation="vertical">

    <Button
        android:id="@+id/btn_close"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="메뉴닫기"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="내 메뉴"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:background="#E7E0F4"
        android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="test 메뉴"
            />


    </LinearLayout>






</LinearLayout>