android自定义柱状图表,Android自定义柱状图控件

搜索github会发现已经有很多相对成熟的图表框架&＃xff0c;但与我们拿到的ui效果图总会有一些差别&＃xff0c;然后就会陷入是把别人源码下载下来修改之后作为已用&＃xff0c;或是重新定义一个新控件的两难境地。初拿到效果图感觉还是比较复杂难以实现&＃xff0c;但是仔细观察发现其实这就是一个列表&＃xff0c;一个横向列表&＃xff0c;一个可以用RecyclerView实现的列表。

private Paint paint;

private int measuredWidth;

private int measuredHeight;

private double ratio;

private GradientDrawable gradientDrawable;

public BarGraphItem(Context context) {

super(context);

initPaint();

}

public BarGraphItem(Context context, &＃64;Nullable AttributeSet attrs) {

super(context, attrs);

initPaint();

}

public BarGraphItem(Context context, &＃64;Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

initPaint();

}

//设置柱子的高度

public void setRatio(double ratio) {

this.ratio &＃61; ratio;

invalidate();

}

private void initPaint() {

paint &＃61; new Paint();

paint.setStyle(Paint.Style.FILL);

paint.setColor(getResources().getColor(R.color.colorBarBack));

paint.setAntiAlias(true);

int colors[] &＃61; {getResources().getColor(R.color.colorBarColor), getResources().getColor(R.color.colorGradientGreen)};

gradientDrawable &＃61; new GradientDrawable(GradientDrawable.Orientation.BOTTOM_TOP,colors)&＃xff1b;

//设置渐变色

gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT);

//设置顶部圆角

gradientDrawable.setCornerRadii(new float[]{15,15,15,15,0,0,0,0});

}

&＃64;Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

measuredWidth &＃61; getMeasuredWidth();

measuredHeight &＃61; getMeasuredHeight();

}

&＃64;Override

protected void onDraw(Canvas canvas) {

//画柱子的背景色

canvas.drawRect(0, 0, measuredWidth, measuredHeight, paint);

//计算柱子实际高度

if (ratio !&＃61; 0){

int ratioHeight &＃61; (int) (measuredHeight * ratio &＃43; 0.5);

//默认坐标原点在左上角&＃xff0c;这里我们把画布移到左上角

canvas.translate(0,measuredHeight - ratioHeight);

//x,y,w,h

gradientDrawable.setBounds(0,0,measuredWidth, ratioHeight);

gradientDrawable.draw(canvas);

}

}

}

代码并不复杂&＃xff0c;可以看到最终效果有很多渐变色的运用&＃xff0c;平时我们会用shape标签绘制一些简单的图形&＃xff0c;其中有一个gradient属性可以帮我们实现渐变效果&＃xff0c;那在代码中可以直接使用GradientDrawable来实现同样的效果。接下来在布局文件中使用

android:orientation&＃61;"vertical"

xmlns:android&＃61;"http://schemas.android.com/apk/res/android"

android:gravity&＃61;"center_horizontal"

android:paddingTop&＃61;"4dp"

android:layout_width&＃61;"wrap_content"

android:layout_height&＃61;"wrap_content">

android:textSize&＃61;"9dp"

android:text&＃61;"--"

android:id&＃61;"&＃64;&＃43;id/tv_amount_bar_graph"

android:layout_width&＃61;"wrap_content"

android:layout_height&＃61;"wrap_content" />

android:id&＃61;"&＃64;&＃43;id/rl_bar_graph"

android:layout_marginTop&＃61;"8dp"

android:background&＃61;"&＃64;drawable/shape_bar_graph"

android:layout_width&＃61;"43dp"

android:layout_height&＃61;"wrap_content">

android:layout_centerHorizontal&＃61;"true"

android:id&＃61;"&＃64;&＃43;id/bgi_bar_graph"

android:layout_gravity&＃61;"center_horizontal"

android:layout_width&＃61;"8dp"

android:layout_height&＃61;"110dp" />

android:textColor&＃61;"#999999"

android:textSize&＃61;"12dp"

android:gravity&＃61;"center"

android:text&＃61;"--"

android:background&＃61;"#F9F9F9"

android:layout_marginTop&＃61;"8dp"

android:id&＃61;"&＃64;&＃43;id/tv_time_bar_graph"

android:layout_width&＃61;"match_parent"

android:layout_height&＃61;"40dp" />

android:id&＃61;"&＃64;&＃43;id/iv_highest_bar_graph"

android:visibility&＃61;"invisible"

android:src&＃61;"&＃64;drawable/triangle_red_rose"

android:layout_width&＃61;"wrap_content"

android:layout_height&＃61;"wrap_content" />

