[Android] Sunflower 클론코딩 (22.06.05)

유재민·2022년 6월 5일
0

Sunflower

목록 보기
4/12
post-thumbnail

NoActionBar

<!-- themes.xml -->

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Sunflower" parent="Theme.MaterialComponents.DayNight.NoActionBar">

		...

    </style>
</resources>

Theme.MaterialComponents.DayNight.NoActionBar 로 변경

View Pager Structure

<CoordinatorLayout>

	<AppBarLayout>

		<CollapsingToolbarLayout>

			<ImageView>
			</ImageView>

			<Toolbar>
			</Toolbar>

		</CollapsingToolbarLayout>

	</AppBarLayout>
	
	<ViewPager2>
	</ViewPager2>

</CoordinatorLayout>
  • CoordinatorLayout : FrameLayout 특징을 가지며, 자식뷰에 behavior을 설정하여 다양한 움직임 및 애니메이션 상호작용을 구현할 수 있음
  • ImageView : 접히거나 나타날 이미지
  • Toolbar : 접혔을 때도 남아있을 툴바
  • ViewPager2 : 스크롤할 뷰 (NestedScrollView, RecyclerView 가능)

Code

<!-- fragment_view_pager.xml -->

<layout>
		<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:id="@+id/coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

				...

    </androidx.coordinatorlayout.widget.CoordinatorLayout>
</layout>

fitsSystemWindows="true" : 상태바(Statusbar)가 툴바(Toolbar)를 가리는 경우 뷰가 차지할 수 있는 영역을 상태바 및 소프트키 영역을 제외한 영역까지 확장해주는 역할

<layout>
	<CoordinatorLayout>

		<androidx.viewpager2.widget.ViewPager2
		    android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"/>

		...

	</CoordinatorLayout>
</layout>

app:layout_behavior="..$ScroolingViewBehavior" : 스크롤 시 액션바를 줄어들게 함

<layout>
	<CoordinatorLayout>

		...

		<com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
				android:fitsSystemWindows="true"
				android:theme="@style/Theme.Sunflower_clone.AppBarOverlay">

        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
						app:layout_scrollFlags="scroll|snap"
            app:toolbarId="@id/toolbar">

        </com.google.android.material.appbar.CollapsingToolbarLayout>
    </com.google.android.material.appbar.AppBarLayout>
	</CoordinatorLayout>
</layout>

app:layout_scrollFlags

  • scroll : 이 뷰가 화면에서 사라질 수 있다.
  • snap : AppbarLayout size의 절반 크기 기준으로 아래 위로 달라붙는다.

android:fitsSystemWindows="true" : 스크롤 시 앱바가 상태바를 침범하기 때문에 필요

android:theme="@style/Theme.Sunflower_clone.AppBarOverlay"

<!-- themes.xml -->

<resource>

	...

	<style name="Theme.Sunflower_clone.AppBarOverlay" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar"/>

</resource>

AppBar 내 Toolbar의 글자색을 흰색으로 변경 (Dark.ActionBar)

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:contentInsetStart="0dp"
    app:layout_collapseMode="parallax">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:gravity="center"
        android:textAppearance="?attr/textAppearanceHeadline5"/>

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

app:contentInsetStart="0dp" : 왼쪽 공백 없애기

app:layout_collapseMode="parallax"

  • pin : CollapsingToolbarLayout 이 축소되면 툴바는 화면위에 고정됨
  • parallax : 축소되면서 사라짐

android:textAppearance : 텍스트 크기 및 스타일 설정

TabLayout

  1. selector 추가
<!-- tab_icon_color_selector.xml -->

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="?attr/colorOnPrimary" android:state_activated="true" />
    <item android:color="?attr/colorPrimaryDark"/>
</selector>
  1. colors 선언
<!-- colors.xml -->

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="sunflower_black">#de000000</color>
    <color name="sunflower_gray_50">#fafafa</color>
    <color name="sunflower_gray_50_a600">#99fafafa</color>
    <color name="sunflower_green_300">#6dc790</color>
    <color name="sunflower_green_500">#49bb79</color>
    <color name="sunflower_green_700">#005d2b</color>
    <color name="sunflower_green_900">#1a231e</color>
    <color name="sunflower_white">#deffffff</color>
    <color name="sunflower_yellow_300">#f8f99f</color>
    <color name="sunflower_yellow_500">#ffff63</color>
</resources>
  1. themes 수정
<style name="Theme.Sunflower_clone" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        <item name="colorPrimary">@color/sunflower_green_500</item>
        <item name="colorOnPrimary">@color/sunflower_yellow_500</item>
        <item name="colorPrimaryDark">@color/sunflower_green_700</item>
        <item name="colorOnSurface">@color/sunflower_black</item>
        <item name="colorAccent">@color/sunflower_green_700</item>
        <item name="colorSurface">@color/sunflower_gray_50</item>
        <item name="colorSecondary">@color/sunflower_yellow_500</item>
        <item name="android:colorBackground">@color/sunflower_green_500</item>
</style>
  1. TabLayout 추가
<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabs"
    style="@style/Widget.MaterialComponents.TabLayout.Colored"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:tabIconTint="@drawable/tab_icon_color_selector"
app:tabTextColor="?attr/colorPrimaryDark"/>

style="@style/Widget.MaterialComponents.TabLayout.Colored" : TabLayout 스타일 설정 (배경색, 글자색, Indicator 색 등) → colorPrimary or colorOnPrimary 미리 설정 필요 (3번)

profile
유잼코딩

0개의 댓글