Android实现三角形气泡效果方式汇总

在开发过程中,我们可能会经常遇到这样的需求样式:

这张图是截取京东消息通知的弹出框,我们可以看到右上方有个三角形的气泡效果,这只是其中一种,三角形的方向还可以是上、下、左、右。

通过截图可以发现,气泡由正三角形和圆角长方形组成,于是可以通过组合来形成三角形气泡的效果,下面我们通过三种方式进行实现。

实现方式:

1、通过.9图进行实现;
2、通过shape方式实现;
3、通过自定义view的方式实现;

实现逻辑:

1、通过.9图进行实现

这种方式就不用说了吧,找你们UI小姐姐切一个.9图,使用即可,不过这种方式的图片需要占一定体积哦。

2、通过shape方式实现

正三角形

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <rotate
      android:fromDegrees="45"
      android:pivotX="-40%"
      android:pivotY="80%">
      <shape android:shape="rectangle">
        <size
          android:width="15dp"
          android:height="15dp" />
        <solid android:color="#ffffff" />
      </shape>
    </rotate>
  </item>
</layer-list>

倒三角形

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item>
    <rotate
      android:fromDegrees="45"
      android:pivotX="135%"
      android:pivotY="15%">
      <shape android:shape="rectangle">
        <size
          android:width="15dp"
          android:height="15dp" />
        <solid android:color="#ffffff" />
      </shape>
    </rotate>
  </item>
</layer-list>

左三角形

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <rotate
      android:fromDegrees="-45"
      android:pivotX="85%"
      android:pivotY="-35%">>
      <shape android:shape="rectangle">
        <size
          android:width="15dp"
          android:height="15dp" />
        <solid android:color="#ffffff" />
      </shape>
    </rotate>
  </item>
</layer-list>

右三角形

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item>
    <rotate
      android:fromDegrees="-45"
      android:pivotX="15%"
      android:pivotY="135%">>
      <shape android:shape="rectangle">
        <size
          android:width="15dp"
          android:height="15dp" />
        <solid android:color="#ffffff" />
      </shape>
    </rotate>
  </item>
</layer-list>

上面就是通过shape方式实现各个方向的代码,这种方式缺点比较明显,如果要变化不同的角的位置需要再写不同的布局。

3、通过自定义view的方式实现

由于是比较简单这里就不讲解每个怎么搞了,可以复制过去直接用

添加自定义属性

<declare-styleable name="TriangleView">
    <attr name="trv_color" format="color" />
    <attr name="trv_direction">
      <enum name="top" value="0" />
      <enum name="bottom" value="1" />
      <enum name="right" value="2" />
      <enum name="left" value="3" />
    </attr>
 </declare-styleable>

自定义代码文件

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);
  }
}

布局文件添加

<com.sjl.keeplive.triange.TriangleView
    android:layout_width="10dp"
    android:layout_height="6dp"
    app:trv_color="@color/FFF"
    app:trv_direction="top" />

通过自定义的方式可以搞定四个方向,而且在代码中也可以使用,动态添加,动态改变颜色,还是比较好的方式。

