自定义WheelView UI 实现Ios滚轮效果

项目需要,研究了一下,看到网上很的例子,很多的实现方式,时间紧迫,找一个相对成熟的.

github地址:https://github.com/han1202012/WheelViewDemo

下载后发现,跟ui给的效果差距很大,还有Demo提供的是一个数组的适配器.

添加了一个List的集合适配器, 修改了一下UI.

现在把修改的地方标注分享,以备以后自己使用,PS 原来的UI真是太丑太丑了!!

WheelView 是所有的关键,Github上这个备注非常全面,有兴趣的朋友,可以反复多看看!

<pre name="code" class="html">/** 当前条目中的文字颜色 */
private static final int VALUE_TEXT_COLOR = 0xFF000000;
/** 非当前条目的文字颜色 */
private static final int ITEMS_TEXT_COLOR = 0XFF666666;

这里主要是修改选择的颜色与非选择颜色的, 颜色采用十六进制,看着是不是很头疼. 其实你可以直接改成String

itemsPaint.setColor(ITEMS_TEXT_COLOR);

调用的地方更改下

itemsPaint.setColor( new Color().parseColor(StringCode));

修改字体大小

/** 未选中字体大小 */
private static final int TEXT_SIZE = 24;
/** 选择字体大小 */
private static final int SELECTION_TEXT_SIZE = 30;

修改顶部,底部的渐变为图片,修改选择条目的样式

/** 选中条目的背景图片 */
private Drawable centerDrawable;
/** 顶部阴影图片 */
private Drawable topShadow;
/** 底部阴影图片 */
private Drawable bottomShadow;

最主要的UI绘制

/**
* 初始化资源
*/
private void initResourcesIfNecessary() {
/*
* 设置绘制普通条目的画笔, 允许抗拒齿, 允许 fake-bold 设置文字大小为 24
*/
if (itemsPaint == null) {
itemsPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.FAKE_BOLD_TEXT_FLAG);
itemsPaint.setTextSize(TEXT_SIZE);
}

/*
* 设置绘制选中条目的画笔 设置文字大小 24
*/
if (valuePaint == null) {
valuePaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.FAKE_BOLD_TEXT_FLAG | Paint.DITHER_FLAG);
valuePaint.setTextSize(SELECTION_TEXT_SIZE);

}

// 选中的条目背景
if (centerDrawable == null) {
centerDrawable = getContext().getResources().getDrawable(R.drawable.wheel_val);
}

// 创建顶部阴影图片
if (topShadow == null) {
/*
* 构造方法中传入颜色渐变方向 阴影颜色
*/

topShadow = getResources().getDrawable(R.drawable.a);
}

// 创建底部阴影图片
if (bottomShadow == null) {
// bottomShadow = new GradientDrawable(Orientation.BOTTOM_TOP,SHADOWS_COLORS);
bottomShadow = getResources().getDrawable(R.drawable.b);
}

/*
* 设置 View 组件的背景
*/
setBackgroundColor(Color.WHITE);
// setBackgroundResource(R.drawable.wheel_bg);
}

选择条目的样式是XML定义的 wheel_var.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:right="-2dp"
android:left="-2dp">
<shape>
<solid android:color="@android:color/transparent"/>
<stroke
android:width="1dp"
android:color="#ededed"/>
</shape>
</item>

</layer-list>

这个是采用只描上下边的方式.

目前是固定的样式,有时间会更改成动态设定的样式. 



demo下载地址:
http://download.csdn.net/detail/doudou_1117/9427529