[안드로이드] 룰렛(Roulette) 쉽게 만드는 방법

이번 시간에는 룰렛을 만들어 보겠습니다.

만드는 방법은 어렵지 않습니다. 간단하게 설명하면

라이브러리를 갖다 쓰기 때문에 사용자는 각 칸의 색깔과 아이콘과

텍스트만 정해주면 됩니다.  

---

목차

1. 실행 화면

2. 라이브러리 등록

3. 메인 화면 구성 activity_main.xml

4. 메인 코드 구현 MainActivity.java

---

1. 실행 화면

 

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

 implementation 'com.github.mmoamenn:LuckyWheel_Android:0.3.0'

 

setting.gradle

repositories 괄호 안에 아래 코드를 넣어주시면 됩니다.

maven { url 'https://jitpack.io' }

 - 참조 문서 -

https://github.com/mmoamenn/LuckyWheel_Android

GitHub - mmoamenn/LuckyWheel_Android: A custom component that displays a lucky wheel. it ⁠ features easy customize of colors,

 

 

3. 메인 화면 구성 activity_main.xml

 - 설명 -

 룰렛과 룰렛을 돌리는 버튼으로 구성되어 있습니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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.bluehomestudio.luckywheel.LuckyWheel
        android:id="@+id/luck_wheel"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:layout_centerInParent="true"
        app:background_color="@android:color/white" />

    <Button
        android:id="@+id/spin_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/luck_wheel"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="#9C27B0"
        android:text="시작"
        android:textColor="@android:color/white"
        android:textSize="25sp" />
</RelativeLayout>

 

4. 메인 코드 구현 MainActivity.java

 - 설명 - 

 1. WheelItem(색상, 이미지, 텍스트) 형태의 데이터를 List에 담습니다.

 2. List를 lcukyWheel객체에 addWheelItems를 통해 담습니다. 

 3. 랜덤으로 정한 숫자가 rotateWheelTo를 통해 룰렛판의 위치를 정합니다.

 4.  아이콘 res -> drawable

ic_money.xml

0.00MB

public class MainActivity extends AppCompatActivity {

    //선언
    private LuckyWheel luckyWheel;

    List<WheelItem> wheelItems ;
    
    String point;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //변수에 담기
        luckyWheel = findViewById(R.id.luck_wheel);

        //점수판 데이터 생성
        generateWheelItems();

        //점수판 타겟 정해지면 이벤트 발생
        luckyWheel.setLuckyWheelReachTheTarget(new OnLuckyWheelReachTheTarget() {
            @Override
            public void onReachTarget() {
                
                //아이템 변수에 담기
                WheelItem wheelItem = wheelItems.get(Integer.parseInt(point)-1);
                
                //아이템 텍스트 변수에 담기
                String money = wheelItem.text;
                
                //메시지
                Toast.makeText(MainActivity.this, money, Toast.LENGTH_SHORT).show();
            }
        });

        //시작버튼
        Button start = findViewById(R.id.spin_btn);
        start.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                Random random = new Random();
                point = String.valueOf(random.nextInt(6)+1); // 1 ~ 6
                luckyWheel.rotateWheelTo(Integer.parseInt(point));
            }
        });
    }

    /**
     * 데이터 담기
     */
    private void generateWheelItems() {

        wheelItems = new ArrayList<>();

        Drawable d = getResources().getDrawable(R.drawable.ic_money, null);

        Bitmap bitmap = drawableToBitmap(d);

        wheelItems.add(new WheelItem(Color.parseColor("#F44336"), bitmap, "100 $"));

        wheelItems.add(new WheelItem(Color.parseColor("#E91E63"), bitmap, "200 $"));

        wheelItems.add(new WheelItem(Color.parseColor("#9C27B0"), bitmap, "300 $"));

        wheelItems.add(new WheelItem(Color.parseColor("#3F51B5"), bitmap, "400 $"));

        wheelItems.add(new WheelItem(Color.parseColor("#1E88E5"), bitmap, "500 $"));

        wheelItems.add(new WheelItem(Color.parseColor("#009688"), bitmap, "600 $"));

        //점수판에 데이터 넣기
        luckyWheel.addWheelItems(wheelItems);
    }


    /**
     * drawable -> bitmap
     * @param drawable drawable
     * @return
     */
    public static Bitmap drawableToBitmap (Drawable drawable) {

        if (drawable instanceof BitmapDrawable) {
            return ((BitmapDrawable)drawable).getBitmap();
        }

        Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        drawable.draw(canvas);

        return bitmap;
    }

}//MainActivity

2022.03.25 - [안드로이드] - [안드로이드] 리스트뷰 (ListView) 홀 수행, 짝수행 별 색상 다르게 하는 방법

[안드로이드] 리스트뷰 (ListView) 홀수행, 짝수행 별 색상 다르게 하는 방법

2022.03.25 - [안드로이드] - [안드로이드] 리스트뷰 (ListView) 홀수행, 짝수행 별 색상 다르게 하는 방법

[안드로이드] 리스트뷰 (ListView) 홀수행, 짝수행 별 색상 다르게 하는 방법

2022.03.18 - [안드로이드] - [안드로이드] 이미지 원형으로 쉽게 표현하는 방법

[안드로이드] 이미지 원형으로 쉽게 표현하는 방법