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

概述：

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

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

Demo

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

折线图： 

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

001. public class LineChartView extends View {

002.  

003. private int width;

004. private int height;

005. private float maxValue;//传入数据的最大值

006. private int dataNum;//数据总数

007.  

008. private Paint mPaintBg;//报表背景画笔

009. private Paint mPaintCoveredBg;//用于画数据覆盖部分

010. private Paint mPaintChartLine;//用于画报表的网格

011. private Paint mPaintDataLine;//用于画数据连线

012. private Paint mPaintTextDate;//用于画日期文本

013. private Paint mPaintCircle;//用于画空心圆

014. private Paint mPaintFilledCircle;//用于画实心圆

015. private Paint mPaintTextValue;//用于画数据访问量值

016.  

017. private Path path;

018.  

019. private HashMap<Integer, PageViewData> dataTotal;//用于得存储传入的总数据

020.  

021. //用一个setPaints（）方法，设定所有画笔的属性，增加代码灵活性

022. public void setPaints(int bgColor, int coveredBgColor, int chartLineColor

023. , int dataLineColor, int textDateColor, int filledCircleColor, int circleColor, int textValueColor) {

024.  

025. mPaintBg.setColor(bgColor);

026. mPaintBg.setStyle(Paint.Style.FILL);

027.  

028. mPaintCoveredBg.setColor(coveredBgColor);

029. mPaintCoveredBg.setStyle(Paint.Style.FILL);

030.  

031. mPaintCircle.setColor(circleColor);

032. mPaintCircle.setStyle(Paint.Style.STROKE);

033. mPaintCircle.setStrokeWidth(5);

034. mPaintCircle.setAntiAlias(true);

035.  

036. mPaintFilledCircle.setColor(filledCircleColor);

037. mPaintFilledCircle.setStyle(Paint.Style.FILL);

038. mPaintFilledCircle.setAntiAlias(true);

039.  

040. mPaintChartLine.setColor(chartLineColor);

041. mPaintChartLine.setStyle(Paint.Style.STROKE);

042. mPaintChartLine.setAntiAlias(true);

043.  

044. mPaintDataLine.setColor(dataLineColor);

045. mPaintDataLine.setStyle(Paint.Style.STROKE);

046. mPaintDataLine.setStrokeWidth(SizeConvert.dip2px(getContext(), 5));

047. mPaintDataLine.setAntiAlias(true);

048.  

049. mPaintTextDate.setColor(textDateColor);

050. mPaintTextDate.setTextSize(SizeConvert.dip2px(getContext(), 10));

051. mPaintTextDate.setTextAlign(Paint.Align.CENTER);

052. mPaintTextDate.setAntiAlias(true);

053.  

054. mPaintTextValue.setColor(textValueColor);

055. mPaintTextValue.setTextSize(SizeConvert.dip2px(getContext(), 12));

056. mPaintTextValue.setTextAlign(Paint.Align.CENTER);

057. mPaintTextValue.setAntiAlias(true);

058.  

059. //重绘

060. invalidate();

061. }

062.  

063.  

064. //用于设定传入的总数据

065. public void setDataTotal(HashMap<Integer, PageViewData> dataTotal) {

066. this.dataTotal = dataTotal;

067. invalidate();

068. }

069.  

070. public LineChartView(Context context) {

071. super(context);

072. }

073.  

074. public LineChartView(Context context, AttributeSet attrs) {

075. super(context, attrs);

076. mPaintBg = new Paint();

077. mPaintCoveredBg = new Paint();

078. mPaintCircle = new Paint();

079. mPaintChartLine = new Paint();

080. mPaintDataLine = new Paint();

081. mPaintTextDate = new Paint();

082. mPaintTextValue = new Paint();

083. mPaintFilledCircle = new Paint();

084. path = new Path();

085.  

086. dataTotal = new HashMap<>();

087. }

088.  

089. @Override

090. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

091. super.onMeasure(widthMeasureSpec, heightMeasureSpec);

092. //当总数据已经传入，即不为空时，根据总数据中数据个数设定view的总宽

093. if (dataTotal != null) {

094. width = (dataTotal.size() - 1) * xAddedNum + chartMarginHorizontal * 2;

095. getMaxValue(dataTotal);

096. }

097. height = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);

098. setMeasuredDimension(width, height);

099. }

100.  

101. /**

102. * 用于得到总数据中最大数据

103. * @param dataTotal 总数据

104. */

