Android Studio Material Design 그외 3 (CollapsingToolbarLayout)

◎Material Design : Gogle 디자인 가이드 라인

①Navigation Drawer

②Toolbar

③AppBar Layout, TabLayout

④Floating Action Button, SnackBar - Toast와 비슷하지만 업그레이드 된거라 생각하면 됨.

⑤CoordinatorLayout, NestedScrollView

⑥CollapsingToolbarLayout - 무너질 수 있는 툴바

 

<최종 실행 화면>

 

제목 줄부터 없애자.

타이틀은 흰색, 메뉴 아이콘 색 흰색

앱바를 쓴다는 것은 material 라이브러리 추가

이제 화면 설계를 하자.

미리 이미지 파일을 추가 했다.

제목줄을 툴바로 대체하자.

다시 화면구성.xml로 가서 앱바 밑에  네스티드 뷰를 만들자.

미리 보기 화면을 보면 제목줄이 style적용이 안된다.

그림이 사라지면서 색이 바뀌는 코드

그전 사진과 달리 이미지가 사라지고 제목이 남았을때, 자동으로 색이 바뀐다.

그리고 이제, FloatingActionButton 을 추가해보자. (네스티드 뷰 밑에 추가. 그리고 앱바쪽에 달기위해 앱바 id필요)

앱바 id 추가

activity_main.xml

<?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"
    tools:context=".MainActivity">
 
    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="240dp"
        android:theme="@style/AppTheme.Appbar"
        android:id="@+id/appbar">
 
        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="@color/colorPrimary">
<!--       contentScrim   이미지가 사라지면서 지정한 색으로 바뀐다.  -->
<!--       exitUntilCollapsed    툴바만 남기고 무너짐 -->
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/newyork"
                android:scaleType="fitXY"
                app:layout_collapseMode="parallax"/>
<!--    layout_collapseMode        스크롤되는 것을 시간차로 되기-->
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"/>
 
        </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="@string/appbar_scrolling_view_behavior">
<!-- layout_behavior   원래는 앱바와 네스티드뷰가 겹치는데 위 한줄을 써주면 앱바 아래로 가고   -->
<!--        앱바가 스크롤되면 네스티드뷰도 스크롤 되라고 한거다.-->
        <!--    네스티드뷰는 안에 뷰를 하나 밖에 놓을 수 없다. 그리고 안에 넣은 뷰는 wrap -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:background="#FF0000"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:background="#00FF00"/>
            <TextView
                android:layout_width="match_parent"
                android:layout_height="250dp"
                android:background="#0000FF"/>
 
        </LinearLayout>
    </androidx.core.widget.NestedScrollView>
 
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:fabSize="mini"
        android:backgroundTint="@color/colorPrimary"
        android:src="@android:drawable/ic_menu_send"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right"
        android:layout_marginRight="16dp"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
 

MainActivity.java

package com.lcw.ex52collapsingtoolbarlayout;
 
import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.Toolbar;
 
import android.os.Bundle;
 
public class MainActivity extends AppCompatActivity {
 
    Toolbar toolbar;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        toolbar=findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}