android CircularSeekBar
Android 中的 seekBar会被开发者经常用到,用的最多的空拍是控制音量。但是有时后为了更好的UI效果,横着的拖动条不能满足我们项目的需要,我们可能需要竖直的或者圆形的拖动条,那这两种样式的类SeekBar的效果如何实现呢,接下来小编会一一给出效果和源码。接下来,先说一说圆形的效果吧,有图有真相,请看图:
看过图之后是不是觉得很炫,自己赞一个,下面给出源码:
/values/attr.xml:
- <?xml version="1.0" encoding="utf-8"?>
- <resources>
- <declare-styleable name="HoloCircleSeekBar">
- <attr name="wheel_size" format="integer" />
- <attr name="pointer_size" format="integer" />
- <attr name="max" format="integer"></attr>
- <attr name="show_text" format="boolean"></attr>
- <attr name="start_angle" format="integer"></attr>
- <attr name="end_angle" format="integer"></attr>
- <attr name="text_size" format="integer"></attr>
- <attr name="init_position" format="integer"></attr>
- <attr name="color" format="string"></attr>
- <attr name="wheel_active_color" format="string"></attr>
- <attr name="wheel_unactive_color" format="string"></attr>
- <attr name="pointer_color" format="string"></attr>
- <attr name="pointer_halo_color" format="string"></attr>
- <attr name="text_color" format="string"></attr>
- </declare-styleable>
- </resources>
ZJBCircleSeekBar.java:
- package com.example.circleseekbar;
- import android.content.Context;
- import android.content.res.TypedArray;
- import android.graphics.Bitmap;
- import android.graphics.BitmapFactory;
- import android.graphics.Canvas;
- import android.graphics.Color;
- import android.graphics.Paint;
- import android.graphics.Rect;
- import android.graphics.RectF;
- import android.graphics.SweepGradient;
- import android.os.Bundle;
- import android.os.Parcelable;
- import android.util.AttributeSet;
- import android.view.MotionEvent;
- import android.view.View;
- /**
- * @author zjbpku
- * @time 2013-08-21
- * @blog http://blog.csdn.net/zjbpku
- */
- public class ZJBCircleSeekBar extends View {
- /**
- * 保存状态
- */
- private static final String STATE_PARENT = "parent";
- private static final String STATE_ANGLE = "angle";
- /***
- * 事件监听
- */
- private OnCircleSeekBarChangeListener mOnCircleSeekBarChangeListener;
- /**
- * 圆环paint对象
- */
- private Paint mColorWheelPaint;
- /**
- * 游标paint对象
- */
- private Paint mPointerHaloPaint;
- /**
- * 游标为图画时的paint对象
- */
- private Paint mPointerColor;
- /**
- * 圆环的宽度
- */
- private final int mColorWheelStrokeWidth = 10;
- /**
- * 游标所在圆环半径
- */
- private final int mPointerRadius = 80;
- /**
- * The rectangle enclosing the color wheel.
- */
- private RectF mColorWheelRectangle = new RectF();
- /**
- * {@code true} 点击游标 {@code false} 停止
- *
- * @see #onTouchEvent(MotionEvent)
- */
- private boolean mUserIsMovingPointer = false;
- /**
- *
- */
- private float mTranslationOffset;
- /**
- * 圆环半径 Note: (Re)在onMeasure计算{@link #onMeasure(int, int)}
- */
- private float mColorWheelRadius;
- private float mAngle;
- private String text;
- private int conversion = 0;
- private int max = 100;
- private String color_attr;
- private SweepGradient s;
- private Paint mArcColor;
- private String wheel_color_attr, wheel_unactive_color_attr,
- pointer_color_attr, pointer_halo_color_attr;
- private int init_position;
- private boolean block_end = false;
- private float lastX;
- private int last_radians = 0;
- private boolean block_start = false;
- private int arc_finish_radians = 270;
- // 左下角开始
- private int start_arc = 135;
- private float[] pointerPosition;
- private Paint mColorCenterHalo;
- private RectF mColorCenterHaloRectangle = new RectF();
- private int end_wheel;
- private Bitmap pointerBitmap;
- private boolean show_text = false;
- public ZJBCircleSeekBar(Context context) {
- super(context);
- init(null, 0);
- }
- public ZJBCircleSeekBar(Context context, AttributeSet attrs) {
- super(context, attrs);
- init(attrs, 0);
- }
- public ZJBCircleSeekBar(Context context, AttributeSet attrs, int defStyle) {
- super(context, attrs, defStyle);
- init(attrs, defStyle);
- }
- private void init(AttributeSet attrs, int defStyle) {
- final TypedArray a = getContext().obtainStyledAttributes(attrs,
- R.styleable.HoloCircleSeekBar, defStyle, 0);
- initAttributes(a);
- a.recycle();
- // mAngle = (float) (-Math.PI / 2);
- mColorWheelPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
- mColorWheelPaint.setShader(s);
- mColorWheelPaint.setColor(Color.BLACK);
- mColorWheelPaint.setStyle(Paint.Style.STROKE);
- mColorWheelPaint.setStrokeWidth(mColorWheelStrokeWidth);
- mColorCenterHalo = new Paint(Paint.ANTI_ALIAS_FLAG);
- mColorCenterHalo.setColor(Color.CYAN);
- mColorCenterHalo.setAlpha(0xCC);
- // mColorCenterHalo.setStyle(Paint.Style.STROKE);
- // mColorCenterHalo.setStrokeWidth(mColorCenterHaloRectangle.width() /
- // 2);
- mPointerHaloPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
- mPointerHaloPaint.setColor(Color.GREEN);
- mPointerHaloPaint.setStrokeWidth(mPointerRadius + 10);
- // mPointerHaloPaint.setAlpha(150);
- // 游标图片
- pointerBitmap = BitmapFactory.decodeResource(this.getResources(),
- R.drawable.pointer);
- mPointerColor = new Paint(Paint.ANTI_ALIAS_FLAG);
- mPointerColor.setStrokeWidth(mPointerRadius);
- // 设置游标指针的颜色
- mPointerColor.setColor(Color.GREEN);
- // 设置游标滑过的背景属性
- mArcColor = new Paint(Paint.ANTI_ALIAS_FLAG);
- mArcColor.setColor(Color.GREEN);
- mArcColor.setStyle(Paint.Style.STROKE);
- mArcColor.setStrokeWidth(mColorWheelStrokeWidth);
- arc_finish_radians = (int) calculateAngleFromText(init_position) - 90;
- if (arc_finish_radians > end_wheel)
- arc_finish_radians = end_wheel;
- mAngle = calculateAngleFromRadians(arc_finish_radians > end_wheel ? end_wheel
- : arc_finish_radians);
- text = String.valueOf(calculateTextFromAngle(arc_finish_radians));
- invalidate();
- }
- private void initAttributes(TypedArray a) {
- max = a.getInteger(R.styleable.HoloCircleSeekBar_max, 100);
- color_attr = a.getString(R.styleable.HoloCircleSeekBar_color);
- wheel_color_attr = a
- .getString(R.styleable.HoloCircleSeekBar_wheel_active_color);
- wheel_unactive_color_attr = a
- .getString(R.styleable.HoloCircleSeekBar_wheel_unactive_color);
- pointer_color_attr = a
- .getString(R.styleable.HoloCircleSeekBar_pointer_color);
- pointer_halo_color_attr = a
- .getString(R.styleable.HoloCircleSeekBar_pointer_halo_color);
- a.getString(R.styleable.HoloCircleSeekBar_text_color);
- a.getInteger(R.styleable.HoloCircleSeekBar_text_size, 95);
- init_position = a.getInteger(
- R.styleable.HoloCircleSeekBar_init_position, 0);
- start_arc = a.getInteger(R.styleable.HoloCircleSeekBar_start_angle, 0);
- end_wheel = a.getInteger(R.styleable.HoloCircleSeekBar_end_angle, 360);
- show_text = a.getBoolean(R.styleable.HoloCircleSeekBar_show_text, true);
- last_radians = end_wheel;
- if (init_position < start_arc)
- init_position = calculateTextFromStartAngle(start_arc);
- // mAngle = (float) calculateAngleFromText(init_position);
- if (color_attr != null) {
- try {
- Color.parseColor(color_attr);
- } catch (IllegalArgumentException e) {
- }
- Color.parseColor(color_attr);
- } else {
- }
- if (wheel_color_attr != null) {
- try {
- Color.parseColor(wheel_color_attr);
- } catch (IllegalArgumentException e) {
- }
- } else {
- }
- if (wheel_unactive_color_attr != null) {
- try {
- Color.parseColor(wheel_unactive_color_attr);
- } catch (IllegalArgumentException e) {
- }
- } else {
- }
- if (pointer_color_attr != null) {
- try {
- Color.parseColor(pointer_color_attr);
- } catch (IllegalArgumentException e) {
- }
- } else {
- }
- if (pointer_halo_color_attr != null) {
- try {
- Color.parseColor(pointer_halo_color_attr);
- } catch (IllegalArgumentException e) {
- }
- } else {
- }
- }
- @Override
- protected void onDraw(Canvas canvas) {
- canvas.translate(mTranslationOffset, mTranslationOffset);
- // 滑过的弧
- canvas.drawArc(mColorWheelRectangle, start_arc + 270, end_wheel
- - (start_arc), false, mColorWheelPaint);
- // 背景弧
- canvas.drawArc(mColorWheelRectangle, start_arc + 270,
- (arc_finish_radians) > (end_wheel) ? end_wheel - (start_arc)
- : arc_finish_radians - start_arc, false, mArcColor);
- // 游标为圆形
- // canvas.drawCircle(pointerPosition[0], pointerPosition[1],
- // mPointerRadius, mPointerHaloPaint);
- //
- // canvas.drawCircle(pointerPosition[0], pointerPosition[1],
- // (float) (mPointerRadius / 1.2), mPointerColor);
- // 游标为方形
- // canvas.drawRect(pointerPosition[0] - 50, pointerPosition[1] - 30,
- // pointerPosition[0] + 50, pointerPosition[1] + 30, mPointerColor);
- // 游标为图片
- canvas.drawBitmap(pointerBitmap, pointerPosition[0] - 50,
- pointerPosition[1] - 115, null);
- // 添加游标上的文字
- Paint pai = new Paint();
- pai.setColor(Color.BLACK);
- pai.setTextSize(50);
- canvas.drawText(text, pointerPosition[0] - 30, pointerPosition[1] - 40,
- pai);
- }
- @Override
- protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
- int height = getDefaultSize(getSuggestedMinimumHeight(),
- heightMeasureSpec);
- int width = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);
- int min = Math.min(width, height);
- setMeasuredDimension(min, min);
- mTranslationOffset = min * 0.5f;
- mColorWheelRadius = mTranslationOffset - mPointerRadius;
- mColorWheelRectangle.set(-mColorWheelRadius, -mColorWheelRadius,
- mColorWheelRadius, mColorWheelRadius);
- mColorCenterHaloRectangle.set(-mColorWheelRadius / 2,
- -mColorWheelRadius / 2, mColorWheelRadius / 2,
- mColorWheelRadius / 2);
- pointerPosition = calculatePointerPosition(mAngle);
- }
- private int calculateTextFromAngle(float angle) {
- float m = angle - start_arc;
- float f = (float) ((end_wheel - start_arc) / m);
- return (int) (max / f);
- }
- private int calculateTextFromStartAngle(float angle) {
- float m = angle;
- float f = (float) ((end_wheel - start_arc) / m);
- return (int) (max / f);
- }
- private double calculateAngleFromText(int position) {
- if (position == 0 || position >= max)
- return (float) 90;
- double f = (double) max / (double) position;
- double f_r = 360 / f;
- double ang = f_r + 90;
- return ang;
- }
- private int calculateRadiansFromAngle(float angle) {
- float unit = (float) (angle / (2 * Math.PI));
- if (unit < 0) {
- unit += 1;
- }
- int radians = (int) ((unit * 360) - ((360 / 4) * 3));
- if (radians < 0)
- radians += 360;
- return radians;
- }
- private float calculateAngleFromRadians(int radians) {
- return (float) (((radians + 270) * (2 * Math.PI)) / 360);
- }
- public int getValue() {
- return conversion;
- }
- @Override
- public boolean onTouchEvent(MotionEvent event) {
- // Convert coordinates to our internal coordinate system
- float x = event.getX() - mTranslationOffset;
- float y = event.getY() - mTranslationOffset;
- switch (event.getAction()) {
- case MotionEvent.ACTION_DOWN:
- // Check whether the user pressed on (or near) the pointer
- mAngle = (float) java.lang.Math.atan2(y, x);
- block_end = false;
- block_start = false;
- mUserIsMovingPointer = true;
- arc_finish_radians = calculateRadiansFromAngle(mAngle);
- if (arc_finish_radians > end_wheel) {
- arc_finish_radians = end_wheel;
- block_end = true;
- }
- if (!block_end && !block_start) {
- text = String
- .valueOf(calculateTextFromAngle(arc_finish_radians));
- pointerPosition = calculatePointerPosition(mAngle);
- invalidate();
- }
- break;
- case MotionEvent.ACTION_MOVE:
- if (mUserIsMovingPointer) {
- mAngle = (float) java.lang.Math.atan2(y, x);
- int radians = calculateRadiansFromAngle(mAngle);
- if (last_radians > radians && radians < (360 / 6) && x > lastX
- && last_radians > (360 / 6)) {
- if (!block_end && !block_start)
- block_end = true;
- } else if (last_radians >= start_arc
- && last_radians <= (360 / 4) && radians <= (360 - 1)
- && radians >= ((360 / 4) * 3) && x < lastX) {
- if (!block_start && !block_end)
- block_start = true;
- } else if (radians >= end_wheel && !block_start
- && last_radians < radians) {
- block_end = true;
- } else if (radians < end_wheel && block_end
- && last_radians > end_wheel) {
- block_end = false;
- } else if (radians < start_arc && last_radians > radians
- && !block_end) {
- block_start = true;
- } else if (block_start && last_radians < radians
- && radians > start_arc && radians < end_wheel) {
- block_start = false;
- }
- if (block_end) {
- arc_finish_radians = end_wheel - 1;
- text = String.valueOf(0);
- mAngle = calculateAngleFromRadians(arc_finish_radians);
- pointerPosition = calculatePointerPosition(mAngle);
- } else if (block_start) {
- arc_finish_radians = start_arc;
- mAngle = calculateAngleFromRadians(arc_finish_radians);
- text = String.valueOf(0);
- pointerPosition = calculatePointerPosition(mAngle);
- } else {
- // text = String.valueOf(calculateTextFromAngle(mAngle));
- arc_finish_radians = calculateRadiansFromAngle(mAngle);
- text = String
- .valueOf(calculateTextFromAngle(arc_finish_radians));
- pointerPosition = calculatePointerPosition(mAngle);
- }
- invalidate();
- if (mOnCircleSeekBarChangeListener != null)
- mOnCircleSeekBarChangeListener.onProgressChanged(this,
- Integer.parseInt(text), true);
- last_radians = radians;
- }
- break;
- case MotionEvent.ACTION_UP:
- mUserIsMovingPointer = false;
- break;
- }
- if (event.getAction() == MotionEvent.ACTION_MOVE && getParent() != null) {
- getParent().requestDisallowInterceptTouchEvent(true);
- }
- lastX = x;
- return true;
- }
- /**
- * Calculate the pointer's coordinates on the color wheel using the supplied
- * angle.
- *
- * @param angle
- * The position of the pointer expressed as angle (in rad).
- *
- * @return The coordinates of the pointer's center in our internal
- * coordinate system.
- */
- private float[] calculatePointerPosition(float angle) {
- // if (calculateRadiansFromAngle(angle) > end_wheel)
- // angle = calculateAngleFromRadians(end_wheel);
- float x = (float) (mColorWheelRadius * Math.cos(angle));
- float y = (float) (mColorWheelRadius * Math.sin(angle));
- return new float[] { x, y };
- }
- @Override
- protected Parcelable onSaveInstanceState() {
- Parcelable superState = super.onSaveInstanceState();
- Bundle state = new Bundle();
- state.putParcelable(STATE_PARENT, superState);
- state.putFloat(STATE_ANGLE, mAngle);
- return state;
- }
- @Override
- protected void onRestoreInstanceState(Parcelable state) {
- Bundle savedState = (Bundle) state;
- Parcelable superState = savedState.getParcelable(STATE_PARENT);
- super.onRestoreInstanceState(superState);
- mAngle = savedState.getFloat(STATE_ANGLE);
- arc_finish_radians = calculateRadiansFromAngle(mAngle);
- text = String.valueOf(calculateTextFromAngle(arc_finish_radians));
- pointerPosition = calculatePointerPosition(mAngle);
- }
- public void setOnSeekBarChangeListener(OnCircleSeekBarChangeListener l) {
- mOnCircleSeekBarChangeListener = l;
- }
- public interface OnCircleSeekBarChangeListener {
- public abstract void onProgressChanged(ZJBCircleSeekBar seekBar,
- int progress, boolean fromUser);
- }
- }
/layout/activity_main.xml:
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_gravity="center_horizontal"
- tools:context=".MainActivity" >
- <TextView
- android:id="@+id/text"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_centerHorizontal="true"
- android:layout_marginTop="80dp"
- android:gravity="center_horizontal"
- android:textSize="60sp"
- android:textColor="#ffff0000"
- />
- <com.example.circleseekbar.HoloCircleSeekBar
- android:id="@+id/c"
- android:layout_width="500px"
- android:layout_height="500px"
- android:layout_centerInParent="true" />
- </RelativeLayout>
MainActivity.java:
- package com.example.circleseekbar;
- import android.app.Activity;
- import android.os.Bundle;
- import android.widget.TextView;
- import com.example.circleseekbar.ZJBCircleSeekBar.OnCircleSeekBarChangeListener;
- /**
- * @author zjbpku
- * @time 2013-08-21
- * @blog http://blog.csdn.net/zjbpku
- */
- public class MainActivity extends Activity implements
- OnCircleSeekBarChangeListener {
- private ZJBCircleSeekBar circleSeekBar;
- TextView textView;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- // TODO Auto-generated method stub
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- circleSeekBar = (ZJBCircleSeekBar) findViewById(R.id.c);
- textView = (TextView) findViewById(R.id.text);
- circleSeekBar.setOnSeekBarChangeListener(this);
- }
- @Override
- public void onProgressChanged(ZJBCircleSeekBar seekBar, int progress,
- boolean fromUser) {
- // TODO Auto-generated method stub
- textView.setText(progress + "");
- }
- }
小编很辛苦,请尊重菜鸟的劳动成果,转载请注明出处:http://blog.csdn.net/zjbpku/article/details/10140815
android CircularSeekBar的更多相关文章
- CircularSeekBar
/** * @author Raghav Sood * @version 1 * @date 26 January, 2013 */ package com.appaholics.circularse ...
- 【原】Android热更新开源项目Tinker源码解析系列之三:so热更新
本系列将从以下三个方面对Tinker进行源码解析: Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Android热更新开源项目Tinker源码解析系列之二:资源文件热更新 A ...
- 配置android sdk 环境
1:下载adnroid sdk安装包 官方下载地址无法打开,没有vpn,使用下面这个地址下载,地址:http://www.android-studio.org/
- Android SwipeRefreshLayout 下拉刷新——Hi_博客 Android App 开发笔记
以前写下拉刷新 感觉好费劲,要判断ListView是否滚到顶部,还要加载头布局,还要控制 头布局的状态,等等一大堆.感觉麻烦死了.今天学习了SwipeRefreshLayout 的用法,来分享一下,有 ...
- Android Studio配置 AndroidAnnotations——Hi_博客 Android App 开发笔记
以前用Eclicps 用习惯了现在 想学学 用Android Studio 两天的钻研终于 在我电脑上装了一个Android Studio 并完成了AndroidAnnotations 的配置. An ...
- Android请求网络共通类——Hi_博客 Android App 开发笔记
今天 ,来分享一下 ,一个博客App的开发过程,以前也没开发过这种类型App 的经验,求大神们轻点喷. 首先我们要创建一个Andriod 项目 因为要从网络请求数据所以我们先来一个请求网络的共通类. ...
- 【原】Android热更新开源项目Tinker源码解析系列之一:Dex热更新
[原]Android热更新开源项目Tinker源码解析系列之一:Dex热更新 Tinker是微信的第一个开源项目,主要用于安卓应用bug的热修复和功能的迭代. Tinker github地址:http ...
- 【原】Android热更新开源项目Tinker源码解析系列之二:资源文件热更新
上一篇文章介绍了Dex文件的热更新流程,本文将会分析Tinker中对资源文件的热更新流程. 同Dex,资源文件的热更新同样包括三个部分:资源补丁生成,资源补丁合成及资源补丁加载. 本系列将从以下三个方 ...
- Android Studio 多个编译环境配置 多渠道打包 APK输出配置
看完这篇你学到什么: 熟悉gradle的构建配置 熟悉代码构建环境的目录结构,你知道的不仅仅是只有src/main 开发.生成环境等等环境可以任意切换打包 多渠道打包 APK输出文件配置 需求 一般我 ...
随机推荐
- SQL每个月份的发生额都比101科目多的科目
请用SQL语句实现:从TestDB数据表中查询出所有月份的发生额都比101科目相应月份的发生额高的科目.请注意:TestDB中有很多科目,都有1-12月份的发生额. ...
- 数组名和指针的深入理解(C++)
指针是C/C++语言的特色,而数组名与指针有太多的相似,甚至很多时候,数组名可以作为指针使用.于是乎,很多程序设计者就被搞糊涂了.魔幻数组名请看程序(本文程序在WIN32平台下编译): #includ ...
- BZOJ 1668: [Usaco2006 Oct]Cow Pie Treasures 馅饼里的财富( dp )
dp , dp[ i ][ j ] = max( dp[ k ][ j - 1 ] ) + G[ i ][ j ] ( i - 1 <= k <= i + 1 , dp[ k ][ j - ...
- 磁盘性能,你可能不知道的IOPS计算方法
每个I/O 请求到磁盘都需要若干时间.主要是因为磁盘的盘边必须旋转,机头必须寻道.磁盘的旋转常常被称为”rotational delay”(RD),机头的移动称为”disk seek”(DS).一个I ...
- 解决eclipse中maven出现的Failure to transfer XXX.jar的问题
这个问题很烦,试了好几次都没有彻底解决,今天终于找到解决办法了. 问题主要出在,maven在下载jar的过程中出现了中断或者错误问题(不仅仅是eclipse,其他IDE也一样) 解决办法: 移除之前的 ...
- 批量 GBK 转 UTF8 java
package encoding; import java.io.File; import java.io.IOException; import java.util.Collection; impo ...
- 模拟美萍加密狗--Rockey2虚拟狗(五)
虚拟狗开源后很多网友询问有关使用方法的问题,其实看我前四篇文章就应该了解怎样使用了,但还是写篇教程吧 [一].安装DSF (驱动模拟环境): 运行DSFx86Runtime.msi 如需改变安装目录请 ...
- 贫血模型or领域模型
参考: http://lifethinker.iteye.com/blog/283668 http://www.uml.org.cn/mxdx/200907132.asp http://www.itu ...
- 17.1.2?Replication Formats 复制格式:
17.1.2?Replication Formats 复制格式: 17.1.2.1 Advantages and Disadvantages of Statement-Based and Row-Ba ...
- Windows Azure 网站 (WAWS) 中的服务器端包含 (SSI)
编辑人员注释:本文章由 Windows Azure 网站团队的项目经理Erez Benari 撰写. Windows Azure 网站客户普遍关心的一个问题是关于我们对服务器端包含(Server ...