105. private void getMaxValue(HashMap<Integer, PageViewData> dataTotal) {

106. maxValue = 0;

107. dataNum = 0;

108. for (int key : dataTotal.keySet()) {

109. if (dataTotal.get(key).getPageViewValue() > maxValue) {

110. maxValue = dataTotal.get(key).getPageViewValue();

111. }

112. dataNum++;

113. }

114. }

115.  

116. private int mChartHeight;//折线图的高

117. private int mChartWidth;//折线图的

118. private int startX = SizeConvert.dip2px(getContext(), 10);//开始绘制的x坐标

119. private int startY = SizeConvert.dip2px(getContext(), 5);//开始绘制的y坐标

120. private int chartMarginBottom = SizeConvert.dip2px(getContext(), 30);//折线图距离父控件底部距离

121. private int chartMarginHorizontal = SizeConvert.dip2px(getContext(), 12);//折线图距离父控件左右的距离

122. private int valueAlignLeft = SizeConvert.dip2px(getContext(), 0);//value参数文本距离左边距离

123. private int dateAlignLeft = SizeConvert.dip2px(getContext(), 0);//date参数文本距离左边距离

124. private int valueAlignBottom = SizeConvert.dip2px(getContext(), 5);//value参数文本距离底部距离

125. private int dateAlignBottom = SizeConvert.dip2px(getContext(), 10);//date参数文本距离底部距离

126. private int xAddedNum = SizeConvert.dip2px(getContext(), 60);//绘制折线图时每次移动的x轴距离

127. private int yAddedNum;//绘制折线图时每次移动的y轴距离

128. private boolean isDrawFirst;//是否是第一次绘制

129. private float circleFilledRadius = SizeConvert.dip2px(getContext(), 5);//外圆半径

130. private float circleRadius = SizeConvert.dip2px(getContext(), 3);//内圆半径

131.  

132. private float firstX;//第一个点的x轴坐标

133. private float firstY;//第一个点的y轴坐标

134.  

135. @Override

136. protected void onDraw(Canvas canvas) {

137. super.onDraw(canvas);

138. isDrawFirst = true;

139. mChartHeight = height - chartMarginBottom;

140. yAddedNum = mChartHeight / 4;

141. mChartWidth = width - chartMarginHorizontal * 2;

142.  

143. canvas.drawRect(startX, startY, startX + mChartWidth, startY + mChartHeight, mPaintBg);

144. for (int key : dataTotal.keySet()) {

145. float value = dataTotal.get(key).getPageViewValue();

146. if (isDrawFirst) {

147. //当第一次绘制时得到第一个点的横纵坐标

148. firstX = startX;

149. firstY = startY + (1f - value / ((int) maxValue * 1.5f)) * mChartHeight;

150. path.moveTo(firstX, firstY);

151. isDrawFirst = false;

152. }

153. //每循环一次，将path线性相位一次

154. path.lineTo(startX, startY + (1f - value / ((int) maxValue * 1.5f)) * mChartHeight);

155. startX += xAddedNum;

156. }

157. //重新给startX赋值

158. startX = SizeConvert.dip2px(getContext(), 10);

159. //画出折线

160. canvas.drawPath(path, mPaintDataLine);

161. //画出折线以下部分的颜色

162. path.lineTo(startX + mChartWidth, startY + mChartHeight);

163. path.lineTo(startX, startY + mChartHeight);

164. path.lineTo(firstX, firstY);

165. canvas.drawPath(path, mPaintCoveredBg);

166.  

167. //画出每个点的圆圈，和对应的文本

168. for (int key : dataTotal.keySet()) {

169. int date = dataTotal.get(key).getDate();

170. float value = dataTotal.get(key).getPageViewValue();

171. canvas.drawCircle(startX, startY + (1f - value / ((int) maxValue * 1.5f)) * mChartHeight, circleFilledRadius, mPaintFilledCircle);

172. canvas.drawCircle(startX, startY + (1f - value / ((int) maxValue * 1.5f)) * mChartHeight, circleRadius, mPaintCircle);

173. canvas.drawText(date + "", startX + dateAlignLeft, height - dateAlignBottom, mPaintTextDate);

174. canvas.drawText(value + "", startX + valueAlignLeft, startY + (1f - value / ((int) maxValue * 1.5f)) * mChartHeight - valueAlignBottom, mPaintTextValue);

175.  

176. startX += xAddedNum;

177. }

178.  

179. //在次使startX回到初始值

180. startX = SizeConvert.dip2px(getContext(), 10);

181. /**

182. * 画出网格

183. */

184. //竖线

185. for (int i = 0; i < dataNum; i++) {

186. canvas.drawLine(startX + i * xAddedNum, startY, startX + i * xAddedNum, startY + mChartHeight, mPaintChartLine);

187. }

188.  

189. //横线

190. for (int i = 0; i < 5; i++) {

191. canvas.drawLine(startX, startY + i * yAddedNum, startX + mChartWidth, startY + i * yAddedNum, mPaintChartLine);

192. }

193.  

194. path.reset();

195.  

196. }

