博客
关于我
Android 通过 shape 实现三角形气泡效果
阅读量:218 次
发布时间:2019-02-28

本文共 4476 字,大约阅读时间需要 14 分钟。

需要实现 UI 给出的下面两种图中带三角形气泡的效果:

这里写图片描述

这里写图片描述

如果使用 .9 图,一方面会增加安装包体积,另一方面,拉伸后可能变形。将气泡分解可知,气泡由 正/倒三角形 和 圆角长方形 组成,于是可以通过组合来形成三角形气泡的效果。

正三角形的 triangle_up.xml 如下:

<?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="16dp"                    android:height="16dp" />                <solid android:color="#7d72ff" />            </shape>        </rotate>    </item></layer-list>

倒三角形的 triangle_down.xml 如下:

<?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="16dp"                    android:height="16dp" />                <solid android:color="#7d72ff" />            </shape>        </rotate>    </item></layer-list>

第一幅图的 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="wrap_content"    android:layout_centerHorizontal="true">    <ImageView        android:id="@+id/iv_triangle"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:src="@drawable/triangle_up" />    <TextView        android:layout_width="180dp"        android:layout_height="42dp"        android:layout_below="@+id/iv_triangle"        android:layout_centerHorizontal="true"        android:background="@drawable/bg_rectangle_corner"        android:gravity="center"        android:text="全新上线啦"        android:textColor="#ffffff"        android:textSize="15sp" /></RelativeLayout>

drawable 中的 bg_rectangle_corner.xml 很简单:

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"       android:shape="rectangle">    <solid android:color="#7d72ff" />    <corners android:radius="6dp" /></shape>

第二幅图的 xml 文件如下:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"                xmlns:app="http://schemas.android.com/apk/res-auto"                xmlns:tools="http://schemas.android.com/tools"                android:layout_width="match_parent"                android:layout_height="match_parent">    <!-- Lottie动画可以忽略 -->      <com.airbnb.lottie.LottieAnimationView        android:id="@+id/animation_view"        android:layout_width="100dp"        android:layout_height="100dp"        android:layout_alignParentBottom="true"        android:layout_alignParentEnd="true"        android:layout_marginBottom="57dp"        app:lottie_autoPlay="true"        app:lottie_fileName="record_guide.json"        app:lottie_loop="true"/>    <ImageView        android:id="@+id/iv_record_icon"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_alignParentEnd="true"        android:layout_marginBottom="50dp"        android:paddingBottom="17dp"        android:paddingLeft="10dp"        android:paddingRight="10dp"        android:paddingTop="10dp"        android:src="@drawable/recommend_record_btn"/>    <TextView        android:id="@+id/tv_record"        android:layout_width="190dp"        android:layout_height="40dp"        android:layout_above="@+id/iv_record_icon"        android:layout_alignParentEnd="true"        android:layout_marginEnd="5dp"        android:layout_marginBottom="8dp"        android:background="@drawable/bg_rectangle_corner"        android:gravity="center"        android:text="点击录制!展示真实的你"        android:textColor="#ffffff"        android:textSize="15sp"        tools:visibility="visible"/>    <ImageView        android:id="@+id/iv_triangle"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentEnd="true"        android:layout_alignTop="@+id/tv_record"        android:layout_marginEnd="42dp"        android:layout_marginTop="40dp"        android:src="@drawable/triangle_down"/></RelativeLayout>

如此便绘制完三角形气泡。

你可能感兴趣的文章
MySQL中地理位置数据扩展geometry的使用心得
查看>>
Mysql中存储引擎简介、修改、查询、选择
查看>>
Mysql中存储过程、存储函数、自定义函数、变量、流程控制语句、光标/游标、定义条件和处理程序的使用示例
查看>>
mysql中实现rownum,对结果进行排序
查看>>
mysql中对于数据库的基本操作
查看>>
Mysql中常用函数的使用示例
查看>>
MySql中怎样使用case-when实现判断查询结果返回
查看>>
Mysql中怎样使用update更新某列的数据减去指定值
查看>>
Mysql中怎样设置指定ip远程访问连接
查看>>
mysql中数据表的基本操作很难嘛,由这个实验来带你从头走一遍
查看>>
Mysql中文乱码问题完美解决方案
查看>>
mysql中的 +号 和 CONCAT(str1,str2,...)
查看>>
Mysql中的 IFNULL 函数的详解
查看>>
mysql中的collate关键字是什么意思?
查看>>
MySql中的concat()相关函数
查看>>
mysql中的concat函数,concat_ws函数,concat_group函数之间的区别
查看>>
MySQL中的count函数
查看>>
MySQL中的DB、DBMS、SQL
查看>>
MySQL中的DECIMAL类型:MYSQL_TYPE_DECIMAL与MYSQL_TYPE_NEWDECIMAL详解
查看>>
MySQL中的GROUP_CONCAT()函数详解与实战应用
查看>>