首页 > 移动开发 > 详细

Android自定义控件系列四：绘制实用型的柱形图和折线图

时间：2015-10-27 17:46:04 阅读：241 评论：0 收藏：0 [点我收藏+]

标签：

概述：

前几天突然需要做两种图表——柱形图、折线图，于是第一反应是先看看网上有没有现成的，结果有是有，但都不是想要的，而且大多数不是用纯android代码完成，不过HTML5似乎完成这类工作要容易得多，单是非我们所擅长。

**知识点：**android自定义view、图形图像、Fragment、MVC模式。

Demo

界面是模仿红圈营销搭建的

折线图：
技术分享

代码,注释很详细，直接看代码就行了：

public class LineChartView extends View {
 
private int width;
private int height;
private float maxValue;//传入数据的最大值
private int dataNum;//数据总数
 
private Paint mPaintBg;//报表背景画笔
private Paint mPaintCoveredBg;//用于画数据覆盖部分
private Paint mPaintChartLine;//用于画报表的网格
private Paint mPaintDataLine;//用于画数据连线
private Paint mPaintTextDate;//用于画日期文本
private Paint mPaintCircle;//用于画空心圆
private Paint mPaintFilledCircle;//用于画实心圆
private Paint mPaintTextValue;//用于画数据访问量值
 
private Path path;
 
private HashMap<Integer, PageViewData> dataTotal;//用于得存储传入的总数据
 
//用一个setPaints（）方法，设定所有画笔的属性，增加代码灵活性
public void setPaints(int bgColor, int coveredBgColor, int chartLineColor
, int dataLineColor, int textDateColor, int filledCircleColor, int circleColor, int textValueColor) {
 
mPaintBg.setColor(bgColor);
mPaintBg.setStyle(Paint.Style.FILL);
 
mPaintCoveredBg.setColor(coveredBgColor);
mPaintCoveredBg.setStyle(Paint.Style.FILL);
 
mPaintCircle.setColor(circleColor);
mPaintCircle.setStyle(Paint.Style.STROKE);
mPaintCircle.setStrokeWidth(5);
mPaintCircle.setAntiAlias(true);
 
mPaintFilledCircle.setColor(filledCircleColor);
mPaintFilledCircle.setStyle(Paint.Style.FILL);
mPaintFilledCircle.setAntiAlias(true);
 
mPaintChartLine.setColor(chartLineColor);
mPaintChartLine.setStyle(Paint.Style.STROKE);
mPaintChartLine.setAntiAlias(true);
 
mPaintDataLine.setColor(dataLineColor);
mPaintDataLine.setStyle(Paint.Style.STROKE);
mPaintDataLine.setStrokeWidth(SizeConvert.dip2px(getContext(), 5));
mPaintDataLine.setAntiAlias(true);
 
mPaintTextDate.setColor(textDateColor);
mPaintTextDate.setTextSize(SizeConvert.dip2px(getContext(), 10));
mPaintTextDate.setTextAlign(Paint.Align.CENTER);
mPaintTextDate.setAntiAlias(true);
 
mPaintTextValue.setColor(textValueColor);
mPaintTextValue.setTextSize(SizeConvert.dip2px(getContext(), 12));
mPaintTextValue.setTextAlign(Paint.Align.CENTER);
mPaintTextValue.setAntiAlias(true);
 
//重绘
invalidate();
}
 
 
//用于设定传入的总数据
public void setDataTotal(HashMap<Integer, PageViewData> dataTotal) {
this.dataTotal = dataTotal;
invalidate();
}
 
public LineChartView(Context context) {
super(context);
}
 
public LineChartView(Context context, AttributeSet attrs) {
super(context, attrs);
mPaintBg = new Paint();
mPaintCoveredBg = new Paint();
mPaintCircle = new Paint();
mPaintChartLine = new Paint();
mPaintDataLine = new Paint();
mPaintTextDate = new Paint();
mPaintTextValue = new Paint();
mPaintFilledCircle = new Paint();
path = new Path();
 
dataTotal = new HashMap<>();
}
 
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//当总数据已经传入，即不为空时，根据总数据中数据个数设定view的总宽
if (dataTotal != null) {
width = (dataTotal.size() - 1) * xAddedNum + chartMarginHorizontal * 2;
getMaxValue(dataTotal);
}
height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
setMeasuredDimension(width, height);
}
 
