效果图
原理:
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代码进行实验。预祝大家愚人节快乐!