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());            }        });    }}