Android自定义view实现扇形

Android自定义view实现扇形

android可以通过Canvas实现各种形状，其中drawArc这个方法可以绘制弧形。

public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)
oval :指定圆弧的外轮廓矩形区域。
startAngle: 圆弧起始角度，单位为度。
sweepAngle: 圆弧扫过的角度，顺时针方向，单位为度。
useCenter: 如果为True时，在绘制圆弧时将圆心包括在内，通常用来绘制扇形。
paint: 绘制圆弧的画板属性，如颜色，是否填充等。

因为项目需要实现这样一个效果，左右两边是半圆形凹槽 中间是虚线。

考虑可以把这个效果分为三部分来实现，既左右凹槽和中间实现部分。
左右凹槽可以使用shape绘制圆角矩形来实现，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"
    >
	<!-- 填充editView的颜色 -->
	<solid android:color="@color/background"/>
	<!-- 设置圆角的弧度，radius半径越大，editView的边角越圆 -->
	<corners
		android:bottomRightRadius="10dp"
		android:topRightRadius="10dp"
		android:bottomLeftRadius="0dp"
		android:topLeftRadius="0dp"
		/>
	<stroke
		android:color="@color/background"
		android:width="1dp" />
	<size android:height="20dp"
		android:width="10dp"/>
</shape>

使用此方法在genymotion android4.1的设备上效果有问题，

如黑框所示，不知为何不是半圆，同样的代码在genymotion的5.1设备上运行正常显示半圆。

如果有知道为啥的同学请不吝赐教。

后来就想不然就自己定义一个view来实现这个半圆吧。下面贴出自定义view的JAVA代码：

package com.feifan.elephantdoctor.platform.common.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import com.feifan.elephantdoctor.R;

/**
 * Created by qinyy on 2016/7/21.
 */
public class ArchView extends View
{
	//填充颜色
    private int mSolidColor;
    //组件宽度
    private int mWidth;
    //组件高度
    private int mHeight;
    //开始绘制圆弧(扇形)的角度；绘制跨度
    private int mStartAngle,mSweepAngle;
    //该弧形所面向的方向(弧相对圆心的方向)
    private int mOrientation;
    public ArchView(Context context)
    {
        super(context);

    }

    public ArchView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        //从xml中获取属性
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ArchView);
        mSolidColor = typedArray.getColor(R.styleable.ArchView_solidColor,context.getResources().getColor(R.color.trans));
        mWidth = (int) typedArray.getDimension(R.styleable.ArchView_archWidth,0);
        mHeight = (int) typedArray.getDimension(R.styleable.ArchView_archHeight,0);
        mStartAngle = typedArray.getInt(R.styleable.ArchView_startAngle,0);
        mSweepAngle = typedArray.getInt(R.styleable.ArchView_sweepAngle,0);
        mOrientation = typedArray.getInt(R.styleable.ArchView_orientation,-1);
    }


    @Override protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        Paint paint = new Paint();
        paint.setColor(mSolidColor);
        //去除锯齿效果
        paint.setAntiAlias(true);
        //如果方向向左
        //外轮廓oval要绘制成mWidth*2，不然绘制出的图形很小，个人分析主要是因为圆心会在oval的中心绘制，所以如果oval的宽度如果设置和组件宽度一致的话，无法实现半圆的直径和边重叠的效果，最后显示出来的尺寸在xml中的android:width中限制。
        if(mOrientation == 0)
        {
            RectF oval = new RectF(0,0,mWidth*2,mHeight);
            canvas.drawArc(oval,mStartAngle,mSweepAngle,false,paint);
        }
        //如果方向向右
        else if(mOrientation == 1)
        {
            RectF oval = new RectF(-mWidth,0,mWidth,mHeight);
            canvas.drawArc(oval,mStartAngle,mSweepAngle,false,paint);
        }

    }
}

自定义attrs

   <declare-styleable name="ArchView">
        <attr name="archWidth" format="dimension"/>
        <attr name="archHeight" format="dimension"/>
        <attr name="solidColor" format="color"/>
        <attr name="sweepAngle" format="integer"/>
        <attr name="startAngle" format="integer"/>
        <attr name="orientation" format="enum">
            <enum name="left" value="0"/>
            <enum name="right" value="1"/>
        </attr>
    </declare-styleable>

xml中使用自定义view：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linear_tab"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:orientation="horizontal">

    <com.feifan.elephantdoctor.platform.common.view.ArchView
        xmlns:archView="http://schemas.android.com/apk/res-auto"
        android:layout_width="7dp"
        android:layout_height="14dp"
        archView:archHeight="14dp"
        archView:archWidth="7dp"
        archView:solidColor="@color/background"
        archView:startAngle="270"
        archView:sweepAngle="180"
        archView:orientation="right"
         />

    <View
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:layout_weight="1"
        android:background="@drawable/reservation_shape_line"
        android:layerType="software" />

    <com.feifan.elephantdoctor.platform.common.view.ArchView
        xmlns:archView="http://schemas.android.com/apk/res-auto"
        android:layout_width="7dp"
        android:layout_height="14dp"
        archView:archHeight="14dp"
        archView:archWidth="7dp"
        archView:solidColor="@color/background"
        archView:startAngle="90"
        archView:sweepAngle="180"
        archView:orientation="left"
        />

</LinearLayout>