[41일차 Android] AppBarLayout

 

 

 

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

​

​

 

📖 AppBarLayout

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

 

CoordinatorLayout

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

 

예제 코드

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"


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

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"

        android:layout_height="192dp"
        android:layout_width="match_parent">

        <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>

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

 

 

 

MainActivity.kt

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로 사용하도록 설정
            setSupportActionBar(toolbar)

            // 접혔을 때의 타이틀 색상
            toolbarLayout.setCollapsedTitleTextColor(Color.WHITE)

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

            // 접혔을 때의 타이틀 위치
            toolbarLayout.collapsedTitleGravity = Gravity.CENTER_HORIZONTAL

            // 펼쳐졌을 때의 타이틀 위치
            toolbarLayout.expandedTitleGravity = Gravity.TOP
        }
    }
}

 

 

 

결과