CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout, RecyclerView 등을 사용한 머터리얼 디자인 레이아웃

공감 및 댓글은 포스팅 하는데  아주아주 큰 힘이 됩니다!! 포스팅 내용이 찾아주신 분들께  도움이 되길 바라며 더 깔끔하고 좋은 포스팅을  만들어 나가겠습니다^^

안드로이드 폰을 쓰시는 분들이나 개발하시는 분들은 위 같은

레이아웃의 형태를 종종 보셨을텐데요.

오늘은 저 레이아웃을 만들어보려고 합니다.

1. build.gradle(Module:app) 에 종속성 추가하기

implementation 'com.android.support:design:28.0.0-rc01'

design만 추가해주면 됩니다.

2. RecyclerView에 들어갈 item_main.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="60dp">
        <TextView
            android:id="@+id/textView"
            android:textSize="22sp"
            android:textColor="@color/colorPrimary"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.constraint.ConstraintLayout>
</layout>

3. RecyclerView에 사용될 MainAdapter.java

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.ViewGroup;

import com.example.rowan_dev.coordinationex.databinding.ItemMainBinding;

import java.util.ArrayList;

public class MainAdapter extends RecyclerView.Adapter {

    private ArrayList<String> names;
    private Context context;

    public MainAdapter(ArrayList<String> names, Context context) {
        this.names = names;
        this.context = context;
    }

    @NonNull
    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
        ItemMainBinding binding = ItemMainBinding.inflate(LayoutInflater.from(context), viewGroup, false);
        return new MainHolder(binding);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int i) {
        MainHolder holder = (MainHolder) viewHolder;
        ItemMainBinding binding = holder.binding;
        binding.textView.setText(names.get(i));
    }

    @Override
    public int getItemCount() {
        return names.size();
    }

    class MainHolder extends RecyclerView.ViewHolder {
        ItemMainBinding binding;

        public MainHolder(ItemMainBinding binding) {
            super(binding.getRoot());
            this.binding = binding;
        }
    }
}

4. activity_main.xml 구성

<?xml version="1.0" encoding="utf-8"?>
<layout 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.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FFFFFF"
        tools:context=".MainActivity">

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="192dp"
            android:fitsSystemWindows="true"
            android:background="@color/colorPrimary">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapseLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <android.support.v7.widget.Toolbar
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:contentInsetStart="0dp"
                    app:layout_collapseMode="pin">

                    <ImageView
                        android:layout_width="48dp"
                        android:layout_height="match_parent"
                        android:contentDescription="@string/app_name"
                        android:scaleType="centerInside"
                        android:src="@drawable/ic_arrow_back_black_24dp"/>
                </android.support.v7.widget.Toolbar>
            </android.support.design.widget.CollapsingToolbarLayout>

        </android.support.design.widget.AppBarLayout>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="16dp"
            android:src="@drawable/ic_person_black_24dp"
            app:backgroundTint="@color/colorAccent"
            app:fabSize="normal"
            android:elevation="4dp"
            app:layout_anchor="@+id/appBarLayout"
            app:layout_anchorGravity="bottom|end" />

    </android.support.design.widget.CoordinatorLayout>
</layout>

app:layout_scrollFlags는 6개의 속성을 가집니다.

ㄱ. scroll : toolbar 까지 자연스럽게 스크롤 됨, 스크롤 이벤트에 반응할 모든

View에 넣어줘야 합니다.

ㄴ. enterAlways : 툴바만 먼저 스크롤되어 사라진 뒤 나머지가 스크롤 됨.

ㄷ. enterAlwaysCollapsed

ㄹ.  exitUntilCollapsed

ㅁ. snap

ㅂ. snapMargins

하나 씩 적용해보시면서 차이를 체감하시면 될 듯 합니다.

5. MainActivity.java

import android.databinding.DataBindingUtil;
import android.graphics.Color;
import android.os.Build;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;

import com.example.rowan_dev.coordinationex.databinding.ActivityMainBinding;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private ActivityMainBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            getWindow().setStatusBarColor(getResources().getColor(R.color.colorPrimaryDark));
        }
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
        binding.collapseLayout.setTitle("타이틀입니다.");
        binding.collapseLayout.setExpandedTitleColor(Color.WHITE);
        binding.collapseLayout.setCollapsedTitleTextColor(Color.WHITE);
        LinearLayoutManager manager = new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false);
        binding.recyclerView.setLayoutManager(manager);
        ArrayList<String> names = new ArrayList<>();
        names.add("Alpha");
        names.add("Beta");
        names.add("Charlie");
        names.add("Duke");
        names.add("Emma");
        names.add("Frank");
        names.add("Grace");
        names.add("Henry");
        names.add("Isabella");
        names.add("Jack");
        names.add("Kelley");
        names.add("Leona");
        MainAdapter adapter = new MainAdapter(names, this);
        binding.recyclerView.setAdapter(adapter);

    }
}

완성 소스는 깃허브에 공유해놓았습니다.

https://github.com/Parksunggyun/CoordinationEx

이상입니다.

감사합니다.