到此这篇关于Android实现三角形气泡效果方式汇总的文章就介绍到这了,更多相关Android 三角形气泡 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Android Q之气泡弹窗的实现示例

    在Android Q中,用户可以借助气泡,轻松地在设备上任何位置进行多任务处理.气泡内置于"通知"系统中,它会浮动在其他应用的上层,并会跟随用户的移动而移动到屏幕的任何位置,用于取代SYSTEM_ALERT_WINDOW.气泡可以展开显示应用功能和信息,并在不使用时折叠起来.当设备处于已锁定状态或始终保持活动状态,气泡会像通知那样显示.气泡弹窗效果如下图: 一.气泡配置信息  气泡是一种可以选择停用的功能,在应用显示第一个气泡时,系统会弹出权限对话框,提供两种选项: 屏蔽来自您的应用的

  • Android不显示开机向导和开机气泡问题

    修改好的代码下载地址: https://github.com/Vico-H/Launcher •不显示开机向导 -------------------------------------------------------------------------------- 修改Launcher2.java的代码 (文件位置: /alps/packages/apps/Launcher2/src/com/android/launcher2/Launcher.java) 网站查看源码: https:/

  • Android带气泡的第三方Tab选项卡

    效果 依赖 compile 'com.ashokvarma.android:bottom-navigation-bar:1.3.0' OnCreate中初始化 initBottom(); 认选中0 showFragment(0); 然后具体实现 private void showFragment(int position) { FragmentManager supportFragmentManager = getSupportFragmentManager(); FragmentTransac

  • Android贝塞尔曲线初步学习第二课 仿QQ未读消息气泡拖拽黏连效果

    上一节初步了解了Android端的贝塞尔曲线,这一节就举个栗子练习一下,仿QQ未读消息气泡,是最经典的练习贝塞尔曲线的东东,效果如下 附上github源码地址:https://github.com/MonkeyMushroom/DragBubbleView 欢迎star~ 大体思路就是画两个圆,一个黏连小球固定在一个点上,一个气泡小球跟随手指的滑动改变坐标.随着两个圆间距越来越大,黏连小球半径越来越小.当间距小于一定值,松开手指气泡小球会恢复原来位置:当间距超过一定值之后,黏连小球消失,气泡小球

  • Android使用ViewDragHelper实现QQ聊天气泡拖动效果

    QQ聊天气泡拖动效果Android实现代码,供大家参考,具体内容如下 概述 本文的目的是实现类似于QQ消息提醒的气泡的拖拽效果.网上已有大神的实现效果是通过监听控件的OnTouchEvent事件的ACTION_DOWN,ACTION_MOVE,ACTION_UP事件来处理相应的拖拽效果,这里采用ViewDragHelper的方式去实现拖拽,顺便学习了一下ViewDragHelper的使用方式,拖拽时的粘连效果采用贝塞尔曲线来实现. 用ViewDragHelper实现拖拽效果 ViewDragHe

  • Android气泡效果实现方法

    本文实例讲述了Android气泡效果实现方法.分享给大家供大家参考,具体如下: 最近在看以前在eoe上收藏的一些源代码,准备将这些代码加上一些自己的注释,然后贴出来,方便自己日后查阅,和刚入门的人来学习. 今天先看一个气泡窗口,先看一下效果图和目录结构,然后再上代码 通过第一幅图,我们可以看到一个气泡窗口,这个窗口的结构是里面有2个TextView和1个气泡的背景,这个2个TextView放在了overlay_pop.xml文件中,气泡窗口是这个layout的背景,overlay_pop.xml

  • Android未读消息拖动气泡示例代码详解(附源码)

    前言 拖动清除未读消息可以说在很多应用中都很常见,也被用户广泛接受.本文是一个可以供参考的Demo,希望能有帮助. 提示:以下是本篇文章正文内容,下面案例可供参考 最终效果图及思路 实现关键: 气泡中间的两条边,分别是以ab,cd为数据点,G为控制点的贝塞尔曲线. 步骤: 绘制圆背景以及文本:连接情况绘制贝塞尔曲线:另外端点绘制一个圆 关键代码 1.定义,初始化等 状态:静止.连接.分离.消失 在onSizeChanged中初始化状态,固定气泡以及可动气泡的圆心 代码如下(示例): @Overr

  • android 仿微信聊天气泡效果实现思路

    微信聊天窗口的信息效果类似iphone上的短信效果,以气泡的形式展现,在Android上,实现这种效果主要用到ListView和BaseAdapter,配合布局以及相关素材,就可以自己做出这个效果,素材可以下一个微信的APK,然后把后缀名改成zip,直接解压,就可以得到微信里面的所有素材了.首先看一下我实现的效果: 以下是工程目录结构: 接下来就是如何实现这个效果的代码: main.xml,这个是主布局文件,显示listview和上下两部分内容. 复制代码 代码如下: <?xml version

  • Android使用贝塞尔曲线仿QQ聊天消息气泡拖拽效果

    本文实例为大家分享了Android仿QQ聊天消息气泡拖拽效果展示的具体代码,供大家参考,具体内容如下 先画圆,都会吧.代码如下: public class Bezier extends View { private final Paint mGesturePaint = new Paint(); private final Path mPath = new Path(); private float mX1 = 100, mY1 = 150; private float mX2 = 300, m

  • Android实现气泡布局/弹窗效果 气泡尖角方向及偏移量可控

    Android 自定义布局实现气泡弹窗,可控制气泡尖角方向及偏移量. 效果图 实现 首先自定义一个气泡布局. /** * 气泡布局 */ public class BubbleRelativeLayout extends RelativeLayout { /** * 气泡尖角方向 */ public enum BubbleLegOrientation { TOP, LEFT, RIGHT, BOTTOM, NONE } public static int PADDING = 30; public

随机推荐