zoukankan      html  css  js  c++  java
  • 实现一个简单的android开关

    近期在学习android中的graphics中绘图系列。依照大神思路。找葫芦画瓢实现了一个开关。如图下:
    这里写图片描写叙述

    记录一下实现方式:

    1.画背景

    这里写图片描写叙述
    上图形状。分成两个半圆与一个矩形,那么代码能够写成:

      private void drawBackground(Canvas canvas) {
            mBackGroundPaint.setColor(mCurrentBackGroundColor);
            //画右边的半圆
            RectF recF = new RectF(mToggleWidth / 2 - mRadius, -mRadius, mToggleWidth / 2 + mRadius, mRadius);
            canvas.drawArc(recF, -90, 180, true, mBackGroundPaint);
    
            //画矩形
            RectF tangle = new RectF(-mToggleWidth / 2, -mRadius, mToggleWidth / 2, mRadius);
            canvas.drawRect(tangle, mBackGroundPaint);
    
            //画左边的半圆
            RectF rectF = new RectF(-mToggleWidth / 2 - mRadius, -mRadius, -mToggleWidth / 2 + mRadius, mRadius);
            canvas.drawArc(rectF, 270, -180, true, mBackGroundPaint);
    
            canvas.restore();
        }
    

    3.画圆点:

    这里写图片描写叙述

    这里我是用一个圆环[紫色的]+内切圆环的实心圆[蓝色]构成的。或许你会说,直接设置panint.setStrokeWidth不就能够了。这个傻冒,呵呵。事实上我也想。可是发现不行啊【比較难看,并且我的颜色还不好设置,呵呵,你试一下就知道了】。
    紫色的圆环负责显示包住内部实心圆,形成一个边界作用。这个对于白色的实心圆是非常好看的。

    4.设置开关

    public void setOpen(boolean isOpen) {
            if (mIsOpen != isOpen) {
                mIsOpen = isOpen;
                showAnimation(mIsOpen);
            }
        }

    能够看出。这里我用了动画的显示效果,在android横行的年代,不加点动画就会显示生硬。举个梨子,我第一个遇到哥们做相似的开关时。直接叫视觉project师[说白了就是美工]切了两张图,不得不说,那哥们非常聪明非常牛逼,我自然也是学到了,后来发现发现好生硬啊,没有一点美感。于是我就自己写了。

    A.实心圆的圆心坐标:
    这里写图片描写叙述

    图中能够看到非常清楚了。那么我能够直接写代码了:

            //mToggleWidth正好是矩形的矩形的长度哦:
            final float start = isOpen ? -mToggleWidth / 2 : mToggleWidth / 2;
            float end = isOpen ?

    mToggleWidth / 2 : -mToggleWidth / 2; ValueAnimator animator = ValueAnimator.ofFloat(start, end); animator.setDuration(mAnimationTime); animator.setInterpolator(new LinearInterpolator()); animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { mCurrentXPosition = (float) valueAnimator.getAnimatedValue(); setCurrentColor(); invalidate(); } }); animator.start(); }

    B. 背景的变色:
    从关闭颜色到打开颜色,这当中是有颜色过度的。不清楚,好你看看这个:
    这里写图片描写叙述 清楚了吧,恩这个颜色该怎么玩呢????

    非常多大神的文章里,都是有个叫颜色估值器的介绍,即:

     ValueAnimator.ofArgb(...)

    本来用这个非常easy实现的,能够我练习的sdk min版本号是14,也真是懒得改,好吧,懒得改我就的想想方法了,方法是这种:
    这里写图片描写叙述
    我在s点的坐标我是知道的,那么我就能够计算我动画运行的百分比了吧,恩,啥意思?:

      float percent = (mCurrentXPosition + mToggleWidth / 2) * 1.0f / mToggleWidth;

    这个看图能够直观些。我也就不多讲了,事实上我数学也非常不好,还特么刚学习Paint,也搞了好久,多搞搞或许就好了。知道了动画进行的百分比,那么我们就知道了随意时刻的动画了:

            float percent = (mCurrentXPosition + mToggleWidth / 2) * 1.0f / mToggleWidth;
            int currentR = (int) ((mEndBgColorR - mStartBgColorR) * percent + mStartBgColorR);
            int currentG = (int) ((mEndBgColorG - mStartBgColorG) * percent + mStartBgColorG);
            int currentB = (int) ((mEndBgColorB - mStartBgColorB) * percent + mStartBgColorB);
            mCurrentBackGroundColor = Color.rgb(currentR, currentG, currentB);

    这里的EndBgColor是指结束时的背景颜色。而StartBgColor就是指開始时的背景颜色。

    使用:

    xml文件里配置:

    <micro.com.testpaint.view.ToggleButton
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            app:circle_ring_width="4dp"/>

    activity中调用:

    ToggleButton button = (ToggleButton) findViewById(R.id.button);
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    button.setOpen(!button.ToggleIsOpen());
                }
            });

    然后就出现了我们点击的样子了。

    。。。

    好了,大家能够看看,也能够在我的基础上扩展了。刚学习这方面的东西。大神勿喷,要脸。
    最后,代码

  • 相关阅读:
    地址栏中提交中文参数乱码问题
    拼接html字符串时单引号问题
    细线表格的制作
    盒子模型
    盒子间距离的计算规则:
    正则表达式
    轻便+智能:史上最酷恒温器Nest 2.0!
    医疗的未来,是身体控制大权的争夺战
    而立之年话沧桑
    刘晓明大使在《电讯报》的英文原文
  • 原文地址:https://www.cnblogs.com/yutingliuyl/p/7375003.html
Copyright © 2011-2022 走看看