197. }

柱形图： 

代码：

01. /**

02. * 柱形图

03. */

04. public class HistogramView extends View {

05.  

06. private int width;

07. private int height;

08.  

09. private Paint mBgPaint;

10. private Paint mHistogramBgPaint;

11. private Paint mHistogramPaint;

12. private Paint mTextPaint;

13.  

14. private HashMap<Integer,HistogramData> dataTotal;

15.  

16. public void setPaints(int bgColor,int histogramBgColor,int histogramColor,int textColor){

17.  

18. mBgPaint.setColor(bgColor);

19. mBgPaint.setStyle(Paint.Style.FILL);

20.  

21. mHistogramBgPaint.setColor(histogramBgColor);

22. mHistogramBgPaint.setStyle(Paint.Style.FILL);

23.  

24. mHistogramPaint.setColor(histogramColor);

25. mHistogramPaint.setStyle(Paint.Style.FILL);

26.  

27. mTextPaint.setColor(textColor);

28. mTextPaint.setTextSize(SizeConvert.dip2px(getContext(), 9));

29. mTextPaint.setTextAlign(Paint.Align.CENTER);

30.  

31. invalidate();

32. };

33.  

34. public void setDataTotal(HashMap<Integer, HistogramData> dataTotal) {

35. this.dataTotal = dataTotal;

36. invalidate();

37. }

38.  

39. public HistogramView(Context context) {

40. super(context);

41. }

42.  

43. public HistogramView(Context context, AttributeSet attrs) {

44. super(context, attrs);

45. mHistogramBgPaint = new Paint();

46. mHistogramPaint = new Paint();

47. mTextPaint = new Paint();

48. mBgPaint = new Paint();

49.  

50. dataTotal = new HashMap<>();

51. }

52.  

53. @Override

54. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

55. super.onMeasure(widthMeasureSpec, heightMeasureSpec);

56. if(dataTotal!=null){

57. width = dataTotal.size()*SizeConvert.dip2px(getContext(), 40);

58. }

59. height = getDefaultSize(getSuggestedMinimumHeight(),heightMeasureSpec);

60. setMeasuredDimension(width, height);

61. }

62.  

63. private int mHistogramHeight;

64. int startX = SizeConvert.dip2px(getContext(), 20);

65. int startY = SizeConvert.dip2px(getContext(),20);

66. int radius = 45;

67. int greyValueAlignLeft = SizeConvert.dip2px(getContext(), 5);

68. int nameAlignLeft = SizeConvert.dip2px(getContext(), 15);

69. int greyValueAlignBottom = SizeConvert.dip2px(getContext(), 5);

70. int nameAlignBottom = SizeConvert.dip2px(getContext(), 15);

71. int histogramWidth = SizeConvert.dip2px(getContext(), 8);

72. int xAddedNum = SizeConvert.dip2px(getContext(), 40);

73. int histogramAlignTop = SizeConvert.dip2px(getContext(), 2);

74.  

75. @Override

76. protected void onDraw(Canvas canvas) {

77. super.onDraw(canvas);

78. mHistogramHeight = height-SizeConvert.dip2px(getContext(),40);

79. canvas.drawRect(0,startY,width,mHistogramHeight,mBgPaint);

80. for(int key:dataTotal.keySet()){

81. String name = dataTotal.get(key).getName();

82. int greyValue = dataTotal.get(key).getGreyValue();

83.  

84. canvas.drawText(greyValue + "%", startX + greyValueAlignLeft, startY-greyValueAlignBottom , mTextPaint);

85. canvas.drawRect(startX, startY+histogramAlignTop, startX + histogramWidth, mHistogramHeight, mHistogramBgPaint);

86. canvas.drawRect(startX, startY+(1f - greyValue / 100f) * (mHistogramHeight - startY-histogramAlignTop)+histogramAlignTop, startX + histogramWidth, mHistogramHeight, mHistogramPaint);

87.  

88. canvas.save();

89. canvas.rotate(-radius, startX,height);

90. canvas.drawText(name, startX + nameAlignLeft, height-nameAlignBottom, mTextPaint);

91. canvas.restore();

92. startX+=xAddedNum;

93. }

94. startX = SizeConvert.dip2px(getContext(), 20);

95. }

