Android通过Path实现复杂效果（搜索按钮+时钟的实现 ）

Path ：

在Android中复杂的图形的绘制绝大多数是通过path来实现，比如绘制一条曲线，然后让一个物体随着这个曲线运动，比如搜索按钮，比如一个简单时钟的实现：

那么什么是path呢！

定义：path  就是路径，就是图形的路径的集合，它里边包含了路径里边的坐标点，等等的属性。我们可以获取到任意点的坐标，正切值。

那么要获取Path上边所有点的坐标还需要用到一个类,PathMeasure;

PathMesure:

PathMeasure是一个用来测量Path的类，主要有以下方法:

构造方法

方法名 释义
PathMeasure() 创建一个空的PathMeasure
PathMeasure(Path path, boolean forceClosed) 创建 PathMeasure 并关联一个指定的Path(Path需要已经创建完成)。

公共方法

返回值 方法名 释义
void setPath(Path path, boolean forceClosed) 关联一个Path
boolean isClosed() 是否闭合
float getLength() 获取Path的长度
boolean nextContour() 跳转到下一个轮廓
boolean getSegment(float startD, float stopD, Path dst, boolean startWithMoveTo) 截取片段
boolean getPosTan(float distance, float[] pos, float[] tan) 获取指定长度的位置坐标及该点切线值
boolean getMatrix(float distance, Matrix matrix, int flags) 获取指定长度的位置坐标及该点Matrix

可以看到，这个就等于是一个Path的一个工具类，方法很简单，那么就开始我们所要做的按钮跟时钟的开发吧

（1）搜索按钮：

首先上图：

要实现这个功能首先要把他分解开来做；

创建搜索按钮的path路径，然后创建外圈旋转的path，

  public void initPath(){
        mPath_search = new Path();
        mPath_circle = new Path();

        mMeasure = new PathMeasure();

        // 注意,不要到360度,否则内部会自动优化,测量不能取到需要的数值
        RectF oval1 = new RectF(-50, -50, 50, 50);          // 放大镜圆环
        mPath_search.addArc(oval1, 45, 359.9f);

        RectF oval2 = new RectF(-100, -100, 100, 100);      // 外部圆环
        mPath_circle.addArc(oval2, 45, -359.9f);

        float[] pos = new float[2];

        mMeasure.setPath(mPath_circle, false);               // 放大镜把手的位置
        mMeasure.getPosTan(0, pos, null);

        mPath_search.lineTo(pos[0], pos[1]);                 // 放大镜把手

        Log.i("TAG", "pos=" + pos[0] + ":" + pos[1]);

    }

我们要的效果就是点击搜索按钮的时候开始从按钮变为旋转，然后搜索结束以后变为搜索按钮。

所以我们可以确定有四种状态：

   public   enum  Seach_State{
       START,END,NONE,SEARCHING
    }

然后根据状态来进行动态绘制path，动态绘制path就要使用到PathMeasure测量当前path的坐标，然后进行绘制。

    private void drawPath(Canvas c) {
        c.translate(mWidth / 2, mHeight / 2);
        switch (mState){

            case NONE:
                c.drawPath(mPath_search,mPaint);
                break;

            case START:
                mMeasure.setPath(mPath_search,true);
                Path path = new Path();
                mMeasure.getSegment(mMeasure.getLength() * curretnAnimationValue,mMeasure.getLength(),path, true);
                c.drawPath(path,mPaint);
                break;

            case SEARCHING:
                mMeasure.setPath(mPath_circle,true);
                Path path_search = new Path();
                mMeasure.getSegment(mMeasure.getLength()*curretnAnimationValue -30,mMeasure.getLength()*curretnAnimationValue,path_search,true);
                c.drawPath(path_search,mPaint);
                break;

            case END:
                mMeasure.setPath(mPath_search,true);
                Path path_view = new Path();

                mMeasure.getSegment(0,mMeasure.getLength()*curretnAnimationValue,path_view,true);
                c.drawPath(path_view,mPaint);
                break;
        }

    }

然后就是需要通过使用属性动画来返回当前该绘制的百分百，通过这个值来进行计算要绘制的path。

下边是整个代码：

package com.duoku.platform.demo.canvaslibrary.attract.view;

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * Created by chenpengfei_d on 2016/9/7.
 */
