從零開始實作大樂透選號app

就直接來挑戰一個大樂透選號app. 通常會先從版面配置開始...
這是這次想要實做出來的畫面
lottery0

  • 整個佈局採用比例原則處理
  • 號碼球為一個TexView, 以 background來處理球的影像
球影像檔案在這裡:lottery0

activity_main.xml 的處理方式如下:


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="20"
        android:text="大樂透選號"
        android:gravity="center"
        android:textSize="28sp"
        android:textStyle="bold"
        android:background="#ff7474"
        android:textColor="#fff"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="20"
        android:orientation="vertical"
        android:paddingHorizontal="16dp"
        android:paddingTop="12dp"
        >
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="第一組"
            />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >
            <TextView
                android:id="@+id/num0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2"
                android:background="@drawable/number_bg"
                android:gravity="center"
                android:textColor="#fff"
                android:textSize="16sp"
                android:textStyle="bold"
                />
            <TextView
                android:id="@+id/num1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2"
                android:background="@drawable/number_bg"
                android:gravity="center"
                android:textColor="#fff"
                android:textSize="16sp"
                android:textStyle="bold"
                />
            <TextView
                android:id="@+id/num2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2"
                android:background="@drawable/number_bg"
                android:gravity="center"
                android:textColor="#fff"
                android:textSize="16sp"
                android:textStyle="bold"
                />
            <TextView
                android:id="@+id/num3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2"
                android:background="@drawable/number_bg"
                android:gravity="center"
                android:textColor="#fff"
                android:textSize="16sp"
                android:textStyle="bold"
                />
            <TextView
                android:id="@+id/num4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2"
                android:background="@drawable/number_bg"
                android:gravity="center"
                android:textColor="#fff"
                android:textSize="16sp"
                android:textStyle="bold"
                />
            <TextView
                android:id="@+id/num5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="2"
                android:background="@drawable/number_bg"
                android:gravity="center"
                android:textColor="#fff"
                android:textSize="16sp"
                android:textStyle="bold"
                />
        </LinearLayout>
    </LinearLayout>
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="60"
        >
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="隨機選號"
            android:background="#ff7474"
            android:textColor="#fff"
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_alignParentBottom="true"
            android:layout_marginHorizontal="12dp"
            android:onClick="lottery"
            />
    </RelativeLayout>

</LinearLayout>                            
                            

執行起來, 將會看到最上方一列標題, 有點礙眼, 來將其處理掉. 來到AndroidManifest.xml, 先在application的tag屬性中找到android:theme="@style/...", 將其設定為:"@style/Theme.AppCompat.NoActionBar" 如下即可:

影片教學


程式部分

接下處理程式的部分了, 就直接以影片教學跟著處理...


							

package tw.brad.ry_lottery0;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

import java.util.HashSet;

public class MainActivity extends AppCompatActivity {
    private TextView num0,num1,num2,num3,num4,num5;

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

        num0 = findViewById(R.id.num0);
        num1 = findViewById(R.id.num1);
        num2 = findViewById(R.id.num2);
        num3 = findViewById(R.id.num3);
        num4 = findViewById(R.id.num4);
        num5 = findViewById(R.id.num5);

    }

    public void lottery(View view) {
        HashSet set = new HashSet<>();
        while (set.size()<6){
            set.add((int)(Math.random()*49+1));
        }
        int i = 0; int[] lottery = new int[6];
        for (Integer num : set){
            lottery[i] = num;
            i++;
        }

        num0.setText("" + lottery[0]);
        num1.setText("" + lottery[1]);
        num2.setText("" + lottery[2]);
        num3.setText("" + lottery[3]);
        num4.setText("" + lottery[4]);
        num5.setText("" + lottery[5]);


    }
}