/**
* 用于得到总数据中最大数据
* @param dataTotal 总数据
*/
private void getMaxValue(HashMap<Integer, PageViewData> dataTotal) {
maxValue = 0;
dataNum = 0;
for (int key : dataTotal.keySet()) {
if (dataTotal.get(key).getPageViewValue() > maxValue) {
maxValue = dataTotal.get(key).getPageViewValue();
}
dataNum++;
}
}
 
private int mChartHeight;//折线图的高
private int mChartWidth;//折线图的
private int startX = SizeConvert.dip2px(getContext(), 10);//开始绘制的x坐标
private int startY = SizeConvert.dip2px(getContext(), 5);//开始绘制的y坐标
private int chartMarginBottom = SizeConvert.dip2px(getContext(), 30);//折线图距离父控件底部距离
private int chartMarginHorizontal = SizeConvert.dip2px(getContext(), 12);//折线图距离父控件左右的距离
private int valueAlignLeft = SizeConvert.dip2px(getContext(), 0);//value参数文本距离左边距离
private int dateAlignLeft = SizeConvert.dip2px(getContext(), 0);//date参数文本距离左边距离
private int valueAlignBottom = SizeConvert.dip2px(getContext(), 5);//value参数文本距离底部距离
private int dateAlignBottom = SizeConvert.dip2px(getContext(), 10);//date参数文本距离底部距离
private int xAddedNum = SizeConvert.dip2px(getContext(), 60);//绘制折线图时每次移动的x轴距离
private int yAddedNum;//绘制折线图时每次移动的y轴距离
private boolean isDrawFirst;//是否是第一次绘制
private float circleFilledRadius = SizeConvert.dip2px(getContext(), 5);//外圆半径
private float circleRadius = SizeConvert.dip2px(getContext(), 3);//内圆半径
 
private float firstX;//第一个点的x轴坐标
private float firstY;//第一个点的y轴坐标
 
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
isDrawFirst = true;
mChartHeight = height - chartMarginBottom;
yAddedNum = mChartHeight / 4;
mChartWidth = width - chartMarginHorizontal * 2;
 
canvas.drawRect(startX, startY, startX + mChartWidth, startY + mChartHeight, mPaintBg);
for (int key : dataTotal.keySet()) {
float value = dataTotal.get(key).getPageViewValue();
if (isDrawFirst) {
//当第一次绘制时得到第一个点的横纵坐标
firstX = startX;
firstY = startY + (1f - value / ((int) maxValue * 1.5f)) * mChartHeight;
path.moveTo(firstX, firstY);
isDrawFirst = false;
}
//每循环一次，将path线性相位一次
path.lineTo(startX, startY + (1f - value / ((int) maxValue * 1.5f)) * mChartHeight);
startX += xAddedNum;
}
//重新给startX赋值
startX = SizeConvert.dip2px(getContext(), 10);
//画出折线
canvas.drawPath(path, mPaintDataLine);
//画出折线以下部分的颜色
path.lineTo(startX + mChartWidth, startY + mChartHeight);
path.lineTo(startX, startY + mChartHeight);
path.lineTo(firstX, firstY);
canvas.drawPath(path, mPaintCoveredBg);
 
//画出每个点的圆圈，和对应的文本
for (int key : dataTotal.keySet()) {
int date = dataTotal.get(key).getDate();
float value = dataTotal.get(key).getPageViewValue();
canvas.drawCircle(startX, startY + (1f - value / ((int) maxValue * 1.5f)) * mChartHeight, circleFilledRadius, mPaintFilledCircle);
canvas.drawCircle(startX, startY + (1f - value / ((int) maxValue * 1.5f)) * mChartHeight, circleRadius, mPaintCircle);
canvas.drawText(date + "", startX + dateAlignLeft, height - dateAlignBottom, mPaintTextDate);
canvas.drawText(value + "", startX + valueAlignLeft, startY + (1f - value / ((int) maxValue * 1.5f)) * mChartHeight - valueAlignBottom, mPaintTextValue);
 
startX += xAddedNum;
}
 
//在次使startX回到初始值
startX = SizeConvert.dip2px(getContext(), 10);
/**
* 画出网格
*/
//竖线
for (int i = 0; i < dataNum; i++) {
canvas.drawLine(startX + i * xAddedNum, startY, startX + i * xAddedNum, startY + mChartHeight, mPaintChartLine);
}
 