public class SearchView extends View {
    private Paint mPaint;
    private Context mContext;
    private Path mPath_circle;
    private Path mPath_search;
    private PathMeasure mMeasure;
    private ValueAnimator mValueAnimator_search;
    private long  defaultduration=3000;
    private float curretnAnimationValue;
    private Seach_State mState = Seach_State.SEARCHING;
    public SearchView(Context context) {
        super(context);
        init(context);
    }

    public SearchView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    public SearchView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    public void init(Context context){
        this.mContext = context;
        initPaint();
        initPath();
        initAnimation();

    }
    public void initPaint(){
        mPaint = new Paint();
        mPaint.setDither(true);
        mPaint.setStrokeCap(Paint.Cap.ROUND);//设置笔头效果
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(3);
        mPaint.setStyle(Paint.Style.STROKE);
    }

    public void initPath(){
        mPath_search = new Path();
        mPath_circle = new Path();

        mMeasure = new PathMeasure();

        // 注意,不要到360度,否则内部会自动优化,测量不能取到需要的数值
        RectF oval1 = new RectF(-50, -50, 50, 50);          // 放大镜圆环
        mPath_search.addArc(oval1, 45, 359.9f);

        RectF oval2 = new RectF(-100, -100, 100, 100);      // 外部圆环
        mPath_circle.addArc(oval2, 45, -359.9f);

        float[] pos = new float[2];

        mMeasure.setPath(mPath_circle, false);               // 放大镜把手的位置
        mMeasure.getPosTan(0, pos, null);

        mPath_search.lineTo(pos[0], pos[1]);                 // 放大镜把手

        Log.i("TAG", "pos=" + pos[0] + ":" + pos[1]);

    }

    public void initAnimation(){
        mValueAnimator_search = ValueAnimator.ofFloat(0f,1.0f).setDuration(defaultduration);

        mValueAnimator_search.addUpdateListener(updateListener);

        mValueAnimator_search.addListener(animationListener);
    }
    private ValueAnimator.AnimatorUpdateListener updateListener = new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            curretnAnimationValue = (float) animation.getAnimatedValue();
            invalidate();
        }
    };

    private Animator.AnimatorListener animationListener = new Animator.AnimatorListener() {
        @Override
        public void onAnimationStart(Animator animation) {

        }

        @Override
        public void onAnimationEnd(Animator animation) {
                if(mState ==Seach_State.START){
                    setState(Seach_State.SEARCHING);
                }
        }

        @Override
        public void onAnimationCancel(Animator animation) {

        }

        @Override
        public void onAnimationRepeat(Animator animation) {

        }
    };
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        drawPath(canvas);
    }
    private int mWidth,mHeight;
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;

    }

    private void drawPath(Canvas c) {
        c.translate(mWidth / 2, mHeight / 2);
        switch (mState){

            case NONE:
                c.drawPath(mPath_search,mPaint);
                break;

            case START:
                mMeasure.setPath(mPath_search,true);
                Path path = new Path();
                mMeasure.getSegment(mMeasure.getLength() * curretnAnimationValue,mMeasure.getLength(),path, true);
                c.drawPath(path,mPaint);
                break;

            case SEARCHING:
                mMeasure.setPath(mPath_circle,true);
                Path path_search = new Path();
                mMeasure.getSegment(mMeasure.getLength()*curretnAnimationValue -30,mMeasure.getLength()*curretnAnimationValue,path_search,true);
                c.drawPath(path_search,mPaint);
                break;

            case END:
                mMeasure.setPath(mPath_search,true);
                Path path_view = new Path();

                mMeasure.getSegment(0,mMeasure.getLength()*curretnAnimationValue,path_view,true);
                c.drawPath(path_view,mPaint);
                break;
        }

    }

    public void setState(Seach_State state){
        this.mState = state;
        startSearch();
    }

    public void startSearch(){
        switch (mState){
            case START:
                mValueAnimator_search.setRepeatCount(0);
                break;

            case SEARCHING:
                mValueAnimator_search.setRepeatCount(ValueAnimator.INFINITE);
                mValueAnimator_search.setRepeatMode(ValueAnimator.REVERSE);
                break;

            case END:
                mValueAnimator_search.setRepeatCount(0);
                break;
        }
        mValueAnimator_search.start();
    }
   public   enum  Seach_State{
       START,END,NONE,SEARCHING
    }
}

（学习的点：path可以组合，可以把不同的path放置到一个path里边，然后进行统一的绘制）

（2）时钟：

效果：

