第一次写博客,看得不爽,请不要打死我
今天打开了Same,然后发现了投票频道这货,然后发现投票功能长得还行,于是就觉得来自定义来实现
下面的投票功能,same效果图如下:
实现方法有两种:
- 通过组合系统控件来实现,即通过多层嵌套来实现
- 通过自定义View来实现
方法的选择:
首先我们先来考察一下两种方法的优劣:
- 从实现难度上来说,组合的方法会相对比较简单,只要通过控件的组合便可以实现,只是比较麻烦,自定义View则相对比较复杂
- 从执行效率上来说,组合方法实现的法,在
layout
,measure
阶段会大量耗时,而自定义View则会相当快捷,只需要进行简单的绘制,在测量上并不需要耗费太大时间 - 从扩展来说,自定义View更加方便的进行修改和扩展
因此,综合考虑,我选择了自定义View的方法实现投票功能
实现
首先,我们要对投票功能进行分析,通过简单的瞄一眼,我们可以知道该View是有投票前和投票后两个状态
- 投票前,是只显示投票选项,投票选项在每一个选项中,居中显示,每个选项以1px的线进行分割
- 投票后,底部显示进度,以百分比进行显示,然后中间显示选项内容,右边显示进度的百分比,也就是投票权重,选中项的颜色和非选中项的颜色不同
分析完毕,现在开始实现了。。(为了简单,本例子中的属性赋值基本进行硬编码,大家可以可以通过在attr.xml
进行配置,从而实现在xml进行赋值的功能)
我们首先实现来看下定义的属性和measure方法
public class VoteView extends View {
//用于存储投票选项文字
private String[] items;
//用于存储投票选项对应的人数
private int[] nums;
//背景之类的画笔
private Paint mPaint;
//比例条颜色以及投票视图文字颜色
private int percentColor = Color.parseColor("#00bbff");
//分割线的颜色以及触摸反馈颜色
private int lineColor = Color.parseColor("#f6f6f6");
//view背景色
private int bgColor = Color.parseColor("#ffffff");
//投票项字体颜色
private int chooseTextColor=Color.parseColor("#555555");
//非投票项字体颜色
private int textColor=Color.parseColor("#777777");
//当前答案数量
private int size = 0;
//view的宽度,高度,每一个投票项的高度,每一项高度的一半
private int viewHeight, viewWidth, itemHeight, halfItemHeight;
//是否显示投票结果页面
private boolean isShowVoteResult = true;
private TextPaint mTextPaint;
//当前触摸的位置,用于触摸反馈
private float touchY;
//手指离开时的位置,用于判断点击的位置
private int clickPosition = -1;
//用于处理动画
private int currentOffset = 100;
//当前选择的投票项
private int votePosition=-1;
//用于实现动画
private ValueAnimator valueAnimator;
//右边比例数字最大宽度的一半
private int percentTextHalfWidth;
//用于存储位置对应的色值
private SparseArray mSparseArray=new SparseArray();
public VoteView(Context context) {
super(context);
init();
}
public VoteView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public VoteView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
mPaint = new Paint();