超简单九宫格抽奖Android效果

先上个效果图。（动图降帧后显示有点问题，不要在意）

在上代码：
第一步：布局

<LinearLayout
    android:layout_width="332dp"
    android:layout_height="332dp"
    android:layout_gravity="center_horizontal"
    android:background="#155224"
    android:orientation="vertical"
    android:padding="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#FA5324"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingLeft="3dp"
        android:paddingRight="3dp">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/choujiang_wu1_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@mipmap/ic_launcher"></ImageView>

            <ImageView
                android:id="@+id/choujiang_zhe1_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#70000000"
                android:visibility="gone"></ImageView>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_marginLeft="3dp"
            android:layout_marginRight="3dp"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/choujiang_wu2_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@mipmap/ic_launcher"></ImageView>

            <ImageView
                android:id="@+id/choujiang_zhe2_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#70000000"
                android:visibility="gone"></ImageView>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/choujiang_wu3_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@mipmap/ic_launcher"></ImageView>

            <ImageView
                android:id="@+id/choujiang_zhe3_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#70000000"
                android:visibility="gone"></ImageView>
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#FA5324"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingLeft="3dp"
        android:paddingRight="3dp">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/choujiang_wu8_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@mipmap/ic_launcher"></ImageView>

            <ImageView
                android:id="@+id/choujiang_zhe8_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#70000000"
                android:visibility="gone"></ImageView>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/choujiang_bt_rel"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_marginLeft="3dp"
            android:layout_marginRight="3dp"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/choujiang_bt_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@mipmap/icon_youxi"></ImageView>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/choujiang_wu4_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@mipmap/ic_launcher"></ImageView>

            <ImageView
                android:id="@+id/choujiang_zhe4_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#70000000"
                android:visibility="gone"></ImageView>
        </RelativeLayout>
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#FA5324"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:paddingLeft="3dp"
        android:paddingRight="3dp">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/choujiang_wu7_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@mipmap/ic_launcher"></ImageView>

            <ImageView
                android:id="@+id/choujiang_zhe7_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#70000000"
                android:visibility="gone"></ImageView>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_marginLeft="3dp"
            android:layout_marginRight="3dp"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/choujiang_wu6_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@mipmap/ic_launcher"></ImageView>

            <ImageView
                android:id="@+id/choujiang_zhe6_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#70000000"
                android:visibility="gone"></ImageView>
        </RelativeLayout>

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1">

            <ImageView
                android:id="@+id/choujiang_wu5_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@mipmap/ic_launcher"></ImageView>

            <ImageView
                android:id="@+id/choujiang_zhe5_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#70000000"
                android:visibility="gone"></ImageView>
        </RelativeLayout>
    </LinearLayout>
</LinearLayout>

<EditText
    android:id="@+id/choujiang_number"
    android:layout_width="50dp"
    android:layout_height="30dp"
    android:background="#ffffff"
    android:inputType="number"
    android:text="0"></EditText>

布局啥的无所谓就是写了个九宫格，围着一圈记录8个view

@BindView(R.id.choujiang_wu1_img)
ImageView wu1Img;
@BindView(R.id.choujiang_zhe1_img)
ImageView zhe1Img;

@BindView(R.id.choujiang_wu2_img)
ImageView wu2Img;
@BindView(R.id.choujiang_zhe2_img)
ImageView zhe2Img;

@BindView(R.id.choujiang_wu3_img)
ImageView wu3Img;
@BindView(R.id.choujiang_zhe3_img)
ImageView zhe3Img;

@BindView(R.id.choujiang_wu4_img)
ImageView wu4Img;
@BindView(R.id.choujiang_zhe4_img)
ImageView zhe4Img;

@BindView(R.id.choujiang_wu5_img)
ImageView wu5Img;
@BindView(R.id.choujiang_zhe5_img)
ImageView zhe5Img;

@BindView(R.id.choujiang_wu6_img)
ImageView wu6Img;
@BindView(R.id.choujiang_zhe6_img)
ImageView zhe6Img;

@BindView(R.id.choujiang_wu7_img)
ImageView wu7Img;
@BindView(R.id.choujiang_zhe7_img)
ImageView zhe7Img;