//横线
for (int i = 0; i < 5; i++) {
canvas.drawLine(startX, startY + i * yAddedNum, startX + mChartWidth, startY + i * yAddedNum, mPaintChartLine);
}
 
path.reset();
 
}
}

柱形图：
技术分享

代码：

/**
* 柱形图
*/
public class HistogramView extends View {
 
private int width;
private int height;
 
private Paint mBgPaint;
private Paint mHistogramBgPaint;
private Paint mHistogramPaint;
private Paint mTextPaint;
 
private HashMap<Integer,HistogramData> dataTotal;
 
public void setPaints(int bgColor,int histogramBgColor,int histogramColor,int textColor){
 
mBgPaint.setColor(bgColor);
mBgPaint.setStyle(Paint.Style.FILL);
 
mHistogramBgPaint.setColor(histogramBgColor);
mHistogramBgPaint.setStyle(Paint.Style.FILL);
 
mHistogramPaint.setColor(histogramColor);
mHistogramPaint.setStyle(Paint.Style.FILL);
 
mTextPaint.setColor(textColor);
mTextPaint.setTextSize(SizeConvert.dip2px(getContext(), 9));
mTextPaint.setTextAlign(Paint.Align.CENTER);
 
invalidate();
};
 
public void setDataTotal(HashMap<Integer, HistogramData> dataTotal) {
this.dataTotal = dataTotal;
invalidate();
}
 
public HistogramView(Context context) {
super(context);
}
 
public HistogramView(Context context, AttributeSet attrs) {
super(context, attrs);
mHistogramBgPaint = new Paint();
mHistogramPaint = new Paint();
mTextPaint = new Paint();
mBgPaint = new Paint();
 
dataTotal = new HashMap<>();
}
 
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if(dataTotal!=null){
width = dataTotal.size()*SizeConvert.dip2px(getContext(), 40);
}
height = getDefaultSize(getSuggestedMinimumHeight(),heightMeasureSpec);
setMeasuredDimension(width, height);
}
 
private int mHistogramHeight;
int startX = SizeConvert.dip2px(getContext(), 20);
int startY = SizeConvert.dip2px(getContext(),20);
int radius = 45;
int greyValueAlignLeft = SizeConvert.dip2px(getContext(), 5);
int nameAlignLeft = SizeConvert.dip2px(getContext(), 15);
int greyValueAlignBottom = SizeConvert.dip2px(getContext(), 5);
int nameAlignBottom = SizeConvert.dip2px(getContext(), 15);
int histogramWidth = SizeConvert.dip2px(getContext(), 8);
int xAddedNum = SizeConvert.dip2px(getContext(), 40);
int histogramAlignTop = SizeConvert.dip2px(getContext(), 2);
 
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mHistogramHeight = height-SizeConvert.dip2px(getContext(),40);
canvas.drawRect(0,startY,width,mHistogramHeight,mBgPaint);
for(int key:dataTotal.keySet()){
String name = dataTotal.get(key).getName();
int greyValue = dataTotal.get(key).getGreyValue();
 
canvas.drawText(greyValue + "%", startX + greyValueAlignLeft, startY-greyValueAlignBottom , mTextPaint);
canvas.drawRect(startX, startY+histogramAlignTop, startX + histogramWidth, mHistogramHeight, mHistogramBgPaint);
canvas.drawRect(startX, startY+(1f - greyValue / 100f) * (mHistogramHeight - startY-histogramAlignTop)+histogramAlignTop, startX + histogramWidth, mHistogramHeight, mHistogramPaint);
 
canvas.save();
canvas.rotate(-radius, startX,height);
canvas.drawText(name, startX + nameAlignLeft, height-nameAlignBottom, mTextPaint);
canvas.restore();
startX+=xAddedNum;
}
startX = SizeConvert.dip2px(getContext(), 20);
}
 
}

Fragment

public class FragmentChart extends Fragment implements View.OnClickListener{
 
private RelativeLayout mItemFirst;
private RelativeLayout mItemSecond;
private RelativeLayout mItemThird;
private RelativeLayout mItemForth;
 
private HistogramView mHistogramView;
private HashMap<Integer,HistogramData> mDataHistogramTotal;
private boolean isShowHistogram = false;
 
private LineChartView mLineChartView;
private HashMap<Integer,PageViewData> mDataPageView;
private boolean isShowSecondItem = false;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.content_chart,null);
mItemFirst = (RelativeLayout) view.findViewById(R.id.first_page_item_1);
mItemSecond = (RelativeLayout) view.findViewById(R.id.first_page_item_2);
mItemThird = (RelativeLayout) view.findViewById(R.id.first_page_item_3);
mItemForth = (RelativeLayout) view.findViewById(R.id.first_page_item_4);
 
