1. 程式人生 > >View畫矩形統計圖(可動態新增)

View畫矩形統計圖(可動態新增)

佈局

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/nameString"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:background="@drawable/sty_color"
        android:hint="姓名" />

    <EditText
        android:id="@+id/num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_margin="10dp"
        android:background="@drawable/sty_color"
        android:hint="成績"
        app:layout_constraintLeft_toRightOf="@+id/nameString" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:layout_margin="10dp"
        android:background="@drawable/btn_color"
        android:text="新增" />
</LinearLayout>

<zhao.com.demo1.MyView
    android:id="@+id/myView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    />
</android.widget.LinearLayout>

畫矩形統計圖

public class MyView extends View {
private Paint mLinePaint, mTextPaint, mRectPaint;
ArrayList<User> list;
public MyView(Context context) {
    super(context);
    init();
}


public MyView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}



//長寬 測量控制元件的大小,確定寬高
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

//測量控制元件的位置,確定上下左右座標
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
    super.onLayout(changed, left, top, right, bottom);
}

private void init() {
    mLinePaint = new Paint();
    //顏色
    mLinePaint.setColor(Color.GREEN);
    //樣式
    mLinePaint.setStyle(Paint.Style.STROKE);
    //寬度
    mLinePaint.setStrokeWidth(5);

    //矩形樣式
    mRectPaint = new Paint();
    mRectPaint.setColor(Color.BLUE);
    mRectPaint.setStyle(Paint.Style.FILL);

    mTextPaint = new Paint();
    //字型顏色
    mTextPaint.setColor(Color.BLACK);
    mTextPaint.setStyle(Paint.Style.STROKE);
    //字型大小
    mTextPaint.setTextSize(50);


    //新增資料
    list = new ArrayList<>();
    list.add(new User("啊哈",200));
}

public void addUser(User user) {
    list.add(user);//新增資料

    this.invalidate();//重新整理View
}
//繪圖,畫點線矩形圓形的
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    /*
     * X軸從200,1000開始到1000,1000結束
     *
     * */
    canvas.drawLine(200, 1000, 1000, 1000, mLinePaint);

    /*
     * Y軸從200,200開始到200,1000結束
     *
     * */
    canvas.drawLine(200, 200, 200, 1000, mLinePaint);

    for (int i = 0; i <= 8; i++) {
        int a = i * 100;//Y軸上的數字
        /*
         * 1000+25-a
         * a=i*100
         *
         * 第i個數字到手機頂部的距離
         *
         * mTextPaint數字的樣式
         *
         * */
        canvas.drawText(String.valueOf(a), 100 - 50, 1000 + 25 - a, mTextPaint);

        //     canvas.drawText(i+"",100-50,1000+25-i,mTextPaint);//一般使用String.valueof()
    }

    for (int i = 0; i < list.size(); i++) {

        int j = i * 200;//字型間距
        //欄位寬度
        float text = mTextPaint.measureText(list.get(i).name);

        canvas.drawText(list.get(i).name, 300 - text / 2 + j, 1000 + 100, mTextPaint);

        //畫矩形
        Rect rect = new Rect();
        rect.left = 300 - 50 + j;//左間距
        rect.right = 300 + 50 + j;//右間距
        rect.bottom = 1000;//矩形的底部座標,不能變
        rect.top = rect.bottom-list.get(i).score;//到頂部的距離
        canvas.drawRect(rect,mRectPaint);
    }

}
}

動態新增

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

EditText nameString;
EditText num;
Button button;
MyView myView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //尋找控制元件
    initView();
    //點選事件
    button.setOnClickListener(this);
}

private void initView() {
    myView = findViewById(R.id.myView);
    nameString = findViewById(R.id.nameString);
    num = findViewById(R.id.num);
    button = findViewById(R.id.button);
}

@Override
public void onClick(View v) {
    switch (v.getId()) {
        case R.id.button:
            //獲取輸入框中的值
            String name = nameString.getText().toString().trim();
            String shu = num.getText().toString().trim();
            //轉成int型別
            int num = Integer.parseInt(shu);

            myView.addUser(new User(name, num));

            break;
    }
}

}
在這裡插入圖片描述