2. 程式人生 > >android 自定義view實現錶盤效果

android 自定義view實現錶盤效果

阿新 • • 發佈：2019-01-29

週末沒事在家想幹點啥,記得一年多前面試,那公司直接發個面試題讓我做,其中就有讓我做一個簡單的錶盤效果,不過當時沒做出來,所以也沒好意思去面試,今天就實現下,大概分如下幾步

第一步：畫一個簡單的圓

第二步：繪製刻度

第三步：繪製時,分,表指標

第四步：繪製當前時間文字

第五步：實現時間動態顯示

第一步畫一個圓是很簡單的,

package com.example.clockview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;

 
import android.util.AttributeSet;
import android.widget.ImageView;
/**
 * Created by Adminis on 2016/11/6.
 */
public class ClockView extends ImageView {
    private static final String TAG = "ClockView";
    private Paint mPaint;
    private int widhth = 200;//控制元件的寬度
private int height = 200;//控制元件的高度
private int 
 
padding = 5;
    public ClockView(Context context) {
        this(context, null);
}
    public ClockView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
}
    public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

 
initPaint();
}
    @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(widhth, height);
}
    private void initPaint() {
        mPaint = new Paint();
mPaint.setStrokeWidth(3);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.parseColor("#666666"));
mPaint.setAntiAlias(true);
}
    @Override
protected void onDraw(Canvas canvas) {
        drawCircle(canvas);
}
    /**
     * 繪製圓
     * @param canvas     */
private void drawCircle(Canvas canvas) {
         mPaint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(widhth/2,height/2,widhth/2-padding,mPaint);
}
}
效果圖：


第二步：繪製刻度

/**
 * 繪製刻度
 * @param canvas */
private void drawScale(Canvas canvas) {
    mPaint.setStyle(Paint.Style.FILL);
canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 8, mPaint);
}
效果圖：


但是我們要畫類似這種圖：


一起要畫12個這個線,那就相當於每二根線之間的角度就是360/12=30度

分析如圖：


每換完一根線後畫布就旋轉30度

/**
 * 繪製刻度
 * @param canvas
*/
private void drawScale(Canvas canvas) {
    mPaint.setStyle(Paint.Style.FILL);
    for(int i=0;i<12;i++){
        if(i%3==0){//  12  3  6  9對應的線長點
canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 15, mPaint);
}else{
            canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 8, mPaint);
}
        canvas.rotate(30, widhth / 2, widhth / 2);
}
}
效果：


刻度就是利用了canvas的rotate()旋轉方法繪製上去的,但是得以圓的中心點為旋轉點

第三步繪製時 分 表 錶針

這個繪製是根據當前的時間來指向的，

/**
 * 繪製時  分 表 指標
 * @param canvas
*/
private void drawPointer(Canvas canvas) {
    mCalendar = Calendar.getInstance();
mHour = mCalendar.get(Calendar.HOUR);
mMinuate = mCalendar.get(Calendar.MINUTE);
mSecond = mCalendar.get(Calendar.SECOND);
//小時的旋轉度
mDegrees = mHour*30+mMinuate/2;
mPaint.setColor(Color.BLACK);
canvas.save();
canvas.rotate(mDegrees, widhth / 2, widhth / 2);
canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mHourLineLen, mPaint);
canvas.restore();
//分鐘
mPaint.setColor(Color.RED);
mDegrees = mMinuate*6+mSecond/10;
canvas.save();
canvas.rotate(mDegrees, widhth / 2, widhth / 2);
canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mHourLineLen, mPaint);
canvas.restore();
//繪製錶針
mPaint.setColor(Color.BLUE);
mDegrees = mSecond*6;
canvas.save();
canvas.rotate(mDegrees, widhth / 2, widhth / 2);
canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mHourLineLen, mPaint);
canvas.restore();
}
效果圖：


在這解釋下這個mDegrees這個值 比如現在是21:20 但是分為12小時制的話就是9:20  時就是9*30度=270度 但是這個時針指向9肯定是不對的,因為還有20分鐘呢?時針線肯定是在9和10之間指向,這麼這1小時之間是30度,就拿21:30這個時間來算,這個時候時針角度應該是30*9+30/2=285度  這就說明60分鐘1小時 而1小時是30度，也就是說每2分鐘時針角度應該動一下,根據這個原理分鐘和表之間的計算也是類似的,

