Android 中的小细节

最新推荐文章于 2023-02-10 15:03:43 发布

甘森若

最新推荐文章于 2023-02-10 15:03:43 发布

阅读量503

点赞数

分类专栏： android开发文章标签： android

android开发专栏收录该内容

25 篇文章 0 订阅

订阅专栏

转载出处：http://blog.csdn.net/qq_17766199/article/details/53726062

1.EditView的自定义样式

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

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

<EditText
     android:layout_width="match_parent"
     android:layout_height="50dp" />
   
   1
2
3
   
   
    
    
   
   
   
   1
2
3

这里写图片描述

文字选择操作时：

这里写图片描述

文字选中时：

这里写图片描述

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>
   
   1
2
3
4
5
6
7
8
   
   
    
    
   
   
   
   1
2
3
4
5
6
7
8

使用：

<EditText
     android:layout_width="match_parent"
     android:textCursorDrawable="@drawable/cursor"
     android:layout_height="50dp" />
   
   1
2
3
4
   
   
    
    
   
   
   
   1
2
3
4

效果图：

这里写图片描述

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" />
   
   1
2
3
4
5
6
7
   
   
    
    
   
   
   
   1
2
3
4
5
6
7

效果：

这里写图片描述

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

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

android:backgroundTint="#9bd435"     <!--下划线颜色-->
android:textColorHighlight="#9bd435" <!--选中文字背景色-->
   
   1
2
   
   
    
    
   
   
   
   1
2

最终自定义效果：

这里写图片描述

3.使用Material Design主题属性

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

这里写图片描述

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

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <item name="colorAccent">#9bd435</item>
</style>
   
   1
2
3
   
   
    
    
   
   
   
   1
2
3

效果图：

这里写图片描述

我在自己的手机的应用中发现使用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>

   
   1
2
3
4
5
6
7
8
9
10
11
12
   
   
    
    
   
   
   
   1
2
3
4
5
6
7
8
9
10
11
12

效果图：

这里写图片描述

自定义滚动条首先我们要自定义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>
   
   1
2
3
4
5
6
7
   
   
    
    
   
   
   
   1
2
3
4
5
6
7

使用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>
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
   
   
    
    
   
   
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14

效果图：

这里写图片描述

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

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

最后还有一个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>
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
   
   
    
    
   
   
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

效果图：

这里写图片描述

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

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

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

这里写图片描述

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

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

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

这里写图片描述

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

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

这里写图片描述

是不是看起来好多了。

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

(function () { $(function () {$ ('pre.prettyprint code').each(function () { var lines =

(this).text().split(′\n′).length;var $(this).text().split('\n').length; var$ numbering = $('

').addClass('pre-numbering').hide();

(this).addClass(′has−numbering′).parent().append( $(this).addClass('has-numbering').parent().append($ numbering); for (i = 1; i

甘森若

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Android 中的小细节

转载出处：http://blog.csdn.net/qq_17766199/article/details/537260621.EditView的自定义样式其实这部分大家一定不陌生，通常默认的样式都与我们的设计样式有出入，那么就需要我们自定义，通常我们使用Android:background="xxx" 来自定义。常见的我就不重复啰嗦了，下面介绍一些特殊的使用。首先看看默认样式（SdkVersio
复制链接

扫一扫