mHistogramView = (HistogramView) view.findViewById(R.id.histogram_view_item_1);
mLineChartView = (LineChartView) view.findViewById(R.id.line_chart_view_item_2);
 
mItemFirst.setOnClickListener(this);
mItemSecond.setOnClickListener(this);
mItemThird.setOnClickListener(this);
mItemForth.setOnClickListener(this);
 
initDataHistogram();
initDataPageView();
 
return view;
}
 
private void initDataPageView() {
mDataPageView = new HashMap<>();
mDataPageView.put(1,new PageViewData(1,9,16));
mDataPageView.put(2,new PageViewData(2,10,18));
mDataPageView.put(3,new PageViewData(3,11,33));
mDataPageView.put(4,new PageViewData(4,12,97));
mDataPageView.put(5,new PageViewData(5,13,46));
mDataPageView.put(6,new PageViewData(6,14,55));
mDataPageView.put(7,new PageViewData(7,15,11));
mDataPageView.put(8,new PageViewData(8,16,22));
mDataPageView.put(9,new PageViewData(9,17,8));
mDataPageView.put(10,new PageViewData(10,18,19));
mDataPageView.put(11,new PageViewData(11,16,22));
 
mLineChartView.setDataTotal(mDataPageView);
mLineChartView.setPaints(Color.argb(255,225, 250, 250),
Color.argb(255,234, 234, 250), Color.argb(255,74,208, 204),
Color.argb(255,105, 210, 249),Color.argb(255,203, 203, 203)
,Color.argb(255,255, 255, 255),Color.argb(255,105, 210, 249),Color.argb(255,105, 210, 249));
}
 
private void initDataHistogram(){
mDataHistogramTotal = new HashMap<>();
mDataHistogramTotal.put(1,new HistogramData(1,"海萌",100));
mDataHistogramTotal.put(2,new HistogramData(2,"涛涛",18));
mDataHistogramTotal.put(3,new HistogramData(3,"火风",17));
mDataHistogramTotal.put(4,new HistogramData(4,"周杰伦",16));
mDataHistogramTotal.put(5,new HistogramData(5,"王宝强",15));
mDataHistogramTotal.put(6,new HistogramData(6,"林俊杰",14));
mDataHistogramTotal.put(7,new HistogramData(7,"孙悟空",11));
mDataHistogramTotal.put(8,new HistogramData(8,"钟航",10));
mDataHistogramTotal.put(9,new HistogramData(9,"小明",8));
mDataHistogramTotal.put(10, new HistogramData(10, "小红", 5));
 
mHistogramView.setDataTotal(mDataHistogramTotal);
mHistogramView.setPaints(Color.argb(255,250, 250, 250),
Color.argb(255,238, 238, 238), Color.argb(255,240,141, 77),
Color.argb(255,168, 168, 168));
}
 
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.first_page_item_1:
isShowHistogram = !isShowHistogram;
if(isShowHistogram) {
mHistogramView.setVisibility(View.VISIBLE);
}else{
mHistogramView.setVisibility(View.GONE);
}
break;
case R.id.first_page_item_2:
isShowSecondItem= !isShowSecondItem;
if(isShowSecondItem) {
mLineChartView.setVisibility(View.VISIBLE);
}else{
mLineChartView.setVisibility(View.GONE);
}
break;
case R.id.first_page_item_3:
break;
case R.id.first_page_item_4:
break;
}
}
}

主活动：

public class MainActivity extends FragmentActivity {
 
private FragmentChart mFragmentChart;
private RadioGroup mRadioGroup;
private FragmentTransaction transaction;
 
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mFragmentChart = new FragmentChart();
mFragmentManager = getSupportFragmentManager();
transaction = mFragmentManager.beginTransaction();
transaction.add(R.id.frame_layout, mFragmentChart);
transaction.commit();
mRadioGroup = (RadioGroup) findViewById(R.id.radiogroup);
 
mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
 
switch (checkedId) {
case R.id.button1:
transaction = mFragmentManager.beginTransaction();
transaction.hide(mFragmentChat);
transaction.hide(mFragmentSetting);
transaction.hide(mFragmentWork);
transaction.show(mFragmentChart);
transaction.commit();
break;
 
}
}
});
}
}

