[置顶] MPAndroidChart项目实战（九）——自定义带文字分段堆积柱状图

本文出自：http://blog.csdn.net/dt235201314/article/details/78085430

一丶效果展示



二丶需求分析及技术点

1.显示每个季度产业（收入）占比，低于5%不显示

与上篇类似，将View换成textView即可，高度小于5%不显示

2.产业颜色与下面显示显色一致，且严格按照设计图颜色

使用map，键值对，一个产业名对应一个颜色

3.柱状图可滑动

同上篇博客

http://blog.csdn.net/dt235201314/article/details/77534468

4.带有动画效果

用白色View遮盖，由下往上收起，形成动画效果

5.图解



三丶看代码

xml

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:text="自定义带文字分段堆积柱状图：" />

<include layout="@layout/item_text_bar" />

<Button
android:id="@+id/bt_refresh2"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_margin="10dp"
android:gravity="center"
android:text="刷新" />

item_text_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">

<LinearLayout
android:id="@+id/bg_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="vertical">

<LinearLayout
android:id="@+id/item0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">

<TextView
android:id="@+id/tv_num5_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="100%" />

<View
android:id="@+id/left_base_line_text"
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="12dp">

<TextView
android:id="@+id/tv_num4_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 80%" />

<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="12dp">

<TextView
android:id="@+id/tv_num3_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 60%" />

<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="12dp">

<TextView
android:id="@+id/tv_num2_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 40%" />

<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="12dp">

<TextView
android:id="@+id/tv_num1_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" 20%" />

<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_text"
android:layout_width="match_parent"
android:layout_height="0.5dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="20dp"
android:layout_marginTop="20dp"
android:background="#E6E6E6" />
</LinearLayout>

<HorizontalScrollView
android:id="@+id/bar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="70dp"
android:scrollbars="none">

<com.barchart.mpchartdemo.view.TextBarGroupView
android:id="@+id/bar_group_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</HorizontalScrollView>
</RelativeLayout>

<com.nex3z.flowlayout.FlowLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/container2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:childSpacing="auto"
app:childSpacingForLastRow="align"
android:padding="10dp"
app:rowSpacing="8dp" />

</LinearLayout>

与上篇背景布局类似，HorizontalScrollView控制左右滑动，动态添加柱状图，以及FlowLayout（自适应布局显示下标）

说一说FlowLayout

bulid添加依赖便可以使用

compile 'com.nex3z:flow-layout:0.1.4'

属性讲解参看文章：

Android第三方库——FlowLayout

之前的文章：

Android删除添加标签（FlowLayout案例）

自定义ViewGroup——TextBarGroupView.java

public class TextBarGroupView extends LinearLayout {
public TextBarGroupView(Context context) {
super(context);
setOrientation(HORIZONTAL);
}

public TextBarGroupView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
setOrientation(HORIZONTAL);
}

public TextBarGroupView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setOrientation(HORIZONTAL);
}

String other = "其它";

public void init(final List<TextBarDataEntity.Record> datas, final int barHeight, FlowLayout sourceContainer) {
removeAllViews();
if (datas == null || datas.isEmpty()) {
return;
}
List<Integer> colors = new ArrayList<>();
colors.add(Color.parseColor("#3fa0ff"));
colors.add(Color.parseColor("#98b3e5"));
colors.add(Color.parseColor("#d7546d"));
colors.add(Color.parseColor("#51d4c4"));
colors.add(Color.parseColor("#6d43cc"));
colors.add(Color.parseColor("#ffb256"));
colors.add(Color.parseColor("#69390e"));
colors.add(Color.parseColor("#7ab024"));
colors.add(Color.parseColor("#a7d0c8"));
colors.add(Color.parseColor("#a29258"));
colors.add(Color.parseColor("#297350"));
colors.add(Color.parseColor("#eebdc7"));
colors.add(Color.parseColor("#bb59d0"));

List<TextBarDataEntity.Record.Source> allSourceList = new ArrayList<>();
List<String> allSourceNameList = new ArrayList<>();
Map<String, Integer> nameColorMap = new HashMap<>();
final int lineHeight = (int) getResources().getDisplayMetrics().density * 1;
for (int i = 0; i < datas.size(); i++) {
//加载所有来源，去重复
List<TextBarDataEntity.Record.Source> sourceList = datas.get(i).getSourceList();
if (sourceList != null && !sourceList.isEmpty()) {
int j = 0;
for (TextBarDataEntity.Record.Source entry : sourceList) {
if (!nameColorMap.containsKey(entry.getSourceName())) {
Integer colorValue = colors.get(j % colors.size());
if (!nameColorMap.containsValue(colorValue)) {
nameColorMap.put(entry.getSourceName(), colorValue);
} else {
int index=colors.indexOf(colorValue);
for(int x=index;x<colors.size();x++){
Integer colorValue1 = colors.get(x % colors.size());
if(!nameColorMap.containsValue(colorValue1)){
nameColorMap.put(entry.getSourceName(), colorValue1);
break;
}
}
}
}
if (!allSourceNameList.contains(entry.getSourceName())) {
allSourceNameList.add(entry.getSourceName());
allSourceList.add(entry);
}
j++;
}
Collections.reverse(sourceList);
}
}
initAllSourceLayout(allSourceList, sourceContainer, nameColorMap);
for (int i = 0; i < datas.size(); i++) {
final View item = LayoutInflater.from(getContext()).inflate(R.layout.text_source_item_group, this, false);
final TextBarView barView = (TextBarView) item.findViewById(R.id.barview);
barView.init(datas.get(i), barHeight + lineHeight, nameColorMap);
((TextView) item.findViewById(R.id.time)).setText(datas.get(i).getTimeScale());
item.findViewById(R.id.time).setMinimumWidth((int) (getResources().getDisplayMetrics().density*80));
if (i == 0) {
final LayoutParams lp = (LayoutParams) item.getLayoutParams();
lp.leftMargin = 0;
addView(item, lp);
} else {
addView(item);
}
final View coverView = item.findViewById(R.id.cover);
ViewGroup.LayoutParams lp = coverView.getLayoutParams();
lp.height = barHeight;
coverView.setLayoutParams(lp);
//动画
postDelayed(new Runnable() {
@Override
public void run() {
final int initCoverHeight = coverView.getHeight();
ObjectAnimator anim = ObjectAnimator.ofFloat(coverView, "translationY", 0, -initCoverHeight);
anim.setDuration(1000);
anim.start();
}
}, (i + 1) * 500);
}

getViewTreeObserver().

addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
getViewTreeObserver().removeOnPreDrawListener(this);
HorizontalScrollView.LayoutParams lp = (HorizontalScrollView.LayoutParams) getLayoutParams();
lp.topMargin = barHeight / 5 / 2 - lineHeight;
setLayoutParams(lp);
return false;
}
});

}