说一下时钟的思路啊，网上很多时钟都是通过Canvas绘制基本图形实现的，没有通过path来实现的，使用path实现是为了以后更加灵活的控制时钟的绘制效果，比如我们要让最外边的圆圈逆时针旋转，还比如在上边添加些小星星啥的，用path的话会更加灵活。

时钟的实现分部分：

1、创建外圈path路径

2、创建刻度path路径，要区分整点，绘制时间点

3、绘制指针，（这个使用的是canvas绘制的线段，也可以使用Path，可以自己测试）

需要计算当前时针，分针，秒针的角度，然后进行绘制

整体代码：

package com.duoku.platform.demo.canvaslibrary.attract.view;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PathMeasure;
import android.os.Handler;
import android.util.AttributeSet;
import android.view.View;

import java.util.Calendar;

/**
 * Created by chenpengfei_d on 2016/9/8.
 */
public class TimeView extends View {
    private Paint mPaint,mPaint_time;
    private Paint mPaint_h,mPaint_m,mPaint_s;
    private Path mPath_Circle;
    private Path mPath_Circle_h;
    private Path mPath_Circle_m;
    private Path mPath_h,mPath_m,mPath_s;
    private Path mPath_duration;

    private PathMeasure mMeasure;
    private PathMeasure mMeasure_h;
    private PathMeasure mMeasure_m;
    private Handler mHandler = new Handler();
    private Runnable clockRunnable;
    private boolean isRunning;
    public TimeView(Context context) {
        super(context);
        init();
    }

