Android——自定义镂空遮盖控件

刚学完ViewDragHelper和PorterDuffXferMode的我，突然想做一个这样效果的自定义控件：点击ListView的列表项，通过ViewDragHelper用动画方式上下各弹出一个控件遮盖住ListView，这两个控件在遮盖listView的过程中有一部分是镂空的。先上效果图：



首先是进行页面的布局，让自定义控件PlayLayout继承自Franlayout，在最底层放的就是listView所在的子FramLayout（Id：midContent），然后依次在上面加上下两个看起来被分割的FrameLayout（这里直接写了自定义控件SplitLayout继承Framlayout，id分别为：topSplit，bottomSplit），最后还要放上旋转圆的部分（自定义控件ControlPanel，）

大致布局像这样：

<PlayLayout extends frameLayout  id:palyLayout>
<FrameLayout id:midContent>//显示ListView的底层部分
</FrameLayout>

<SplitLayout  extends FrameLayout id:topSplit>//顶部的分割区
</SplitLayout>

<SplitLayout  extends FrameLayout id:bootomSplit>//底部分割
</SplitLayout>

<ControlPanel extends FrameLayout id:controlPanel>//旋转圆部分
</ControlPanel>
</PlayLayout>

首先分析怎么设置上下SplitLayout弹出的工作：

1、在PlayLayout中的onFinishInflate()中获得各个子布局

midContent = (ViewGroup) getChildAt(0);
topSplit = (SplitLayout) getChildAt(1);
bottomSplit = (SplitLayout) getChildAt(2);
controlPanel = (ControlPanel) getChildAt(3);
//SplitLayout.Position是一个enum 标志该SplitLayout是上半部分还是下半部分，默认下半部分
topSplit.setPosition(SplitLayout.Position.TOP);

2、根据可以设置的splitScale即上下splitLayout高度比（默认0.5，上下各一半），在PlayLayout控件的onMeaure中设置他们的高度

int count = getChildCount();
for (int i = 0; i < count; i++) {
//测量子控件
measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
}
int w = MeasureSpec.getSize(widthMeasureSpec);
int h = MeasureSpec.getSize(heightMeasureSpec);
//根据分割比例计算上下分割控件各自的高度
int topH = (int) (h * 1.0f * splitScale + 0.5f);
int bottomH = h - topH;
ViewGroup.LayoutParams params1 = topSplit.getLayoutParams();
ViewGroup.LayoutParams params2 = bottomSplit.getLayoutParams();
ViewGroup.LayoutParams params3 = controlPanel.getLayoutParams();
params1.height = topH;
params1.width = getMeasuredWidth();
params2.height = bottomH;
params2.width = getMeasuredWidth();
params3.height = (int) (radias*2);
params3.width = (int) (radias*2) ;
//设置各自的高度
topSplit.setLayoutParams(params1);//上半部分割控件
bottomSplit.setLayoutParams(params2);//下半部分
controlPanel.setLayoutParams(params3);//旋转圆盘

3.重写PlayLayout的onLayout方法，进行子控件的布局

int h = getMeasuredHeight();
int topH = (int) (h * 1.0f * splitScale + 0.5f);
int bottomH = h - topH;
//放置listview的底层的midContent正常的layout
midContent.layout(left, top, right, bottom);
//topSplit一开始我们让其在最上面隐藏，点击listItem后才出来
topSplit.layout(left, -topH, right, 0);
//同样，bottomSplit最开始让其在父控件的底部隐藏
bottomSplit.layout(left, h, right, h + bottomH);
controlPanel.layout((int)(getMeasuredWidth()*1.0/2-radias),
(int)(topH-radias),
(int)(getMeasuredWidth()*1.0/2+radias),
(int) (topH+ radias));

4.通过ViewDragHelper来处理滚动，接下来是ViewDragHelper的一般过程

先初始化