96.  

97. }

Fragment

001. public class FragmentChart extends Fragment implements View.OnClickListener{

002.  

003. private RelativeLayout mItemFirst;

004. private RelativeLayout mItemSecond;

005. private RelativeLayout mItemThird;

006. private RelativeLayout mItemForth;

007.  

008. private HistogramView mHistogramView;

009. private HashMap<Integer,HistogramData> mDataHistogramTotal;

010. private boolean isShowHistogram = false;

011.  

012. private LineChartView mLineChartView;

013. private HashMap<Integer,PageViewData> mDataPageView;

014. private boolean isShowSecondItem = false;

015. @Nullable

016. @Override

017. public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

018. View view = inflater.inflate(R.layout.content_chart,null);

019. mItemFirst = (RelativeLayout) view.findViewById(R.id.first_page_item_1);

020. mItemSecond = (RelativeLayout) view.findViewById(R.id.first_page_item_2);

021. mItemThird = (RelativeLayout) view.findViewById(R.id.first_page_item_3);

022. mItemForth = (RelativeLayout) view.findViewById(R.id.first_page_item_4);

023.  

024. mHistogramView = (HistogramView) view.findViewById(R.id.histogram_view_item_1);

025. mLineChartView = (LineChartView) view.findViewById(R.id.line_chart_view_item_2);

026.  

027. mItemFirst.setOnClickListener(this);

028. mItemSecond.setOnClickListener(this);

029. mItemThird.setOnClickListener(this);

030. mItemForth.setOnClickListener(this);

031.  

032. initDataHistogram();

033. initDataPageView();

034.  

035. return view;

036. }

037.  

038. private void initDataPageView() {

039. mDataPageView = new HashMap<>();

040. mDataPageView.put(1,new PageViewData(1,9,16));

041. mDataPageView.put(2,new PageViewData(2,10,18));

042. mDataPageView.put(3,new PageViewData(3,11,33));

043. mDataPageView.put(4,new PageViewData(4,12,97));

044. mDataPageView.put(5,new PageViewData(5,13,46));

045. mDataPageView.put(6,new PageViewData(6,14,55));

046. mDataPageView.put(7,new PageViewData(7,15,11));

047. mDataPageView.put(8,new PageViewData(8,16,22));

048. mDataPageView.put(9,new PageViewData(9,17,8));

049. mDataPageView.put(10,new PageViewData(10,18,19));

050. mDataPageView.put(11,new PageViewData(11,16,22));

051.  

052. mLineChartView.setDataTotal(mDataPageView);

053. mLineChartView.setPaints(Color.argb(255,225, 250, 250),

054. Color.argb(255,234, 234, 250), Color.argb(255,74,208, 204),

055. Color.argb(255,105, 210, 249),Color.argb(255,203, 203, 203)

056. ,Color.argb(255,255, 255, 255),Color.argb(255,105, 210, 249),Color.argb(255,105, 210, 249));

057. }

058.  

059. private void initDataHistogram(){

060. mDataHistogramTotal = new HashMap<>();

061. mDataHistogramTotal.put(1,new HistogramData(1,"海萌",100));

062. mDataHistogramTotal.put(2,new HistogramData(2,"涛涛",18));

063. mDataHistogramTotal.put(3,new HistogramData(3,"火风",17));

064. mDataHistogramTotal.put(4,new HistogramData(4,"周杰伦",16));

065. mDataHistogramTotal.put(5,new HistogramData(5,"王宝强",15));

066. mDataHistogramTotal.put(6,new HistogramData(6,"林俊杰",14));

067. mDataHistogramTotal.put(7,new HistogramData(7,"孙悟空",11));

068. mDataHistogramTotal.put(8,new HistogramData(8,"钟航",10));

069. mDataHistogramTotal.put(9,new HistogramData(9,"小明",8));

070. mDataHistogramTotal.put(10, new HistogramData(10, "小红", 5));

071.  

072. mHistogramView.setDataTotal(mDataHistogramTotal);

073. mHistogramView.setPaints(Color.argb(255,250, 250, 250),

074. Color.argb(255,238, 238, 238), Color.argb(255,240,141, 77),

075. Color.argb(255,168, 168, 168));

076. }

077.  

078. @Override

