Android中一些你可能没注意的小效果实现

我就是我 2022-07-12 06:50 143阅读 0赞

## Android中一些你可能没注意的小效果实现 ##

*2016-12-19 唯鹿* [ 鸿洋][Link 1]

本文由唯鹿投稿。

唯鹿的博客地址：

http://blog.csdn.net/qq\_17766199

--------------------

## EditView的自定义样式 ##

## 其实这部分大家一定不陌生，通常默认的样式都与我们的设计样式有出入，那么就需要我们自定义，通常我们使用Android:background="xxx" 来自定义。常见的我就不重复啰嗦了，下面介绍一些特殊的使用。 ##

首先看看默认样式（SdkVersion=23，安卓6.0）：

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1][]

文字选择操作时：

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 1][]

文字选中时：

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 2][]

###     ###

### **1.修改光标颜色** ###

修改光标的颜色很简单，只需要使用android:textCursorDrawable="XXX" 属性。

首先我们自定义drawable，cursor.xml

![640_wx_fmt_png_wxfrom_5_wx_lazy_1][]

使用：

![Image 1][]

效果图：

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 3][]

### **2.修改选中图标** ###

这个图标就是默认样式的2图与3图中的墨绿色水滴状图标。同样也很简单，直接上代码。

![640_wx_fmt_png_wxfrom_5_wx_lazy_1 1][]

效果：

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 4][]

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 5][]

PS:因为没有合适的图片所以左右设置的都是一样的，理解一下哈！

是不是还觉得有点别扭，文字的选中颜色与EditView默认的下划线还是墨绿色，其实改起来也很简单。加上下面两行代码。

android:backgroundTint="#9bd435"     
    android:textColorHighlight="#9bd435"

最终自定义效果：

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 6][]

**3.使用Material Design主题属性**

首先了解一下Material Design 各个属性。这里有张在网上找来的图，此图一目了然。

![640_wx_fmt_png_wxfrom_5_wx_lazy_1 2][]

那么其实就简单了，在我们的主题中加入colorAccent即可。

效果图：

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 7][]

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 8][]

我在自己的手机的应用中发现使用1、2方法去自定义的只有UC浏览器，其中微信和淘宝直接使用的默认样式。支付宝和QQ等大多数使用了3方法，毕竟简单，效果也不错。

## Scrollbar自定义样式 ##

## 首先看看默认样式（SdkVersion=23，安卓6.0）： ##

![640_wx_fmt_png_wxfrom_5_wx_lazy_1 3][]

效果图：

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 9][]

自定义滚动条首先我们要自定义drawable，scrollbar.xml自定义代码：

![640_wx_fmt_png_wxfrom_5_wx_lazy_1 4][]

使用scrollbarThumbVertical：

![640_wx_fmt_png_wxfrom_5_wx_lazy_1 5][]

效果图：

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 10][]

当然水平方向的滚动条也是可以自定义的，同时这些也都适用于ListView、RecyclerView。

android:scrollbars="horizontal"
    android:scrollbarThumbHorizontal="xxx"

最后还有一个android:scrollbarStyle="xxx"，可以设置滚动条的位置。默认是insideOverlay，下面我直接上相应设置对应的效果图。

insideInset：（位置在padding内，会插入在View后面，不会遮挡View）

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 11][]

outsideOverlay：（位置在padding外，覆盖在View上，如果滚动条比padding大会遮挡View）

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 12][]

outsideInset：（位置在padding外，会插入在View后面，不会遮挡View）

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 13][]

最后两张图可能乍一看是一样的，其实仔细看button距滚动条的位置其实是不一样的。

## **去除滑动尽头阴影效果** ##

阴影如图：

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 14][]

去除非常简单，加上android:overScrollMode="never" 属性即可。

##     ##

## clipChildren属性的使用 ##

android:clipChildren的意思是是否允许子View超出父View。好像有点懵，那我们直接上例子。

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 15][]

图中是现在大多外卖app都会有的一个购物车效果。其中红框中的部分高度略高于旁边的View。那么这时就可以使用clipChildren来实现。首先在布局根节点设置android:clipChildren="false"，在使用android:layout\_gravity="xxx"控制超出部分。

代码：

![640_wx_fmt_png_wxfrom_5_wx_lazy_1 6][]

效果图：

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 16][]

是不是挺简单，如果是你？你会怎样实现呢？