    public TimeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public TimeView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
    int  t = 3;
    public void init(){
        //初始化画笔
        mPaint = new Paint();
        mPaint.setDither(true);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(2);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setStrokeJoin(Paint.Join.ROUND);
        mPaint.setColor(Color.RED);
        mPaint_time = new Paint();
        mPaint_time.setDither(true);
        mPaint_time.setAntiAlias(true);
        mPaint_time.setStyle(Paint.Style.STROKE);
        mPaint_time.setStrokeWidth(2);
        mPaint_time.setTextSize(15);
        mPaint_time.setStrokeCap(Paint.Cap.ROUND);
        mPaint_time.setStrokeJoin(Paint.Join.ROUND);
        mPaint_time.setColor(Color.RED);

        mPaint_h = new Paint();
        mPaint_h.setDither(true);
        mPaint_h.setAntiAlias(true);
        mPaint_h.setStyle(Paint.Style.STROKE);
        mPaint_h.setStrokeWidth(6);
        mPaint_h.setTextSize(15);
        mPaint_h.setStrokeCap(Paint.Cap.ROUND);
        mPaint_h.setStrokeJoin(Paint.Join.ROUND);
        mPaint_h.setColor(Color.RED);

        mPaint_m = new Paint();
        mPaint_m.setDither(true);
        mPaint_m.setAntiAlias(true);
        mPaint_m.setStyle(Paint.Style.STROKE);
        mPaint_m.setStrokeWidth(4);
        mPaint_m.setTextSize(15);
        mPaint_m.setStrokeCap(Paint.Cap.ROUND);
        mPaint_m.setStrokeJoin(Paint.Join.ROUND);
        mPaint_m.setColor(Color.RED);

        mPaint_s = new Paint();
        mPaint_s.setDither(true);
        mPaint_s.setAntiAlias(true);
        mPaint_s.setStyle(Paint.Style.STROKE);
        mPaint_s.setStrokeWidth(2);
        mPaint_s.setTextSize(15);
        mPaint_s.setStrokeCap(Paint.Cap.ROUND);
        mPaint_s.setStrokeJoin(Paint.Join.ROUND);
        mPaint_s.setColor(Color.RED);
        //初始化刻度
        mPath_Circle  = new Path();
        mPath_Circle.addCircle(0,0,250, Path.Direction.CCW);
        mPath_Circle_h  = new Path();
        mPath_Circle_h.addCircle(0,0,220, Path.Direction.CCW);
        mPath_Circle_m  = new Path();
        mPath_Circle_m.addCircle(0,0,235, Path.Direction.CCW);
        //初始化PathMeasure测量path坐标，
        mMeasure = new PathMeasure();
        mMeasure.setPath(mPath_Circle,true);
        mMeasure_h = new PathMeasure();
        mMeasure_h.setPath(mPath_Circle_h,true);
        mMeasure_m = new PathMeasure();
        mMeasure_m.setPath(mPath_Circle_m,true);
        //获取刻度path
        mPath_duration = new Path();
        for (int i = 60; i>0 ;i --){
            Path path = new Path();
            float pos [] = new float[2];
            float tan [] = new float[2];
            float pos2 [] = new float[2];
            float tan2 [] = new float[2];
            float pos3 [] = new float[2];
            float tan3 [] = new float[2];
            mMeasure.getPosTan(mMeasure.getLength()*i/60,pos,tan);
            mMeasure_h.getPosTan(mMeasure_h.getLength()*i/60,pos2,tan2);
            mMeasure_m.getPosTan(mMeasure_m.getLength()*i/60,pos3,tan3);

            float x = pos[0];
            float y = pos[1];
            float x2 = pos2[0];
            float y2 = pos2[1];
            float x3 = pos3[0];
            float y3 = pos3[1];
            path.moveTo(x , y);

            if(i% 5 ==0){
                path.lineTo(x2,y2);
                if(t>12){
                    t = t-12;
                }
                String time = t++ +"";
                Path path_time = new Path();
                mMeasure_h.getPosTan(mMeasure_h.getLength()*(i-1)/60,pos2,tan2);
                mPaint.getTextPath(time,0,time.length(),(x2- (x2/15)),y2-(y2/15),path_time);
                path.close();
                path.addPath(path_time);
            }else{
                path.lineTo(x3,y3);
            }

            mPath_duration.addPath(path);
            clockRunnable = new Runnable() {//里面做的事情就是每隔一秒，刷新一次界面
                @Override
                public void run() {
                    //线程中刷新界面
                    postInvalidate();
                    mHandler.postDelayed(this, 1000);
                }
            };
        }

        mPath_h = new Path();
        mPath_h.rLineTo(50,30);

        mPath_m = new Path();
        mPath_m.rLineTo(80,80);

        mPath_s = new Path();
        mPath_s.rLineTo(130,50);
    }
    private int mWidth,mHeight;
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mWidth = w;
        mHeight = h;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(!isRunning){
            isRunning = true;
            mHandler.postDelayed(clockRunnable,1000);
        }else{
            canvas.translate(mWidth/2,mHeight/2);

            canvas.drawPath(mPath_Circle,mPaint);
            canvas.save();
            canvas.drawPath(mPath_duration,mPaint_time);

            canvas.drawPoint(0,0,mPaint_time);

            drawClockPoint(canvas);
        }

    }
    private Calendar cal;
    private int hour;
    private int min;
    private int second;
    private float hourAngle,minAngle,secAngle;
    /**
     * 绘制三个指针
     * @param canvas
     */
    private void drawClockPoint(Canvas canvas) {
        cal = Calendar.getInstance();
        hour = cal.get(Calendar.HOUR);//Calendar.HOUR获取的是12小时制，Calendar.HOUR_OF_DAY获取的是24小时制
        min = cal.get(Calendar.MINUTE);
        second = cal.get(Calendar.SECOND);
        //计算时分秒指针各自需要偏移的角度
        hourAngle = (float)hour / 12 * 360 + (float)min / 60 * (360 / 12);//360/12是指每个数字之间的角度
        minAngle = (float)min / 60 * 360;
        secAngle = (float)second / 60 * 360;
        //下面将时、分、秒指针按照各自的偏移角度进行旋转，每次旋转前要先保存canvas的原始状态
        canvas.save();
        canvas.rotate(hourAngle,0, 0);
        canvas.drawLine(0, 0, mWidth/6, getHeight() / 6 - 65, mPaint_h);//时针长度设置为65

        canvas.restore();
        canvas.save();
        canvas.rotate(minAngle,0, 0);
        canvas.drawLine(0, 0, mWidth/6, getHeight() / 6 - 90 , mPaint_m);//分针长度设置为90

        canvas.restore();
        canvas.save();
        canvas.rotate(secAngle,0, 0);
        canvas.drawLine(0, 0, mWidth/6, getHeight() / 6 - 110 , mPaint_s);//秒针长度设置为110

        canvas.restore();
    }
}

这其实还不算特别复杂的动画，也许你有啥好的想法，可以自己通过Path + 属性动画来实现更好看的效果；

比如星空的效果，比如动态绘制文字 + 路径实现类似ppt中播放的一些特效，比如电子书的自动翻页。

（3）下边再介绍一个知识，就是svg：

svg是什么东西呢？

他的学名叫做可缩放矢量图形，是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。