還有一點要特別的注意2就是繪製完時針它是根據當前的時針數比如9然後旋轉30*9的 但是canvas使用了動畫完以後一定要恢復到原來的，不然你繪製分鐘就會出問題,我就遇到了這個問題,在這特別提醒下

特別改動下了：類全部程式碼複製下看下效果：

package com.example.clockview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.ImageView;
import java.util.Calendar;
/**
 * Created by Adminis on 2016/11/6.
 */
public class ClockView extends ImageView {
    private static final String TAG = "ClockView";
    private Paint mPaint;
    private int widhth = 200;//控制元件的寬度
private int height = 200;//控制元件的高度
private int padding = 5;
    private Calendar mCalendar;
    private int mHour;//小時
private int mMinuate;//分鐘
private int mSecond;//秒
private float mDegrees ;//因為圓是360度 我們有12個刻度 所以就是360/12
private int mHourLineLen;//時指標 線
private int mMinuateLine;//分鐘 線
private int mSecondLine ;//表鍾線
public ClockView(Context context) {
        this(context, null);
}
    public ClockView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
}
    public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
initPaint();
}
    @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(widhth, height);
mHourLineLen = (int) (widhth/2*0.6);
mMinuateLine = (int) (widhth/2*0.7);
mSecondLine = (int) (widhth/2*0.8);
}
    private void initPaint() {
        mPaint = new Paint();
mPaint.setStrokeWidth(3);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.parseColor("#666666"));
mPaint.setAntiAlias(true);
}
    @Override
protected void onDraw(Canvas canvas) {
        drawCircle(canvas);
drawScale(canvas);
canvasCenterCircle(canvas);
drawPointer(canvas);
}

    /**
     * 在 圓中心繪製一個點
     * @param canvas
*/
private void canvasCenterCircle(Canvas canvas) {
        mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(widhth / 2, height / 2, 5, mPaint);
}


    /**
     * 繪製圓
     * @param canvas
*/
private void drawCircle(Canvas canvas) {
         mPaint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(widhth / 2, height / 2, widhth / 2 - padding, mPaint);
}
    /**
     * 繪製刻度
     * @param canvas
*/
private void drawScale(Canvas canvas) {
        mPaint.setStyle(Paint.Style.FILL);
        for(int i=0;i<12;i++){
            if(i%3==0){//  12  3  6  9對應的線長點
canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 15, mPaint);
}else{
                canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 8, mPaint);
}
            canvas.rotate(30, widhth / 2, widhth / 2);
}
    }
    /**
     * 繪製時  分 表 指標
     * @param canvas
*/
private void drawPointer(Canvas canvas) {
        mCalendar = Calendar.getInstance();
mHour = mCalendar.get(Calendar.HOUR);
mMinuate = mCalendar.get(Calendar.MINUTE);
mSecond = mCalendar.get(Calendar.SECOND);
//小時的旋轉度
mDegrees = mHour*30+mMinuate/2;
mPaint.setColor(Color.BLACK);
canvas.save();
canvas.rotate(mDegrees, widhth / 2, widhth / 2);
canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mHourLineLen, mPaint);
canvas.restore();
//分鐘
mPaint.setColor(Color.parseColor("#666666"));
mPaint.setStrokeWidth(5);
mDegrees = mMinuate*6+mSecond/10;
canvas.save();
canvas.rotate(mDegrees, widhth / 2, widhth / 2);
canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mMinuateLine, mPaint);
canvas.restore();
//繪製錶針
mPaint.setStrokeWidth(2);
mPaint.setColor(Color.parseColor("#666666"));
mDegrees = mSecond*6;
canvas.save();
canvas.rotate(mDegrees, widhth / 2, widhth / 2);
canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mSecondLine, mPaint);
canvas.restore();
}
}
效果：


第四步就是繪製當前時間文字顯示在中心點下面：

