1. 程式人生 > >android自定義控制元件--漸變進度條

android自定義控制元件--漸變進度條

 效果圖如下: 


 實現程式碼:

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;
/** * Created by dawn on 2017/12/7. * * 自定義漸變進度條 */ public class ProgressView extends View{ public ProgressView(Context context) { super(context); } /**漸變顏色*/ private static final int[] SECTION_COLORS = {0xff123b9d,0xff4e9bce,0xff85f4fb}; /**進度條最大值*/ private float maxCount; /**進度條當前值*/ private float
currentCount; /**畫筆*/ private Paint mPaint; private int mWidth,mHeight;//設定寬度和高度 public ProgressView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } public ProgressView(Context context, AttributeSet attrs) { super
(context, attrs); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); mPaint = new Paint(); mPaint.setAntiAlias(true); int round = mHeight/2; //藍色邊框 //繪製陰影效果 int beginP=dipToPx(0); mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); mPaint.setColor(0xff00a3d5); mPaint.setStyle(Paint.Style.FILL); mPaint.setShadowLayer(100, 0, 0,Color.WHITE); RectF rectBg = new RectF(beginP, beginP, mWidth, mHeight); canvas.drawRoundRect(rectBg, round, round, mPaint); //深藍色邊框 mPaint.setColor(Color.rgb(7, 38, 85)); RectF rectBg1 = new RectF(beginP+2, beginP+2, mWidth-2, mHeight-2); canvas.drawRoundRect(rectBg1, round, round, mPaint); mPaint.setColor(0xff072655); RectF rectBlackBg = new RectF(beginP+4, beginP+4, mWidth-4, mHeight-4); canvas.drawRoundRect(rectBlackBg, round, round, mPaint); float section = currentCount/maxCount; RectF rectProgressBg = new RectF(beginP+3, beginP+3, (mWidth-3)*section, mHeight-3); if(section <= 1.0f/3.0f){ if(section != 0.0f){ mPaint.setColor(SECTION_COLORS[0]); }else{ mPaint.setColor(Color.TRANSPARENT); } }else{ int count = (section <= 1.0f/3.0f*2 ) ? 2 : 3; int[] colors = new int[count]; System.arraycopy(SECTION_COLORS, 0, colors, 0, count); float[] positions = new float[count]; if(count == 2){ positions[0] = 0.0f; positions[1] = 1.0f-positions[0]; }else{ positions[0] = 0.0f; positions[1] = (maxCount/3)/currentCount; positions[2] = 1.0f-positions[0]*2; } positions[positions.length-1] = 1.0f; //線性渲染 LinearGradient shader = new LinearGradient(3, 3, (mWidth-3)*section, mHeight-3, colors,null, Shader.TileMode.MIRROR); mPaint.setShader(shader); } canvas.drawRoundRect(rectProgressBg, round, round, mPaint); } /** * dp轉換成畫素 * @param dip * @return */ private int dipToPx(int dip) { float scale = getContext().getResources().getDisplayMetrics().density; return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1)); } /*** * 設定最大的進度值 * @param maxCount */ public void setMaxCount(float maxCount) { this.maxCount = maxCount; } /*** * 設定當前的進度值 * @param currentCount */ public void setCurrentCount(float currentCount) { this.currentCount = currentCount > maxCount ? maxCount : currentCount; invalidate(); } /** * UNSPECIFIED 父容器沒有對當前View有任何限制,當前View可以任意取尺寸 * EXACTLY 當前的尺寸就是當前View應該取的尺寸 * AT_MOST 當前尺寸是當前View能取的最大尺寸 * @param widthMeasureSpec * @param heightMeasureSpec */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec); int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec); int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec); int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec); if (widthSpecMode == MeasureSpec.EXACTLY || widthSpecMode == MeasureSpec.AT_MOST) { mWidth = widthSpecSize; } else { mWidth = 0; } if (heightSpecMode == MeasureSpec.AT_MOST || heightSpecMode == MeasureSpec.UNSPECIFIED) { mHeight = dipToPx(25); } else { mHeight = heightSpecSize; } setMeasuredDimension(mWidth, mHeight); } }
問題:

  效果圖還有一層陰影,我怎麼改都實現不了。若有人知道,勞煩告訴我一聲,謝謝。

相關推薦

Qt編寫定義控制元件13-多型進度

前言 多型進度條,顧名思義,有多重狀態,其實本控制元件主要是用來表示百分比進度的,由於之前已經存在了百分比進度條控制元件,名字被霸

android定義控制元件漸變進度

 效果圖如下:   實現程式碼: import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics

android-定義控制元件

自定義控制元件兩種方式 1、繼承ViewGroup 例如:ViewGroup , LinearLayout, FrameLayout, RelativeLayout等。 2、繼承View 例如:View, TextView, ImageView, Button等。 View的測量

Android 定義控制元件-星級評分

在學習自定義控制元件時需要一些例子來練練手,本文這個控制元件就是在這種環境下產生的(可能有BUG); 這個控制元件設計的特點: 1,可以任意修改星星數量 2,可以星星大小會隨控制元件大小而縮小,在控制元件足夠大的情況可以任意設定星星大小 3,滑動監聽,根據滑動距離選擇星級 4,可

[Android定義控制元件] Android定義控制元件

轉載自: http://blog.163.com/[email protected]/blog/static/103242241201382210910473/ 開發自定義控制元件的步驟: 1、瞭解View的工作原理  2、

