博客
关于我
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 Xtrabackup 安装、备份、恢复
查看>>
mysql [Err] 1436 - Thread stack overrun: 129464 bytes used of a 286720 byte stack, and 160000 bytes
查看>>
MySQL _ MySQL常用操作
查看>>
MySQL – 导出数据成csv
查看>>
MySQL —— 在CentOS9下安装MySQL
查看>>
MySQL —— 视图
查看>>
mysql 不区分大小写
查看>>
mysql 两列互转
查看>>
MySQL 中开启二进制日志(Binlog)
查看>>
MySQL 中文问题
查看>>
MySQL 中日志的面试题总结
查看>>
mysql 中的all,5分钟了解MySQL5.7中union all用法的黑科技
查看>>
MySQL 中的外键检查设置:SET FOREIGN_KEY_CHECKS = 1
查看>>
Mysql 中的日期时间字符串查询
查看>>
mysql 中索引的问题
查看>>
MySQL 中锁的面试题总结
查看>>
MySQL 中随机抽样:order by rand limit 的替代方案
查看>>
MySQL 为什么需要两阶段提交?
查看>>
mysql 为某个字段的值加前缀、去掉前缀
查看>>
mysql 主从
查看>>