博客
关于我
Android 通过 shape 实现三角形气泡效果
阅读量:217 次
发布时间: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 ansi nulls_SET ANSI_NULLS ON SET QUOTED_IDENTIFIER ON 什么意思
查看>>
multi swiper bug solution
查看>>
MySQL Binlog 日志监听与 Spring 集成实战
查看>>
MySQL binlog三种模式
查看>>
multi-angle cosine and sines
查看>>
Mysql Can't connect to MySQL server
查看>>
mysql case when 乱码_Mysql CASE WHEN 用法
查看>>
Multicast1
查看>>
mysql client library_MySQL数据库之zabbix3.x安装出现“configure: error: Not found mysqlclient library”的解决办法...
查看>>
MySQL Cluster 7.0.36 发布
查看>>
Multimodal Unsupervised Image-to-Image Translation多通道无监督图像翻译
查看>>
MySQL Cluster与MGR集群实战
查看>>
multipart/form-data与application/octet-stream的区别、application/x-www-form-urlencoded
查看>>
mysql cmake 报错,MySQL云服务器应用及cmake报错解决办法
查看>>
Multiple websites on single instance of IIS
查看>>
mysql CONCAT()函数拼接有NULL
查看>>
multiprocessing.Manager 嵌套共享对象不适用于队列
查看>>
multiprocessing.pool.map 和带有两个参数的函数
查看>>
MYSQL CONCAT函数
查看>>
multiprocessing.Pool:map_async 和 imap 有什么区别?
查看>>