079. public void onClick(View v) {

080. switch (v.getId()){

081. case R.id.first_page_item_1:

082. isShowHistogram = !isShowHistogram;

083. if(isShowHistogram) {

084. mHistogramView.setVisibility(View.VISIBLE);

085. }else{

086. mHistogramView.setVisibility(View.GONE);

087. }

088. break;

089. case R.id.first_page_item_2:

090. isShowSecondItem= !isShowSecondItem;

091. if(isShowSecondItem) {

092. mLineChartView.setVisibility(View.VISIBLE);

093. }else{

094. mLineChartView.setVisibility(View.GONE);

095. }

096. break;

097. case R.id.first_page_item_3:

098. break;

099. case R.id.first_page_item_4:

100. break;

101. }

102. }

103. }

主活动：

01. public class MainActivity extends FragmentActivity {

02.  

03. private FragmentChart mFragmentChart;

04. private RadioGroup mRadioGroup;

05. private FragmentTransaction transaction;

06.  

07. @Override

08. protected void onCreate(Bundle savedInstanceState) {

09. super.onCreate(savedInstanceState);

10. setContentView(R.layout.activity_main);

11. mFragmentChart = new FragmentChart();

12. mFragmentManager = getSupportFragmentManager();

13. transaction = mFragmentManager.beginTransaction();

14. transaction.add(R.id.frame_layout, mFragmentChart);

15. transaction.commit();

16. mRadioGroup = (RadioGroup) findViewById(R.id.radiogroup);

17.  

18. mRadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

19. @Override

20. public void onCheckedChanged(RadioGroup group, int checkedId) {

21.  

22. switch (checkedId) {

23. case R.id.button1:

24. transaction = mFragmentManager.beginTransaction();

25. transaction.hide(mFragmentChat);

26. transaction.hide(mFragmentSetting);

27. transaction.hide(mFragmentWork);

28. transaction.show(mFragmentChart);

29. transaction.commit();

30. break;

31.  

32. }

33. }

34. });

35. }

36. }

activity_main:

01. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

02.  

03. android:layout_width="match_parent"

04. android:layout_height="match_parent"

05. android:orientation="vertical"

06. >

07.  

08. <FrameLayout

09. android:id="@+id/frame_layout"

10. android:layout_width="match_parent"

11. android:layout_height="wrap_content"

12. android:layout_weight="1">

13. </FrameLayout>

14.  

15. <RadioGroup

16. android:id="@+id/radiogroup"

17. android:layout_width="match_parent"

18. android:layout_height="60dp"

19. android:layout_alignParentBottom="true"

20. android:background="@color/light_gray"

21. android:checkedButton="@+id/button1"

22. android:gravity="center_vertical"

23. android:orientation="horizontal"

24. android:padding="2dp">

25.  

26. <RadioButton

27. android:id="@+id/button1"

28. android:layout_width="0dp"

29. android:layout_height="wrap_content"

30. android:layout_weight="1"

31. android:background="@null"

32. android:button="@null"

33. android:drawableTop="@drawable/radio_button_chart"

34. android:gravity="center"

35. android:text="报表"

36. android:textColor="@color/radio_button_text_color"

37. />

38.  

39. <RadioButton

40. android:id="@+id/button2"

41. android:layout_width="0dp"

42. android:layout_height="wrap_content"

43. android:layout_weight="1"

44. android:button="@null"

45. android:drawableTop="@drawable/radio_button_chat"

46. android:gravity="center"

47. android:text="沟通"

48. android:textColor="@color/radio_button_text_color"

49. />

50.  

51. <RadioButton

52. android:id="@+id/button3"

53. android:layout_width="0dp"

54. android:layout_height="wrap_content"

55. android:layout_weight="1"

56. android:button="@null"

57. android:drawableTop="@drawable/radio_button_work"

58. android:gravity="center"

59. android:text="工作"

60. android:textColor="@color/radio_button_text_color"

61. />

62.  

63. <RadioButton

64. android:id="@+id/button4"

65. android:layout_width="0dp"

66. android:layout_height="wrap_content"

67. android:layout_weight="1"

68. android:button="@null"

69. android:drawableTop="@drawable/radio_button_setting"

70. android:gravity="center"

71. android:text="更多"

72. android:textColor="@color/radio_button_text_color"

73. />

74.  

75. </RadioGroup>

76. </LinearLayout>

content_chart:

001. <?xml version="1.0" encoding="utf-8"?>

002. <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

003. android:layout_width="match_parent"

004. android:layout_height="match_parent">

