九宫格抽奖

于 2017-03-30 23:22:32 发布
阅读量811 收藏 1
点赞数
分类专栏： Android自定义控件 文章标签： 九宫格抽奖
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nsacer/article/details/68608361
版权
效果图

九宫格抽奖效果图

原理：

A、外层跑马灯效果：使用帧动画AnimationDrawable.addFrame()添加要切换的两张图片，设置给Layout

代码:
（1）turn_bg_0, turn_bg_1是切换的两张图
（2）setOneShot（boolean）表示播放一遍后是否停止
true：播放一遍后停止
false：一直播放

 AnimationDrawable ad = new AnimationDrawable();
        ad.addFrame(ContextCompat.getDrawable(this, R.mipmap.turn_bg_0), 300);
        ad.addFrame(ContextCompat.getDrawable(this, R.mipmap.turn_bg_1), 300);
        ad.setOneShot(false);

        FrameLayout layoutBg = (FrameLayout) findViewById(R.id.layout_bg_turn);
        layoutBg.setBackground(ad);

        ad.start();

图片

这里写图片描述

这里写图片描述

B、九宫格抽奖：

1）九宫格布局采用三个LinearLayout，每个LinearLayout内部为三个ImageButton。（也可采用TableLayout+TableRow+ImageButton实现）。

2）每个ImageButton的background采用selector定义两种状态enable=”true”或者“false”切换两种显示状态。

3）轮播切换：将ImageButton从左上角依次添加到ArrayList集合当中，通过继承自CountDownTimer类的类进行切换控制。

代码说明

1、xml布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:id="@+id/layout_bg_turn"
        android:layout_width="match_parent"
        android:layout_height="280dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="24dp"
            android:orientation="vertical"
            android:padding="4dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal">

                <ImageButton
                    android:id="@+id/ib_0"
                    style="@style/ImageButtonTurnTable"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

                <ImageButton
                    android:id="@+id/ib_1"
                    style="@style/ImageButtonTurnTable"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

                <ImageButton
                    android:id="@+id/ib_2"
                    style="@style/ImageButtonTurnTable"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal">

                <ImageButton
                    android:id="@+id/ib_7"
                    style="@style/ImageButtonTurnTable"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

                <ImageButton
                    android:id="@+id/ib_start"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_margin="4dp"
                    android:layout_weight="1"
                    android:background="@null"
                    android:padding="4dp"
                    android:scaleType="centerInside"
                    android:src="@mipmap/ic_photo" />

                <ImageButton
                    android:id="@+id/ib_3"
                    style="@style/ImageButtonTurnTable"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:orientation="horizontal">

                <ImageButton
                    android:id="@+id/ib_6"
                    style="@style/ImageButtonTurnTable"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

                <ImageButton
                    android:id="@+id/ib_5"
                    style="@style/ImageButtonTurnTable"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />

                <ImageButton
                    android:id="@+id/ib_4"
                    style="@style/ImageButtonTurnTable"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1" />
            </LinearLayout>
        </LinearLayout>
    </FrameLayout>

    <Button
        android:id="@+id/btn_start_turn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/selector_turntable_start_btn" />

    <TextView
        android:id="@+id/tv_result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:gravity="center"
        android:textColor="@color/colorPrimaryDark" />

</LinearLayout>

其中用到的selector：

（1）selector_turntable_start_btn

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@mipmap/turn_start_btn" android:state_pressed="false" />
    <item android:drawable="@mipmap/turn_start_btn_click" android:state_pressed="true" />

</selector>

图片
正常状态

按下状态

ImageButton的样式统一在style.xml里写了一个ImageButtonTurnTable

<!-- 抽奖的Item方块的样式 -->
    <style name="ImageButtonTurnTable">
        <item name="android:layout_margin">4dp</item>
        <item name="android:padding">4dp</item>
        <item name="android:background">@drawable/selector_turntable_item</item>
        <item name="android:src">@mipmap/red_envelope</item>
        <item name="android:scaleType">centerInside</item>
        <item name="android:enabled">false</item>
    </style>

当中用到的selector_turntable_item

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/layer_turntable_item_btn_nor" android:state_enabled="false" />
    <item android:drawable="@drawable/layer_turntable_item_btn_sel" android:state_enabled="true" />

</selector>

上selector用到的layer_turntable_item_btn_nor

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape
            android:shape="rectangle">

            <solid
                android:color="@color/turntable_item_bg_nor_dark"/>

            <corners
                android:radius="6dp"/>

            <padding
                android:bottom="4dp"/>
        </shape>
    </item>

    <item>
        <shape
            android:shape="rectangle">

            <solid
                android:color="@color/turntable_item_bg_nor_light"/>

            <corners
                android:radius="6dp"/>
        </shape>
    </item>

</layer-list>

用到的layer_turntable_item_btn_sel

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape
            android:shape="rectangle">

            <solid
                android:color="@color/turntable_item_bg_sel_dark"/>

            <corners
                android:radius="6dp"/>

            <padding
                android:bottom="4dp"/>
        </shape>
    </item>

    <item>
        <shape
            android:shape="rectangle">

            <solid
                android:color="@color/turntable_item_bg_sel_light"/>

            <corners
                android:radius="6dp"/>
        </shape>
    </item>

</layer-list>

上边用到的颜色可以自行修改为其他颜色，这里就不写了。

注：注意九宫格中央的ImageButton不用使用该样式，九宫格中间的ImageButton的图片随意，这里并没有什么卵用

2、java代码(代码中因为使用了Xutils注解所以Activity继承自BaseActivity ，各位可用findViewById查找控件并设置开始按钮的点击事件)


