본문 바로가기
Dailycoding/Android

CoordinatorLayout

봉구형 2024. 8. 21. 13:33

기본 화면(MaterialToolbar고정)

 

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/materialToolbar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:title="ToolbarTitle" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/materialToolbar_main" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

CoordinatorLayout 사용

 

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

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/materialToolbar_main"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            app:layout_scrollFlags="scroll|enterAlways"
            app:title="ToolbarTitle" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

 

CoordinatorLayout

- 뷰끼리 상호 작용해야 할 때 사용합니다.

- 주로 리사이클러 뷰와  AppBarLayout과 함께 사용합니다.

 

app:layout_scrollFlags 여러 속성

 

1. scroll

  • 설명: 스크롤할 때 뷰가 사라지도록 합니다.
  • 사용 예: 사용자가 아래로 스크롤할 때 AppBarLayout이 위로 숨겨지도록 할 때 사용합니다.

2. enterAlways

  • 설명: 사용자가 스크롤을 위로 올릴 때 뷰가 항상 나타나도록 합니다.
  • 사용 예: 아래로 스크롤했을 때 사라진 뷰가 다시 나타나도록 할 때 사용합니다.

3. exitUntilCollapsed

  • 설명: 뷰가 완전히 사라질 때까지 스크롤할 수 있도록 하며, 사용자가 더 이상 스크롤하지 않으면 일부가 남아 있게 됩니다.
  • 사용 예: 툴바가 완전히 사라지지 않고 일부만 남아 있도록 할 때 사용됩니다.

4. enterAlwaysCollapsed

  • 설명: 사용자가 스크롤을 위로할 때 뷰가 항상 나타나지만, 이전 상태에 비해 더 적은 공간을 차지하게 됩니다.
  • 사용 예: 툴바가 축소된 상태로 나타나도록 할 때 사용됩니다.

5. snap

  • 설명: 스크롤 시 뷰가 특정 위치에서 스냅(Snap) 되도록 합니다.
  • 사용 예: 스크롤이 완료될 때 뷰가 특정 위치에 고정되도록 할 때 사용됩니다. 주로 CollapsingToolbarLayout과 함께 사용됩니다.

 

app:layout_behavior 속성에는 여러 가지 설정을 사용할 수 있으며, 이는 CoordinatorLayout 내에서 상호작용하는 뷰의 동작을 정의하는 데 도움을 줍니다. 아래는 일반적으로 사용되는 몇 가지 layout_behavior 설정에 대한 설명입니다.

 

1. @string/appbar_scrolling_view_behavior

  • 설명: AppBarLayout과 함께 사용되는 기본 스크롤 동작입니다.
  • 기능: RecyclerView, NestedScrollView와 같은 스크롤 가능한 뷰에서 스크롤 이벤트에 따라 AppBarLayout의 보이기/숨기기를 처리합니다. 사용자가 아래로 스크롤하면 AppBarLayout이 사라지고, 위로 스크롤하면 다시 나타납니다.

2. @string/floatingActionButton_behavior

  • 설명: FloatingActionButton에 적용되는 기본 동작입니다.
  • 기능: FloatingActionButton이 스크롤 뷰의 스크롤과 함께 동작하도록 하여, 스크롤 시 버튼이 숨겨지거나 나타나게 할 수 있습니다. 이 설정은 CoordinatorLayout에 있는 다른 뷰와의 상호작용을 조정합니다.

3. @string/bottom_sheet_behavior

  • 설명: BottomSheet에 적용되는 동작입니다.
  • 기능: BottomSheet가 스크롤 이벤트에 따라 표시되거나 숨겨지도록 합니다. 사용자가 콘텐츠를 스크롤할 때 BottomSheet의 위치가 동적으로 변경될 수 있습니다.

4. @string/appbar_scrolling_view_behavior

  • 설명: 스크롤 가능한 뷰가 AppBarLayout과 어떻게 상호작용하는지를 정의합니다.
  • 기능: 이 동작은 AppBarLayout의 스크롤 동작을 조정하고, 스크롤 시 툴바가 어떻게 나타나고 사라지는지를 제어합니다.

5. @string/snackbar_behavior

  • 설명: Snackbar에 적용되는 동작입니다.
  • 기능: Snackbar가 표시될 때, 그 위치를 조정하고 스크롤 가능한 뷰와의 상호작용을 관리합니다. 예를 들어, Snackbar가 보일 때 RecyclerView가 자동으로 위로 이동하게 할 수 있습니다.

