您好,登录后才能下订单哦!
自定义view--TipView
TipView其实就是类似QQ长按消息弹出来的横放的提示框。
通过看书和参考各位大神的博客(再次对大神表示恭敬),我用了一下午时间写完了这么一个view。
先来看图:
1 自定义TipView思路
1 首先我们考虑是继承View还是ViewGroup
其实TipView直观看更像是一个group,里面有子view。但其实我们并不需要继承ViewGroup,因为我们不用像LinearLayout那样在布局文件里面去添加子view,而且TipView的item我们用文字就好。如果继承于Group我们还要考虑onLayout的问题,为了简单我直接继承自View。
2 重写方法
TipView要像PopupWindow、Dialog一样显示在Activity上而不是添加到父容器中,原因是如果创建后添加到父容器中去托管的话,父容器的布局规则会影响我们TipView的显示效果。所以我们要使用WindowManager来把TipView添加到外层布局,并且要充满屏幕,i原因为我们要点击tem之外的地方使TipView消失。所以view大小是固定充满屏幕的,不需要重写onMeasure。
需要重写onDraw来绘制view。
3 显示位置
TipView主要分两部分,一部分是三角标,一部分是带有圆角的主体。
当我们点击后,三角标顶点始终在点击位置上方一定距离(如果顶点定位在点击位置,会导致手指挡住一部分三角,用户体验度不佳),并且主体不要与屏幕左右边界碰撞,当要遮挡ToolBar时向下绘制。
2 定义变量
public static final int TOP = 0;//从点击位置上面绘制 public static final int DOWN = 1;//...下面... private int mItemWidth;//item宽 private int mItemHeight;//item高 private int mTriaHeight;//三角的高度 private int mHalfTriaWidth;//三角的半宽 private int mTriaAcme;//三角的顶点 private int mTriaItemBorder;//三角的顶点 private int realLeft;//窗口距左边的值 private int marginSide;//窗口距左右边的值,防止出现的窗口紧贴边界 private int mSeparateLineColor = Color.WHITE; private int mTextSize;//选项文字的大小 private int mTextColor;//选项文字的颜色 private int mItemSeparation;//分割线宽度; private int mRadius;//圆角 private List<TextItem> items;//存放item的集合 private List<Rect> mItemRectList = new ArrayList<>(); // 存储每个方块 private Paint mPaint;//画笔 private Paint mSeparationPaint;//分割线画笔 private Paint mSPaint;//三角的画笔 private Path mPath;//路径 private int x, y;//点击的位置 private ViewGroup viewRoot;//父容器 private int location = TOP;//绘制位置 private int choose = -1;//点击的item private int mToolbarBottom;//Toolbar下边距屏幕上距离 private WindowManager windowManager; private WindowManager.LayoutParams layoutParams;//windowManger布局管理器,为了像Dialog一样在Activity弹出,而不是依附于某个group private onItemCilckLinener itemCilckLinener; private Context context = null;
3 构造函数以及初始化方法
private MyTipView(Context context, int x, int y, ViewGroup viewRoot, List<TextItem> items) { super(context); this.viewRoot = viewRoot; this.context = context; this.x = x; this.y = y; this.items = items; windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); layoutParams = new WindowManager.LayoutParams(); layoutParams.width = WindowManager.LayoutParams.MATCH_PARENT;//窗口的宽 layoutParams.height = WindowManager.LayoutParams.MATCH_PARENT;//窗口的高 //设置LayoutParams的属性 layoutParams.type = WindowManager.LayoutParams.TYPE_APPLICATION_PANEL;//该Type描述的是形成的窗口的层级关系,下面会详细列出它的属性 layoutParams.format = PixelFormat.TRANSLUCENT;//不设置这个弹出框的透明遮罩显示为黑色 //layoutParams.token = viewRoot.getWindowToken();//设置Token int[] location = new int[2]; viewRoot.getLocationInWindow(location);//获取在当前窗口内的绝对坐标 viewRoot.getLocationOnScreen(location);//获取在整个屏幕内的绝对坐标 mToolbarBottom = location[1];//[0]是x轴坐标,[1]y轴 windowManager.addView(this, layoutParams); init(); initView(); } //初始化画笔 private void init() { mPaint = new Paint(); mSPaint = new Paint(); mPath = new Path(); mSeparationPaint = new Paint(); mSeparationPaint.setStyle(Paint.Style.FILL); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.FILL); mPaint.setTextSize(Sp2Px(14)); mPaint.setColor(Color.BLACK); mSPaint.setAntiAlias(true); mSPaint.setStyle(Paint.Style.FILL); mSPaint.setColor(Color.BLACK); //初始变量 mItemWidth = Dp2Px(50); mItemHeight = Dp2Px(48); mTriaHeight = Dp2Px(10);//三角的高度 mHalfTriaWidth = Dp2Px(6);//三角的半宽 mTriaAcme = Dp2Px(6);//三角的顶点 marginSide = Dp2Px(4);//左右边距 mItemSeparation = Dp2Px(1);//分割线宽度; mRadius = Dp2Px(6);//圆角 mTextColor = Color.WHITE; mTextSize = Sp2Px(14); }
4 计算三角顶点位置
private void initView() { int count = items.size(); int width = count * mItemWidth + mItemSeparation * (count - 1); int mScreenWidth = getResources().getDisplayMetrics().widthPixels; if (y - mToolbarBottom < (mItemHeight + mTriaHeight + mTriaAcme)) { location = DOWN;//下方显示 mTriaAcme += y;//设置三角顶点y轴值; mTriaItemBorder = mTriaAcme + mTriaHeight;//计算三角方块交界y } else { location = TOP; mTriaAcme = y - mTriaAcme;//计算顶点位置y轴值 mTriaItemBorder = mTriaAcme - mTriaHeight;//计算三角方块交界y值 } if (x < (width / 2 + marginSide)) { realLeft = marginSide;//计算最左侧距离屏幕左边距离,左边撑不下 } else if ((mScreenWidth - x) < (width / 2 + marginSide)) { realLeft = mScreenWidth - marginSide - width;//计算最左侧距离屏幕左边距离,右边撑不下 } else { realLeft = x - width / 2;//计算最左侧距离屏幕左边距离,触碰不到边界 } }
5 设置背景为透明
private void drawBackground(Canvas canvas) { canvas.drawColor(Color.TRANSPARENT); }
6 绘制三角
private void drawTop(Canvas canvas) { //绘制三角 mPath.reset(); mPath.moveTo(x, mTriaAcme); mPath.lineTo(x - mHalfTriaWidth, mTriaAcme - mTriaHeight); mPath.lineTo(x + mHalfTriaWidth, mTriaAcme - mTriaHeight); canvas.drawPath(mPath, mSPaint); MyDraw(canvas, mTriaItemBorder - mItemHeight); } private void drawDown(Canvas canvas) { //绘制三角 mPath.reset();//清理路径 mPath.moveTo(x, mTriaAcme); mPath.lineTo(x - mHalfTriaWidth, mTriaAcme + mTriaHeight); mPath.lineTo(x + mHalfTriaWidth, mTriaAcme + mTriaHeight); canvas.drawPath(mPath, mSPaint); //绘制方块 MyDraw(canvas, mTriaItemBorder); }
7 绘制方块
绘制时因为第一个和最后一个方块带有圆角,单独绘制
private void MyDraw(Canvas canvas, int t) { //绘制item int count = items.size(); int width = (count - 1) * mItemSeparation + count * mItemWidth; int l = realLeft + mItemWidth + mItemSeparation; mItemRectList.clear(); for (int i = 0; i < items.size(); i++) { if (choose == i) {//当前是否被点击,改变颜色 mPaint.setColor(Color.DKGRAY); } else { mPaint.setColor(Color.BLACK); } if (i == 0) {//绘制第一个带圆角的item mPath.reset(); mPath.moveTo(realLeft + mItemWidth, t); mPath.lineTo(realLeft + mRadius, t); mPath.quadTo(realLeft, t, realLeft, t + mRadius); mPath.lineTo(realLeft, t + mItemHeight - mRadius); mPath.quadTo(realLeft, t + mItemHeight, realLeft + mRadius, mItemHeight + t); mPath.lineTo(realLeft + mItemWidth, t + mItemHeight); canvas.drawPath(mPath, mPaint); mSeparationPaint.setColor(mSeparateLineColor); canvas.drawLine(realLeft + mItemWidth, t, realLeft + mItemWidth, t + mItemHeight, mSeparationPaint); } else if (i == (items.size() - 1)) {//绘制最后一个 mPath.reset(); mPath.rMoveTo(realLeft + width - mItemWidth, t); mPath.lineTo(realLeft + width - mRadius, t); mPath.quadTo(realLeft + width, t, realLeft + width, t + mRadius); mPath.lineTo(realLeft + width, t + mItemHeight - mRadius); mPath.quadTo(realLeft + width, t + mItemHeight, realLeft + width - mRadius, t + mItemHeight); mPath.lineTo(realLeft + width - mItemWidth, t + mItemHeight); canvas.drawPath(mPath, mPaint); } else {//绘制中间方块和分割线 mPath.reset(); mPath.moveTo(l, t); mPath.lineTo(l + mItemWidth, t); mPath.lineTo(l + mItemWidth, t + mItemHeight); mPath.lineTo(l, t + mItemHeight); canvas.drawPath(mPath, mPaint); canvas.drawLine(l + mItemWidth, t, l + mItemWidth, t + mItemHeight, mSeparationPaint); l += mItemWidth + mItemSeparation; } mItemRectList.add(new Rect(realLeft + i * (mItemSeparation + mItemWidth), t, realLeft + i * (mItemSeparation + mItemWidth) + mItemWidth, t + mItemHeight)); } }
最后一行代码
用一个List来存放Rect(矩形),这些矩形对应的是每一个item的方块,但是并没有绘制出来,只是存放起来,矩形是为了在绘制文字的时候提供文字居中时用到的。
8 绘制文字
private void drawTitle(Canvas canvas) { for (int i = 0; i < items.size(); i++) { Rect rect = mItemRectList.get(i);//用于文字居中 //mPaint.setColor(Color.WHITE); Paint p = new Paint(Paint.ANTI_ALIAS_FLAG); p.setAntiAlias(true); p.setStrokeWidth(3); int s = Dp2Px(items.get(i).getTextSize()); p.setTextSize(mTextSize); if (s != 0)//如果在TextItem中设置了size,就是用设置的size p.setTextSize(s); p.setColor(mTextColor); Paint.FontMetricsInt fontMetricsInt = p.getFontMetricsInt(); p.setTextAlign(Paint.Align.CENTER); int baseline = (rect.bottom + rect.top - fontMetricsInt.bottom - fontMetricsInt.top) / 2;//文字居中,基线算法 canvas.drawText(items.get(i).getTitle(), rect.centerX(), baseline, p); } }
9 点击变色,以及点击事件实现
@Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: for (int i = 0; i < items.size(); i++) { if (itemCilckLinener != null && isPointInRect(new PointF(event.getX(), event.getY()), mItemRectList.get(i))) { choose = i;//记录点击item编号 Rect rect = mItemRectList.get(i); postInvalidate(rect.left, rect.top, rect.right, rect.bottom);//刷新视图 return true; } } removeView();//点击item以外移除 return false; case MotionEvent.ACTION_UP: for (int i = 0; i < items.size(); i++) { if (itemCilckLinener != null && isPointInRect(new PointF(event.getX(), event.getY()), mItemRectList.get(i))) { if (i == choose) {//与down的item一样时才触发 itemCilckLinener.onItemCilck(items.get(i).getTitle(), i);//触发点击事件 removeView(); return true; } } else {//点下后移动出item,初始化视图 postInvalidate();//刷新视图 } } choose = -1;//重置 return false; } return false; } /** * 判断这个点有没有在矩形内 * * @param pointF * @param targetRect * @return */ private boolean isPointInRect(PointF pointF, Rect targetRect) { if (pointF.x < targetRect.left) { return false; } if (pointF.x > targetRect.right) { return false; } if (pointF.y < targetRect.top) { return false; } if (pointF.y > targetRect.bottom) { return false; } return true; }
10 Builder模式创建
public static class Builder { private List<TextItem> items = new ArrayList<>(); private int x = 0, y = 0; private Context context; private ViewGroup viewRoot; private onItemCilckLinener itemCilckLinener; private int mRadius; public Builder(Context context, ViewGroup viewRoot) { this.context = context; this.viewRoot = viewRoot; } public Builder addItem(TextItem item) { items.add(item); return this; } public Builder setmRadius(int radius) { mRadius = radius; return this; } public Builder setxAndy(int x, int y) { this.x = x; this.y = y; return this; } public Builder setOnItemClickLinener(onItemCilckLinener itemClickLinener) { this.itemCilckLinener = itemClickLinener; return this; } public MyTipView create() { if (items.size() == 0) { try { throw new Exception("item count is 0"); } catch (Exception e) { e.printStackTrace(); } } MyTipView myTipView = new MyTipView(context, x, y, viewRoot, items); myTipView.setItemCilckLinener(itemCilckLinener); if (mRadius != 0) myTipView.setRadius(mRadius); return myTipView; } }
11 item
//TipView的item public static class TextItem { private String title; private int textSize; private int textColor = Color.WHITE; public TextItem(String title) { this.title = title; } public TextItem(String title, int textSize) { this.title = title; this.textSize = textSize; } public TextItem(String title, int textSize, int textColor) { this.title = title; this.textSize = textSize; this.textColor = textColor; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public int getTextSize() { return textSize; } public void setTextSize(int textSize) { this.textSize = textSize; } public int getTextColor() { return textColor; } public void setTextColor(int textColor) { this.textColor = textColor; } }
12 使用示例
MyTipView.Builder builder = new MyTipView.Builder(this, linearLayout); builder.addItem(new MyTipView.TextItem("1")) .addItem(new MyTipView.TextItem("2")) .addItem(new MyTipView.TextItem("3")) .addItem(new MyTipView.TextItem("4")) .setxAndy((int) x, (int) y) .setOnItemClickLinener(new MyTipView.onItemCilckLinener() { @Override public void onItemCilck(String title, int i) { Toast.makeText(MainActivity.this, title, Toast.LENGTH_SHORT).show(); } }) .create();
13 源码
https://github.com/liujiakuoyx/learn/blob/master/MyTipView.java
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持亿速云。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。