728x90
반응형
네비게이션 드로어
용어가 조금 생소할수있습니다.
현재 제가 만들고있는 네이티브 앱을 하다보니 네비게이션 드로어를 사용해야할거같아서 사용을 해봤습니다.
매우 쉽게 구현이 가능하니 따라해보셔도 좋을거같습니다.
우선 네비게이션 드로어란?
이런식으로 메뉴버튼이나 옆으로 슬라이드 했을때 슉 튀어나오는 녀석을 말합니다.
서론 집어치우고 긁어가실 소스먼저 볼게요
우선 xml을 하나 만들어줍니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:id="@+id/drawerView"
android:background="#5559b4">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#5559b4">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="반갑습니다"
android:textSize="14dp"
android:textColor="#ffffff"
android:layout_marginTop="60dp"
android:layout_centerHorizontal="true">
</TextView>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/profile_icon"
android:id="@+id/genter_icon"
android:layout_marginTop="80dp"
android:layout_marginLeft="50dp">
</ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="이아람 님"
android:textSize="26dp"
android:textColor="#ffffff"
android:layout_marginTop="80dp"
android:layout_marginLeft="94dp"
>
</TextView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="쭉쭉이와 함께 활기찬 하루 시작하세요"
android:textSize="14dp"
android:textColor="#ffffff"
android:layout_marginTop="130dp"
android:layout_centerHorizontal="true">
</TextView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#80ffffff"
android:layout_marginTop="270dp">
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/motion_icon_off"
android:layout_marginTop="298dp"
android:layout_marginLeft="20dp">
</ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="운동이력"
android:textColor="#ffffff"
android:id="@+id/nav_ex"
android:layout_marginTop="298dp"
android:layout_marginLeft="44dp"
android:onClick="OnClick">
</TextView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#80ffffff"
android:layout_marginTop="340dp">
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/motion_icon_off"
android:layout_marginTop="368dp"
android:layout_marginLeft="20dp">
</ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="회원정보수정"
android:textColor="#ffffff"
android:id="@+id/nav_info"
android:layout_marginTop="368dp"
android:layout_marginLeft="44dp"
android:onClick="OnClick">
</TextView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#80ffffff"
android:layout_marginTop="410dp">
</LinearLayout>
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/motion_icon_off"
android:layout_marginTop="438dp"
android:layout_marginLeft="20dp">
</ImageView>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="도움말"
android:textColor="#ffffff"
android:id="@+id/nav_help"
android:layout_marginTop="438dp"
android:layout_marginLeft="44dp"
android:onClick="OnClick">
</TextView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#80ffffff"
android:layout_marginTop="480dp">
</LinearLayout>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="로그아웃"
android:textSize="15dp"
android:textColor="#ffffff"
android:id="@+id/nav_logout"
android:layout_marginTop="550dp"
android:layout_centerHorizontal="true"
android:onClick="OnClick">
</TextView>
</RelativeLayout>
</LinearLayout>
현재 위에 보여진 이미지에 맞게 짜여진 소스입니다.
다 지우셔도되요!
다만 여기서중요한건 제일 최상위 레이아웃 width가 280dp로 되어있습니다.
딱 화면에서 드로어 기능으로 보여줄 부분만 설정한거죠.
그후로 그 안에다가 레이아웃을 꾸미는건 여러분 자유입니다.
그다음 메인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:orientation="vertical"
android:background="#5559b4"
android:id="@+id/drawer_layout"
tools:context=".MainActivity">
<!-- 안에 자유롭게 꾸며보세요 ㅎㅎ -->
<include layout="@layout/activity_drawer"/>
</androidx.drawerlayout.widget.DrawerLayout>
최상위 레이아웃은 드로어레이아웃 입니다.
그리고 마지막에보면 include로 아까 위에서만든 레이아웃을 포함시켜줬어요!!
이제 메인 자바소스를 볼게요
private DrawerLayout drawerLayout;
private View drawerView;
//이거 까지는 클래스 밖에 전역으로 적어주세요.
drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
drawerView = (View) findViewById(R.id.drawerView);
drawerLayout.setDrawerListener(listener);
//이거 까지는 onCreate안에다가 적어주세요
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) {
}
};
//이거까지는 onCreate 밖에다가 적어주세요.
이렇게 해주시구요.
혹시 메뉴바같은거 눌렀을때 나오게 하고싶으시면
그 리스너안쪽에
drawerLayout.openDrawer(drawerView); <<이코드를 넣어주시면되요.
궁금하신 사항은 댓글 남겨주세요.
728x90
반응형
'Android' 카테고리의 다른 글
Json(제이슨) 레트로핏 통신으로 ID(아이디) 중복체크 하기. (0) | 2019.12.19 |
---|---|
Acitivity(액티비티) 전환시 변수가 초기화 되는 현상 (2) | 2019.12.19 |
안드로이드 사용자의 생년월일을 받아서 나이 계산. (0) | 2019.12.06 |
안드로이드 어플 켜지기전에 로딩되는 하얀색화면 제거 (0) | 2019.11.20 |
Intent 화면전환 시 데이터전달과 받는과정. (2) | 2019.11.19 |
댓글