android自定义控件一站式入门

public class PieChart extends ViewGroup {
  public PieChart(Context context) {
      super(context);
      init();
  }

  public PieChart(Context context, AttributeSet attrs) {
      super(context, attrs);
      getAttributes(context, attrs);
      init();
  }
  ...
}

<resources>
   <declare-styleable name="PieChart">
       <attr name="showText" format="boolean" />
       <attr name="labelHeight" format="dimension"/>
       <attr name="pointerRadius" format="dimension"/>
       <attr name="labelPosition" format="enum">
           <enum name="left" value="0"/>
           <enum name="right" value="1"/>
       </attr>
   </declare-styleable>
</resources>

public static final int PieChart_pointerRadius = 8;

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:custom="http://schemas.android.com/apk/res/com.example.customviews">
 <com.example.customviews.charting.PieChart
     custom:showText="true"
     custom:pointerRadius="4dp"
     custom:labelPosition="left" />
</LinearLayout>

http://schemas.android.com/apk/res/[your package name]

xmlns:app="http://schemas.android.com/apk/res-auto"

<View
    class="com.android.notepad.NoteEditor$MyEditText"
    custom:showText="true"
    custom:labelPosition="left" />

public class PieChart extends ViewGroup {
    public PieChart(Context context, AttributeSet attrs) {
       super(context, attrs);
       getAttributes(context, attrs);
       init();
    }

    private void getAttributes(Context context, AttributeSet attrs) {
      TypedArray a = context.getTheme().obtainStyledAttributes(
           attrs, R.styleable.PieChart, 0, 0);

      try {
          mShowText = a.getBoolean(R.styleable.PieChart_showText, false);
          mTextPos = a.getInteger(R.styleable.PieChart_labelPosition, 0);
      } finally {
          a.recycle();
      }
    }
}

class PieChart extends ViewGroup {
  ...

  // 属性
  public float getTextHeight() {
      return mTextHeight;
  }

  public void setTextHeight(float textHeight) {
     mTextHeight = textHeight;
     invalidate();
  }

  public float getPointerRadius() {
      return mPointerRadius;
  }

  public void setPointerRadius(float pointerRadius) {
      mPointerRadius = pointerRadius;
      invalidate();
  }
}

class PieChart extends ViewGroup {
  ...

  // 事件
  private OnCurrentItemChangedListener mCurrentItemChangedListener = null;

  public interface OnCurrentItemChangedListener {
      void OnCurrentItemChanged(PieChart source, int currentItem);
  }

  public void setOnCurrentItemChangedListener(OnCurrentItemChangedListener listener) {
      mCurrentItemChangedListener = listener;
  }
}

protected void onDraw(Canvas canvas);

public class PieChart extends ViewGroup {
  private void init() {
     mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
     mTextPaint.setColor(mTextColor);
     if (mTextHeight == 0) {
         mTextHeight = mTextPaint.getTextSize();
     } else {
         mTextPaint.setTextSize(mTextHeight);
     }

     mPiePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
     mPiePaint.setStyle(Paint.Style.FILL);
     mPiePaint.setTextSize(mTextHeight);
     ...
}

// Item是PieChart的内部类
private class Item {
    public String mLabel;
    public float mValue;
    public int mColor;

    // 在添加显示项的时候，每个显示项会根据所有显示项来计算它的角度范围
    public int mStartAngle;
    public int mEndAngle;
}

public class PieChart extends ViewGroup {
  ...
  private ArrayList<Item> mData = new ArrayList<Item>();
  private float mTotal = 0.0f;

  public int addItem(String label, float value, int color) {
      Item it = new Item();
      it.mLabel = label;
      it.mColor = color;
      it.mValue = value;

      mTotal += value;
      mData.add(it);

      onDataChanged();
      return mData.size() - 1; // 返回添加的数据在数据集合的索引
  }
}

public class PieChart extends ViewGroup {
  private void onDataChanged() {    
      int currentAngle = 0;
      for (int i = 0; i < mData.size(); i++) {
          Item it = mData.get(i);
          it.mStartAngle = currentAngle;
          it.mEndAngle = (int) ((float) currentAngle + it.mValue * 360.0f / mTotal);
          currentAngle = it.mEndAngle;
      }

      calcCurrentItem();
      onScrollFinished();
  }
}

/**
  * Internal child class that draws the pie chart onto a separate hardware layer
  * when necessary.
  * PieView作为PieChart的内部类，它在必要的时候（执行动画）在独立的硬件层来绘制内容。
  */
private class PieView extends View {
  RectF mBounds;