public enum Status {//一共三个状态，打开，关闭，正在拖动
OPEN, DRAGING, CLOSE
}
private Status status = Status.CLOSE;
private ViewDragHelper mDragHelp;
//初始化
private void initView() {
mDragHelp = ViewDragHelper.create(this, mDragCallbak);
status = Status.CLOSE;//初始化状态，splitLayout和controlPanel处于关闭状态
}

当size发生变化时，重置一些参数

//这里是设置底部的splitLayout可以拖拽
private int mTop;//当前拖拽的位置
private int mStartTop;//初始Y方向top位置
private int mEndTop;//打开后，拖拽到的位置
private int mRange;//可以拖动的范围

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
int hh = getMeasuredHeight();
int topH = (int) (hh * 1.0f * splitScale + 0.5f);
mStartTop = hh;//最开始是在底部
mEndTop = topH;//能够最终拖拽到父控件顶部splitLayout高度大小的位置
mTop = hh;//初始化当前位置
mRange = mStartTop - mEndTop;//计算拖拽范围
}

拦截时间，以及处理事件

@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (status == Status.CLOSE) return false;
return mDragHelp.shouldInterceptTouchEvent(ev);
}

@Override
public boolean onTouchEvent(MotionEvent event) {
mDragHelp.processTouchEvent(event);
return true;
}

初始化ViewDragHelper.Callback

private ViewDragHelper.Callback mDragCallbak = new ViewDragHelper.Callback() {

@Override
public boolean tryCaptureView(View child, int pointerId) {
return child == bottomSplit;//选择能够拖动的控件
}

@Override
public int clampViewPositionVertical(View child, int top, int dy) {
//设置当前的拖拽位置，要在拖动范围之内
if (top > mStartTop)
top = mStartTop;
if (top < mEndTop)
top = mEndTop;
return top;
}

//当拖动的控件位置发生变化时，调用该函数，在函数里更新当前的top位置mTop
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
super.onViewPositionChanged(changedView, left, top, dx, dy);

mTop += dy;
mTop = Math.max(Math.min(mTop, mStartTop), mEndTop);
dispatchScrollEvent();
}

//设置拖动范围
@Override
public int getViewVerticalDragRange(View child) {
return mRange;
}

//当拖拽放开时
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
if (mTop < mEndTop + mRange / 2) {
open();
} else {
close();
}

ViewCompat.postInvalidateOnAnimation(PlayLayout.this);
}
};

还需要重写onComputeScroll(和Scroll.startScrolll方法一样)

@Override
public void computeScroll() {
super.computeScroll();
if (mDragHelp.continueSettling(true))
ViewCompat.postInvalidateOnAnimation(this);
}

ViewDragHelper的惯性操作都放在open和close

public void open() {
mDragHelp.smoothSlideViewTo(bottomSplit, 0, mEndTop);
ViewCompat.postInvalidateOnAnimation(this);
}

private void close() {
mDragHelp.smoothSlideViewTo(bottomSplit, 0, mStartTop);
ViewCompat.postInvalidateOnAnimation(this);
}

其中在ViewDragHelper.Callback的onViewPositionChanged中每次调用我们都计算了当前top，并分发了事件：

private Status updateStatus() {
if (mTop <= mEndTop + 5) {
status = Status.OPEN;
System.out.println("status->>" + "open");
} else if (mTop >= mStartTop - 5) {
status = Status.CLOSE;
System.out.println("status->>" + "close");

} else {
status = Status.DRAGING;
}
return status;
}
private void dispatchScrollEvent() {
updateStatus();//根据当前mTop计算状态
//计算拖拽完成的程度
float percent = (mStartTop - mTop) * 1.0f / mRange;
//根据百分比，移动呈现顶部splitLayout
ViewHelper.setTranslationY(topSplit, percent * 1.0f * mEndTop + 0.5f);
ViewHelper.setScaleY(controlPanel, percent);
ViewHelper.setScaleX(controlPanel, percent);
ViewHelper.setRotation(controlPanel, (1 - percent) *360);
}

