안드로이드

[안드로이드] 툴바 include

loasd 2022. 12. 21. 00:59
반응형

https://github.com/lnjky/fashion_people

 

GitHub - lnjky/fashion_people: 패션 추천 어플

패션 추천 어플. Contribute to lnjky/fashion_people development by creating an account on GitHub.

github.com

코드 전체를 보려면 위에 링크를 통해 확인할 수 있습니다.

 


xml 파일을 통해 화면을 구성할 때 같은 뷰들이 계속해서 나오는 경우가 있다.

예시로 아래의 사진을 보면

이렇게 패플이 떠있는 부분, 여러가지 기능들을 넣은 바를 두어서 어플을 만드는 경우가 있는데

이때는 모든 화면에서 같은크기, 같은 색상을 사용할 필요가 있다.

 

그럴때 귀찮게 계속 만든다면 귀찮기도하고 시간도 어느정도 소요되서 간단히 하는 방법을 작성하고자 한다.

 

먼저 xml파일을 만들고 아래의 코드로 작성한다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="#색상"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

</androidx.appcompat.widget.Toolbar>

색상에 원하는 색을 넣고 toolbar.xml로 저장을 한다.

여기서는 단순하게 툴바만 넣고 따로 기능은 넣지 않았는데 아래와 같이 넣어서 사용할 수도 있다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:background="#B388FF"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

    <ImageView
        android:id="@+id/iv_save_back"
        android:layout_width="40dp"
        android:layout_height="33dp"
        android:background="@drawable/ic_baseline_arrow_back_24"
        app:layout_constraintBottom_toBottomOf="@+id/toolbar"
        app:layout_constraintEnd_toStartOf="@+id/tv_save_title"
        app:layout_constraintHorizontal_bias="0.064"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/toolbar"
        app:layout_constraintVertical_bias="0.481">

    </ImageView>

</androidx.appcompat.widget.Toolbar>

이렇게 하면 뒤로가기 화살표가 생기면서 이미지뷰가 툴바에 추가된다.

이 때 액티비티에서 평소처럼 findviewById를 사용하여 이미지뷰를 연결하고 원하는대로 사용하면 된다.

 

 

그리고 액티비티와 연결되어있는 xml파일에 이 문장을 추가하면 된다.

    <include
        android:id="@+id/toolbar"
        layout="@layout/toolbar">

    </include>

이러면 xml파일에 툴바가 추가된 것을 확인할 수 있다.

 

 

꼭 툴바를 사용하기 위해서만이 아니라 공통적으로 들어가는 부분에 대해서 include를 사용하면 더 편리하고 빠르게 코드를 작성할 수 있다.

반응형