activity_main:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
 
<FrameLayout
android:id="@+id/frame_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
</FrameLayout>
 
<RadioGroup
android:id="@+id/radiogroup"
android:layout_width="match_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"
android:background="@color/light_gray"
android:checkedButton="@+id/button1"
android:gravity="center_vertical"
android:orientation="horizontal"
android:padding="2dp">
 
<RadioButton
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@null"
android:button="@null"
android:drawableTop="@drawable/radio_button_chart"
android:gravity="center"
android:text="报表"
android:textColor="@color/radio_button_text_color"
/>
 
<RadioButton
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/radio_button_chat"
android:gravity="center"
android:text="沟通"
android:textColor="@color/radio_button_text_color"
/>
 
<RadioButton
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/radio_button_work"
android:gravity="center"
android:text="工作"
android:textColor="@color/radio_button_text_color"
/>
 
<RadioButton
android:id="@+id/button4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/radio_button_setting"
android:gravity="center"
android:text="更多"
android:textColor="@color/radio_button_text_color"
/>
 
</RadioGroup>
</LinearLayout>

content_chart:

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
 
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/background"
android:orientation="vertical">
 
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="@drawable/item_bg">
 
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="报表"
android:textSize="20sp"/>
 
<ImageView
android:id="@+id/image_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:layout_margin="20dp"
android:src="@mipmap/report_subscribe"/>
 
</RelativeLayout>
 
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
 
<RelativeLayout
android:id="@+id/first_page_item_1"
android:layout_width="match_parent"
android:layout_height="@dimen/first_page_item_height"
android:layout_marginTop="@dimen/first_page_item_margin_top"
android:background="@drawable/item_bg"
android:gravity="center_vertical">
 
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/first_page_item_left_padding"
android:text="随时定位"
android:textColor="@color/black"
android:textSize="@dimen/first_page_item_left_big_size"/>
 
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@mipmap/red_point_people"
android:gravity="center"
android:paddingLeft="@dimen/first_page_item_left_padding"
android:paddingRight="@dimen/first_page_item_left_padding"
android:text="48"
android:textSize="@dimen/first_page_item_right_small_size"/>
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@mipmap/blue_point_people"
android:gravity="center"
android:paddingLeft="@dimen/first_page_item_left_padding"
android:paddingRight="@dimen/first_page_item_left_padding"
android:text="16"
android:textSize="@dimen/first_page_item_right_small_size"/>
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableTop="@mipmap/grey_point_people"
android:gravity="center"
android:paddingLeft="@dimen/first_page_item_left_padding"
android:paddingRight="@dimen/first_page_item_left_padding"
android:text="16"
android:textSize="@dimen/first_page_item_right_small_size"/>
</LinearLayout>
 
</LinearLayout>
 
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center|right"
android:orientation="vertical"
android:paddingRight="@dimen/first_page_item_left_padding">
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="12%"
android:textColor="@color/orange"
android:textSize="@dimen/first_page_item_right_big_size"/>
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="今日人均灰点率"
android:textSize="@dimen/first_page_item_right_small_size"/>
 
</LinearLayout>
 
</RelativeLayout>
 
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none">
 
<com.test.shiweiwei.myproject.selfish_view.HistogramView
android:id="@+id/histogram_view_item_1"
android:layout_width="wrap_content"
android:layout_height="160dp"
android:background="@drawable/item_bg"
android:visibility="gone"/>
 
</HorizontalScrollView>
 
<RelativeLayout
android:id="@+id/first_page_item_2"
android:layout_width="match_parent"
android:layout_height="@dimen/first_page_item_height"
android:layout_marginTop="@dimen/first_page_item_margin_top"
android:background="@drawable/item_bg"
android:gravity="center_vertical">
 
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="vertical">
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/first_page_item_left_padding"
android:text="客户拜访"
android:textColor="@color/black"
android:textSize="@dimen/first_page_item_left_big_size"/>
 
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingLeft="@dimen/first_page_item_left_padding"
android:paddingRight="@dimen/first_page_item_left_padding"
android:text="10月人均拜访:1.7"
android:textSize="@dimen/first_page_item_right_small_size"/>
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingLeft="@dimen/first_page_item_left_padding"
android:paddingRight="@dimen/first_page_item_left_padding"
android:paddingTop="5dp"
android:text="昨日总拜访:9"
android:textSize="@dimen/first_page_item_right_small_size"/>
</LinearLayout>
 
