android气泡样式图片,Android实现三角形气泡效果方式汇总
在开发过程中,我们可能会经常遇到这样的需求样式:
这张图是截取京东消息通知的弹出框,我们可以看到右上方有个三角形的气泡效果,这只是其中一种,三角形的方向还可以是上、下、左、右。
通过截图可以发现,气泡由正三角形和圆角长方形组成,于是可以通过组合来形成三角形气泡的效果,下面我们通过三种方式进行实现。
实现方式:
1、通过.9图进行实现;
2、通过shape方式实现;
3、通过自定义view的方式实现;
实现逻辑:
1、通过.9图进行实现
这种方式就不用说了吧,找你们UI小姐姐切一个.9图,使用即可,不过这种方式的图片需要占一定体积哦。
2、通过shape方式实现
正三角形
android:fromDegrees="45"
android:pivotX="-40%"
android:pivotY="80%">
android:width="15dp"
android:height="15dp" />
倒三角形
android:fromDegrees="45"
android:pivotX="135%"
android:pivotY="15%">
android:width="15dp"
android:height="15dp" />
左三角形
android:fromDegrees="-45"
android:pivotX="85%"
android:pivotY="-35%">>
android:width="15dp"
android:height="15dp" />
右三角形
android:fromDegrees="-45"
android:pivotX="15%"
android:pivotY="135%">>
android:width="15dp"
android:height="15dp" />
上面就是通过shape方式实现各个方向的代码,这种方式缺点比较明显,如果要变化不同的角的位置需要再写不同的布局。
3、通过自定义view的方式实现
由于是比较简单这里就不讲解每个怎么搞了,可以复制过去直接用
添加自定义属性
自定义代码文件
public class TriangleView extends View {
private static final int TOP = 0;
private static final int BOTTOM = 1;
private static final int RIGHT = 2;
private static final int LEFT = 3;
private static final int DEFUALT_WIDTH = 10;
private static final int DEFUALT_HEIGHT = 6;
private static final int DEFUALT_COLOR = R.color.FFF;
private Paint mPaint;
private int mColor;
private int mWidth;
private int mHeight;
private int mDirection;
private Path mPath;
public TriangleView(final Context context) {
this(context, null);
}
public TriangleView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public TriangleView(final Context context, final AttributeSet attrs, final int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.TriangleView, 0, 0);
mColor = typedArray.getColor(R.styleable.TriangleView_trv_color, ContextCompat.getColor(getContext(), DEFUALT_COLOR));
mDirection = typedArray.getInt(R.styleable.TriangleView_trv_direction, mDirection);
typedArray.recycle();
mPaint.setColor(mColor);
}
private void init() {
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.FILL);
mPath = new Path();
mDirection = TOP;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
mWidth = MeasureSpec.getSize(widthMeasureSpec);
mHeight = MeasureSpec.getSize(heightMeasureSpec);
final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
final int heightMode = MeasureSpec.getMode(heightMeasureSpec);
if (mWidth == 0 || widthMode != MeasureSpec.EXACTLY) {
mWidth = (int) PixelUtil.dp2px(DEFUALT_WIDTH);
}
if (mHeight == 0 || heightMode != MeasureSpec.EXACTLY) {
mHeight = (int) PixelUtil.dp2px(DEFUALT_HEIGHT);
}
setMeasuredDimension(mWidth, mHeight);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
switch (mDirection) {
case TOP:
mPath.moveTo(0, mHeight);
mPath.lineTo(mWidth, mHeight);
mPath.lineTo(mWidth / 2, 0);
break;
case BOTTOM:
mPath.moveTo(0, 0);
mPath.lineTo(mWidth / 2, mHeight);
mPath.lineTo(mWidth, 0);
break;
case RIGHT:
mPath.moveTo(0, 0);
mPath.lineTo(0, mHeight);
mPath.lineTo(mWidth, mHeight / 2);
break;
case LEFT:
mPath.moveTo(0, mHeight / 2);
mPath.lineTo(mWidth, mHeight);
mPath.lineTo(mWidth, 0);
break;
default:
break;
}
mPath.close();
canvas.drawPath(mPath, mPaint);
}
}
布局文件添加
android:layout_width="10dp"
android:layout_height="6dp"
app:trv_color="@color/FFF"
app:trv_direction="top" />
通过自定义的方式可以搞定四个方向,而且在代码中也可以使用,动态添加,动态改变颜色,还是比较好的方式。
到这里就完成啦.
android气泡样式图片,Android实现三角形气泡效果方式汇总相关推荐
- Android带三角形的弹窗,Android实现三角形气泡效果方式汇总
在开发过程中,我们可能会经常遇到这样的需求样式: 这张图是截取京东消息通知的弹出框,我们可以看到右上方有个三角形的气泡效果,这只是其中一种,三角形的方向还可以是上.下.左.右. 通过截图可以发现,气泡 ...
- android 点击图片动画效果,Android仿微信图片点击全屏效果
废话不多说,先看下Android图片点击全屏效果: 先是微信的 再是模仿的 先说下实现原理,再一步步分析 这里总共有2个Activity一个就是主页,一个就是显示我们图片效果的页面,参数通过Inten ...
- android坐标判断三角形,Android实现三角形气泡效果方式汇总
在开发过程中,我们可能会经常遇到这样的需求样式: 这张图是截取京东消息通知的弹出框,我们可以看到右上方有个三角形的气泡效果,这只是其中一种,三角形的方向还可以是上.下.左.右. 通过截图可以发现,气泡 ...
- Android实现三角形气泡效果方式汇总
在开发过程中,我们可能会经常遇到这样的需求样式: 这张图是截取京东消息通知的弹出框,我们可以看到右上方有个三角形的气泡效果,这只是其中一种,三角形的方向还可以是上.下.左.右. 通过截图可以发现,气泡 ...
- Android实现三角形气泡效果方式汇总,高级安卓面试题及答案2019
通过截图可以发现,气泡由正三角形和圆角长方形组成,于是可以通过组合来形成三角形气泡的效果,下面我们通过三种方式进行实现. 实现方式: 1.通过.9图进行实现: 2.通过shape方式实现: 3.通过自 ...
- android自适应拉伸图片,Android 启动页-解决图片被拉伸和压缩问题,适配虚拟导航栏...
Android 启动页设置非常简单 //styles.xml 设置主题 @drawable/bg_splash true //activity使用主题,这时点击app图标,就会显示@drawable/ ...
- android jar 加入图片,Android动态加载外部jar包及jar包中图片等资源文件
Android动态加载外部jar包及jar包中图片等资源文件 Android应用程序由Java开发,因此Java中许多实用的特性,在Android中也有体现.动态加载Class,也就是外部jar包,在 ...
- android生成png图片,Android 中将 base64图片 解码为.png图片
android 中将 "base64图片" 解码为".png"图片 参考: 方法一 String base64Img = ""; // 若包 ...
- android 聊天背景图片,Android 实现从本地读取图片更改聊天背景
现在很多社交软件都有这个功能,因为本次我参加一个比赛也是要做一个社交软件,所以我就"画蛇添足"的添加了这个一个功能,因为我也是个Android初学者,所以说修改bug浪费了我至少1 ...
最新文章
- 給曾經的三年,寫點什么吧。-紀念華軟
- 华为使用网线通过浏览器登录AC6005的Web网管
- 很实用的一篇HTTP状态码
- Spring : Spring Aop JDK和CGLIB动态代理调用过程
- 2013阿里技术嘉年华:阿里数据同步前世今生
- 【路由优化】基于能量均衡高效的LEACH协议改进算法附matlab代码
- cloudmusic:网易云爬虫
- mysql省市区表带简称_mysql地区数据库表带地区编码和上级id
- 邵阳职院计算机专业怎么样,邵阳市古峰职业学校怎么样?
- 数据分析师细分岗位方向有哪些?
- 权威发布|2020年11月份全国铝合金模板PMI指数出炉,请查收!
- 电商网站后台九大功能模块详解
- HDU5855(最大权闭合图构图技巧+裸的最大流)
- 细数魔兽争霸作弊工具排行
- java ascii码大小写转换_使用「ASCII」转换大小写
- ps打开图片的三种方式 同步部分基本操作方式
- 读计算机带笔记本还是台式,选台式机还是选笔记本?这里有点心得告诉你
- 机械键盘恢复出厂fn,机械键盘构成-求助,机械键盘fn键的解决方法
- java读取文件的字节数据
- 银河麒麟服务器操作系统V10搭建内网YUM源服务器
热门文章
- linux网络编程中端口号和ip地址转换方法
- php订阅号网页登录,微信订阅号怎么使用网页授权登录
- 玻色量子CEO文凯受邀出席首经贸金融学院系列讲座
- 前端三刺客---JS(WebAPI)
- compat-mysql安装_Centos7 rpm方式安装Percona Mysql 8
- Realtek 2.5G USB网卡RTL8156B-CG支持免驱简介
- Unity 径向模糊 简易解决方案
- 洛谷P3387 【模板】缩点(tarjan)
- Kafka 2.8.0 正式发布,增加了哪些新特性?
- Linux下使用crontab来执行定时任务计划----执行每晚12点多执行移动log日志文件操作