  protected void onDraw(Canvas canvas) {
              super.onDraw(canvas);
      // drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
      // drawArc在给定的oval（椭圆，圆是特殊的椭圆）中从角度startAngle开始绘制角度为sweepAngle的圆弧。
      // 绘制方向为顺时针，圆弧和两条半径组成了每个数据项展示的扇形。
      for (Item it : mData) {
          mPiePaint.setColor(it.mColor);
          canvas.drawArc(mBounds,
                  it.mStartAngle,
                  it.mEndAngle - it.mStartAngle,
                  true, mPiePaint);
      }
  }
}

* @param oval  The bounds of oval used to define the shape and size
*              of the arc.

/**
 * Set the activity content to an explicit view.  This view is placed
 * directly into the activity's view hierarchy.  It can itself be a complex
 * view hierarchy.
 *
 * @param view The desired content to display.
 * @param params Layout parameters for the view.
 *
 * @see #setContentView(android.view.View)
 * @see #setContentView(int)
 */
public void setContentView(View view, ViewGroup.LayoutParams params) {
    getWindow().setContentView(view, params);
    initWindowDecorActionBar();
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent" android:layout_height="match_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:orientation="horizontal">
        <com.idlestar.androiddocs.view.widget.PieChart
            android:id="@+id/Pie"
            android:layout_width="140dp"
            android:layout_height="140dp"
            ... />
        <com.idlestar.androiddocs.view.widget.PieChart
            android:id="@+id/Pie2"
            android:layout_width="140dp"
            android:layout_height="140dp"
            ... />
    </LinearLayout>
    <Button
        android:id="@+id/Reset"
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:text="@string/reset_button" />
</LinearLayout>

public final void measure(int widthMeasureSpec, int heightMeasureSpec)

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),
            getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));
}

/**
 * Ask all of the children of this view to measure themselves, taking into
 * account both the MeasureSpec requirements for this view and its padding.
 * We skip children that are in the GONE state The heavy lifting is done in
 * getChildMeasureSpec.
 *
 * @param widthMeasureSpec The width requirements for this view
 * @param heightMeasureSpec The height requirements for this view
 */
protected void measureChildren(int widthMeasureSpec, int heightMeasureSpec) {
    final int size = mChildrenCount;
    final View[] children = mChildren;
    for (int i = 0; i < size; ++i) {
        final View child = children[i];
        if ((child.mViewFlags & VISIBILITY_MASK) != GONE) {
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
        }
    }
}

/**
 * Ask one of the children of this view to measure itself, taking into
 * account both the MeasureSpec requirements for this view and its padding.
 * The heavy lifting is done in getChildMeasureSpec.
 *
 * @param child The child to measure
 * @param parentWidthMeasureSpec The width requirements for this view
 * @param parentHeightMeasureSpec The height requirements for this view
 */
protected void measureChild(View child, int parentWidthMeasureSpec,
        int parentHeightMeasureSpec) {
    final LayoutParams lp = child.getLayoutParams();

    final int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec,
            mPaddingLeft + mPaddingRight, lp.width);
    final int childHeightMeasureSpec = getChildMeasureSpec(parentHeightMeasureSpec,
            mPaddingTop + mPaddingBottom, lp.height);

    child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}

/**
 * Does the hard part of measureChildren: figuring out the MeasureSpec to
 * pass to a particular child. This method figures out the right MeasureSpec
 * for one dimension (height or width) of one child view.
 *
 * The goal is to combine information from our MeasureSpec with the
 * LayoutParams of the child to get the best possible results. For example,
 * if the this view knows its size (because its MeasureSpec has a mode of
 * EXACTLY), and the child has indicated in its LayoutParams that it wants
 * to be the same size as the parent, the parent should ask the child to
 * layout given an exact size.
 *
 * @param spec The requirements for this view
 * @param padding The padding of this view for the current dimension and
 *        margins, if applicable
 * @param childDimension How big the child wants to be in the current
 *        dimension
 * @return a MeasureSpec integer for the child
 */
