博客
关于我
Android 通过 shape 实现三角形气泡效果
阅读量:216 次
发布时间: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-Explain的详解
查看>>
mysql-group_concat
查看>>
MySQL-redo日志
查看>>
MySQL-【1】配置
查看>>
MySQL-【4】基本操作
查看>>
Mysql-丢失更新
查看>>
Mysql-事务阻塞
查看>>
Mysql-存储引擎
查看>>
mysql-开启慢查询&所有操作记录日志
查看>>
MySQL-数据目录
查看>>
MySQL-数据页的结构
查看>>
MySQL-架构篇
查看>>
MySQL-索引的分类(聚簇索引、二级索引、联合索引)
查看>>
Mysql-触发器及创建触发器失败原因
查看>>
MySQL-连接
查看>>
mysql-递归查询(二)
查看>>
MySQL5.1安装
查看>>
mysql5.5和5.6版本间的坑
查看>>
mysql5.5最简安装教程
查看>>
mysql5.6 TIME,DATETIME,TIMESTAMP
查看>>