/**
 * 繪製文字
 * @param canvas
*/
private void drawStr(Canvas canvas) {
    mPaint.setTextSize(24);
StringBuffer sb =  new StringBuffer();
    if(mHour<10){
        sb.append("0").append(String.valueOf(mHour)).append(":");
}else{
        sb.append(String.valueOf(mHour)).append(":");
}
    if(mMinuate<10){
        sb.append("0").append(String.valueOf(mMinuate)).append(":");
}else{
        sb.append(String.valueOf(mMinuate)).append(":");
}
    if(mSecond<10){
        sb.append("0").append(String.valueOf(mSecond));
}else{
        sb.append(String.valueOf(mSecond));
}
    String str = sb.toString();
    int strW = (int) mPaint.measureText(str);
canvas.drawText(str, widhth / 2 - strW / 2, widhth / 2 + 30,mPaint);
}
效果：


最後一步就是利用Handler每秒去重新整理介面就能做到動態的顯示時間了：

最後完整的程式碼：

package com.example.clockview;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.widget.ImageView;
import java.util.Calendar;
/**
 * Created by Adminis on 2016/11/6.
 */
public class ClockView extends ImageView {
    private static final String TAG = "ClockView";
    private Paint mPaint;
    private int widhth = 200;//控制元件的寬度
private int height = 200;//控制元件的高度
private int padding = 5;
    private Calendar mCalendar;
    private int mHour;//小時
private int mMinuate;//分鐘
private int mSecond;//秒
private float mDegrees ;//因為圓是360度 我們有12個刻度 所以就是360/12
private int mHourLineLen;//時指標 線
private int mMinuateLine;//分鐘 線
private int mSecondLine ;//表鍾線
private Handler mHandler = new Handler(){
        @Override
public void handleMessage(Message msg) {
            super.handleMessage(msg);
invalidate();
}
    };
    public ClockView(Context context) {
        this(context, null);
}
    public ClockView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
}
    public ClockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
initPaint();
}
    @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        setMeasuredDimension(widhth, height);
mHourLineLen = (int) (widhth/2*0.6);
mMinuateLine = (int) (widhth/2*0.7);
mSecondLine = (int) (widhth/2*0.8);
}
    private void initPaint() {
        mPaint = new Paint();
mPaint.setStrokeWidth(3);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setColor(Color.parseColor("#666666"));
mPaint.setAntiAlias(true);
}
    @Override
protected void onDraw(Canvas canvas) {
        drawCircle(canvas);
drawScale(canvas);
canvasCenterCircle(canvas);
drawPointer(canvas);
drawStr(canvas);
mHandler.sendEmptyMessage(1);
}
    /**
     * 繪製文字
     * @param canvas
*/
private void drawStr(Canvas canvas) {
        mPaint.setTextSize(24);
StringBuffer sb =  new StringBuffer();
        if(mHour<10){
            sb.append("0").append(String.valueOf(mHour)).append(":");
}else{
            sb.append(String.valueOf(mHour)).append(":");
}
        if(mMinuate<10){
            sb.append("0").append(String.valueOf(mMinuate)).append(":");
}else{
            sb.append(String.valueOf(mMinuate)).append(":");
}
        if(mSecond<10){
            sb.append("0").append(String.valueOf(mSecond));
}else{
            sb.append(String.valueOf(mSecond));
}
        String str = sb.toString();
        int strW = (int) mPaint.measureText(str);
canvas.drawText(str, widhth / 2 - strW / 2, widhth / 2 + 30,mPaint);
}
    /**
     * 在 圓中心繪製一個點
     * @param canvas
*/
private void canvasCenterCircle(Canvas canvas) {
        mPaint.setStyle(Paint.Style.FILL);
canvas.drawCircle(widhth / 2, height / 2, 5, mPaint);
}


    /**
     * 繪製圓
     * @param canvas
*/
private void drawCircle(Canvas canvas) {
         mPaint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(widhth / 2, height / 2, widhth / 2 - padding, mPaint);
}
    /**
     * 繪製刻度
     * @param canvas
*/
private void drawScale(Canvas canvas) {
        mPaint.setStyle(Paint.Style.FILL);
        for(int i=0;i<12;i++) {
            if (i % 3 == 0) {//  12  3  6  9對應的線長點
canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 15, mPaint);
}else{
                canvas.drawLine(widhth / 2 - padding, padding, widhth / 2 - padding, padding + 4 + 8, mPaint);
}
            canvas.rotate(30, widhth / 2, widhth / 2);
}
    }

    /**
     * 繪製時  分 表 指標
     * @param canvas
*/
private void drawPointer(Canvas canvas) {
        mCalendar = Calendar.getInstance();
mHour = mCalendar.get(Calendar.HOUR);
mMinuate = mCalendar.get(Calendar.MINUTE);
mSecond = mCalendar.get(Calendar.SECOND);
//小時的旋轉度
mDegrees = mHour*30+mMinuate/2;
mPaint.setColor(Color.BLACK);
canvas.save();
canvas.rotate(mDegrees, widhth / 2, widhth / 2);
canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mHourLineLen, mPaint);
canvas.restore();
//分鐘
mPaint.setColor(Color.parseColor("#666666"));
mPaint.setStrokeWidth(5);
mDegrees = mMinuate*6+mSecond/10;
canvas.save();
canvas.rotate(mDegrees, widhth / 2, widhth / 2);
canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mMinuateLine, mPaint);
canvas.restore();
//繪製錶針
mPaint.setStrokeWidth(2);
mPaint.setColor(Color.parseColor("#666666"));
mDegrees = mSecond*6;
canvas.save();
canvas.rotate(mDegrees, widhth / 2, widhth / 2);
canvas.drawLine(widhth / 2, height / 2, widhth / 2, widhth / 2 - mSecondLine, mPaint);
canvas.restore();
}
}
動態效果：


