본문 바로가기
프로그래밍/App 개발

[Android] 눈 내리는 배경 만들기

by 엽기토기 2020. 12. 25.
반응형

 

 

눈 내리는 배경 만들기

오픈소스를 활용하여 앱에 눈을 뿌려보자.

 

github.com/JetradarMobile/android-snowfall

 

JetradarMobile/android-snowfall

Fully customizable implementation of "Snowfall View" on Android. - JetradarMobile/android-snowfall

github.com

먼저, build.gradle의 dependencies에 compile 'com.github.jetradarmobile:android-snowfall:1.2.0' 를 추가한다.

dependencies {
    ...
    compile 'com.github.jetradarmobile:android-snowfall:1.2.0'
}

 

그리고 원하는 위치에 다음 코드를 추가한다. 눈의 개수와 속도 등을 설정할 수 있다.

snowflake 파일 => github.com/JetradarMobile/android-snowfall/tree/master/snowfall-sample/src/main/res/drawable-hdpi

 <com.jetradarmobile.snowfall.SnowfallView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        android:background="#00000000"
                        app:snowflakeAlphaMax="255"
                        app:snowflakeAlphaMin="150"
                        app:snowflakeAngleMax="5"
                        app:snowflakeImage="@drawable/snowflake"
                        app:snowflakeSizeMax="32dp"
                        app:snowflakeSizeMin="8dp"
                        app:snowflakeSpeedMax="5"
                        app:snowflakeSpeedMin="2"
                        app:snowflakesAlreadyFalling="false"
                        app:snowflakesFadingEnabled="true"
                        app:snowflakesNum="130" />

흠 근데, 전에 corner radius를 적용시킨 framelayout 모서리 부분에도 눈이 삐져나오는 현상이 발생했다.

그래서, CardView(androidx.cardview.widget.CardView)에 투명색과 CornerRadius를 설정하여 SnowfallView 전체를 감싸줬다.

(음영을 없애기 위해서 cardElevation를 0으로 설정한다.)

 

 

fullcode

<FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/toolbar"
            android:background="@drawable/rounded_background">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/rounded_background">

                <androidx.cardview.widget.CardView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    app:cardBackgroundColor="#00000000"
                    app:cardCornerRadius="30dp"
                    app:cardElevation="0dp">

                    <com.jetradarmobile.snowfall.SnowfallView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        android:background="#00000000"
                        app:snowflakeAlphaMax="255"
                        app:snowflakeAlphaMin="150"
                        app:snowflakeAngleMax="5"
                        app:snowflakeImage="@drawable/snowflake"
                        app:snowflakeSizeMax="32dp"
                        app:snowflakeSizeMin="8dp"
                        app:snowflakeSpeedMax="5"
                        app:snowflakeSpeedMin="2"
                        app:snowflakesAlreadyFalling="false"
                        app:snowflakesFadingEnabled="true"
                        app:snowflakesNum="130" />
                </androidx.cardview.widget.CardView>
            </FrameLayout>

=> FrameLayout이 두 개인 이유: 뒤에 배경색이 비치는 현상(...)이 발생해서 하나 더 넣어줬더니 됐다.

* 혹시 더 좋은 방법이 있으신 분은 댓글로 알려주세요!

 

 

반응형