005.  

006. <LinearLayout

007. android:layout_width="match_parent"

008. android:layout_height="match_parent"

009. android:background="@color/background"

010. android:orientation="vertical">

011.  

012. <RelativeLayout

013. android:layout_width="match_parent"

014. android:layout_height="60dp"

015. android:background="@drawable/item_bg">

016.  

017. <TextView

018. android:id="@+id/textview"

019. android:layout_width="wrap_content"

020. android:layout_height="wrap_content"

021. android:layout_centerInParent="true"

022. android:text="报表"

023. android:textSize="20sp"/>

024.  

025. <ImageView

026. android:id="@+id/image_button"

027. android:layout_width="wrap_content"

028. android:layout_height="wrap_content"

029. android:layout_alignParentRight="true"

030. android:layout_centerVertical="true"

031. android:layout_margin="20dp"

032. android:src="@mipmap/report_subscribe"/>

033.  

034. </RelativeLayout>

035.  

036. <LinearLayout

037. android:layout_width="match_parent"

038. android:layout_height="match_parent"

039. android:orientation="vertical">

040.  

041. <RelativeLayout

042. android:id="@+id/first_page_item_1"

043. android:layout_width="match_parent"

044. android:layout_height="@dimen/first_page_item_height"

045. android:layout_marginTop="@dimen/first_page_item_margin_top"

046. android:background="@drawable/item_bg"

047. android:gravity="center_vertical">

048.  

049. <LinearLayout

050. android:layout_width="wrap_content"

051. android:layout_height="wrap_content"

052. android:orientation="vertical">

053.  

054. <TextView

055. android:layout_width="wrap_content"

056. android:layout_height="wrap_content"

057. android:layout_margin="@dimen/first_page_item_left_padding"

058. android:text="随时定位"

059. android:textColor="@color/black"

060. android:textSize="@dimen/first_page_item_left_big_size"/>

061.  

062. <LinearLayout

063. android:layout_width="wrap_content"

064. android:layout_height="wrap_content"

065. android:orientation="horizontal">

066.  

067. <TextView

068. android:layout_width="wrap_content"

069. android:layout_height="wrap_content"

070. android:drawableTop="@mipmap/red_point_people"

071. android:gravity="center"

072. android:paddingLeft="@dimen/first_page_item_left_padding"

073. android:paddingRight="@dimen/first_page_item_left_padding"

074. android:text="48"

075. android:textSize="@dimen/first_page_item_right_small_size"/>

076.  

077. <TextView

078. android:layout_width="wrap_content"

079. android:layout_height="wrap_content"

080. android:drawableTop="@mipmap/blue_point_people"

081. android:gravity="center"

082. android:paddingLeft="@dimen/first_page_item_left_padding"

083. android:paddingRight="@dimen/first_page_item_left_padding"

084. android:text="16"

085. android:textSize="@dimen/first_page_item_right_small_size"/>

086.  

087. <TextView

088. android:layout_width="wrap_content"

089. android:layout_height="wrap_content"

090. android:drawableTop="@mipmap/grey_point_people"

091. android:gravity="center"

092. android:paddingLeft="@dimen/first_page_item_left_padding"

093. android:paddingRight="@dimen/first_page_item_left_padding"

094. android:text="16"

095. android:textSize="@dimen/first_page_item_right_small_size"/>

096. </LinearLayout>

097.  

098. </LinearLayout>

099.  

100. <LinearLayout

101. android:layout_width="wrap_content"

102. android:layout_height="match_parent"

103. android:layout_alignParentRight="true"

104. android:gravity="center|right"

105. android:orientation="vertical"

106. android:paddingRight="@dimen/first_page_item_left_padding">

107.  

108. <TextView

109. android:layout_width="wrap_content"

110. android:layout_height="wrap_content"

111. android:text="12%"

112. android:textColor="@color/orange"

113. android:textSize="@dimen/first_page_item_right_big_size"/>

114.  

115. <TextView

116. android:layout_width="wrap_content"

117. android:layout_height="wrap_content"

118. android:text="今日人均灰点率"

119. android:textSize="@dimen/first_page_item_right_small_size"/>

120.  

121. </LinearLayout>

122.  

123. </RelativeLayout>

124.  

125. <HorizontalScrollView

126. android:layout_width="match_parent"

127. android:layout_height="wrap_content"

128. android:scrollbars="none">

129.  

130. <com.test.shiweiwei.myproject.selfish_view.HistogramView

131. android:id="@+id/histogram_view_item_1"