因为柱状图整体的渐变背景并没到底部&＃xff0c;只是中间柱子的部分&＃xff0c;所以把这个背景的设置放到item的布局中&＃xff0c;也是用shape 标签实现

android:shape&＃61;"rectangle">

android:angle&＃61;"90"

android:startColor&＃61;"&＃64;color/colorLightBlue"

android:endColor&＃61;"&＃64;color/colorGradientWhite"

>

标识最高点的红色三角可以用png或其它格式的图片&＃xff0c;为了尽量缩减包体积也可以用layerlist标签来实现,

android:fromDegrees&＃61;"45"

android:toDegrees&＃61;"45"

android:pivotX&＃61;"-40%"

android:pivotY&＃61;"80%">

android:height&＃61;"8dp"/>

准备工作已经完成&＃xff0c;接下来就可以愉快地进行recyclerview三步曲了。在xml布局文件中使用recyclerview(比较简单代码就省略了)&＃xff0c;然后在MainActivity中初始化recyclerview,

private void initRecyclerView() {

//先造几条假数据

DecimalFormat df &＃61; new DecimalFormat("0.00");

int maxIndex &＃61; 0;

double max &＃61; 0;

for (int i &＃61; 1;i <&＃61; 10;i&＃43;&＃43;){

IncomeDetailsBean incomeDetailsBean &＃61; new IncomeDetailsBean();

incomeDetailsBean.setDate(i &＃43; "点");

double random &＃61; Math.random();

//记录最大值

if (random > max) {

max &＃61; random;

maxIndex &＃61; i - 1;

}

incomeDetailsBean.setIncome(df.format(random * 10) &＃43; "");

incomeDetailsBean.setRatio(random);

incomeDetails.add(incomeDetailsBean);

}

incomeDetails.get(maxIndex).setHighest(true);

//初始化recyclerview

layoutManager &＃61; new LinearLayoutManager(this);

layoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);

recyclerView.setLayoutManager(layoutManager);

barGraphAdapter &＃61; new BarGraphAdapter(this,incomeDetails);

recyclerView.setAdapter(barGraphAdapter);

}

最后一步adapter&＃xff0c;只看绑定控件这一部分&＃xff0c;

&＃64;Override

public void onBindViewHolder(ViewHolder holder, int position) {

//如果没有数据会有几条占位图

if (incomeDetails &＃61;&＃61; null || incomeDetails.size() &＃61;&＃61; 0){

holder.barGraphItem.setRatio(0);

holder.tv_time.setText("--");

holder.tv_amount.setText("--");

if (View.VISIBLE &＃61;&＃61; holder.iv_highest.getVisibility()) {

holder.iv_highest.setVisibility(View.INVISIBLE);

holder.tv_time.setTextSize(12);

holder.tv_time.setTextColor(Color.parseColor("#999999"));

}

holder.tv_amount.setTextColor(Color.LTGRAY);

}else {

//绑定数据

IncomeDetailsBean incomeDetailsBean &＃61; incomeDetails.get(position);

holder.barGraphItem.setRatio(incomeDetailsBean.getRatio());

holder.tv_time.setText(incomeDetailsBean.getDate());

holder.tv_amount.setText(incomeDetailsBean.getIncome());

holder.tv_amount.setTextColor(incomeDetailsBean.getRatio() &＃61;&＃61; 0 ? Color.LTGRAY : context.getResources().getColor(R.color.colorAccent));

holder.iv_highest.setVisibility(incomeDetailsBean.isHighest() ? View.VISIBLE : View.INVISIBLE);

holder.tv_time.setTextSize(incomeDetailsBean.isHighest() ? 16 : 12);

holder.tv_time.setTextColor(incomeDetailsBean.isHighest() ? context.getResources().getColor(R.color.colorAccent) : Color.parseColor("#999999"));

}

//缩放动画(x轴方向不变&＃xff0c;y轴由0到1增长效果)

Animation animation &＃61; AnimationUtils.loadAnimation(context, R.anim.scale_item);

holder.barGraphItem.startAnimation(animation);

}

纵向缩放动画

android:duration&＃61;"700"

android:fromXScale&＃61;"1.0"

android:fromYScale&＃61;"0.0"

android:pivotY&＃61;"100%"

android:toXScale&＃61;"1.0"

android:toYScale&＃61;"1.0">

最后是图中用到的配色资源

#3F51B5

#303F9F

&＃64;android:color/holo_green_dark

#3399cc00

#ff669900

#5099cc00

#0599cc00

#40669900

整个过程没有很生僻的点&＃xff0c;基本是对Android Drawable、动画及简单自定义控件这些基本技能的综合运用。

希望对你有所帮助&＃xff0c;喜欢记得点赞喔。

作者简介&＃xff1a;现就职于甜橙金融信息技术部&＃xff0c;负责安卓客户端开发工作。