博客
关于我
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 InnoDB引擎的锁机制详解
查看>>
Mysql INNODB引擎行锁的3种算法 Record Lock Next-Key Lock Grap Lock
查看>>
mysql InnoDB数据存储引擎 的B+树索引原理
查看>>
mysql innodb通过使用mvcc来实现可重复读
查看>>
mysql insert update 同时执行_MySQL进阶三板斧(三)看清“触发器 (Trigger)”的真实面目...
查看>>
mysql interval显示条件值_MySQL INTERVAL关键字可以使用哪些不同的单位值?
查看>>
Mysql join原理
查看>>
MySQL Join算法与调优白皮书(二)
查看>>
Mysql order by与limit混用陷阱
查看>>
Mysql order by与limit混用陷阱
查看>>
mysql order by多个字段排序
查看>>
MySQL Order By实现原理分析和Filesort优化
查看>>
mysql problems
查看>>
mysql replace first,MySQL中处理各种重复的一些方法
查看>>
MySQL replace函数替换字符串语句的用法(mysql字符串替换)
查看>>
mysql replace用法
查看>>
Mysql Row_Format 参数讲解
查看>>
mysql select, from ,join ,on ,where groupby,having ,order by limit的执行顺序和书写顺序
查看>>
MySQL Server 5.5安装记录
查看>>
mysql server has gone away
查看>>