前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android自定义view实现动态柱状图

Android自定义view实现动态柱状图

作者头像
砸漏
发布2020-10-22 15:07:50
1.1K0
发布2020-10-22 15:07:50
举报
文章被收录于专栏:恩蓝脚本恩蓝脚本

先看一下动态柱状图效果。

主要功能是可以自定义指定的字体,柱状图颜色,动态效果。

在自定义view

代码语言:javascript
复制
public class Histogram extends View {
int MAX = 100;//矩形显示的最大值
int corner = 0; //矩形的角度。 设置为0 则没有角度。
double data = 0.0;//显示的数
double tempData = 0; //初始数据
int textPadding = 50; //字体与矩形图的距离
Paint mPaint;
int mColor;
Context mContext;
//构造函数
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;
}
//防止数值很大的的时候,动画时间过长
int step = (int) (data / 100 + 1.0);
if (tempData < data - step) {
tempData = tempData + step;
} else {
tempData = data;
}
//画圆角矩形
String S = tempData + ""; //如果数字后面需要加% 则在""中添加%
//设置显示的字体
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 改变字体大小 也可以通过设置数字来改变自己想要的字体大小 当超出矩形图宽度时不能显示全部
}
//
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);
//写数字
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;
}
}

布局

代码语言:javascript
复制
<?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()方法

代码语言:javascript
复制
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代码轻松实现带动画柱状图

以上就是本文的全部内容,希望对大家的学习有所帮助。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-09-11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档