[Android][JAVA] 컨페티 추가하기

 

 

 

목표

예약을 완료했을 때 축하해주는 화면 제작하기

 

 

 

.

.

.

 

사용한 깃허브 리소스는 다음과 같다🥰

 

https://github.com/DanielMartinus/Konfetti.git

GitHub - DanielMartinus/Konfetti: Celebrate more with this lightweight confetti particle system 🎊

 

2023년 8월 9일 기준으로, 이후 변경 사항이 있을 수 있으니 README 문서를 읽어주면 좋다.

 

 

 

 

 

1. build.gradle 에 dependency 추가

2023년 8월 9일 기준으로 2.0.3 버전이 나왔으나, JAVA의 경우 사용이 안되어서 2.0.2로 추가해주었다.

dependencies{
    //konfetti
    implementation 'nl.dionsegijn:konfetti-xml:2.0.2'
}

 

추가해주고 Sync Now 해준다.

 

 

 

 

 

2. xml에 KnofettiView 추가

 

 

사진 삭제

사진 설명을 입력하세요.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:background="@color/dark_black"
    tools:context=".BookSuccessActivity">



    <nl.dionsegijn.konfetti.xml.KonfettiView
        android:id="@+id/konfettiView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        tools:layout_editor_absoluteY="-128dp" />

    .
    .
    .

</androidx.constraintlayout.widget.ConstraintLayout>

 

공식문서에 있는 그대로 복붙해도 괜찮다!

내가 의도하고자 하는 건 버튼을 눌러서 활성화 되는 것이 아닌 화면이 켜지자 마자 활성화되는 것이기 때문에 KonfettiView만 추가해주었다.

 

 

 

 

 

3. Activity에 기능 추가하기

 

공식 문서에는 explode, parade, rain 세가지 기능이 구현되어있다. 그 중 parade 를 사용하였다.

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import static nl.dionsegijn.konfetti.core.Position.Relative;


import android.graphics.drawable.Drawable;
import android.os.Bundle;

import java.util.Arrays;
import java.util.concurrent.TimeUnit;

import nl.dionsegijn.konfetti.core.Angle;
import nl.dionsegijn.konfetti.core.Party;
import nl.dionsegijn.konfetti.core.PartyFactory;
import nl.dionsegijn.konfetti.core.Spread;
import nl.dionsegijn.konfetti.core.emitter.Emitter;
import nl.dionsegijn.konfetti.core.emitter.EmitterConfig;
import nl.dionsegijn.konfetti.core.models.Shape;
import nl.dionsegijn.konfetti.core.models.Size;
import nl.dionsegijn.konfetti.xml.KonfettiView;

 

konfetti 기능을 위해 다음과 같이 import 해 주었다.

 

public class BookSuccessActivity extends AppCompatActivity {

    private KonfettiView konfettiView = null;
    // 컨페티 모양 지정하기 위한 drawableShape 객체 생성
    private Shape.DrawableShape drawableShape = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_book_success);
        // 하트모양 컨페티 만들기
        final Drawable drawable = ContextCompat.getDrawable(getApplicationContext(), R.drawable.ic_heart);
        drawableShape = new Shape.DrawableShape(drawable, true);

        konfettiView = findViewById(R.id.konfettiView);
        // parade() 함수 불러오기 -> Konfetti 뿌려짐
        parade();
    }

    // 양 옆에서 흩뿌려지는 모양
    public void parade() {
        // 2초 동안 실행, 1초에 60개 컨페티 뿌려짐
        EmitterConfig emitterConfig = new Emitter(2, TimeUnit.SECONDS).perSecond(60);
        konfettiView.start(
                // 왼쪽 방향
                new PartyFactory(emitterConfig)
                        // 뿌릴 때 각도 지정
                        .angle(Angle.RIGHT - 45)
                        // 뿌려지는 범위, SMALL/WIDE/ROUND 등이 있음
                        .spread(Spread.WIDE)
                        //컴페티 모양, 네모, 동그라미, 하트모양
                        .shapes(Arrays.asList(Shape.Square.INSTANCE, Shape.Circle.INSTANCE, drawableShape))
                        // 컨페티 색상, hex코드 앞에 0x 붙여서 넣어주면 된다. 랜덤으로 발생
                        .colors(Arrays.asList(0x76E12F, 0x3B7017, 0x0b1604, 0x5eb425))
                        //속도 지정
                        .setSpeedBetween(10f, 60f)
                        // 좌표 지정
                        .position(new Relative(0.0, 0.2))
                        .build(),
                // 오른쪽 방향
                new PartyFactory(emitterConfig)
                        .angle(Angle.LEFT + 45)
                        .spread(Spread.WIDE)
                        .shapes(Arrays.asList(Shape.Square.INSTANCE, Shape.Circle.INSTANCE, drawableShape))
                        .colors(Arrays.asList(0x76E12F, 0x3B7017, 0x0b1604, 0x5eb425))
                        .setSpeedBetween(10f, 60f)
                        .position(new Relative(1.0, 0.2))
                        .build()
        );
    }

 

parade 기능은 다음과 같이 지정하면 된다. 뿌릴 때 각도, 범위, 모양, 속도, 좌표를 지정했다.

공식 문서에서 맘에 안드는 부분은 수정했다.

 

어플리케이션 실행하면 원하는 화면 만들기 성공!!

 

 

 

 

 

+ 하트 모양 xml 만들기

 

res>drawable 에서 새로운 xml 파일 생성

 

 

사진 삭제

사진 설명을 입력하세요.

생성 시 Root element는 vector로 바꿔준다.

 

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M12,21.35l-1.45,-1.32C5.4,15.36 2,12.28 2,8.5 2,5.42 4.42,3 7.5,3c1.74,0 3.41,0.81 4.5,2.09C13.09,3.81 14.76,3 16.5,3 19.58,3 22,5.42 22,8.5c0,3.78 -3.4,6.86 -8.55,11.54L12,21.35z"/>
</vector>

 

 

복붙 완.