[10주차 - 수] AppBarLayout

AppBar Layout

• ToolBar와 다른 View들을 관리하기 위해 제공되는 Layout이다.
• 반드시 CoordinatorLayout 안에 포함되어 있어야 한다.
• CoordinatorLayout 를 통해 다른 View들과 연동될 수 있다.

CoordinatorLayout

• CoordinatorLayout은 View를 배치하기 보단 배치된 View들을 관리하기 위한 목적으로 사용한다.
• CoordinatorLayout에 배치된 View에서 어떠한 사건이 발생하면 이를 감지하여 배치된 다른 View 들에게 전달하거나 스스로 어떤 처리를 할 수 있는 Layout 이다.

 

1. activity_main.xml

 

AppBarLayout 을 CoordinatorLayout 안에 넣으면 옆에 보이는 창이 뜬다. 사진에 보이는 대로 체를 하면 자동으로 appbar 와 NestedScrollView 가 생긴다

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 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">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="192dp">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/toolbarLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
            app:layout_scrollInterpolator="@android:anim/decelerate_interpolator"
            app:toolbarId="@+id/toolbar">

            <ImageView
                android:id="@+id/app_bar_image"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@android:drawable/sym_def_app_icon" />

            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"></androidx.appcompat.widget.Toolbar>
        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="TextView"
            android:textAppearance="@style/TextAppearance.AppCompat.Large" />
    </androidx.core.widget.NestedScrollView>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

2. MainActivity

 

class MainActivity : AppCompatActivity() {
    lateinit var activityMainBinding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        activityMainBinding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(activityMainBinding.root)

        activityMainBinding.run{
            appBarImage.setImageResource(R.drawable.img_android)

            // toolbar를 ActionBar로 사용하도록 설정한다.
            // - ActionBar로 설정해줘야 보인다
            setSupportActionBar(activityMainBinding.toolbar)

            //  접혔을 때의 타이틀 색상
            toolbarLayout.setCollapsedTitleTextColor(Color.WHITE)
            // 펼쳐졌을 때의 타이틀 색상
            toolbarLayout.setExpandedTitleColor(Color.GREEN)

            // 접혓을 때의 타이틀 위치
            toolbarLayout.collapsedTitleGravity = Gravity.CENTER_HORIZONTAL
            // 펼쳐졌을 때의 타이틀 위치 (우측 상단)
            toolbarLayout.expandedTitleGravity = Gravity.RIGHT + Gravity.TOP

            // activity_main.xml에서 CollapsingToolbarLayout 의 layout_scrollFlags 속성
            // "scroll|enterAlways|enterAlwaysCollapsed" : 접었을 때 툴바가 사라진다.
            // "scroll|exitUntilCollapsed" : 접었을 때 툴바가 사라지지 않는다.

        }

    }
}

---

[챗 GPT 설명]

 

1. setSupportActionBar(activityMainBinding.toolbar)를 사용하여 지정된 Toolbar를 액티비티의 액션 바로 설정합니다. 이렇게 하면 Toolbar가 앱 바의 역할을 수행하게 됩니다.
2. toolbarLayout.setCollapsedTitleTextColor(Color.WHITE)을 사용하여 ToolbarLayout의 접혔을 때의 타이틀 텍스트 색상을 설정합니다. 이 경우에는 흰색으로 설정되었습니다.
3. toolbarLayout.setExpandedTitleColor(Color.GREEN)을 사용하여 ToolbarLayout의 펼쳐졌을 때의 타이틀 텍스트 색상을 설정합니다. 이 경우에는 초록색으로 설정되었습니다.
4. toolbarLayout.collapsedTitleGravity = Gravity.CENTER_HORIZONTAL를 사용하여 ToolbarLayout의 접혔을 때의 타이틀 위치를 설정합니다. 이 경우에는 수평 중앙으로 설정되었습니다.
5. toolbarLayout.expandedTitleGravity = Gravity.RIGHT + Gravity.TOP을 사용하여 ToolbarLayout의 펼쳐졌을 때의 타이틀 위치를 설정합니다. 이 경우에는 오른쪽 상단으로 설정되었습니다.

 

---

[결과]

 

 

 

출처 : 안드로이드 앱스쿨 2기 윤재성 강사님