private void initAllSourceLayout(List<TextBarDataEntity.Record.Source> list, FlowLayout sourceContainer, Map<String, Integer> nameColorMap) {
sourceContainer.removeAllViews();
for (TextBarDataEntity.Record.Source source : list) {
View item = LayoutInflater.from(getContext()).inflate(R.layout.pie_lable_item, sourceContainer, false);
GradientDrawable bg = (GradientDrawable) item.findViewById(R.id.icon).getBackground();
TextView txt = (TextView) item.findViewById(R.id.txt);
bg.setColor(nameColorMap.get(source.getSourceName()));
item.findViewById(R.id.icon).setBackground(bg);
txt.setText(source.getSourceName());
sourceContainer.addView(item);
}
}

}

看init（）方法

第一个参数 List<TextBarDataEntity.Record> datas 为实体类展示数据

造数据核心代码：

public List<Record>  parseData(){
recordList = new ArrayList<>();
Random r = new Random();
for (int i= 0;i<=4;i++){
Record record = new Record();
record.setTimeScale("第" + (i+1) + "周");
List<Record.Source> list = new ArrayList<>();
for (int j=0; j<= 3; j++ ){
Record.Source source = new Record.Source();
source.setSourceName("TCL第" + (j+1) + "产业");
source.setSourceNum(r.nextInt(10*(j+1)));
list.add(source);
}
Record.Source source = new Record.Source();
source.setSourceName("TCL第5产业");
int sourceNum = 100 - list.get(0).getSourceNum() - list.get(1).getSourceNum()
- list.get(2).getSourceNum() - list.get(3).getSourceNum();
source.setSourceNum(sourceNum);
list.add(source);
record.setSourceList(list);
recordList.add(record);
}
return recordList;
}

随机数10,20,30,40以内，最后100前去前面的数，刚好100，除以100为占比数

第二个参数 int barHeight 高度，这里为柱状图高度，5倍上面的那个横线布局 id item0 高度

第三个参数 FlowLayout sourceContainer，自定义view容器，动态添加子view，“第1产业”

看for循环（是不是很牛逼的感觉，cnm产品要求的）

运用map，一个产业名对应一个颜色数值

注意了，为什么后面要循环遍历，因为各个季度产业数可能不同，例：季度一（1 2 3 4产业）季度二（3 4 5 6产业）

Collections.reverse(sourceList); 这一句，逆序展示业务要求（后台排好大小顺序）

initAllSourceLayout（）方法

第一个参数 List<TextBarDataEntity.Record.Source> list 产业名称

第二个参数  FlowLayout sourceContainer 容器  pie_lable_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:gravity="center_vertical"
android:orientation="horizontal">

<View
android:id="@+id/icon"
android:layout_width="10dp"
android:layout_height="10dp"
android:background="@drawable/source_small" />

<TextView
android:id="@+id/txt"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="12sp" />
</LinearLayout>

第三个参数 Map<String, Integer> nameColorMap 产业名→颜色

看代码，这个方法就是添加效果图下面的，产业1 2 3...了

第二个for循环（添加自定义View带文字柱状图 + 动画实现）

