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>