学习水波进度条--自定义view(二)
2017-05-21 本文已影响26人
姬94
帖子太长，我换一个新帖子，以为，两个代码并没有什么重叠的东西，可以分来来讲，
先看之前的intent吧，仅仅是一个，常驻内存用的server，他的，没有了。重点看看FloatWindowManager这个。
FloatViewService.java
FloatWindowManager
//主类名字 是不是感觉，，有点，window的意思呀。
public class FloatWindowManager implements View.OnTouchListener{
//构造方法。
private FloatWindowManager(Context context) {
this.mContext = context;
//看到，window中了吗？这是要干什么？哈哈，就是添加到主窗口中了。
mWindowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
mFloatCircleView = new FloatCircleView(context);
mFloatCircleView.setOnTouchListener(this);
mFloatCircleView.setOnClickListener(new View.OnClickListener() {
//FloatCircleView点击事件
@Override
public void onClick(View view) {
Log.d("tag","onclick");
// Toast.makeText(mContext,"FloatCircleView onclicked",Toast.LENGTH_SHORT).show();
//下面会讲 这三个很重要的方法。
hideFloatCircleView();
showFloatMenuView();
mFloatMenuView.startAnimation();
}
});
mFloatMenuView = new FloatMenuView(context);
//初始化最小手动响应距离
mTouchSlop = ViewConfiguration.get(mContext).getScaledTouchSlop();
}
/**
* 显示浮窗体
*/
public void showFloatCircleView() {
if(mFloatCircleViewLayoutParams == null) {
mFloatCircleViewLayoutParams = new WindowManager.LayoutParams();
//设置宽和高为FloatCircleView的宽和高
mFloatCircleViewLayoutParams.width = mFloatCircleView.getWidth();
mFloatCircleViewLayoutParams.height = mFloatCircleView.getHeight();
//设置对齐方式
mFloatCircleViewLayoutParams.gravity = Gravity.LEFT|Gravity.TOP;
//设置x,y点坐标
mFloatCircleViewLayoutParams.x = 0;
mFloatCircleViewLayoutParams.y = 0;
//设置不可抢占焦点
mFloatCircleViewLayoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE| WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL;
//设置类型为phone
mFloatCircleViewLayoutParams.type = WindowManager.LayoutParams.TYPE_PHONE;
//设置背景颜色类型
mFloatCircleViewLayoutParams.format = PixelFormat.RGBA_8888;
}
// 添加到，window中。
mWindowManager.addView(mFloatCircleView, mFloatCircleViewLayoutParams);
}
/**
* 显示浮窗体
*/
public void showFloatMenuView() {
if(mFloatMenuViewLayoutParams == null) {
mFloatMenuViewLayoutParams = new WindowManager.LayoutParams();
//设置宽和高为FloatCircleView的宽和高
mFloatMenuViewLayoutParams.width = DesityUtils.getScreenWidth(mContext);
mFloatMenuViewLayoutParams.height = DesityUtils.getScreenHeight(mContext)-DesityUtils.getStatubarHeight(mContext);
//设置对齐方式
mFloatMenuViewLayoutParams.gravity = Gravity.LEFT|Gravity.BOTTOM;
//设置x,y点坐标
mFloatMenuViewLayoutParams.x = 0;
mFloatMenuViewLayoutParams.y = 0;
//设置不可抢占焦点
mFloatMenuViewLayoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE| WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL;
//设置类型为phone
mFloatMenuViewLayoutParams.type = WindowManager.LayoutParams.TYPE_PHONE;
//设置背景颜色类型
mFloatMenuViewLayoutParams.format = PixelFormat.RGBA_8888;
}
mWindowManager.addView(mFloatMenuView, mFloatMenuViewLayoutParams);
}
/**
* 处理手势触摸事件 其实手势识别代码，还是比较简单的，很好看
* @param view
* @param event
* @return
*/
@Override
public boolean onTouch(View view, MotionEvent event) {
float x = event.getRawX();
float y = event.getRawY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//记录第一次触摸点的坐标
mLastX = x;
mLastY = y;
mFirstX = x;
mFirstY = y;
break;
case MotionEvent.ACTION_MOVE:
float deltaX = x - mLastX;
float deltay = y - mLastY;
//当手指移动时，更新其layoutParams，更新位置
mFloatCircleViewLayoutParams.x += deltaX;
mFloatCircleViewLayoutParams.y += deltay;
//运动的时候 不停更新位置 mWindowManager.updateViewLayout(mFloatCircleView, mFloatCircleViewLayoutParams);
mLastX = x;
mLastY = y;
//运动的时候 刷新mFloatCircleView，
mFloatCircleView.setDragState(true);
break;
case MotionEvent.ACTION_UP:
//当放开手指的时候，让FloatCircleView移动到左边或右边
//如果处于屏幕中间线的左边则让其移动到左边，如果处理屏幕中间线的右边则让其移动到右边
int width = DesityUtils.getScreenWidth(mContext);
if(x > width/2) {
mFloatCircleViewLayoutParams.x = width - mFloatCircleView.getWidth();
} else {
mFloatCircleViewLayoutParams.x = 0;
}
mWindowManager.updateViewLayout(mFloatCircleView, mFloatCircleViewLayoutParams);
mFloatCircleView.setDragState(false);
//处理拖动与点击事件冲突的解决：当搬运距离大于3的时候，不响应点击事件，否则响应点击事件
Log.d("action_up","can drag "+canDragAction(x - mFirstX, y - mFirstY));
return canDragAction(x - mFirstX, y - mFirstY);
}
return false;
}
}
添加的是一个，mFloatCircleView ，和mFloatMenuView 哎呀，这个是啥，看看吧，
mFloatCircleView 重点代码 有一套自定义 再来一遍
public class FloatCircleView extends View {
//触笔的初始化没有什么特别
private void initPaint() {
//设置画圆的paint的属性
mCirclePaint = new Paint();
mCirclePaint.setColor(mCirclePaintColor);
mCirclePaint.setAntiAlias(true);
mCirclePaint.setDither(true);
mCirclePaint.setStyle(Paint.Style.FILL);
//设置画text的paint的属性
mTextPaint = new Paint();
mTextPaint.setColor(mTextPaintColor);
mTextPaint.setAntiAlias(true);
mTextPaint.setDither(true);
mTextPaint.setStyle(Paint.Style.STROKE);
mTextPaint.setTextSize(mTextSize);
// 图标的后面会用，一个初始化
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.dragging_icon);
mDraggingBitmap = Bitmap.createScaledBitmap(bitmap,mWidth,mHeight,true);
}
//看吧，有画画。。了 代码其实没有什么，画一个圆形，然后上面画一个文字。
@Override
protected void onDraw(Canvas canvas) {
//这里的mDrag 是setDragState 下面的方法修改的
//这里就是图标,和数字的切换
if(mDrag) {
//如果在drag状态则draw draggingbitmap，否则draw circle和text
canvas.drawBitmap(mDraggingBitmap,0,0,null);
} else {
//画圆
canvas.drawCircle(mWidth/2,mWidth/2,mHeight/2,mCirclePaint);
//画text
float textWidth = mTextPaint.measureText(mText);
//draw text起始点
int textX = (int) (getWidth()/2 - textWidth/2);
Paint.FontMetrics metrics = mTextPaint.getFontMetrics();
//获取baseLine离descent的height
float textBaseLineHeight = -(metrics.descent+metrics.ascent)/2;
//因为drawText是从baseLine开始画的
int textY = (int) (getHeight()/2 + textBaseLineHeight);
canvas.drawText(mText,textX,textY,mTextPaint);
}
/ * 设置当前控件是否为拖拽状态 FloatWindowManager 之前
*代码的用意
* @param drag
*/
public void setDragState(boolean drag) {
this.mDrag = drag;
invalidate();
}
}
}
FloatMenuView 代码，我们先看 flow_menu_layout.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#33000000">
<LinearLayout
android:id="@+id/ll_menu_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_alignParentBottom="true"
android:clickable="true"
android:background="#f02f3942">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/fire"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginLeft="10dp"
android:textColor="#ffffff"
android:textSize="20sp"
android:text="悬浮球"/>
</LinearLayout>
// 又出来自定义，，view一会看看是不是很幸福。。。
<com.wanghaisheng.view.floatwindow.FloatProgressView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginBottom="18dp"/>
</LinearLayout>
</RelativeLayout>
简单的可怕的代码，仅仅是一个继承的布局是不是思路的原因仅仅好布局。哈哈。而且LinearLayout也是一个view，可以随意添加windows中。。
public class FloatMenuView extends LinearLayout {
Animation animation;
public FloatMenuView(Context context) {
super(context);
// View menu = LayoutInflater.from(context).inflate(R.layout.flow_menu_layout,this);
View menu = View.inflate(getContext(),R.layout.flow_menu_layout,null);
LinearLayout llMenuRoot = (LinearLayout) menu.findViewById(R.id.ll_menu_root);
animation = AnimationUtils.loadAnimation(context,R.anim.float_menu_in);
animation.setFillAfter(true);
llMenuRoot.setAnimation(animation);
menu.setOnTouchListener(new OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
FloatWindowManager manager = FloatWindowManager.getInstance(getContext());
manager.hideFloatMenuView();
manager.showFloatCircleView();
return false;
}
});
addView(menu);
}
public void startAnimation() {
animation.start();
}
}
自定义的 FloatProgressView 还是继承 ProgressBar 代码我们就看重点的吧。
public class FloatProgressView extends ProgressBar {
//完全的，，，抄袭WaterProgressView 么有是没变化。。哈哈
}
整体的思路很简单，我比较喜欢对代码里面解释，感觉，这样和代码结合，好说话，，哈哈，如果有什么问题，就告诉我。我们一起来，，撸代码呀，，撸出血。