public static int getChildMeasureSpec(int spec, int padding, int childDimension) {
    int specMode = MeasureSpec.getMode(spec);
    int specSize = MeasureSpec.getSize(spec);

    int size = Math.max(0, specSize - padding);

    int resultSize = 0;
    int resultMode = 0;

    switch (specMode) {
    // Parent has imposed an exact size on us
    case MeasureSpec.EXACTLY:
        if (childDimension >= 0) {
            resultSize = childDimension;
            resultMode = MeasureSpec.EXACTLY;
        } else if (childDimension == LayoutParams.MATCH_PARENT) {
            // Child wants to be our size. So be it.
            resultSize = size;
            resultMode = MeasureSpec.EXACTLY;
        } else if (childDimension == LayoutParams.WRAP_CONTENT) {
            // Child wants to determine its own size. It can't be
            // bigger than us.
            resultSize = size;
            resultMode = MeasureSpec.AT_MOST;
        }
        break;

    // Parent has imposed a maximum size on us
    case MeasureSpec.AT_MOST:
        if (childDimension >= 0) {
            // Child wants a specific size... so be it
            resultSize = childDimension;
            resultMode = MeasureSpec.EXACTLY;
        } else if (childDimension == LayoutParams.MATCH_PARENT) {
            // Child wants to be our size, but our size is not fixed.
            // Constrain child to not be bigger than us.
            resultSize = size;
            resultMode = MeasureSpec.AT_MOST;
        } else if (childDimension == LayoutParams.WRAP_CONTENT) {
            // Child wants to determine its own size. It can't be
            // bigger than us.
            resultSize = size;
            resultMode = MeasureSpec.AT_MOST;
        }
        break;

    // Parent asked to see how big we want to be
    case MeasureSpec.UNSPECIFIED:
        if (childDimension >= 0) {
            // Child wants a specific size... let him have it
            resultSize = childDimension;
            resultMode = MeasureSpec.EXACTLY;
        } else if (childDimension == LayoutParams.MATCH_PARENT) {
            // Child wants to be our size... find out how big it should
            // be
            resultSize = 0;
            resultMode = MeasureSpec.UNSPECIFIED;
        } else if (childDimension == LayoutParams.WRAP_CONTENT) {
            // Child wants to determine its own size.... find out how
            // big it should be
            resultSize = 0;
            resultMode = MeasureSpec.UNSPECIFIED;
        }
        break;
    }
    return MeasureSpec.makeMeasureSpec(resultSize, resultMode);
}

public static int getChildMeasureSpec(int spec, int padding, int childDimension)

protected void measureChildWithMargins(View child,
        int parentWidthMeasureSpec, int widthUsed,
        int parentHeightMeasureSpec, int heightUsed) {
    final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

    final int childWidthMeasureSpec = getChildMeasureSpec(parentWidthMeasureSpec,
            mPaddingLeft + mPaddingRight + lp.leftMargin + lp.rightMargin
                    + widthUsed, lp.width);
    final int childHeightMeasureSpec = getChildMeasureSpec(parentHeightMeasureSpec,
            mPaddingTop + mPaddingBottom + lp.topMargin + lp.bottomMargin
                    + heightUsed, lp.height);

    child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}

public void draw(Canvas canvas);

@Override
protected int getSuggestedMinimumWidth() {
    return (int) mTextWidth * 2;
}

@Override
protected int getSuggestedMinimumHeight() {
    return (int) mTextWidth;
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  int minw = getPaddingLeft() + getPaddingRight() + getSuggestedMinimumWidth();
  int w = getDefaultSize(minw, widthMeasureSpec);

  int minh = (w - (int) mTextWidth) + getPaddingBottom() + getPaddingTop();
  int h = getDefaultSize(minh, heightMeasureSpec);

  setMeasuredDimension(w, h);
}