Android 定義控制元件釋義

由於經常在android的開發過過程中與控制元件打交道,所以有些android控制元件並不能滿足我們的需求, 進而需要自定義一 些為我們所用,但是本文只是一些名詞解析,具體實現可以網路搜尋獲得答案,在此只是個人的筆錄 1:自定義控制元件方式: 1.1:繼承view,button,

Android定義控制元件】炫酷的底部導航欄

https://github.com/WakeHao/NavBar 基本使用 使用這個控制元件,只需要簡單的幾部 引入該控制元件到你的專案中 compile 'com.chen.wakehao.library:bottom-navigation-bar:1.0.0'

Android定義控制元件之區域性圖片放大鏡--BiggerView

零、前言: 本文的知識點一覽 1.自定義控制元件及自定義屬性的寫法,你也將對onMesure有更深的認識 2.關於bitmap的簡單處理,及canvas區域裁剪 3.本文會實現兩個自定義控制元件:FitImageView(圖片自適應)和BiggerView(放大鏡),前者為後者作為鋪墊。 4.最後會

Android學習(十)—— Android定義控制元件

Android自定義控制元件 安卓在使用中大多數使用已有的一些控制元件,用法比較簡單,還有一部分是比較複雜的、使用者自己想的控制元件,這些就需要進行自定義控制元件,今天就來簡單說一下自定義控制元件。 1、繪製過程 建立一個類,繼承View類 onMeasure()方法,測量計算檢視的大小

Android定義控制元件-不同形狀的ImageView

實現分析: 依然是用到Paint的圖層混合模式, 1、畫一個你想要的形狀 || 圖片 2、修改Paint的圖層混合模式,畫圖片。 3、然後就能得到你想要的形狀的ImageView paint.setXfermode(new PorterDuffXfermode(Mode

Android定義控制元件----繼承ViewGroup側滑選單3,普通側滑選單,新增選單切換按鈕(完結)

專案結構: 思路: 對外暴露一個選單開啟和關閉選單的方法toggle 當開啟時this.smoothScrollTo(0, 0);滑動選單顯示 當關閉時this.smoothScrollTo(mMenuWidth, 0);選單隱藏

Android定義控制元件view(草稿版)

Ⅰ、繼承現有控制元件,對其控制元件的功能進行拓展。(拓展功能) Ⅱ、將現有控制元件進行組合,實現功能更加強大控制元件。(佈局重用) Ⅲ、重寫View實現全新的控制元件(不規則效果控制元件) 本文來討論最難的一種自定義控制元件形式,重寫View來實現全新的控制元件。 1.構

Android定義控制元件屬性(草稿版)

    常用的format型別: 1) string:字串型別; 2) integer:整數型別; 3) float:浮點型; 4) dimension:尺寸,後面必須跟dp、dip、px、sp等單位; 5) Boolean:布林值; 6) refer

Android定義控制元件 帶文字提示的SeekBar

轉載請註明出處:juejin.im/post/5c1af0… 本文出自 容華謝後的部落格 1.寫在前面 SeekBar控制元件在開發中還是比較常見的,比如音視訊進度、音量調節等,但是原生控制元件有時還不能滿足我們的需求,今天就來學習一下如何自定義SeekBar控制元件,本文主要實現了一個帶文

Android 定義控制元件 優雅實現元素間的分割線 (支援3.0以下)

1、概述話說,隨著Android SDK版本的升級,很多控制元件增加了新的屬性方便我們的使用,比如LinearLayout中多了:divider、showDividers等,用於為其內部元素新增分隔;但是呢,這樣的屬性在較低版本的SDK中不能被支援,那麼,我們在開發過程中,可

Android定義控制元件之仿汽車之家下拉重新整理

關於下拉重新整理的實現原理我在上篇文章Android自定義控制元件之仿美團下拉重新整理中已經詳細介紹過了,這篇文章主要介紹錶盤的動畫實現原理 汽車之家的下拉重新整理分為三個狀態: 第一個狀態為下拉重新整理狀態(pull to refresh),在這個狀

Android定義控制元件實戰——滾動選擇器PickerView

  手機裡設定鬧鐘需要選擇時間,那個選擇時間的控制元件就是滾動選擇器,前幾天用手機刷了MIUI,發現自帶的那個時間選擇器效果挺好看的,於是就自己仿寫了一個,權當練手。先來看效果:                                              

Android定義控制元件 多樣式進度View

系統進度條賊不好用,大小設定不確定,寬高又不確定,所以自信開發了一套還算是比較完備的進度控制元件。 效果大概就這麼多,背景和進度背景都可以使用顏色,或者圖片,圓角,以及進度條寬高,遊標等等

Android定義控制元件實戰——仿淘寶商品瀏覽介面

用手機淘寶瀏覽商品詳情時,商品圖片是放在後面的,在第一個ScrollView滾動到最底下時會有提示,繼續拖動才能瀏覽圖片。仿照這個效果寫一個出來並不難,只要定義一個Layout管理兩個ScrollView就行了,當第一個ScrollView滑到底部時,再次向上滑動進入第二

android 定義控制元件邊框,顏色,線條,圓滑程度

1,在drawable資料夾中右鍵,new->drawableresource file,彈出一個視窗。 2,將selector改為shape,輸入,該xml的名字table_shape,點選確定,接下來就將原來的控制元件變成圓滑控制元件。(drawable/ tab