本文共 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>
如此便绘制完三角形气泡。