## 点九图(.9.png)的使用 ##

## 接着上面的购物车效果，在图中是不是有一个代表购买商品数量的数字。如果此时一个土豪一次买了上百份的外卖，上面的效果会如何？我就试了试，得到了下面的效果： ##

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 17][]

可以清楚地看到原本的圆形被横向拉伸了。。。那就说明这个圆形图标不是点九图。那么我们来制作张。

大家使用Studio可以很方便的去制作，首先右键图片，会弹出以下菜单：

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 18][]

点击Create 9-Patch file... 创建点九图片。

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 19][]

上图就是最终完成的图片，在上面我有标注各个位置的含义。

替换图片后现在再来看看效果：

![640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 20][]

是不是看起来好多了。

其实上面介绍的这些内容都是很细节的东西，一般不太会注意到的，一般项目也不太常用。分享出来以备不时之需。最后大家多多点赞哈！

--------------------

[Link 1]: http://mp.weixin.qq.com/s?__biz=MzAxMTI4MTkwNQ==&mid=2650821745&idx=1&sn=0f9657afc5c190e8f4bbb584c9f8e5b3&chksm=80b780efb7c009f9386d9b6abd32d3b79eef455cad083b5f00a4f0c00db0d15f7947c3eb85f8&mpshare=1&scene=23&srcid=0215BlfXlD8tAqhV8ruWuV67##
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1]: /images/20220711/6dc5a97ca10a4e8496f0a1487f842860.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 1]: /images/20220711/bea766abca4f46e7bc953cf7d010e6c6.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 2]: /images/20220711/898f7925daf343aa8fa2c9e4568e8383.png
[640_wx_fmt_png_wxfrom_5_wx_lazy_1]: /images/20220711/2409e07caff84de6824a74f707405afe.png
[Image 1]: 
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 3]: /images/20220711/8d1438adceae479ca2c8fa2abb1cbfe3.png
[640_wx_fmt_png_wxfrom_5_wx_lazy_1 1]: /images/20220711/7ef9c732315c4a20935b28a3eb1be132.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 4]: /images/20220711/a10b78e0d07244c7be553653a51af426.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 5]: /images/20220711/c536e2397a7e4d4c9dfd090bd566fee0.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 6]: /images/20220711/3bd093dd7977494893aba34ed035f384.png
[640_wx_fmt_png_wxfrom_5_wx_lazy_1 2]: /images/20220711/6f28067128ac465e8fee182a4195ef85.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 7]: /images/20220711/e1cd38ddf4734663bb6417cef2da4736.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 8]: /images/20220711/0852e80ab12a458283ed2c31870d7928.png
[640_wx_fmt_png_wxfrom_5_wx_lazy_1 3]: /images/20220711/286f95eeca664f0da23d5623426cd19b.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 9]: /images/20220711/a877b5f58c99458795b4f2ad771e3c9b.png
[640_wx_fmt_png_wxfrom_5_wx_lazy_1 4]: /images/20220711/1a0bad5fc0ed4220945b88dc66a1af45.png
[640_wx_fmt_png_wxfrom_5_wx_lazy_1 5]: /images/20220711/2e1c86ba3e084fea9b8062342c34124b.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 10]: /images/20220711/736148161e244d75bbfd7ddbcf527a65.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 11]: /images/20220711/9e03bf445b314531a99589e4af4ef797.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 12]: /images/20220711/0889b68d62624ed3b1e18d744df0120d.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 13]: /images/20220711/a36adc3102ad4178bb065d6ef2057718.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 14]: /images/20220711/c948f026a1864b06a99857b528839872.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 15]: /images/20220711/0c9f8f423b194a0fa86c55c89737de5c.png
[640_wx_fmt_png_wxfrom_5_wx_lazy_1 6]: /images/20220711/b8368b48aee147f58a0803cf98c7b6ad.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 16]: /images/20220711/d1872c729b074a14b25f4304cc24ebe6.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 17]: /images/20220711/2f365c76de0544988d2cbe2e99f134e3.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 18]: /images/20220711/659fde6c212743848328b3fa5149fa17.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 19]: /images/20220711/70fff44884ad48699ae965fbf4a0133f.png
[640_wx_fmt_jpeg_wxfrom_5_wx_lazy_1 20]: /images/20220711/fa8e9744fbb94c35b5e60a8e7b4ae0d3.png