public static int getDefaultSize(int size, int measureSpec);
public static int resolveSizeAndState(int size, int measureSpec, int childMeasuredState);

public class PieChart extends ViewGroup {
  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
      super.onSizeChanged(w, h, oldw, oldh);
      // 计算padding
      float xpad = (float) (getPaddingLeft() + getPaddingRight());
      float ypad = (float) (getPaddingTop() + getPaddingBottom());

      // 水平宽度上padding值加上标签文本占用的宽度
      if (mShowText) xpad += mTextWidth;

      float ww = (float) w - xpad;
      float hh = (float) h - ypad;

      // 因为饼状图是圆，所以直径应该是剩余矩形空间的宽高中较小的值
      float diameter = Math.min(ww, hh);
      mPieBounds = new RectF(0.0f, 0.0f, diameter, diameter);
      mPieBounds.offsetTo(getPaddingLeft(), getPaddingTop());

      // 计算当前项指示点的Y
      mPointerY = mTextY - (mTextHeight / 2.0f);
      float pointerOffset = mPieBounds.centerY() - mPointerY;

      // 标签可以在左边或者右边，这里根据文本位置和指示圆点在圆心的上下高度，
      // 将它放在合适的角度：45,135,225,315里面选一个。
      if (mTextPos == TEXTPOS_LEFT) {
          mTextPaint.setTextAlign(Paint.Align.RIGHT);
          if (mShowText) mPieBounds.offset(mTextWidth, 0.0f);
          mTextX = mPieBounds.left;

          if (pointerOffset < 0) {
              pointerOffset = -pointerOffset;
              mCurrentItemAngle = 135;
          } else {
              mCurrentItemAngle = 225;
          }
          mPointerX = mPieBounds.centerX() - pointerOffset;
      } else {
          mTextPaint.setTextAlign(Paint.Align.LEFT);
          mTextX = mPieBounds.right;

          if (pointerOffset < 0) {
              pointerOffset = -pointerOffset;
              mCurrentItemAngle = 45;
          } else {
              mCurrentItemAngle = 315;
          }
          mPointerX = mPieBounds.centerX() + pointerOffset;
      }

      // 布局PieView和PointerView.它们用来画圆和指示点。
      mPieView.layout((int) mPieBounds.left,
              (int) mPieBounds.top,
              (int) mPieBounds.right,
              (int) mPieBounds.bottom);
      mPieView.setPivot(mPieBounds.width() / 2, mPieBounds.height() / 2);

      mPointerView.layout(0, 0, w, h);
      onDataChanged();
  }
}

// 在PieChart类中
@Override
public boolean onTouchEvent(MotionEvent event) {
    boolean result = mDetector.onTouchEvent(event);
    if (!result) {
        if (event.getAction() == MotionEvent.ACTION_UP) {
            stopScrolling();
            result = true;
        }
    }
    return result;
}

// 在PieChart类中
mDetector = new GestureDetector(PieChart.this.getContext(), new GestureListener());
...

private class GestureListener extends GestureDetector.SimpleOnGestureListener {
    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        // 用户滑动手指时立即转动圆
        float scrollTheta = vectorToScalarScroll(distanceX, distanceY,
                e2.getX() - mPieBounds.centerX(),
                e2.getY() - mPieBounds.centerY());
        setPieRotation(getPieRotation() - (int) scrollTheta / FLING_VELOCITY_DOWNSCALE);
        return true;
    }

    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        ...
        return true;
    }

    @Override
    public boolean onDown(MotionEvent e) {
        // 用户开始触摸屏幕，开启硬件加速
        mPieView.accelerate();
        if (isAnimationRunning()) {
            stopScrolling();
        }
        return true;
    }
}

    /**
     * 把滑动形成的向量转换为圆转动的方向和角度大小。
     *
     * @param dx 当前滑动向量的x分量.
     * @param dy 当前滑动向量的y分量.
     * @param x  相对于pie圆心的x坐标.
     * @param y  相对于pie圆心的y坐标.
     * @return 表示转动角度的标量。
     */