@BindView(R.id.choujiang_wu8_img)
ImageView wu8Img;
@BindView(R.id.choujiang_zhe8_img)
ImageView zhe8Img;

@BindView(R.id.choujiang_bt_rel)
RelativeLayout cjBtRel;
@BindView(R.id.choujiang_bt_img)
ImageView cjBtImg;
List<ImageView> zheViewList = new ArrayList<>();
List<ImageView> wuViewList = new ArrayList<>();
List<ChouJiangEntity.DataBean2> list = new ArrayList<>();
@BindView(R.id.choujiang_number)
EditText numEt;

声明。

二 两个view集合填满----------------------------------
private void setView() {
zheViewList.add(zhe1Img);//奖品遮罩层
zheViewList.add(zhe2Img);
zheViewList.add(zhe3Img);
zheViewList.add(zhe4Img);
zheViewList.add(zhe5Img);
zheViewList.add(zhe6Img);
zheViewList.add(zhe7Img);
zheViewList.add(zhe8Img);
wuViewList.add(wu1Img);//奖品底图
wuViewList.add(wu2Img);
wuViewList.add(wu3Img);
wuViewList.add(wu4Img);
wuViewList.add(wu5Img);
wuViewList.add(wu6Img);
wuViewList.add(wu7Img);
wuViewList.add(wu8Img);
}
三/------------------------------------------------------------------------
//模拟添加一个抽奖集合，8个商品
for (int i = 0; i < 8; i++) {
ChouJiangEntity.DataBean2 dataBean2 = new ChouJiangEntity.DataBean2();
dataBean2.setId(i);
dataBean2.setName(“奖品” + i);
list.add(dataBean2);
}
//点击开始抽奖
cjBtRel.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String num = numEt.getText().toString();
if (TextUtil.isEmpty(num)) {
return;
}
int id = Integer.parseInt(num);
if (id < 0 || id > 7) {
return;
}
cjBtRel.setClickable(false);//抽奖时禁用点击
setWuID(id);//这里传入你中奖id（ps：抽奖都是骗人的）
}
});
//根据中奖id计算所需要跑的个数
private void setWuID(int id) {
int didIndex = 0;
for (int j = 0; j < list.size(); j++) {
if (id == list.get(j).getId()) {
didIndex = j;
}
}
stopIndex = didIndex + 16;//一圈八个，默认加两圈
zheViewList.get(0).setVisibility(View.VISIBLE);//先打开第一个遮罩层
startCJ(); //开始跑动效
}

四/最后结束了的步骤--------------------------------------

Handler handler = new Handler();
Runnable runnable;
int index = 0;
int sudu = 100;
int stopIndex = 0;
///跑一个计时器，默认100毫秒跳转
private void startCJ() {
if (stopIndex < 16) {//如果不足两圈肯定是错的，不判断也行
Toast.makeText(ChouJiangActivity.this, “抽奖信息出错~”, Toast.LENGTH_SHORT).show();
return;
}
//到第八个，第二圈开始减速
if (index > 6) {
float jiansu = 900f / stopIndex - 7;
sudu = sudu + (int) jiansu;
}
handler.postDelayed(runnable = new Runnable() {
@Override
public void run() {
if (index < stopIndex) {
index++;
showView(index);
startCJ();
} else {
showView(index);
handler.removeCallbacks(runnable);
index = 0;
stopIndex = 0;
sudu = 100;
}

        }
    }, sudu);
}

private void showView(int in) {
    for (int i = 0; i < zheViewList.size(); i++) {
        zheViewList.get(i).setVisibility(View.GONE);
    }
    if (in < stopIndex) {
        zheViewList.get(in % 8).setVisibility(View.VISIBLE);
    } else {
        zheViewList.get(in % 8).setVisibility(View.VISIBLE);
        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                zheViewList.get(in % 8).setVisibility(View.GONE);
                Toast.makeText(ChouJiangActivity.this, "抽中" + list.get(in % 8).getName(), Toast.LENGTH_SHORT).show();
                cjBtRel.setClickable(true);
            }
        }, 800);//最后抽中的这个停留800毫秒消失并弹出中奖信息
    }
}

好了，结束：不懂的加V：ryh5342242