自定义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>

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

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

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

demo下载地址:

http://download.csdn.net/detail/doudou_1117/9427529

秒客网

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

相关文章