import android.os.Bundle;
import android.os.CountDownTimer;
import android.os.Handler;
import android.os.Message;
import android.support.v4.content.ContextCompat;
import android.view.View;
import android.widget.Button;
import android.widget.FrameLayout;
import android.widget.ImageButton;
import android.widget.TextView;

import org.xutils.view.annotation.ContentView;
import org.xutils.view.annotation.Event;
import org.xutils.view.annotation.ViewInject;

import java.util.ArrayList;
import java.util.Random;

@ContentView(R.layout.activity_turntable)
public class TurnTableActivity extends BaseActivity {

    /**
     * 转圈的次数
     */
    private final int RUN_COUNT = 6;

    /**
     * 开始抽奖按钮
     * 每次点击后设置为enable=false,选出结果设置为ture;
     */
    @ViewInject(R.id.btn_start_turn)
    private Button btnStartTurn;

    /**
     * 抽奖结束后显示抽中的第几个奖品的TextView
     */
    @ViewInject(R.id.tv_result)
    private TextView tvResult;

    /**
     * 要添加到ArrayList<ImageButton>集合里的控件id，注意顺序
     */
    private int[] ibIds = {R.id.ib_0, R.id.ib_1, R.id.ib_2, R.id.ib_3, R.id.ib_4,
            R.id.ib_5, R.id.ib_6, R.id.ib_7};

    /**
     * 八个奖品的ImageButton
     */
    private ArrayList<ImageButton> ibs = new ArrayList<>();
    private int timeC = 60;//变色时间间隔
    private int lightPosition = 0;//当前亮灯位置,从0开始
    private int runCount = RUN_COUNT;//需要转多少圈
    private int luckyPosition = 4;//中奖的幸运位置,从0开始

    private Handler handler = new Handler() {

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        initTableLayout();

    }

    private void initTableLayout() {

        for (int ibId : ibIds) {

            ImageButton ib = (ImageButton) findViewById(ibId);
            ib.setEnabled(false);
            ibs.add(ib);
        }

        AnimationDrawable ad = new AnimationDrawable();
        ad.addFrame(ContextCompat.getDrawable(this, R.mipmap.turn_bg_0), 300);
        ad.addFrame(ContextCompat.getDrawable(this, R.mipmap.turn_bg_1), 300);
        ad.setOneShot(false);

        FrameLayout layoutBg = (FrameLayout) findViewById(R.id.layout_bg_turn);
        layoutBg.setBackground(ad);

        ad.start();
    }

    /**
     * 开始按钮的
     */
    @Event(R.id.btn_start_turn)
    private void startTurntable(View view) {

        view.setEnabled(false);
        runCount = RUN_COUNT;
        timeC = 100;
        ibs.get(luckyPosition).setBackground(ContextCompat.getDrawable(this,
                R.drawable.layer_turntable_item_btn_nor));
        luckyPosition = randomNum(0, 7);
        new TimeCount(timeC * 9, timeC).start();
    }

    /**
     * 生成随机数
     *
     * @param minNum
     * @param maxNum
     * @return
     */
    private int randomNum(int minNum, int maxNum) {
        int max = maxNum;
        int min = minNum;
        Random random = new Random();
        return random.nextInt(max) % (max - min + 1) + min;
    }

    /**
     * 用来控制ImageButton状态切换的倒计时
     */
    class TimeCount extends CountDownTimer {
        TimeCount(long millisInFuture, long countDownInterval) {
            super(millisInFuture, countDownInterval);
            lightPosition = 0;
        }

        @Override
        public void onTick(long millisUntilFinished) {

            //如果是最后一次滚动
            if (runCount > 0) {
                if (lightPosition > 0) {
                    ibs.get(lightPosition - 1).setBackground(
                            ContextCompat.getDrawable(TurnTableActivity.this,
                                    R.drawable.layer_turntable_item_btn_nor));
                }
                if (lightPosition < 8) {
                    ibs.get(lightPosition).setBackground(ContextCompat.getDrawable(TurnTableActivity.this,
                            R.drawable.layer_turntable_item_btn_sel));
                }

            } else if (runCount == 0) {

                if (lightPosition <= luckyPosition) {
                    if (lightPosition > 0) {
                        ibs.get(lightPosition - 1).setBackground(ContextCompat.getDrawable(TurnTableActivity.this,
                                R.drawable.layer_turntable_item_btn_nor));
                    }
                    if (lightPosition < 8) {
                        ibs.get(lightPosition).setBackground(ContextCompat.getDrawable(TurnTableActivity.this,
                                R.drawable.layer_turntable_item_btn_sel));
                    }
                }
            }

            lightPosition++;
        }

        @Override
        public void onFinish() {
            ImageButton ibLast = ibs.get(7);
            if (runCount != 0) {

                ibLast.setBackground(ContextCompat.getDrawable(TurnTableActivity.this,
                        R.drawable.layer_turntable_item_btn_nor));
                //最后几转速度变慢
                if (runCount < 3) timeC += 200;
                //在设定的所转圈数内开启新的倒计时切换item样式
                new TimeCount(timeC * 9, timeC).start();
                runCount--;
            }
            //如果是最后一圈且计时也已经结束
            if (runCount == 0 && lightPosition == 8) {

                btnStartTurn.setEnabled(true);
                tvResult.setText("恭喜你抽中: " + luckyPosition);
                if (luckyPosition != ibs.size())
                    ibLast.setBackground(ContextCompat.getDrawable(TurnTableActivity.this,
                            R.drawable.layer_turntable_item_btn_nor));

            }

        }
    }
}

Ok,到这里就结束了，有兴趣的可以copy代码进行实验。预祝大家愚人节快乐！

赵彼得
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值