信息系统手机端

签到界面设计

签到操作很简单，就是一个签入签出的功能
因此，签到界面只要有一个签入签出的按钮就可以了

界面参考360手机优化界面，最终效果如图

签到界面实现

新建一个SignView,作为绘制区域，放入activity的layout中
activity.xml

<?xml version="1.0" encoding="utf-8"?>
<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:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@color/colorPrimary"
    android:padding="20dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.halfopen.h.cislsign.activity.MainActivity"
    tools:showIn="@layout/app_bar_main">

    <com.halfopen.h.cislsign.view.SignView
        android:id="@+id/sign_view"
        android:layout_gravity="center"

        android:layout_width="200dp"
        android:layout_height="300dp"/>
</LinearLayout>

效果如图所示

绘制圆弧

取消view的背景色，绘制圆弧

        //画圆弧的方法
        canvas.drawArc(oval, startAngle, sweepAngle, useCenter,paint);

绘制刻度

private void drawViewLine(Canvas canvas) {

        //先保存之前canvas的内容
        canvas.save();
        //移动canvas(X轴移动距离，Y轴移动距离)
        canvas.translate(radius,radius);
        //旋转坐标系
        canvas.rotate(30);
        Paint linePatin=new Paint();
        //设置画笔颜色
        linePatin.setColor(Color.WHITE);
        //线宽
        linePatin.setStrokeWidth(2);
        //设置画笔抗锯齿
        linePatin.setAntiAlias(true);
        //确定每次旋转的角度
        float rotateAngle=sweepAngle/100;
        //绘制有色部分的画笔
        Paint targetLinePatin=new Paint();
        targetLinePatin.setColor(Color.GREEN);
        targetLinePatin.setStrokeWidth(2);
        targetLinePatin.setAntiAlias(true);
        //记录已经绘制过的有色部分范围
        float hasDraw=0;
        for(int i=0;i<=100;i++){
            if(hasDraw<=targetAngle&&targetAngle!=0){//需要绘制有色部分的时候
                //画一条刻度线
                canvas.drawLine(0,radius,0,radius-40,targetLinePatin);
            }else {//不需要绘制有色部分
                //画一条刻度线
                canvas.drawLine(0,radius,0,radius-40,linePatin);
            }
            //累计绘制过的部分
            hasDraw+=rotateAngle;
            //旋转
            canvas.rotate(rotateAngle);
        }

        //操作完成后恢复状态
        canvas.restore();
    }

绘制文字

private void drawScoreText(Canvas canvas) {
        //先绘制一个小圆
        Paint smallPaint = new Paint();
        smallPaint.setAlpha(50);
        smallPaint.setARGB(50, 236, 241, 243);
        // 画小圆指定圆心坐标，半径，画笔即可
        int smallRadius=radius-60;
        canvas.drawCircle(radius, radius, radius - 60, smallPaint);
        //绘制文本
        Paint textPaint=new Paint();
        //设置文本居中对齐
        textPaint.setTextAlign(Paint.Align.CENTER);
        textPaint.setColor(Color.WHITE);
        textPaint.setTextSize(smallRadius/2);
        //score需要通过计算得到
        if(isSign)canvas.drawText("签入",radius,radius,textPaint);
        else canvas.drawText("签出",radius,radius,textPaint);
//        //绘制分，在分数的右上方
//        textPaint.setTextSize(smallRadius/6);
//        canvas.drawText("分",radius+smallRadius/2,radius-smallRadius/4,textPaint);
        //绘制点击优化在分数的下方
        textPaint.setTextSize(smallRadius/6);
        canvas.drawText("点击进行操作",radius,radius+smallRadius/2,textPaint);

    }

其中，isSign是是否已经签入的标志，如果用户点击按钮，则该标志发生改变，因此需要绑定点击事件，让按钮能够点击。

绑定点击事件

在activity中进行绑定

sv = (SignView) findViewById(R.id.sign_view);

        sv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                sv.change();
            }
        });

change方法

    public void change(){
        isSign = !isSign;
        postInvalidate();//重绘界面
    }