132. android:layout_width="wrap_content"

133. android:layout_height="160dp"

134. android:background="@drawable/item_bg"

135. android:visibility="gone"/>

136.  

137. </HorizontalScrollView>

138.  

139. <RelativeLayout

140. android:id="@+id/first_page_item_2"

141. android:layout_width="match_parent"

142. android:layout_height="@dimen/first_page_item_height"

143. android:layout_marginTop="@dimen/first_page_item_margin_top"

144. android:background="@drawable/item_bg"

145. android:gravity="center_vertical">

146.  

147. <LinearLayout

148. android:layout_width="wrap_content"

149. android:layout_height="wrap_content"

150. android:gravity="center_vertical"

151. android:orientation="vertical">

152.  

153. <TextView

154. android:layout_width="wrap_content"

155. android:layout_height="wrap_content"

156. android:layout_margin="@dimen/first_page_item_left_padding"

157. android:text="客户拜访"

158. android:textColor="@color/black"

159. android:textSize="@dimen/first_page_item_left_big_size"/>

160.  

161. <LinearLayout

162. android:layout_width="wrap_content"

163. android:layout_height="wrap_content"

164. android:orientation="vertical">

165.  

166. <TextView

167. android:layout_width="wrap_content"

168. android:layout_height="wrap_content"

169. android:gravity="center"

170. android:paddingLeft="@dimen/first_page_item_left_padding"

171. android:paddingRight="@dimen/first_page_item_left_padding"

172. android:text="10月人均拜访:1.7"

173. android:textSize="@dimen/first_page_item_right_small_size"/>

174.  

175. <TextView

176. android:layout_width="wrap_content"

177. android:layout_height="wrap_content"

178. android:gravity="center"

179. android:paddingLeft="@dimen/first_page_item_left_padding"

180. android:paddingRight="@dimen/first_page_item_left_padding"

181. android:paddingTop="5dp"

182. android:text="昨日总拜访:9"

183. android:textSize="@dimen/first_page_item_right_small_size"/>

184. </LinearLayout>

185.  

186. </LinearLayout>

187.  

188. <LinearLayout

189. android:layout_width="wrap_content"

190. android:layout_height="match_parent"

191. android:layout_alignParentRight="true"

192. android:gravity="center|right"

193. android:orientation="vertical"

194. android:paddingRight="@dimen/first_page_item_left_padding">

195.  

196. <TextView

197. android:layout_width="wrap_content"

198. android:layout_height="wrap_content"

199. android:text="3.0"

200. android:textColor="@color/light_blue"

201. android:textSize="@dimen/first_page_item_right_big_size"/>

202.  

203. <TextView

204. android:layout_width="wrap_content"

205. android:layout_height="wrap_content"

206. android:text="昨日人均拜访"

207. android:textSize="@dimen/first_page_item_right_small_size"/>

208.  

209. </LinearLayout>

210.  

211. </RelativeLayout>

212.  

213. <HorizontalScrollView

214. android:layout_width="match_parent"

215. android:layout_height="wrap_content"

216. android:scrollbars="none">

217.  

218. <com.test.shiweiwei.myproject.selfish_view.LineChartView

219. android:id="@+id/line_chart_view_item_2"

220. android:layout_width="wrap_content"

221. android:layout_height="160dp"

222. android:background="@drawable/item_bg"

223. android:visibility="gone"/>

224.  

225. </HorizontalScrollView>

226.  

227. <RelativeLayout

228. android:id="@+id/first_page_item_3"

229. android:layout_width="match_parent"

230. android:layout_height="@dimen/first_page_item_height"

231. android:layout_marginTop="@dimen/first_page_item_margin_top"

232. android:background="@drawable/item_bg"

233. android:gravity="center_vertical">

234.  

235. <LinearLayout

236. android:layout_width="wrap_content"

237. android:layout_height="wrap_content"

238. android:gravity="center_vertical"

239. android:orientation="vertical">

240.  

241. <TextView

242. android:layout_width="wrap_content"

243. android:layout_height="wrap_content"

244. android:layout_margin="@dimen/first_page_item_left_padding"

245. android:text="新增客户-全部"

246. android:textColor="@color/black"

247. android:textSize="@dimen/first_page_item_left_big_size"/>

248.  

249. <LinearLayout

250. android:layout_width="wrap_content"

251. android:layout_height="wrap_content"

252. android:orientation="vertical">

253.  

254. <TextView

255. android:layout_width="wrap_content"