</LinearLayout>
 
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center|right"
android:orientation="vertical"
android:paddingRight="@dimen/first_page_item_left_padding">
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3.0"
android:textColor="@color/light_blue"
android:textSize="@dimen/first_page_item_right_big_size"/>
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="昨日人均拜访"
android:textSize="@dimen/first_page_item_right_small_size"/>
 
</LinearLayout>
 
</RelativeLayout>
 
<HorizontalScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="none">
 
<com.test.shiweiwei.myproject.selfish_view.LineChartView
android:id="@+id/line_chart_view_item_2"
android:layout_width="wrap_content"
android:layout_height="160dp"
android:background="@drawable/item_bg"
android:visibility="gone"/>
 
</HorizontalScrollView>
 
<RelativeLayout
android:id="@+id/first_page_item_3"
android:layout_width="match_parent"
android:layout_height="@dimen/first_page_item_height"
android:layout_marginTop="@dimen/first_page_item_margin_top"
android:background="@drawable/item_bg"
android:gravity="center_vertical">
 
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="vertical">
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/first_page_item_left_padding"
android:text="新增客户-全部"
android:textColor="@color/black"
android:textSize="@dimen/first_page_item_left_big_size"/>
 
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingLeft="@dimen/first_page_item_left_padding"
android:paddingRight="@dimen/first_page_item_left_padding"
android:text="10月日均增长量:3.0"
android:textSize="@dimen/first_page_item_right_small_size"/>
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingLeft="@dimen/first_page_item_left_padding"
android:paddingRight="@dimen/first_page_item_left_padding"
android:paddingTop="@dimen/first_page_item_left_padding_top"
android:text="十月新增客户:21"
android:textSize="@dimen/first_page_item_right_small_size"/>
</LinearLayout>
 
</LinearLayout>
 
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center|right"
android:orientation="vertical"
android:paddingRight="@dimen/first_page_item_left_padding">
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:textColor="@color/light_green"
android:textSize="@dimen/first_page_item_right_big_size"/>
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="昨日新增客户"
android:textSize="@dimen/first_page_item_right_small_size"/>
 
</LinearLayout>
 
</RelativeLayout>
 
<RelativeLayout
android:id="@+id/first_page_item_4"
android:layout_width="match_parent"
android:layout_height="@dimen/first_page_item_height"
android:layout_marginTop="@dimen/first_page_item_margin_top"
android:background="@drawable/item_bg"
android:gravity="center_vertical">
 
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:orientation="vertical">
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="@dimen/first_page_item_left_padding"
android:text="客户总量-全部"
android:textColor="@color/black"
android:textSize="@dimen/first_page_item_left_big_size"/>
 
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingLeft="@dimen/first_page_item_left_padding"
android:paddingRight="@dimen/first_page_item_left_padding"
android:text="昨日净增客户:3.0"
android:textSize="@dimen/first_page_item_right_small_size"/>
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingLeft="@dimen/first_page_item_left_padding"
android:paddingRight="@dimen/first_page_item_left_padding"
android:paddingTop="@dimen/first_page_item_left_padding_top"
android:text="十月净增客户:-1"
android:textSize="@dimen/first_page_item_right_small_size"/>
</LinearLayout>
 
</LinearLayout>
 
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:gravity="center|right"
android:orientation="vertical"
android:paddingRight="@dimen/first_page_item_left_padding">
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="21"
android:textColor="@color/purple"
android:textSize="@dimen/first_page_item_right_big_size"/>
 
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="总客户数"
android:textSize="@dimen/first_page_item_right_small_size"/>
 
</LinearLayout>
 
</RelativeLayout>
</LinearLayout>
 
</LinearLayout>
 
</ScrollView>

==========================================================================================

欢迎加入我们的技术交流群:
Android群: 66756039
JavaEE群: 361579846

Android自定义控件系列四：绘制实用型的柱形图和折线图

标签：

原文地址：http://blog.csdn.net/shimiso/article/details/49449731

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

迷上了代码！