持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第9天,点击查看活动详情
Android中点9图的使用
前言
点九图是 Android 开发的必备知识了,把一个png图片转换拿为点9图之后,它的四周有一圈1px的边框,设置这些边框就可以定义图片中可扩展部分和不变的部分。
我发现很多同学都只会定义left和top的边框。不懂right和bottom的作用,这里我单独说下并截图详细说明不同的设置有哪些不同的效果。
如何定义
可以看到一张点9图如下:
定义不同的高度,我们看看拉伸的效果:
<FrameLayout
android:background="@drawable/item_white_shadow_bg"
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:background="@color/gray"
android:text="查看内部空间"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<FrameLayout
android:background="@drawable/item_white_shadow_bg"
android:layout_width="match_parent"
android:layout_height="100dp">
<TextView
android:background="@color/gray"
android:text="查看内部空间"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<FrameLayout
android:background="@drawable/item_white_shadow_bg"
android:layout_width="match_parent"
android:layout_height="200dp">
<TextView
android:background="@color/gray"
android:text="查看内部空间"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
复制代码
效果:
可以看到背景的灰色,并没有铺满整个点9图背景,不是别的问题,是我们的自己的图有问题,因为我们的图有间距,外层有一些阴影。我们修改让它可以充满真个布局呢?
答案就是right和bottom,它们定义的是内容填充的范围,而我们最常用的left和top的边框只是定义可以可扩展拉伸的范围。我们修改点9图如下,再次使用看看效果:
可以看到上下左右的点9图都设置了,效果:
可以看到这样就能把内容沾满了,不管是什么样的点9图都可以这么设置。
再设置一个点9图如下:
效果如下:
到此大家就会了left和top的设置和right和bottom的设置效果了,另外一点这些线只是设置范围,并不是一定要连续的设置的。如下图气泡背景的点9图
如果不这么设置宽度就会变形了,那么right的高度大家可以看看 一个充满全部高度,一个是内容宽度高度,大家看效果图就能很明显的看出效果:
布局:
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<FrameLayout
android:background="@drawable/popwindow_bg"
android:layout_width="150dp"
android:layout_height="65dp">
<TextView
android:textColor="@color/white"
android:gravity="center"
android:text="特殊的点9图设置1"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
<FrameLayout
android:layout_marginLeft="@dimen/d_15dp"
android:background="@drawable/popwindow_bg2"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="65dp">
<TextView
android:textColor="@color/white"
android:gravity="center"
android:text="特殊的点9图设置2"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</FrameLayout>
</LinearLayout>
复制代码
可以看到文本都是同样的布局,居中展示的,效果如下:
总结
现在的设计师真的很喜欢圆角加阴影,搞这些效果真是令Android开发者头大,还好有点9能很方便的实现,常用的就是left和top的设置和right和bottom设置这些不同的效果,掌握了之后图片就任你操作了。
需要注意的是带有圆角的点9图制作之后可能出现圆角与效果图圆角不符合的问题,这里需要找对drawable中的倍数图片,不同的倍数图片做出的点9图圆角都是不一致的,如果还是不行,需要找设计师协商制作圆角的。
好了,点9图的使用还是很简单的额,如果有错漏或有疑问都可以在评论区指出。
觉得本文不错,还请点赞
支持一下!
到此完结!