Material Design学习之 Sliders(详细分析,悬空气球显示进度值,附带Eclipse可以jar)

本文详细介绍了Material Design中的滑块控件(Sliders)设计理论,包括如何实现带有悬空气球展示进度值的功能。文章提供了代码示例,适合Android开发者参考学习。
摘要由CSDN通过智能技术生成

转载请注明出处:王亟亟的大牛之路

Material Design系列的文章这是第五篇,今天讲滑块控件(Sliders)

之前的传送门:http://blog.csdn.net/ddwhan0123/article/details/50578348(代码实现都靠画,学好View还是很重要的)


老规矩,先说下理论部分

滑块控件(Sliders,简称滑块)可以让我们通过在连续或间断的区间内滑动锚点来选择一个合适的数值。区间最小值放在左边,对应的,最大值放在右边。滑块(Sliders)可以在滑动条的左右两端设定图标来反映数值的强度。这种交互特性使得它在设置诸如音量、亮度、色彩饱和度等需要反映强度等级的选项时成为一种极好的选择。

这里贴一下我们的实现效果:

这里写图片描述

再贴一下官方的实现

这里写图片描述

当然,这个和其他控件一样,都有一套暗色主题的配色.

这里写图片描述

使用场景?

进度拖拽,选择范围值等。

为何使用?

引领用户返回合理的内容(输入的话出错率比较高,也很麻烦)

当然还有一种是可输入可滑动的,像这样:

这里写图片描述

文中例子实现是根据这个:

这里写图片描述

它的暗色主题是这样

这里写图片描述

原文地址:http://www.google.com/design/spec/components/sliders.html


再一部分是代码实现,老规矩,贴贴代码结构(这一系列的所有“栗子”,我都是单一做包的,方便大家使用)

这里写图片描述

另外2个类在之前的代码中已经解释过了,大家可以往前翻

主要说下Slider这个类

public class Slider extends CustomView

28行,继承于一个自定义的RelativeLayout

 private int backgroundColor = Color.parseColor("#4CAF50");
    private Ball ball;
    private Bitmap bitmap;
    private int max = 100;
    private int min = 0;
    private NumberIndicator numberIndicator;
    private OnValueChangedListener onValueChangedListener;
    private boolean placedBall = false;
    private boolean press = false;
    private boolean showNumberIndicator = false;
    private int value = 0;


    public Slider(Context context, AttributeSet attrs) {
        super(context, attrs);
        setAttributes(attrs);
    }

30-46行,构造函数调用初始化的方法,声明一系列所需变量,什么最大值最小值,是否显示气球什么的,补充一点这里有一个自己写的回调,之后会解释。

     public int getMax() {
        return max;
    }

    public void setMax(int max) {
        this.max = max;
    }

    public int getMin() {
        return min;
    }

    public void setMin(int min) {
        this.min = min;
    }

48-62行,一系列的set get方法,主要用于设置范围。

     public OnValueChangedListener getOnValueChangedListener() {
        return onValueChangedListener;
    }

    public void setOnValueChangedListener(
            OnValueChangedListener onValueChangedListener) {
        this.onValueChangedListener = onValueChangedListener;
    }

64-71,接口的set get方法,继续看下去。

 public void setValue(final int value) {
        if (placedBall == false)
            post(new Runnable() {

                @Override
                public void run() {
                    setValue(value);
                }
            });
        else {
            this.value = value;
            float division = (ball.xFin - ball.xIni) / max;
            ViewHelper.setX(ball,
                    value * division + getHeight() / 2 - ball.getWidth() / 2);
            ball.changeBackground();
        }

    }

79-96行,设置进度的实现,如果中间变量判断为非初始化操作的时候,

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值