这篇可能是今年的最后一篇博客,时间真是飞快。。。话说今年还是比较忙的,没有去年分享的内容多。但是自己始终坚持至少一月分享一篇。生怕长时间不写了,就懒惰了。同时也要求自己一定要认真去写,不能为了写而写。明年继续加油!那么开始进入正题。
1.EditView的自定义样式
其实这部分大家一定不陌生,通常默认的样式都与我们的设计样式有出入,那么就需要我们自定义,通常我们使用Android:background="xxx"
来自定义。常见的我就不重复啰嗦了,下面介绍一些特殊的使用。
首先看看默认样式(SdkVersion=23,安卓6.0):
<EditText android:layout_width="match_parent" android:layout_height="50dp" />
文字选择操作时:
文字选中时:
1.修改光标颜色
修改光标的颜色很简单,只需要使用android:textCursorDrawable="XXX"
属性。
首先我们自定义drawable,cursor.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <solid android:color="#9bd435"/> <!--颜色设置为浅绿色--> <size android:width="2dp"/> </shape>
使用:
<EditText android:layout_width="match_parent" android:textCursorDrawable="@drawable/cursor" android:layout_height="50dp" />
效果图:
2.修改选中图标
这个图标就是默认样式的2图与3图中的墨绿色水滴状图标。同样也很简单,直接上代码。
<EditText android:layout_width="match_parent" android:textCursorDrawable="@drawable/cursor" android:textSelectHandleLeft="@drawable/icon" android:textSelectHandleRight="@drawable/icon" android:textSelectHandle="@drawable/icon" android:layout_height="50dp" />
效果:
PS:因为没有合适的图片所以左右设置的都是一样的,理解一下哈!
是不是还觉得有点别扭,文字的选中颜色与EditView默认的下划线还是墨绿色,其实改起来也很简单。加上下面两行代码。
android:backgroundTint="#9bd435" <!--下划线颜色--> android:textColorHighlight="#9bd435" <!--选中文字背景色-->
最终自定义效果:
3.使用Material Design主题属性
首先了解一下Material Design 各个属性。这里有张在网上找来的图,此图一目了然。
那么其实就简单了,在我们的主题中加入colorAccent
即可。
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorAccent">#9bd435</item> </style>
效果图:
我在自己的手机的应用中发现使用1、2方法去自定义的只有UC浏览器,其中微信和淘宝直接使用的默认样式。支付宝和QQ等大多数使用了3方法,毕竟简单,效果也不错。
2.Scrollbar自定义样式
首先看看默认样式(SdkVersion=23,安卓6.0):
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:paddingLeft="20dp" android:paddingRight="20dp" android:layout_height="wrap_content"> ...... </ScrollView>
效果图:
自定义滚动条首先我们要自定义drawable,scrollbar.xml
自定义代码:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#9bd435"/> <corners android:radius="2dp" /> </shape>
使用scrollbarThumbVertical
:
<?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:paddingLeft="20dp" android:paddingRight="20dp" android:scrollbarSize="4dp" android:scrollbars="vertical" android:scrollbarThumbVertical="@drawable/scrollbar" android:layout_height="wrap_content"> ...... </ScrollView>
效果图:
当然水平方向的滚动条也是可以自定义的,同时这些也都适用于ListView、RecyclerView。
android:scrollbars="horizontal" android:scrollbarThumbHorizontal="xxx"
最后还有一个android:scrollbarStyle="xxx"
,可以设置滚动条的位置。默认是insideOverlay
,下面我直接上相应设置对应的效果图。
insideInset:(位置在padding内,会插入在View后面,不会遮挡View)
outsideOverlay:(位置在padding外,覆盖在View上,如果滚动条比padding大会遮挡View)
outsideInset:(位置在padding外,会插入在View后面,不会遮挡View)
最后两张图可能乍一看是一样的,其实仔细看button距滚动条的位置其实是不一样的。
3.去除滑动尽头阴影效果
阴影如图:
去除非常简单,加上android:overScrollMode="never"
属性即可。
4.clipChildren属性的使用
android:clipChildren
的意思是是否允许子View超出父View。好像有点懵,那我们直接上例子。
图中是现在大多外卖app都会有的一个购物车效果。其中红框中的部分高度略高于旁边的View。那么这时就可以使用clipChildren
来实现。首先在布局根节点设置android:clipChildren="false"
,在使用android:layout_gravity="xxx"
控制超出部分。
代码:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:clipChildren="false"> <!--这里--> <LinearLayout android:layout_alignParentBottom="true" android:layout_width="match_parent" android:layout_height="48dp" android:orientation="horizontal"> <RelativeLayout android:layout_gravity="bottom" <--这里 android:layout_marginLeft="10dp" android:layout_width="48dp" android:layout_height="60dp"> <ImageView android:src="@drawable/icon_cart" android:layout_width="match_parent" android:layout_height="match_parent" /> <TextView android:layout_marginTop="6dp" android:layout_alignParentRight="true" android:background="@drawable/icon_spot" android:layout_width="wrap_content" android:layout_height="wrap_content" tools:text="1" android:textSize="12sp" android:gravity="center" android:textColor="#ffffff"/> </RelativeLayout> <TextView android:layout_marginLeft="10dp" android:textColor="#9bd435" tools:text="¥5.00" android:textStyle="bold" android:textSize="18sp" android:gravity="center_vertical" android:layout_width="0dp" android:layout_weight="1" android:layout_height="match_parent" /> <TextView android:layout_width="110dp" android:textColor="#ffffff" android:gravity="center" android:textSize="16sp" android:text="去购物车" android:background="#9bd435" android:layout_height="match_parent" /> </LinearLayout> </RelativeLayout>
效果图:
是不是挺简单,如果是你?你会怎样实现呢?
5.点九图(.9.png)的使用
接着上面的购物车效果,在图中是不是有一个代表购买商品数量的数字。如果此时一个土豪一次买了上百份的外卖,上面的效果会如何?我就试了试,得到了下面的效果:
可以清楚地看到原本的圆形被横向拉伸了。。。那就说明这个圆形图标不是点九图。那么我们来制作张。
大家使用Studio可以很方便的去制作,首先右键图片,会弹出以下菜单:
点击Create 9-Patch file...
创建点九图片。
上图就是最终完成的图片,在上面我有标注各个位置的含义。
替换图片后现在再来看看效果:
是不是看起来好多了。
其实上面介绍的这些内容都是很细节的东西,一般不太会注意到的,一般项目也不太常用。分享出来以备不时之需。最后大家多多点赞哈!