[CollapsingToolbarLayout] 삼성 메시지, 삼성 설정 앱 클론 코딩 (scrollFlags = "snap", AppbarLayout, Toolbar)
2021. 11. 22. 10:46ㆍ모바일/Android_Java
[CollapsingToolbarLayout] 삼성 메시지, 삼성 설정 앱 클론 코딩 (scrollFlags = "snap", AppbarLayout, Toolbar)
final float ADD_BTN_X = getDpToPx(this, 37) * -1.0f;
final float ADD_BTN_Y = getDpToPx(this, 75) * -1.0f;
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
CollapsingToolbarLayout toolBarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
ConstraintLayout constraintLayout = findViewById(R.id.two_cl);
constraintLayout.setAlpha(0);
FloatingActionButton addToBtn = findViewById(R.id.addToBtn);
AppBarLayout appBarLayout = findViewById(R.id.app_bar);
appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
int totalOffset = appBarLayout.getTotalScrollRange();
int offset = Math.abs(verticalOffset);
float ratio = 0; // 0: 펼침
if (offset != 0) {
ratio = (float) offset / (float) totalOffset;
}
addToBtn.setAlpha(1 - ratio * 2 + 0.1f);
constraintLayout.setAlpha((ratio - 0.5f) * 2 + 0.1f);
}
});
xml
구조 개략
<CoordinatorLayout>
<AppBarLayout>
<CollapsingToolbarLayout
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<Toolbar
app:layout_collapseMode="pin"
app:layout_ancor="@id/~~">
<최상단툴바영역/>
</Toolbar>
<LinearLayout
app:layout_collpaseMode="parallax"
app:layout_collapseParallaxMultiplier="0.3">
<아래영역스크롤되면서사라질뷰들/>
</LinearLayout>
</CollapsingToolbarLayout>
<위영역이Collapsing되면서최상단툴바영역에붙을영역/>
</AppBarLayout>
<NestedScrollView
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<내부/>
</NestedScrollView>
</CoordinatorLayout>
layout_collapseParallaxMultipler
app:layout_collapseParallaxMultipler="0.3"
- 0.0~1.0까지의 값이 있으며 default 는 0.5이다
- 0.3으로 셋팅하면 해당영역이 스크롤up하면서 사라지는데 이때 흐림정도가 1->0.3만큼 남아있다가 스크롤영역에 의해 사라진다
- 0으로 하면 스크롤up할때, 스크롤 영역에 의해 완전히 사라지기 전에 1->0(visibility:gone)되고 난 후에 스크롤 영역에 의해 사라진다
layout_scrollFlags
- 중요한점!! 반정도 스크롤 됐을 때 자동으로 expand, collapse 되게 하는 플래그 : snap
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
구현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"
android:fitsSystemWindows="true"
tools:context=".ScrollingActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/app_bar_height"
android:background="#00000000"
android:fitsSystemWindows="true">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:toolbarId="@+id/toolbar">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="42dp"
app:layout_collapseMode="pin"
app:popupTheme="@style/Theme.ScrollingActivityJava.PopupOverlay" />
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="140dp"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/addToBtn"
android:layout_width="100dp"
android:layout_height="100dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/two_cl"
android:layout_width="match_parent"
android:layout_height="42dp"
android:layout_gravity="bottom"
android:paddingLeft="20dp"
android:paddingRight="20dp"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white" />
<View
android:id="@+id/headerLine"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/totalCount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="11dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
android:text="총 100개" />
<TextView
android:id="@+id/groupInfoState"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="6dp"
android:textSize="11dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toRightOf="@+id/totalCount"
app:layout_constraintTop_toTopOf="parent"
android:text="공개" />
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include
android:id="@+id/include"
layout="@layout/content_scrolling" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
구현화면
'모바일 > Android_Java' 카테고리의 다른 글
[Android] avd(emulator) 경로 변경 (0) | 2021.12.07 |
---|---|
[Android] textview in ConstraintLayout cutoff(잘림 현상) (0) | 2021.11.30 |
[Android] 부모 레이아웃에 클릭 이벤트를 설정했는데 자식 레이아웃 클릭 할 때 부모레이아웃 클릭 이벤트 적용 안될때 (0) | 2021.11.15 |
FileProvider (0) | 2021.11.02 |
[Android] WebView shouldOverrideUrlLoading 한글 깨짐 (0) | 2021.10.18 |