关闭

一些小效果的实现

标签: androidEditViewScrollView9图自定义
3155人阅读 评论(10) 收藏 举报
分类:

本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发。
转载请注明出处: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.修改光标颜色

修改光标的颜色很简单,只需要使用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 各个属性。这里有张在网上找来的图(感谢),此图一目了然。

这里写图片描述

那么其实就简单了,代码如下。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <item name="colorAccent">#9bd435</item>
       <item name="android:colorControlActivated">#9bd435</item>
       <item name="android:colorControlNormal">#cccccc</item>
</style>

补充一下:android:colorControlActivated表示EditText、Switch、CheckBox、RadioButton等控件激活时候的颜色。android:colorAccentandroid:colorControlActivated作用一样,但是它可以同时设置文字选中颜色。android:colorControlNormal表示EditText、Switch、CheckBox、RadioButton等控件默认时的颜色。兼容5.0以下必须使用Theme.AppCompat主题(兼容部分效果),并且Activity要继承AppCompatActivity,在兼容时候需要把前面的android:前缀去掉。

效果图:

这里写图片描述

这里写图片描述

我看了下自己手机中的部分应用,发现使用1、2方法去自定义的只有UC浏览器,其中微信和淘宝直接使用的默认样式。支付宝使用了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.修改滑动尽头阴影颜色

默认阴影如图:(SdkVersion=23,安卓6.0)

这里写图片描述

修改颜色有一种简单方法,使用Material Design主题属性colorPrimary,代码效果如下:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
       <item name="colorPrimary">#9bd435</item>
</style>

这里写图片描述

当然,如果你想去除阴影也非常简单,加上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... 创建点九图片。

这里写图片描述

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

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

这里写图片描述

是不是看起来好多了。

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

16
0
查看评论

Js实现点击查看全文(类似今日头条、知乎日报效果)

这篇文章主要为大家详细介绍了原生JS+css仿QQ今日头条、知乎日报点击查看全文的效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下. 移动端demo展示 王者荣耀攻略网 需要设置过最大高度max-height,然后把超出部分隐藏。 判断内容是否超出指定高度,超出就添加,&qu...
  • wcslb
  • wcslb
  • 2017-07-26 00:43
  • 1313

CSDN Markdown与其他markdown编辑器的功能对比

引言迄今为止,我用过的Markdown编辑器有:MarkdownPad(客户端)、StackEdit、马克飞象、Cmd Markdown、简书,以及现在的CSDN Markdown,由于CSDN Markdown是在StackEdit的基础上开发而来,因此两者在使用及样式上基本相同,但是CSDN M...
  • lanxuezaipiao
  • lanxuezaipiao
  • 2015-04-23 15:15
  • 7163

CSDN的博客搜索功能太弱,教你怎么搜索自己博客的文章

不得不说,CSDN博客的搜索功能是在太弱了。而且一直都很弱,以至于我每次想在自己博客上找自己发的文章都变得那么难。做一个搜索博客内文章的功能没有那么难吧? 还是说CSDN已经放弃了博客这一块了? 我发现我的博客排名好像靠前了,难道是CSDN的博客没落了? 既然如此,也是无可奈何的事...
  • amqvje
  • amqvje
  • 2017-08-31 09:08
  • 315

关于Java编程的一些小知识

Q:   int n=Integer.parseInt("+5");          int n=Integer.parseInt("123ABC"...
  • NBXX2005
  • NBXX2005
  • 2005-01-13 23:24
  • 563

java的一些小程序例子--3

输入两个实数,按照从小到大的顺序输出这两个数 import java.util.Scanner;   public class b{  public static void main(String[] args){  Scanner sc=new Scanner...
  • qq_24928451
  • qq_24928451
  • 2015-03-20 18:38
  • 290

Elasticsearch全文检索系统实现深入详解

题记学习ES的童鞋,都有一个开发一个类似百度的搜索引擎的想法。当然功能不一定是百度、360、谷歌传统的搜索引擎那么强大。但是,能实现基本的全文检索、指定类型的检索、评分高低优先级排序等等。那么问题来了,该如何实现?需要什么技术呢?1、效果图注:这张图是从网上down的,我已经实现了上述功能。 ...
  • wojiushiwo987
  • wojiushiwo987
  • 2017-07-23 17:05
  • 2785

Zorka源码阅读与讲解(2)怎样实现Online Reconfiguration?

也同样是想通过这篇日志,讲讲在Java中怎么实现插桩的在线配置和管理。在之前这篇日志中,我简单介绍了Online Reconfiguration的基本效果,这里讲讲Zorka是怎么实现的(其实远比大家想想的要简单)。 之前那篇日志中我讲过,我们就从Reload这个方法入手。最简单的方法是,直接在...
  • qysh123
  • qysh123
  • 2015-04-20 00:40
  • 1172

java中的一些小知识点

最近在复习javaSE,因此整理了一些小知识点,这些知识点很简单,但是却也很重要
  • qq_32933131
  • qq_32933131
  • 2017-03-15 09:11
  • 191

第一次用Ajax写了个小功能

作为一个初识web的同学,玩儿php不得不学
  • liudeen1122
  • liudeen1122
  • 2014-06-04 16:35
  • 274

如何在CSDN博客左侧添加微博关注

对于在CSDN中写博客是一件很开心的事情,我们可以对于自己的博客界面进行自定义,添加博客栏目。目前比较受大家喜欢的就是在博客左侧添加微博关注,这样在别人看你的博客的同时也可以看到你的微博的实时动态,并且可以直接点击关注微博。今天我们就要来实现该功能。实现效果如下:.具体步骤如下 :(1)首先进入新浪...
  • CHENYUFENG1991
  • CHENYUFENG1991
  • 2016-01-06 09:47
  • 3267
    个人资料
    • 访问:216722次
    • 积分:3258
    • 等级:
    • 排名:第12376名
    • 原创:70篇
    • 转载:10篇
    • 译文:0篇
    • 评论:228条
    多多支持
    博客专栏
    最新评论