Android中实现状态圆（with Fragment）

在使用Fragment这个控件的过程中，我想着如何才能让用户知道他们正在浏览在哪个Fragment上了，于是我打算写一个状态圆来与用户交互。

这个状态圆只是为了简单示范和解决我的实际问题而写的，不代表它有普遍功能。

1>确定该自定义View的宽高比，本例中定义的宽高比为2:1;

2>准备两种颜色的paint一种定义为PaintBackgrount，一种为PaintCurrent。

3>在onDraw中进行逻辑判断。画出圆显示的状态，以三个圆为例，它们的圆心分别为1/6widthSize,1/2widthSize,5/6widthSize（具体情况具体分析，考验初中数学水平）,半径设为1/4heightSize（直径不要超过heightsize就好，其他按美观不美观来）;

4>为外部提供了一个接口开改变状态。

具体代码如下：

     1、自定义View的java代码：

 

package com.example.mainexample;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.annotation.ColorInt;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by 尽途 on 2017/5/7.
 */

public class CircleState extends View {
    private int widthSize,heightSize;
    private Paint circlePaint,backgroundPaint;
    private int count=1;
    public CircleState(Context context){
        super(context);
        initData();
    }
    public CircleState(Context context, AttributeSet attributeSet){
        super(context,attributeSet);
        initData();
    }
    void initData(){
        circlePaint=new Paint();
        backgroundPaint=new Paint();
        circlePaint.setStyle(Paint.Style.FILL);
        backgroundPaint.setStyle(Paint.Style.FILL);
        circlePaint.setAntiAlias(true);
        backgroundPaint.setAntiAlias(true);
        circlePaint.setColor(getResources().getColor(R.color.colorBottomBackground));
        backgroundPaint.setColor(getResources().getColor(R.color.colorAccent));
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        widthSize=MeasureSpec.getSize(widthMeasureSpec);
        heightSize=(int)(widthSize*0.5f);
        setMeasuredDimension(widthSize,heightSize);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawCircle((float)widthSize/6,(float)heightSize/2,(float)heightSize/4,circlePaint);
        canvas.drawCircle((float)widthSize/2,(float)heightSize/2,(float)heightSize/4,circlePaint);
        canvas.drawCircle((float)widthSize*5/6,(float)heightSize/2,(float)heightSize/4,circlePaint);
        switch (count){
            case 0:
                drawLeftCircle(canvas);
                break;
            case 1:
                drawMainCircle(canvas);
                break;
            case 2:
                drawRightCircle(canvas);
                break;
            default:
                break;
        }
    }
    private void drawMainCircle(Canvas canvas){
        canvas.drawCircle((float)widthSize/2,(float)heightSize/2,(float)heightSize/4,backgroundPaint);
    }
    private void drawLeftCircle(Canvas canvas){
        canvas.drawCircle((float)widthSize/6,(float)heightSize/2,(float)heightSize/4,backgroundPaint);
    }
    private void drawRightCircle(Canvas canvas){
        canvas.drawCircle((float)widthSize*5/6,(float)heightSize/2,(float)heightSize/4,backgroundPaint);
    }
    public void changeTheCount(int count){
        if (count>=0&&count<=3){
            this.count=count;
        }
        invalidate();
    }
}

    2、实现它的xml代码

 

 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_circlemove"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.mainexample.circlemove">
    <com.example.mainexample.CircleState
        android:id="@+id/circlemove"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true" />

    <EditText
        android:id="@+id/countEdit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true" />

    <Button
        android:id="@+id/updateButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="update"
        android:layout_alignTop="@+id/countEdit"
        android:layout_toEndOf="@+id/countEdit" />

</RelativeLayout>

 

 

 

    3>外部接口改变内部的java代码：

 

package com.example.mainexample;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

public class circlemove extends AppCompatActivity {
    private EditText countEdit;
    private Button updatebutton;
    private CircleState circleState;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_circlemove);
        initView();
    }
    private void initView(){
        countEdit=(EditText)findViewById(R.id.countEdit);
        updatebutton=(Button)findViewById(R.id.updateButton);
        circleState=(CircleState)findViewById(R.id.circlemove);
        updatebutton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                circleState.changeTheCount(Integer.valueOf(countEdit.getText().toString()).intValue());
            }
        });
    }
}