256. android:layout_height="wrap_content"

257. android:gravity="center"

258. android:paddingLeft="@dimen/first_page_item_left_padding"

259. android:paddingRight="@dimen/first_page_item_left_padding"

260. android:text="10月日均增长量:3.0"

261. android:textSize="@dimen/first_page_item_right_small_size"/>

262.  

263. <TextView

264. android:layout_width="wrap_content"

265. android:layout_height="wrap_content"

266. android:gravity="center"

267. android:paddingLeft="@dimen/first_page_item_left_padding"

268. android:paddingRight="@dimen/first_page_item_left_padding"

269. android:paddingTop="@dimen/first_page_item_left_padding_top"

270. android:text="十月新增客户:21"

271. android:textSize="@dimen/first_page_item_right_small_size"/>

272. </LinearLayout>

273.  

274. </LinearLayout>

275.  

276. <LinearLayout

277. android:layout_width="wrap_content"

278. android:layout_height="match_parent"

279. android:layout_alignParentRight="true"

280. android:gravity="center|right"

281. android:orientation="vertical"

282. android:paddingRight="@dimen/first_page_item_left_padding">

283.  

284. <TextView

285. android:layout_width="wrap_content"

286. android:layout_height="wrap_content"

287. android:text="3"

288. android:textColor="@color/light_green"

289. android:textSize="@dimen/first_page_item_right_big_size"/>

290.  

291. <TextView

292. android:layout_width="wrap_content"

293. android:layout_height="wrap_content"

294. android:text="昨日新增客户"

295. android:textSize="@dimen/first_page_item_right_small_size"/>

296.  

297. </LinearLayout>

298.  

299. </RelativeLayout>

300.  

301. <RelativeLayout

302. android:id="@+id/first_page_item_4"

303. android:layout_width="match_parent"

304. android:layout_height="@dimen/first_page_item_height"

305. android:layout_marginTop="@dimen/first_page_item_margin_top"

306. android:background="@drawable/item_bg"

307. android:gravity="center_vertical">

308.  

309. <LinearLayout

310. android:layout_width="wrap_content"

311. android:layout_height="wrap_content"

312. android:gravity="center_vertical"

313. android:orientation="vertical">

314.  

315. <TextView

316. android:layout_width="wrap_content"

317. android:layout_height="wrap_content"

318. android:layout_margin="@dimen/first_page_item_left_padding"

319. android:text="客户总量-全部"

320. android:textColor="@color/black"

321. android:textSize="@dimen/first_page_item_left_big_size"/>

322.  

323. <LinearLayout

324. android:layout_width="wrap_content"

325. android:layout_height="wrap_content"

326. android:orientation="vertical">

327.  

328. <TextView

329. android:layout_width="wrap_content"

330. android:layout_height="wrap_content"

331. android:gravity="center"

332. android:paddingLeft="@dimen/first_page_item_left_padding"

333. android:paddingRight="@dimen/first_page_item_left_padding"

334. android:text="昨日净增客户:3.0"

335. android:textSize="@dimen/first_page_item_right_small_size"/>

336.  

337. <TextView

338. android:layout_width="wrap_content"

339. android:layout_height="wrap_content"

340. android:gravity="center"

341. android:paddingLeft="@dimen/first_page_item_left_padding"

342. android:paddingRight="@dimen/first_page_item_left_padding"

343. android:paddingTop="@dimen/first_page_item_left_padding_top"

344. android:text="十月净增客户:-1"

345. android:textSize="@dimen/first_page_item_right_small_size"/>

346. </LinearLayout>

347.  

348. </LinearLayout>

349.  

350. <LinearLayout

351. android:layout_width="wrap_content"

352. android:layout_height="match_parent"

353. android:layout_alignParentRight="true"

354. android:gravity="center|right"

355. android:orientation="vertical"

356. android:paddingRight="@dimen/first_page_item_left_padding">

357.  

358. <TextView

359. android:layout_width="wrap_content"

360. android:layout_height="wrap_content"

361. android:text="21"

362. android:textColor="@color/purple"

363. android:textSize="@dimen/first_page_item_right_big_size"/>

364.  

365. <TextView

366. android:layout_width="wrap_content"

367. android:layout_height="wrap_content"

368. android:text="总客户数"

369. android:textSize="@dimen/first_page_item_right_small_size"/>

370.  

371. </LinearLayout>

372.  

373. </RelativeLayout>

374. </LinearLayout>

375.  

376. </LinearLayout>

377.  

378. </ScrollView>

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

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