6. 커스텀 Behavior

  • 설명: 사용자가 자신의 요구에 맞게 커스텀 동작을 정의할 수 있습니다.
  • 기능: View의 서브클래스를 만들고, CoordinatorLayout.Behavior를 확장하여 특정 동작을 구현할 수 있습니다. 예를 들어, 특정 뷰가 다른 뷰의 스크롤에 따라 어떻게 반응할지를 정의할 수 있습니다.

요약

  • app:layout_behavior 속성은 CoordinatorLayout 내에서 뷰의 상호작용을 정의하는 데 사용됩니다.
  • 기본 제공되는 여러 behavior 외에도 사용자 정의 behavior를 만들어 더욱 복잡한 상호작용을 구현할 수 있습니다.
  • 이러한 동작들은 사용자의 스크롤 행동에 따라 UI 요소가 어떻게 보이고 숨겨지는지를 제어하여 매끄러운 사용자 경험을 제공합니다.

CollapsingToolbarLayout 사용

CollapsingToolbarLayout

- AppBarLayout 내에서 사용되어 툴바의 제목과 배경 이미지가 스크롤에 따라 축소(콜랩스)되거나 확장되는 효과를 제공합니다. 이 컴포넌트는 스크롤 가능한 콘텐츠와 함께 시각적으로 매력적인 사용자 인터페이스를 만드는 데 도움을 줍니다.

 

 

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

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleTextColor="@color/white"
            app:contentScrim="@android:color/white"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="ToolbarTitle">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:background="@color/white"
                android:scaleType="centerCrop"
                android:src="@drawable/img_bg"
                app:layout_collapseMode="parallax" />

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/materialToolbar_main"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@android:color/transparent"
                app:layout_collapseMode="pin" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>
  1.  
  • app:layout_scrollFlags: 툴바의 스크롤 동작을 제어합니다. 예를 들어, scroll, exitUntilCollapsed, enterAlways, enterAlwaysCollapsed 등을 조합하여 사용할 수 있습니다.
  • app:expandedTitleTextColor: 확장된 상태에서의 제목 텍스트 색상 설정.
  • app:collapsedTitleTextColor: 축소된 상태에서의 제목 텍스트 색상 설정.
  • app:contentScrim: 콘텐츠 스크롤 시 툴바의 배경색을 설정합니다.
  • app:layout_collapseMode: 자식 뷰에서 사용할 수 있는 속성으로, parallax, pin, none 등을 설정하여 스크롤 동작에 따른 효과를 조정합니다.
    • pin : 고정되어 스크롤되지 않습니다.
    • parallax : 함께 스크롤됩니다.

 

 

MainActivty.kt

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding
    private lateinit var adapter: MainAdapter

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

        binding = ActivityMainBinding.inflate(layoutInflater)

        adapter = MainAdapter()
        binding.recyclerViewMain.adapter = adapter
        binding.recyclerViewMain.layoutManager = LinearLayoutManager(this)

        val items = List(20) { "${it + 1}번째 아이템" }
        adapter.submitList(items)

        setContentView(binding.root)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }
    }
}

 

MainAdapter.kt

class MainAdapter : ListAdapter<String, MainAdapter.ViewHolder>(diffUtil) {

    inner class ViewHolder(private val binding: ItemMainBinding) : RecyclerView.ViewHolder(binding.root) {
        fun bind(string: String) {
            binding.textViewMainItem.text = string
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val binding = ItemMainBinding.inflate(LayoutInflater.from(parent.context), parent, false)
        return ViewHolder(binding)
    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        val item = getItem(position)
        holder.bind(item)
    }

    companion object {
        val diffUtil = object : DiffUtil.ItemCallback<String>() {
            override fun areItemsTheSame(oldItem: String, newItem: String): Boolean {
                return oldItem == newItem
            }

            override fun areContentsTheSame(oldItem: String, newItem: String): Boolean {
                return oldItem == newItem
            }

        }
    }

}

 

item_main.xml

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

    <TextView
        android:id="@+id/textView_main_item"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="1번째 아이템" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

전체코드

 

 

Blog/Project/CoordinatorLayout at develop · wjdwntjd55/Blog

Contribute to wjdwntjd55/Blog development by creating an account on GitHub.

github.com

 

'Dailycoding > Android' 카테고리의 다른 글

Room + 검색 화면  (0) 2024.08.28
Data Binding  (0) 2024.08.27
wifi 없을 때 Room 사용해서 화면에 표현  (0) 2024.08.19
shimmer library를 사용해서 스켈레톤 로딩 화면  (0) 2024.06.11
Viewpager2 활용해서 banner 구현  (0) 2024.06.01

'Dailycoding/Android' Related Articles

티스토리툴바