Android自定义view之绘制实用型的柱形图和折线图

概述：

前几天突然需要做两种图表——柱形图、折线图，于是第一反应是先看看网上有没有现成的，结果有是有，但都不是我想要的，而且大多数不是用纯android代码完成，HTML5似乎完成这类工作要容易得多，但是我本人并不会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>