这种格式的图形式可以加载到Android的Path里边。

既然可以加载到Path里边，那么是不是就可以实现更复杂的效果呢，下边看图：（明天再写了）

时间： 2024-08-27 09:33:42

Android通过Path实现复杂效果（搜索按钮+时钟的实现 ）的相关文章

Android 中带有进度条效果的按钮（Button）

安卓中带有进度条效果的按钮,如下图: 1.布局文件如下activity_main.xml 1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="fill_parent" 4 android:layo

android重写webview长按时选择文字然后点击搜索按钮的事件，默认是chrome接受点击事件，现在跳转到360搜索页面

用这个FindWebView替换默认使用的webview就可以了,重写SelectedText 类里地 show方法 string data就是获取到的选中的文字 import android.annotation.SuppressLint; import android.annotation.TargetApi; import android.content.Context; import android.content.Intent; import android.os.Build; imp

android actionBar searview改变默认搜索按钮图片

做搜索图片时发现searchView系统显示默认的搜索按钮只是一个小箭头,样子很丑,想改变这个图标.于是就在stackoverflow这个网站找到了答案,直接上代码: @Override public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) { inflater.inflate(R.menu.event_history, menu); MenuItem search = menu.findItem(R.id.searc

50个Android开发人员必备UI效果源码[转载]

50个Android开发人员必备UI效果源码[转载] http://blog.csdn.net/qq1059458376/article/details/8145497 Android 仿微信之主页面实现篇Android 仿微信之界面导航篇Android 高仿QQ 好友分组列表Android 高仿QQ 界面滑动效果Android 高仿QQ 登陆界面Android 对Path的旋转效果的拓展Android高仿360安全卫士布局源码Android SlidingDrawer 滑动抽屉效果Androi

Android开发：带progressBar效果的Button

这是一个带progressBar的Button,用于告诉用户正在处理数据和反馈处理结果,支付宝最新版本也有用到这个效果的按钮,请看效果图: 使用方法(针对Android studio) 点击这个链接下载aar包,添加在libs文件夹里面(如果没有libs就创建一个) 在项目的build.gradle中添加如下代码 dependencies { compile(name:'progressbutton-release', ext:'aar') } repositories{ flatDir{ di

开发移动端web应用, 使用手机自带键盘的搜索按钮

很多时候在移动端的web页面中, 需要使用搜索功能, 然而页面中并没有太多的空间来放置一个像pc端上那样的搜索按钮, 这时候就需要借用手机输入法自带的搜索按钮来实现点击搜索 虽然不是什么大的功能, 但是确实很实用,  实现的效果有一下两点 1. 点击input元素, 弹出的键盘右下角显示为 "搜索" 二字 2. 点击搜索时, 可以出发页面中的js事件 代码如下 1 <!doctype html> 2 <html lang="en"> 3 &l

android shape图形优化Button效果

android shape可以让我们通过定义xml文件的方式创建图形,当然只能实现一些比较简单的图形(圆形,矩形,椭圆,线段),但是已经相当不错了,通过shape创建的图形作为控件的背景已经基本可以满足我的简单需求了,而且通过shape创建的图形可以适配各种屏幕. 下面就用shape定义的图形来优化Button的整体效果. 定义主布局文件activity_main.xml: 1 <RelativeLayout xmlns:android="http://schemas.android.co

Android 学习笔记四：创建工具栏按钮

原文:http://blog.csdn.net/lihongxun945/article/details/48951199 前面我们已经可以在一个Activity中添加一些按钮之类的组件.由于手机的屏幕很小,所以很多时候我们会需要用到工具栏,通过下拉菜单之类的方式来节省空间. Android 提供了对工具栏按钮的强大支持. 增加一个工具栏按钮 我们现在给 MainActivity 增加一个搜索按钮.增加一个按钮需要做这三件事 一,在 res/menu/activity_main.xml 中增加一

android 仿ppt进入动画效果合集

EnterAnimation android 仿ppt进入动画效果合集, 百叶窗效果,擦除效果,盒状效果,阶梯效果,菱形效果,轮子效果,劈裂效果,棋盘效果, 切入效果,扇形展开效果,十字扩展效果,随机线条效果,向内溶解效果,圆形扩展效果, 适用于各种view和viewgroup,activity即用于页面根部viewgroup, 自定义viewgroup自动换行layout, 看效果图 Series of entrance animation effects just like ppt in A