終於寫完了!

剛群裡有人反映說3時和15秒時時針和錶針線不重合的問題,於是我自己寫死了一個數據 測試了下發現真的是有這個bug 導致這個bug造成的原因是

 
 

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
android 自定義view實現錶盤效果

     
 
                
週末沒事在家想幹點啥,記得一年多前面試,那公司直接發個面試題讓我做,其中就有讓我做一個簡單的錶盤效果,不過當時沒做出來,所以也沒好意思去面試,今天就實現下,大概分如下幾步
第一步：畫一個簡單的圓
第二步：繪製刻度
第三步：繪製時,分,表指標
第四步：繪製當前時間文字
第五步 



  
 

    


    
    
android 自定義view實現太極圖效果

     
 
                
需求搞完了 下午不想做新需求,中午沒事看了下部落格,發現別人寫了一個太極的效果,我之前有想過,當時發現這個怎麼實現,今天突然看到圖有感覺了,於是關掉部落格,自己想實現下,應該不是很難!分如下步驟
第一步：
畫二個半圓一般是黑色 一般是白色,這個應該不難,看程式碼

pack 



  
 

    


    
    
Android自定義View實現優惠券效果

     
 
                
最近做專案的時候需要一個卡劵的效果，如圖：

上面的圖片其實和普通的Linearlayout，RelativeLayout一樣，只是上下兩邊多了類似於半圓鋸齒的形狀。那麼只需要處理不同地方。可以在上下兩條線上畫一個個白色的小圓來實現這種效果。
假如我們上下線的半圓以及半圓與 



  
 

    


    
    
Android -- 自定義view實現keep歡迎頁倒計時效果

     
 super   onfinish   -m   use   new   getc   awt   ttr   alt   1，最近打開keep的app的時候，發現它的歡迎頁面的倒計時效果還不錯，所以打算自己來寫寫，然後就有了這篇文章。
2，還是老規矩，先看一下我們今天實現的效果

 　　相較於我們常見的倒計時 



  
 

    


    
    
Android自定義View——實現水波紋效果類似剩余流量球

     
 string   三個點   pre   ber   block   span   初始化   move   理解   
最近突然手癢就想搞個貝塞爾曲線做個水波紋效果玩玩，終於功夫不負有心人最後實現了想要的效果，一起來看下吧：

效果圖鎮樓

一：先一步一步來分解一下實現的過程

