Android自定義view實現(xiàn)動態(tài)柱狀圖
先看一下動態(tài)柱狀圖效果。
主要功能是可以自定義指定的字體,柱狀圖顏色,動態(tài)效果。

在自定義view
public class Histogram extends View {
int MAX = 100;//矩形顯示的最大值
int corner = 0; //矩形的角度。 設置為0 則沒有角度。
double data = 0.0;//顯示的數(shù)
double tempData = 0; //初始數(shù)據(jù)
int textPadding = 50; //字體與矩形圖的距離
Paint mPaint;
int mColor;
Context mContext;
//構造函數(shù)
public Histogram(Context context) {
super(context);
mContext = context;
}
public Histogram(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mContext = context;
initPaint();
}
public Histogram(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
initPaint();
}
//畫筆方法
private void initPaint() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mColor = mContext.getResources().getColor(R.color.gary);
mPaint.setColor(mColor);
}
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
if (data == 0.0) {
mPaint.setTextSize(getWidth() / 2);
RectF oval3 = new RectF(0, getHeight() - DensityUtils.pxTodip(mContext, 20), getWidth(), getHeight());// 設置個新的長方形
canvas.drawRoundRect(oval3, DensityUtils.pxTodip(mContext, corner), DensityUtils.pxTodip(mContext, corner), mPaint);
canvas.drawText("0",
getWidth() * 0.5f - mPaint.measureText("0") * 0.5f,
getHeight() - DensityUtils.pxTodip(mContext, 20) - 2 * DensityUtils.pxTodip(mContext, textPadding),
mPaint);
return;
}
//防止數(shù)值很大的的時候,動畫時間過長
int step = (int) (data / 100 + 1.0);
if (tempData < data - step) {
tempData = tempData + step;
} else {
tempData = data;
}
//畫圓角矩形
String S = tempData + ""; //如果數(shù)字后面需要加% 則在""中添加%
//設置顯示的字體
Typeface typeface = Typeface.createFromAsset(getContext().getAssets(),"digital-7.ttf");
mPaint.setTypeface(typeface);
// //一個字和兩,三個字的字號相同
if (S.length() < 4) {
mPaint.setTextSize(getWidth()/2 );
} else {
mPaint.setTextSize(50); //可以通過getWidth()/2 改變字體大小 也可以通過設置數(shù)字來改變自己想要的字體大小 當超出矩形圖寬度時不能顯示全部
}
//
float textH = mPaint.ascent() + mPaint.descent();
float MaxH = getHeight() - textH - 2 * DensityUtils.pxTodip(mContext, textPadding);
// //圓角矩形的實際高度
float realH = (float) (MaxH / MAX * tempData);
RectF oval3 = new RectF(0, getHeight() - realH, getWidth(), getHeight());// 設置個新的長方形
canvas.drawRoundRect(oval3, DensityUtils.pxTodip(mContext, corner), DensityUtils.pxTodip(mContext, corner), mPaint);
//寫數(shù)字
canvas.drawText(S,
getWidth() * 0.5f - mPaint.measureText(S) * 0.5f,
getHeight() - realH - 2 * DensityUtils.pxTodip(mContext, textPadding),
mPaint);
if (tempData != data) {
postInvalidate();
}
}
public void setData(double data, int MAX) {
this.data = data;
this.MAX = MAX;
postInvalidate();
}
public int getmColor() {
return mColor;
}
public void setmColor(int mColor) {
this.mColor = mColor;
}
}
布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_weight="1" > <View android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.2"/> <com.mieasy.myhistogramview.Histogram android:id="@+id/column_one" android:layout_width="0dp" android:layout_height="300dp" android:layout_weight="0.8"/> <View android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="2.4"/> <com.mieasy.myhistogramview.Histogram android:id="@+id/column_two" android:layout_width="0dp" android:layout_height="300dp" android:layout_weight="1"/> <View android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="2.4"/> <com.mieasy.myhistogramview.Histogram android:id="@+id/column_three" android:layout_width="0dp" android:layout_height="300dp" android:layout_weight="1"/> <View android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.2"/> </LinearLayout>
MainActivity調用initAllViews()方法
private void initAllViews() {
column_one = (Histogram) findViewById(R.id.column_one);
column_two = (Histogram) findViewById(R.id.column_two);
column_three = (Histogram) findViewById(R.id.column_three);
column_one.setData( 20.22, 100);
column_two.setData(30.2, 100);
column_three.setData(40, 100);
column_one.mPaint.setColor(getResources().getColor(R.color.colorAccent)); //改變柱狀圖的顏色
}
參考文章:100行Android代碼輕松實現(xiàn)帶動畫柱狀圖
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Android開發(fā)之Picasso通過URL獲取用戶頭像的圓形顯示
這篇文章主要介紹了android開發(fā)之Picasso通過URL獲取用戶頭像的圓形顯示,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-06-06
android如何取得本地通訊錄的頭像的原圖的實現(xiàn)代碼
這篇文章主要介紹了android如何取得本地通訊錄的頭像的原圖的實現(xiàn)代碼,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
android viewpager實現(xiàn)豎直滑動效果
這篇文章主要為大家詳細介紹了android viewpager實現(xiàn)豎直滑動效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-07-07
Android Studio default not found錯誤解決辦法
這篇文章主要介紹了Android Studio gradle 編譯提示‘default not found’ 解決辦法的相關資料,需要的朋友可以參考下2017-01-01
Eclipse工程轉為兼容Android Studio模式的方法步驟圖文詳解
這篇文章主要介紹了Eclipse工程轉為兼容Android Studio模式的方法步驟,本文圖文并茂給大家介紹的非常詳細,需要的朋友可以參考下2017-12-12
Android開發(fā)EditText禁止輸入監(jiān)聽及InputFilter字符過濾
這篇文章主要為大家介紹了Android開發(fā)EditText禁止輸入監(jiān)聽及InputFilter字符過濾示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-06-06
android popwindow實現(xiàn)左側彈出菜單層及PopupWindow主要方法介紹
PopupWindow可以實現(xiàn)浮層效果,主要方法有:可以自定義view,通過LayoutInflator方法;可以出現(xiàn)和退出時顯示動畫;可以指定顯示位置等感興趣的朋友可以了解下哦,希望本文對你學習android菜單相關開發(fā)有所幫助2013-01-01

