本文出自:http://blog.csdn.net/dt235201314/article/details/77534468
一丶效果图
二丶需求分析及技术点
1.如效果图显示,当一样产品评论越多柱子越高可以展现热度,同一柱子不同颜色不同长度展示评论好坏对比,
自定义MarkView则显示详细数据,这就是分段堆积柱状图的优势所在。
2.MPAndroidChart实现存在的问题:1品类下面的总数不能随柱状图滑动而滑动;2.间距无法调整
3.技术点分析
组合自定义View的实现参考上文:
http://blog.csdn.net/dt235201314/article/details/77248347
MarkView的实现
PopupWindow的灵活使用
4.图解
三丶核心代码
1.造数据
public List<Source> parseData() { list = new ArrayList<>(); Random r = new Random(); for (int i= 0;i<=6;i++){ Source source = new Source(); source.setBadCount(r.nextInt(100)); source.setGoodCount(r.nextInt(100)); source.setOtherCount(r.nextInt(100)); source.setScale(r.nextInt(100)); source.setSource("品类" + i); source.setAllCount(source.getBadCount() + source.getGoodCount() + source.getOtherCount()); list.add(source); } return list; }2.分段堆积柱状图实体类相关属性(get,set方法略)
public class BarEntity { public String title = ""; private float positivePer; public String negativeColor = "#FEB356"; private float neutralPer ; public String neutralColor = "#51D6C5"; private float negativePer; public String positiveColor = "#3FA0FF"; private float Allcount; private float scale; /*填充区域比例*/ private float fillScale;3.分段堆积柱状图View(绘制分段柱状图)
public class BarView extends View { private BarEntity data; private Paint paint; private float animTimeCell = 0; public BarView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public BarView(Context context) { super(context); init(); } public BarView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { paint = new Paint(); paint.setStyle(Paint.Style.FILL); paint.setColor(Color.WHITE); paint.setAntiAlias(true); } public void setData(BarEntity data) { this.data = data; invalidate(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (data != null) { //高度填充 fillHeight = data.getFillScale() * getHeight(); if (fillHeight != 0) { paint.setColor(Color.TRANSPARENT); canvas.drawRect(0f, 0f, getWidth(), fillHeight, paint); canvas.translate(0f, fillHeight); } //负面 paint.setColor(Color.parseColor(data.negativeColor)); canvas.drawRect(0f, 0f, getWidth(), data.getNegativePer() * getHeight(), paint); canvas.translate(0f, data.getNegativePer() * getHeight()); //中性 paint.setColor(Color.parseColor(data.neutralColor)); canvas.drawRect(0f, 0f, getWidth(), data.getNeutralPer() * getHeight(), paint); canvas.translate(0f, data.getNeutralPer() * getHeight()); //正面 paint.setColor(Color.parseColor(data.positiveColor)); canvas.drawRect(0f, 0f, getWidth(), data.getPositivePer() * getHeight(), paint); canvas.translate(0f, data.getPositivePer() * getHeight()); } } private float fillHeight; public float getFillHeight() { return fillHeight; } public void startAnim(int animTime) { final ObjectAnimator anim = ObjectAnimator.ofFloat(this, "alpha", 0.0F, 1.0F).setDuration(animTime); anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { animTimeCell = (Float) anim.getAnimatedValue(); invalidate(); } }); } }4.自定义View容器
public class BarGroup extends LinearLayout { private List<BarEntity> datas; public BarGroup(Context context) { super(context); init(); } public BarGroup(Context context, AttributeSet attrs) { super(context, attrs); init(); } public BarGroup(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { setOrientation(HORIZONTAL); } public void setDatas(List<BarEntity> datas) { if (datas != null) { this.datas = datas; } } public void setHeight(float maxValue,int height) { if (datas != null) { for (int i = 0; i < datas.size(); i++) { /*通过柱状图的最大值和相对比例计算出每条柱状图的高度*/ float barHeight = datas.get(i).getAllcount()/maxValue*height; View view = LayoutInflater.from(getContext()).inflate(R.layout.bar_item, null); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(DensityUtil.dip2px(getContext(),30),height); // view.setLayoutParams(lp); ((BarView) view.findViewById(R.id.barView)).setData(datas.get(i)); (view.findViewById(R.id.barView)).setLayoutParams(lp); ((TextView)view.findViewById(R.id.title)).setText(getFeedString(datas.get(i).getTitle())); DecimalFormat mFormat=new DecimalFormat("##.#"); ((TextView)view.findViewById(R.id.percent)).setText(mFormat.format(datas.get(i).getAllcount())); addView(view); } } } /*字符串換行*/ private String getFeedString(String text){ StringBuilder sb = new StringBuilder(text); sb.insert(2,"\n"); return sb.toString(); } }5.bar_item.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="vertical" android:paddingRight="50dp"> <com.barchart.mpchartdemo.view.BarView android:id="@+id/barView" android:layout_width="30dp" android:layout_height="220dp" /> <TextView android:id="@+id/title" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:gravity="center" android:text="百度\n贴吧" /> <TextView android:id="@+id/percent" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:text="99.9%" /> </LinearLayout>
6fragmen.xml(UI图)
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="自定义分段柱状图:" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:orientation="horizontal" android:padding="5dp"> <TextView style="@style/barchartBar" android:drawableLeft="@mipmap/iv_sentiment_left" android:text="正面" /> <TextView style="@style/barchartBar" android:drawableLeft="@mipmap/iv_sentiment_middle" android:text="中性" /> <TextView style="@style/barchartBar" android:drawableLeft="@mipmap/iv_sentiment_right" android:text="负面" /> </LinearLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:id="@+id/bg" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="15dp"> <TextView android:id="@+id/tv_num5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="500000" /> <View android:id="@+id/left_base_line" android:layout_width="match_parent" android:layout_height="2dp" android:layout_gravity="center_vertical" android:layout_marginLeft="20dp" android:background="@drawable/view_dash_line" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="15dp"> <TextView android:id="@+id/tv_num4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="400000" /> <View android:layout_width="match_parent" android:layout_height="2dp" android:layout_gravity="center_vertical" android:layout_marginLeft="20dp" android:background="@drawable/view_dash_line" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="15dp"> <TextView android:id="@+id/tv_num3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="300000" /> <View android:layout_width="match_parent" android:layout_height="2dp" android:layout_gravity="center_vertical" android:layout_marginLeft="20dp" android:background="@drawable/view_dash_line" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="15dp"> <TextView android:id="@+id/tv_num2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="200000" /> <View android:layout_width="match_parent" android:layout_height="2dp" android:layout_gravity="center_vertical" android:layout_marginLeft="20dp" android:background="@drawable/view_dash_line" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="15dp"> <TextView android:id="@+id/tv_num1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="100000" /> <View android:layout_width="match_parent" android:layout_height="2dp" android:layout_gravity="center_vertical" android:layout_marginLeft="20dp" android:background="@drawable/view_dash_line" /> </LinearLayout> <View android:id="@+id/base_line" android:layout_width="match_parent" android:layout_height="0.5dp" android:layout_gravity="center_vertical" android:layout_marginLeft="20dp" android:layout_marginTop="30dp" android:background="#E6E6E6" /> </LinearLayout> <HorizontalScrollView android:id="@+id/bar_scroll" android:layout_width="match_parent" android:layout_height="wrap_content" android:scrollbars="none"> <com.barchart.mpchartdemo.view.BarGroup android:id="@+id/bar_group" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </HorizontalScrollView> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/bar_scroll" android:layout_marginLeft="20dp" android:layout_marginTop="-20dp" android:text="总数" /> </RelativeLayout>
7.遍历最大值,计算各横线处显示值
private void setYAxis(List<SourceEntity.Source> list) { sourceMax = list.get(0).getAllCount(); for (int i = 0; i < list.size() - 1; i++) { if (list.get(i).getAllCount() > sourceMax) { sourceMax = list.get(i).getAllCount(); } } ((TextView) itemView.findViewById(R.id.tv_num1)).setText((int) sourceMax / 5 + ""); ((TextView) itemView.findViewById(R.id.tv_num2)).setText((int) sourceMax * 2 / 5 + ""); ((TextView) itemView.findViewById(R.id.tv_num3)).setText((int) sourceMax * 3 / 5 + ""); ((TextView) itemView.findViewById(R.id.tv_num4)).setText((int) sourceMax * 4 / 5 + ""); ((TextView) itemView.findViewById(R.id.tv_num5)).setText((int) sourceMax + ""); }8.根据柱状图高度显示MarkView(PopupWindow)
private int initPopHeitht = 0; private void showPop(final View barItem, final float top) { if (popupWindow != null) popupWindow.dismiss(); popupWindow = null; popupWindow = new PopupWindow(popView, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT, false); popupWindow.setBackgroundDrawable(new BitmapDrawable()); popupWindow.setOutsideTouchable(true); popupWindow.showAsDropDown(barItem, barItem.getWidth() / 2, -((int) top + initPopHeitht)); if (initPopHeitht == 0) { popView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { popView.getViewTreeObserver().removeOnPreDrawListener(this); initPopHeitht = popView.getHeight(); popupWindow.update(barItem, barItem.getWidth() / 2, -((int) top + initPopHeitht), popupWindow.getWidth(), popupWindow.getHeight()); return false; } }); } }9.填充数据,柱状图点击监听,高度测量,等
public void setBarChart(){ barGroup = (BarGroup) itemView.findViewById(R.id.bar_group); root = (HorizontalScrollView) itemView.findViewById(R.id.bar_scroll); popView = LayoutInflater.from(getContext()).inflate( R.layout.pop_bg, null); final SourceEntity sourceEntity = new SourceEntity(); sourceEntity.parseData(); setYAxis(sourceEntity.getList()); barGroup.removeAllViews(); List<BarEntity> datas = new ArrayList<>(); final int size = sourceEntity.getList().size(); for (int i = 0; i < size; i++) { BarEntity barEntity = new BarEntity(); SourceEntity.Source entity = sourceEntity.getList().get(i); String negative = mFormat.format(entity.getBadCount() / sourceMax); barEntity.setNegativePer(Float.parseFloat(negative)); String neutral = mFormat.format(entity.getOtherCount() / sourceMax); barEntity.setNeutralPer(Float.parseFloat(neutral)); String positive = mFormat.format(entity.getGoodCount() / sourceMax); barEntity.setPositivePer(Float.parseFloat(positive)); barEntity.setTitle(entity.getSource()); barEntity.setScale(entity.getScale()); barEntity.setAllcount(entity.getAllCount()); /*计算柱状图透明区域的比例*/ barEntity.setFillScale(1 - entity.getAllCount() / sourceMax); datas.add(barEntity); } barGroup.setDatas(datas); //计算间距 barGroup.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { barGroup.getViewTreeObserver().removeOnPreDrawListener(this); int height = itemView.findViewById(R.id.bg).getMeasuredHeight(); final View baseLineView = itemView.findViewById(R.id.left_base_line); int baseLineTop = baseLineView.getTop(); barGroup.setHeight(sourceMax, height - baseLineTop - baseLineView.getHeight() / 2); barGroup.postDelayed(new Runnable() { @Override public void run() { BarView barItem = (BarView) barGroup.getChildAt(0).findViewById(R.id.barView); baseLineHeiht = itemView.findViewById(R.id.base_line).getTop(); lp = (RelativeLayout.LayoutParams) root.getLayoutParams(); left = baseLineView.getLeft(); lp.leftMargin = (int) (left + getContext().getResources().getDisplayMetrics().density * 3); lp.topMargin = Math.abs(baseLineHeiht - barItem.getHeight()); root.setLayoutParams(lp); // final int initHeight = barItem.getHeight(); // final ObjectAnimator anim = ObjectAnimator.ofFloat(barItem, "zch", 0.0F, 1.0F).setDuration(1500); // final LinearLayout.LayoutParams barLP= (LinearLayout.LayoutParams) barItem.getLayoutParams(); // anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { // @Override // public void onAnimationUpdate(ValueAnimator valueAnimator) { // float cVal = (Float) anim.getAnimatedValue(); // barLP.height = (int) (initHeight * cVal); // barItem.setLayoutParams(barLP); // } // }); // anim.start(); } }, 0); for (int i = 0; i < size; i++) { final BarView barItem = (BarView) barGroup.getChildAt(i).findViewById(R.id.barView); final int finalI = i; barItem.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { final float top = view.getHeight() - barItem.getFillHeight(); SourceEntity.Source ss = sourceEntity.getList().get(finalI); String showText = "正面:" + (int) ss.getGoodCount() + "条\n" + "中性:" + (int) ss.getOtherCount() + "条\n" + "负面:" + (int) ss.getBadCount() + "条"; ((TextView) popView.findViewById(R.id.txt)).setText(showText); showPop(barItem, top); } }); } return false; } }); }动画效果不佳,新动画效果研究中,后面更新
四丶往期相关文章推荐
MPAndroidChart常见设置属性(一)——应用层
MPAndroidChart项目实战(一)——实现对比性柱状图
MPAndroidChart项目实战(二)——双平滑曲线(双折线图)和MarkView实现
MPAndroidChart项目实战(三)——饼状图实现和文字重合问题解决
MPAndroidChart项目实战(四)——柱状图实现及X轴文字不显示问题和柱状图上显示文字
MPAndroidChart X轴文字斜着显示
MPAndroidChart项目实战(五)——组合图实现趋势图
MPAndroidChart项目实战(六)——自定义1MPAndroidChart滑动冲突解决(搞不定产品设计师就只能搞自己)
MPAndroidChart项目实战(七)——自定义横向柱状图
MPAndroidChart项目实战(八)——自定义分段堆积柱状图
MPAndroidChart项目实战(九)——自定义带文字分段堆积柱状图
五丶跪求关注下载源码,200粉小目标
欢迎关注我的博客及微信公众号,后面会给大家带来更多相关MPAndroidChart无法解决的仿MPAndroidChart图标自定义控件
源码下载记得顺便Star哦~
下载链接:https://github.com/JinBoy23520/MPAndroidChartDemoByJin