需要繪制一個正弦曲線(sin 



  
 

    


    
    
Android 自定義View實現拖拽效果

     
 
								
								            
						
                騰訊QQ有那種紅點拖動效果,今天就來實現一個簡單的自定義View拖動效果,再回到原處,並非完全仿QQ紅點拖動

先來看一下效果圖



簡單說一下實現步驟

1.建立一個類繼承View

2.繪製出一個 



  
 

    


    
    
Android 自定義View實現圓形環繞效果

     
  
 
  
  
 之前專案中需要實現一個四周環繞中心圓形頭像的效果，感覺還是自定義比較方便，於是就自己封裝了一個控制元件去實現。先貼張圖顯示最終效果。 
  
 首先自定義一個View繼承自LinearLayout,通過動態新增childView的方式將子控制元件新增到View中。思路是先新增中間圓形頭像 



  
 

    


    
    
android 自定義view實現圓盤抽獎的效果

     
 
							
							
							廢話不多說直接上程式碼。



import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import andro 



  
 

    


    
    
Android自定義View實現類似水波擴散效果

     
 
                自定義View一共分為6步第一步public SpreadView(Context context) {
    this(context,null,0);
}

public SpreadView(Context context, @Nullable AttributeSe 



  
 

    


    
    
Android 自定義view實現水波紋效果

     
 
                今天主要分享水波紋效果：1.標準正餘弦水波紋；2.非標準圓形液柱水波紋；雖說都是水波紋，但兩者在實現上差異是比較大的，一個通過正餘弦函式模擬水波紋效果，另外一個會運用到影象的混合模式（PorterDuffXfermode）；先看效果：                      



  
 

    


    
    
Android自定義View實現水波紋效果

     
 
                本篇博文介紹一個Android自定義View的案例，後續博文會接下自定義View的相關流程和繪製原理。通過自定義控制元件實現。觸控式螢幕幕實現水波紋效果。實現步驟第1步.自定義MyWave繼承Viewpublic class MyWave extends View {}第2步 



  
 

    


    
    
Android自定義View——實現水波紋效果類似剩餘流量球

     
 
							
							
							
  最近突然手癢就想搞個貝塞爾曲線做個水波紋效果玩玩，終於功夫不負有心人最後實現了想要的效果，一起來看下吧：




效果圖鎮樓





一：先一步一步來分解一下實現的過程


需要繪製一個正弦曲線(sin)或者餘弦曲線(cos)
通過水平平移曲線來的到像水 



  
 

    


    
    
Android 自定義View實現圓形切圖的效果

     
 
							
							
							使用自定義View實現圓形ImageView的效果 


目前圓形邊框還需要調整,這裡有點問題



實現思路

使用一個Paint,將得到的Bitmap設定成paint的Shader,設定完成後,使用Matrix調整圖片至居中,使用RectF約束邊框,最後完成 



  
 

    


    
    
Android自定義View實現圓弧進度效果

     
 
                前言：Android開發中，自定義View實現自己想要的效果已成為一項必備的技能，當然自定義View也是Android開發中比較難的部分，涉及到的知識有Canvas（畫布）,Paint（畫筆）等，自定義控制元件分為三種：一是直接繼承自View，完全的自定義；二是在原有控制元件 



  
 

    


    
    
Android自定義view實現圖片選色器

     
  
 
 https://www.jb51.net/article/141336.htm 
 這篇文章主要為大家詳細介紹了Android自定義view實現圖片選色器，具有一定的參考價值，感興趣的小夥伴們可以參考一下 
 簡介 
 本文介紹該自定義view的使用及實現的方法，主要實現以下幾個功能： 
 - 選取 



  
 

    


    
    
Android :自定義view實現簡易的轉盤

     
  
  
  
 直接先上效果圖  xml裡面的程式碼 
 <?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   



  
 

    


    
    
Android自定義View實現類似車來了軌跡圖

     
  
 
  
  
  總體分析下：水平方向recyclewview，item包含定位點，站臺位置和站臺名稱。 下面看實現： 1.繼承framelayout,實現構造方法: 
 public class BusStopPlateView extends FrameLayout {
...
    public 



  
 

    


    
    
android自定義View實現流式佈局

     
 
                //先來一張效果圖





//自定義的控制元件

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view. 



  
 

    


    
    
Android自定義view實現載入中、載入失敗、無資料

     
 
							
							
							一、概述

Android中經常在有的app中可以見到“載入中”並不是以彈出對話方塊的形式顯示的，而是佔用整個螢幕，如果載入失敗就會出現載入失敗頁面，點選載入失敗頁面中任意區域，都可以重新載入。今天就和大家一起學習如何通過自定義view的方式實現載入中、載入失敗 



  
 

    


    
    
Android 自定義View實現城市選擇列表

     
 
							
							
							使用自定義View的方法,實現一個城市選擇列表 


手指滑動時 




自定義View實現側邊欄,並提供回撥介面




/**
 * Created by shixi_tianrui1 on 16-9-18.
 * 城市選擇列表側邊欄
 */
public