几次在写应用软件的时候,都有需要使用seekbar的控件的布局,但系统所提供的并不是我们自己想要的,在网上查找的一下,很多文章大体都差不多,都是只介绍了对seekbar的style样式上做了一些修改,比较具体的对该控件的重写却很少有人提供。对于系统默认格式还有就是它的thumb是于图片中心线对着progress的最左边,而倘若我们不想这样,我们只想我们自己的图片的最左边和progress的左边对齐,在自己没有完全弄懂的时候我也只是通过xml的一些属性进行了配置,但感觉并不美观,如果在美观上并不要求的情况行,我要在thumb上显示文字或数字又该如何做能,就行一个选择价格的seekbar,我们要在thumb上显示当前的价格,那要怎么去坐能呢?本文讲解的例子也是以一个价格选择的seekbar 的demo ,由于本人喜欢吧图片放在自己创建的drawable文件下,所以对图片也做了一些处理,直至与能更好的适配各种手机,当目前功力尚浅,效果不是很好。
首先看一下该demo的界面布局
<?xml version="1.0" encoding="utf-8" ?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:widget="http//schemas.android.com/apk/res/cn.hanspk.widget" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" />
- <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="最低价格" />
<cn.hanspk.widget.mSeekBar android:id="@+id/mySeekBar" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingLeft="15.0dip" android:paddingRight="15.0dip" style="@style/seekbar" />
</LinearLayout>
</LinearLayout>
接着就是对seekbar的修改重写
package cn.hanspk.widget;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.Rect;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.widget.SeekBar;
import cn.hanspk.Pixels;
import cn.hanspk.R;
public class mSeekBar extends SeekBar {
//比例对应的原点分辨率
private int ScreenWidth = 480;
private int screenHeight = 800;
private Drawable thumb;
private Resources res;
private Paint paint;
private Bitmap bmp;
public mSeekBar(Context context) {
super(context);
}
public mSeekBar(Context context, AttributeSet attrs) {
super(context, attrs);
paint = new Paint();
paint.setTextAlign(Paint.Align.CENTER);
paint.setColor(Color.BLUE);
res = context.getResources();
bmp = BitmapFactory
.decodeResource(res, R.drawable.seekbar_thumb);
thumb = new BitmapDrawable(bmp);
//判断屏幕大小 符合条件进行缩放thumb
if (Pixels.getpixels_x(100) < ScreenWidth
&& Pixels.getpixels_y(100) < screenHeight) {
thumb = zoomDrawable(thumb,bmp.getWidth(),bmp.getHeight());
}else {
paint.setTextSize(20);
}
// 设置拖动的图片
setThumb(thumb);
// 图片的位置
setThumbOffset(thumb.getIntrinsicWidth());
}
public mSeekBar(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
@Override
public void setThumb(Drawable thumb) {
// TODO Auto-generated method stub
super.setThumb(thumb);
}
//设置thumb的偏移数值
@Override
public void setThumbOffset(int thumbOffset) {
// TODO Auto-generated method stub
super.setThumbOffset(thumbOffset / 10);
}
//¥
String header_str = "¥";
String temp_str = "¥0";
@Override
protected synchronized void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
canvas.save();
Rect rect = thumb.getBounds();
float fontwidth = paint.measureText(temp_str);
canvas.drawText(temp_str, (thumb.getIntrinsicWidth()-fontwidth/2)
+ rect.left, thumb.getIntrinsicHeight()/2, paint);
canvas.restore();
}
private Drawable zoomDrawable(Drawable drawable, int w, int h) {
int width = drawable.getIntrinsicWidth();
int height = drawable.getIntrinsicHeight();
// System.out.println("--->"+width+"===="+height);
// drawable转换成bitmap
Bitmap oldbmp = drawableToBitmap(drawable);
// 创建操作图片用的Matrix对象
Matrix matrix = new Matrix();
// 计算缩放比例
float sx = ((float) Pixels.getpixels_x(100) /ScreenWidth);
float sy = ((float) Pixels.getpixels_y(100) / screenHeight);
// System.out.println("--->"+sx+"===="+sy);
// 设置缩放比例
matrix.postScale(sx, sy);
// 建立新的bitmap,其内容是对原bitmap的缩放后的图
Bitmap newbmp = Bitmap.createBitmap(oldbmp, 0, 0, width, height,
matrix, true);
return new BitmapDrawable(newbmp);
}
private Bitmap drawableToBitmap(Drawable drawable) {
// 取 drawable 的长宽
int w = drawable.getIntrinsicWidth();
int h = drawable.getIntrinsicHeight();
// 取 drawable 的颜色格式
Bitmap.Config config = drawable.getOpacity() != PixelFormat.OPAQUE ? Bitmap.Config.ARGB_8888
: Bitmap.Config.RGB_565;
// 建立对应 bitmap
Bitmap bitmap = Bitmap.createBitmap(w, h, config);
// 建立对应 bitmap 的画布
Canvas canvas = new Canvas(bitmap);
drawable.setBounds(0, 0, w, h);
// 把 drawable 内容画到画布中
drawable.draw(canvas);
return bitmap;
}
public void SetValue(String value){
StringBuffer sb = new StringBuffer();
sb.append(header_str).append(value);
temp_str = sb.toString();
invalidate();
}
}
在之里我想说的一个地方就是
//设置thumb的偏移数值
@Override
public void setThumbOffset(int thumbOffset) {
// TODO Auto-generated method stub
super.setThumbOffset(thumbOffset / 10);
}
在此里面的thumbofferset/10是个人更加我在布局里padding 15dp 所调出来的,所以这个值的看个人需要。在代码里可以通过调用setvalue方法是对数值的改变。