文档章节

Android阴影效果实现方式

ccMagic
 ccMagic
发布于 2017/07/25 22:20
字数 490
阅读 345
收藏 0

一、用layer-list实现,效果不是很好,边缘比较生硬:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient
                android:centerX="0.5"
                android:centerY="0.5"
                android:endColor="@android:color/white"
                android:gradientRadius="55dp"
                android:startColor="@color/colorPrimary"
                android:type="radial"/>
            <corners
                android:radius="100dp"/>
        </shape>
    </item>
    <item
        android:bottom="5dp"
        android:right="5dp"
        android:left="5dp">
        <shape>
            <!--<gradient-->
            <!--android:centerX="0.5"-->
            <!--android:centerY="0.5"-->
            <!--android:endColor="@android:color/white"-->
            <!--android:gradientRadius="100dp"-->
            <!--android:startColor="@android:color/holo_red_light"-->
            <!--android:type="radial"/>-->
            <solid
                android:color="@color/colorPrimary"/>
            <corners
                android:radius="100dp"/>
        </shape>

    </item>

</layer-list>

二、采用自定义组件实现-重写onDraw方法:

@Override
protected void onMeasure(int withMeasureSpec, int heightMeasureSpec) {
   super.onMeasure(withMeasureSpec, heightMeasureSpec);
   this.with = this.getMeasuredWidth();
   this.height = this.getMeasuredHeight();
   //
   this.shadowLeft = this.getPaddingLeft();
   this.shadowTop = this.getPaddingTop();
   this.shadowRight = this.getPaddingRight();
   this.shadowBottom = this.getPaddingBottom();
   //
   if (shadowBottom > shadowTop) {
      this.shadowDy = shadowTop / 3;
   } else {
      this.shadowDy = shadowTop / 3;
   }
   if (shadowLeft > shadowRight) {
      this.shadowDx = shadowRight / 3;
   } else {
      this.shadowDx = shadowLeft / 3;
   }
}

@Override
protected void onDraw(Canvas canvas) {
   paint.setColor(backgroundColor);
   paint.setShadowLayer(shadowBottom, shadowDx, shadowDy, shadowColor);
   setLayerType(LAYER_TYPE_SOFTWARE, null);
   switch (drawType) {
      case CIRCLE:
         if (with > height) {
            canvas.drawCircle(with / 2, height / 2, with / 2 - (shadowTop + shadowBottom) * 2 / 3, paint);
         } else {
            canvas.drawCircle(with / 2, height / 2, height / 2 - (shadowTop + shadowBottom) * 2 / 3, paint);
         }
         break;
      case RECT:
         canvas.drawRect(shadowLeft, shadowBottom, with - shadowLeft, height - shadowBottom, paint);
         break;
      default:
         break;
   }
   super.onDraw(canvas);//放在最后执行,不能让添加的绘制的内容覆盖了原有的内容
}

ps:代码中的计算方法用于定义阴影范围,可以自己重写。主要是通过Paint类的

public void setShadowLayer(float radius, float dx, float dy, int shadowColor) {
  nSetShadowLayer(mNativePaint, radius, dx, dy, shadowColor);
}

方法实现阴影,阴影颜色可以自己定义,不支持硬件加速,效果比第一种好。

三、Android 5.0以上 Material Design在组件中定义属性:

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/shadow_one"
    android:elevation="50dp"
    app:layout_constraintBottom_toTopOf="parent"
    app:layout_constraintLeft_toRightOf="parent"
    app:layout_constraintRight_toLeftOf="parent"
    app:layout_constraintTop_toBottomOf="parent">

    <ImageView
        android:layout_width="120dp"
        android:layout_height="200dp"
        android:src="@mipmap/image"/>
</LinearLayout>

 ps:一般组件直接定义elevation属性即可有阴影效果,但是比如ImageView显示图片,不能直接设置该属性取得阴影效果,直接在外面再加个父布局,再在父布局上设置该属性即可。此种方法效果最好,但是阴影的颜色无法自定义,并且只支持Android 5.0以上。

 

© 著作权归作者所有

ccMagic
粉丝 0
博文 14
码字总数 4484
作品 0
合肥
程序员
私信 提问
加载中

评论(1)

F
FZZFLWS1
感谢楼主的分享
玩转Android 之 TextView常用特效

暑期大学生博客分享大赛 - 2011 Android 成长篇 本文参加第二届Google大学生暑期博客分享大赛 TextView是最常用的Android控件之一,显示文字时的首选,然而很多人都不满足于,TextView默认的...

cokey
2011/08/06
15.6K
3
【译:Styling Android】字体阴影

转载声明:Ryan的博客文章欢迎您的转载,但在转载的同时,请注明文章的来源出处,不胜感激! :-) http://my.oschina.net/ryanhoo/blog/86874 译者:Ryan Hoo 来源:http://blog.stylingandr...

RyanHoo
2012/11/03
3.6K
3
Snackbar、CardView、FloatingActionButton、SwitchCompat使用介绍

Android5.0也出来了老长一段时间了,5.0推出的MartailDesign系列确实相当高大上,颜色鲜艳像各种套壳的iphone c,老有设计范儿了。接下来,就学着写它们的用法,并写一些效果。 github代码传...

奔跑吧李博
2018/10/19
0
0
彻底理解 Android 中的阴影

如果我们想创造更好的 Android App,我相信我们需要遵循 Material Design 的设计规范。一般而言,Material Design 是一个包含光线,材质和投影的三维环境。如果我们想要在 App 的开发过程中,...

丁佳辉
2018/04/18
88
0
FloatingActionButton 完全解析[Design Support Library(2)]

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/lmj623565791/article/details/46678867 FloatingActionButton 完全解析[Design Support Library(2)] 转载请标...

鸿洋_
2015/06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IT兄弟连 HTML5教程 介绍HTML5给你认识 习题

1.关于HTML5说法正确的是:(C) A.HTML5只是对HTML4的一个简单升级 B.所有主流浏览器都支持HTML5 C.HTML5新增了离线缓存机制 D.HTML5主要是针对移动端进行了优化 2.为了标识一个HTML文...

老码农的一亩三分地
5分钟前
1
0
关于1加手机rom的分析过程

1、关于清理app缓存的信息 framework.jar和services.jar文件,都位于/system/framework目录下面 framework.jar的android.os.Intent类里面定义了action "android.intent.action.CLEAR_PKG",这......

shatian
6分钟前
1
0
[docker]使用root进入docker

docker exec -it --user root ed0 /bin/bash https://blog.csdn.net/kaifeng86/article/details/73237056...

Danni3
19分钟前
2
0
通过重编译icu替换icuxxxx.dll减少QT5发布体积

最近需要使用QT写一个程序,选择了比较新的QT5.3以获得更多特性进行快速开发。但是QTCreator编译出来的程序是动态链接版本,接着就头痛了,自己程序很小,但是所需要携带的动态链接库却很大,...

shzwork
21分钟前
3
0
关于二叉树的前序、中序、后序三种遍历

二叉树遍历分为三种:前序、中序、后序,其中序遍历最为重要。为啥叫这个名字?是根据根节点的顺序命名的。 比如上图正常的一个满节点,A:根节点、B:左节点、C:右节点,前序顺序是ABC(根...

城市之雾
26分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部