5.通过PorterDuffXferMode遮罩层设置镂空的SplitLayout

这里是在SplitLayout控件中

首先初始化

private PorterDuffXfermode mMode;
private Paint mPaint;
private Bitmap mBg;//控件背景
private void initView() {
mPaint = new Paint();
mPaint.setAlpha(0);//镂空遮罩层画笔一定要透明
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
}

然后重写onDraw时这样处理

int w = getMeasuredWidth();
int h = getMeasuredHeight();
Bitmap bm = null;
if (mBg != null) {
int bitW = mBg.getWidth();
int bitH = mBg.getHeight();
//因为该控件只显示父控件一定比例的高度，所以背景比例是按父控件高度计算的
float scaleH = h * 1.0f / splitScale / bitH;//h*(1/splitScale)得到父控件高度
float scaleW = w * 1.0f / bitW;
Matrix matrix = new Matrix();
matrix.setScale(scaleW, scaleH);
bm = Bitmap.createBitmap(mBg, 0, 0, bitW, bitH, matrix, true);
}
int startDegree = mPosition == Position.TOP ? 180 : 0;
//利用同样大小的bitMap做镂空层
Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas canvas1 = new Canvas(bitmap);

//根据Position决定绘制已经缩放图像的上半还是下半,在下半则起点为父控件高度减去自己的高度
int t = mPosition == Position.TOP ? 0 : (int) (h * 1.0f / splitScale - h);
if (mBg == null)
canvas1.drawColor(Color.argb(200, 128, 128, 128));
else
canvas1.drawBitmap(bm,
new Rect(0, t, w, t + h),
new Rect(0, 0, w, h),
null);

//设置镂空圆的位置
float top = h - radias;
if (mPosition == Position.BOTTOM)
top = -radias;
float bottom = top + 2 * radias;
RectF rectF = new RectF(w / 2 - radias, top, w / 2 + radias, bottom);
//上面再bitmap上已经画了背景图片，再通过带xferMode属性的透明画笔去镂空背景图片，让其显示控件下面一层的控件视图
canvas1.drawArc(rectF, startDegree, 180, true, mPaint);//注意mPaint的特殊设置，alpha=0,xmode（Mode.SRC_In）;
//将镂空层画到背景上
canvas.drawBitmap(bitmap, 0, 0, null);

旋转圆控件的onDraw处理和SplitLayout基本一样，除了要镂空

int bitW = mBg.getWidth();
int bitH = mBg.getHeight();
System.out.println("sout->>bitH=" + bitH + " bitW=" + bitW);
//计算缩放比例
float scaleH = h * 1.0f / bitH；
float scaleW = w * 1.0f / bitW;
Matrix matrix = new Matrix();
matrix.setScale(scaleW, scaleH);
Bitmap bitmap=Bitmap.createBitmap(mBg,0,0,bitW,bitH,matrix,true);
mShader=new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);//通过BitmapShader很容易自定义各种什么圆角，圆形背景控件
mPaint.setShader(mShader);
canvas.drawCircle(w/2,h/2,radias,mPaint);

注意：要想实现镂空还得，必须在layout：xml布局文件里面指定background如下：

<com.fan.skymusic.SplitLayout
android:background="#00ffffff"
android:id="@+id/topSplit"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.fan.skymusic.SplitLayout>

这里也有个问题搞不懂？

当我这这样设置时镂空的地方成了黑色，也不显示下层控件

<com.fan.skymusic.SplitLayout
android:background="#ffffff"
android:alpha="0"
android:id="@+id/topSplit"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.fan.skymusic.SplitLayout>

（android:background=”#00ffffff”）和（android:background=”#ffffff” android:alpha=”0”） 不应该是一样的吗

demo源代码地址（github新手，文件在app module 里面）：

https://github.com/yifantao/SkyMusic