text_source_item_group.xml（这个带文字柱状的布局）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:gravity="center_horizontal"
android:orientation="vertical">

<FrameLayout
android:id="@+id/text_bar_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignLeft="@+id/time"
android:layout_alignRight="@+id/time"
android:paddingLeft="10dp"
android:paddingRight="10dp">

<com.barchart.mpchartdemo.view.TextBarView
android:id="@+id/barview"
android:layout_width="match_parent"
android:layout_height="wrap_content"></com.barchart.mpchartdemo.view.TextBarView>

<View
android:id="@+id/cover"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:visibility="visible" />
</FrameLayout>

<TextView
android:id="@+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/text_bar_container"
android:layout_marginTop="15dp"
android:gravity="center"
android:text="17.01.01-17.03.31"
android:textSize="12sp" />
</RelativeLayout>

这里FrameLayout，用一个白色View遮住TextBarView收起形成动画

TextBarView.java

public class TextBarView extends LinearLayout {
public TextBarView(Context context) {
super(context);
setOrientation(VERTICAL);
}

public TextBarView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
setOrientation(VERTICAL);
}

public TextBarView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
setOrientation(VERTICAL);
}

DecimalFormat format = new DecimalFormat("##.##");
PopupWindow popupWindow;
View popView;

public void init(TextBarDataEntity.Record record, int height, Map<String, Integer> nameColorMap) {
if (record.getSourceList() == null && record.getSourceList().isEmpty()) {
return;
}
popView = LayoutInflater.from(getContext()).inflate(
R.layout.pop_bg, null);
//计算空白填充部分占比
double blankScale = 1;
for (int i = 0; i < record.getSourceList().size(); i++) {
blankScale -= record.getSourceList().get(i).getSourceNum();
}
//        if (blankScale==1) {
//            TextView item = (TextView) LayoutInflater.from(getContext()).inflate(R.layout.negative_sentiment_source_item_txt, this, false);
//            ViewGroup.LayoutParams lp = item.getLayoutParams();
//            lp.height = (int) (blankScale * height);
//            addView(item);
//            return;
//        }

for (int i = 0; i < record.getSourceList().size(); i++) {
final TextView item = (TextView) LayoutInflater.from(getContext()).inflate(R.layout.text_source_item_txt, this, false);
final TextBarDataEntity.Record.Source source = record.getSourceList().get(i);
item.setText(source.getSourceNum() >= 5 ? format.format(source.getSourceNum()) + "%" : "");
GradientDrawable bg = (GradientDrawable) getResources().getDrawable(R.drawable.n_s_bar_bg);
bg.setColor(nameColorMap.get(source.getSourceName()));
item.setBackground(bg);
ViewGroup.LayoutParams lp = item.getLayoutParams();
lp.height = (int) (source.getSourceNum()/(double)100 * height);
addView(item, lp);
}
}

private void showPop(final View view) {
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(view, view.getWidth() / 2, view.getHeight() / 2);
}
}

这里与上一篇的BarView类似，带文字柱状图就没必要再点击弹框了

直接看init（）方法的for循环

text_source_item_txt.xml （就是一个textview）

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/gray3"
android:gravity="right|center_vertical"
android:paddingRight="5dp"
android:text="50%"
android:textColor="@android:color/white"
android:textSize="12sp" />

item.setText(source.getSourceNum() >= 5 ? format.format(source.getSourceNum()) + "%" : "");

小于5%，不显示

添加bg

lp.height = (int) (source.getSourceNum()/(double)100 * height);

这里表示每个text站总高度的百分比，必须加上double

白色view揭盖动画

获取高度运用ObjectAnimator收起

给自定义带文字布局添加topMargin

getViewTreeObserver().

。。。。

四丶往期文章

MPAndroidChart常见设置属性（一）——应用层 
MPAndroidChart项目实战（一）——实现对比性柱状图 
MPAndroidChart项目实战（二）——双平滑曲线（双折线图）和MarkView实现 
MPAndroidChart项目实战（三）——饼状图实现和文字重合问题解决 
MPAndroidChart项目实战（四）——柱状图实现及X轴文字不显示问题和柱状图上显示文字 
MPAndroidChart X轴文字斜着显示 
MPAndroidChart项目实战（五）——组合图实现趋势图 
MPAndroidChart项目实战（六）——自定义1MPAndroidChart滑动冲突解决（搞不定产品设计师就只能搞自己） 
MPAndroidChart项目实战（七）——自定义横向柱状图 
MPAndroidChart项目实战（八）——自定义分段堆积柱状图 
MPAndroidChart项目实战（九）——自定义带文字分段堆积柱状图 

五丶跪求关注下载源码，200粉小目标
欢迎关注我的博客及微信公众号，后面会给大家带来更多相关MPAndroidChart无法解决的仿MPAndroidChart图标自定义控件
源码下载记得顺便Star哦~
下载链接：https://github.com/JinBoy23520/MPAndroidChartDemoByJin