private static float vectorToScalarScroll(float dx, float dy, float x, float y) {
    // 滑动形成的向量(dx,dy)的大小
    float length = (float) Math.sqrt(dx * dx + dy * dy);

    // (crossX，crossY)是(x,y)的垂直向量
    float crossX = -y;
    float crossY = x;

    // 点乘，得到转动方向。
    float dot = (crossX * dx + crossY * dy);
    float sign = Math.signum(dot);

    return length * sign;
}

public class PieChart extends ViewGroup {
  private int mPieRotation;
  private PieView mPieView;
  ...

  public void setPieRotation(int rotation) {
      rotation = (rotation % 360 + 360) % 360;
      mPieRotation = rotation;
      // 角度顺时针转动时度数增加
      mPieView.rotateTo(rotation);

      calcCurrentItem();
  }
  ...
}

// 在PieChart类中
private void calcCurrentItem() {
    // 顺时针转动圆圈，那么指示点相当于各个饼状图逆时针了mPieRotation
    int pointerAngle = (mCurrentItemAngle + 360 - mPieRotation) % 360;
    for (int i = 0; i < mData.size(); ++i) {
        Item it = mData.get(i);
        if (it.mStartAngle <= pointerAngle && pointerAngle <= it.mEndAngle) {
            if (i != mCurrentItem) {
                setCurrentItem(i, false);
            }
            break;
        }
    }
}

// 在PieChart类中：
private void setCurrentItem(int currentItem, boolean scrollIntoView) {
    mCurrentItem = currentItem;
    if (mCurrentItemChangedListener != null) {
        mCurrentItemChangedListener.OnCurrentItemChanged(this, currentItem);
    }
    if (scrollIntoView) {
        centerOnCurrentItem();
    }
    invalidate();
}

// 在GestureListener类中
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
    // Set up the Scroller for a fling
    float scrollTheta = vectorToScalarScroll(
            velocityX,
            velocityY,
            e2.getX() - mPieBounds.centerX(),
            e2.getY() - mPieBounds.centerY());
    mScroller.fling(
            0,
            (int) getPieRotation(),
            0,
            (int) scrollTheta / FLING_VELOCITY_DOWNSCALE,
            0,
            0,
            Integer.MIN_VALUE,
            Integer.MAX_VALUE);
    // Start the animator and tell it to animate for the expected duration of the fling.
    if (Build.VERSION.SDK_INT >= 11) {
        mScrollAnimator.setDuration(mScroller.getDuration());
        mScrollAnimator.start();
    } else {
        mPieView.invalidate();
    }
    return true;
}

mScrollAnimator = ValueAnimator.ofFloat(0, 1);
mScrollAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    public void onAnimationUpdate(ValueAnimator valueAnimator) {
        tickScrollAnimation();
    }
});

private void tickScrollAnimation() {
  if (!mScroller.isFinished()) {
      mScroller.computeScrollOffset();
      setPieRotation(mScroller.getCurrY());
  } else {
      if (Build.VERSION.SDK_INT >= 11) {
          mScrollAnimator.cancel();
      }
      onScrollFinished();
  }
}

// 在PieChart类中
private void init () {
  ...
  mAutoCenterAnimator = ObjectAnimator.ofInt(PieChart.this, "PieRotation", 0);
  ...
}

private void centerOnCurrentItem() {
    Item current = mData.get(getCurrentItem());
    int originPieMiddleAngle = current.mStartAngle + (current.mEndAngle - current.mStartAngle) / 2;
    int relativePointerAngle = mCurrentItemAngle - mPieRotation;
    if (relativePointerAngle < 0) relativePointerAngle += 360;

    if (originPieMiddleAngle == relativePointerAngle) return;

    int newRotation = 0;
    int delta = Math.abs(originPieMiddleAngle - relativePointerAngle);
    if (originPieMiddleAngle > relativePointerAngle) {
        newRotation = mPieRotation - delta;
    } else {
        newRotation = mPieRotation + delta;
    }

    if (Build.VERSION.SDK_INT >= 11) {
        // Fancy animated version
        mAutoCenterAnimator.setIntValues(newRotation);
        mAutoCenterAnimator.setDuration(AUTOCENTER_ANIM_DURATION).start();
    } else {
        // Dull non-animated version
        mPieView.rotateTo(newRotation);
    }
}