Android 佈局陰影實現

来源:https://www.cnblogs.com/amiko/archive/2019/09/19/11550389.html
-Advertisement-
Play Games

最近項目要求,ui有很多有關於陰影的設計要求,網上找了些實現方式,但都不是很理想。現在閑下來了,就尋思著自己寫個陰影佈局耍耍,以備後用。先說道說道我找到的幾種陰影實現方式: 系統陰影 Andorid 系統自api 21之後就多了一個熟悉 android:elevation ,這是android最新引 ...


最近項目要求,ui有很多有關於陰影的設計要求,網上找了些實現方式,但都不是很理想。現在閑下來了,就尋思著自己寫個陰影佈局耍耍,以備後用。先說道說道我找到的幾種陰影實現方式:

系統陰影

Andorid 系統自api 21之後就多了一個熟悉 android:elevation ,這是android最新引入的軸的概念,可通過設置elevation來設置陰影(z軸的大小),設置如下:

 1 <!-- base z depth of the view. -->
 2   <attr name="elevation" format="dimension" />
 3 
 4   <TextView
 5         android:id="@+id/shadow1"
 6         app:layout_constraintStart_toStartOf="parent"
 7         app:layout_constraintTop_toTopOf="parent"
 8         android:layout_marginStart="20dp"
 9         android:layout_marginTop="20dp"
10         android:text="系統陰影"
11         android:background="#fff"
12         android:gravity="center"
13         android:textSize="14sp"
14         android:textColor="@color/colorBlack"
15         android:layout_width="100dp"
16         android:elevation="3dp"
17         android:layout_height="80dp"/>

 

 

效果也是不錯,可以完成一些簡單的陰影設置效果。

但需要註意些細節,不然 elevation 可能會無效:

  • 父佈局要保留足夠的空間,elevation本身不占有view的大小
  • 需要設置背景色且不可設置為透明色
  • 不能設置是否為擴散的還是指定方向的

layer-list 偽陰影

為什麼說是偽陰影呢,layer-list本身很強大,器支持的層疊式繪製基本可以解決我們大多說的背景設計,對於一些要求不是很嚴格的陰影用它也不是不可以,但效果是真的不好,畢竟shape提供的層疊()並不支持模糊繪製(或者可以選擇使用模糊背景圖片繪製)。下麵給一個用layer-list繪製的陰影做參考。

 1 <TextView
 2     android:id="@+id/shadow2"
 3     app:layout_constraintStart_toEndOf="@id/shadow1"
 4     app:layout_constraintTop_toTopOf="parent"
 5     android:layout_marginStart="50dp"
 6     android:layout_marginTop="20dp"
 7     android:text="layer-list陰影"
 8     android:gravity="center"
 9     android:background="@drawable/shadow_layer"
10     android:textSize="14sp"
11     android:textColor="@color/colorBlack"
12     android:layout_width="100dp"
13     android:layout_height="80dp"/>
14 
15 
16 
17 <!--shadow_layer.xml -->
18 <?xml version="1.0" encoding="utf-8"?>
19 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
20 
21     <item android:top="3dp"
22         android:left="3dp">
23         <shape android:shape="rectangle">
24             <solid android:color="#333333"/>
25             <gradient android:startColor="#80ff0000"
26                 android:type="radial"
27                 android:centerX="0.5"
28                 android:centerY="0.5"
29                 android:gradientRadius="30"
30                 android:endColor="#10ff0000"/>
31             <size android:width="100dp" android:height="80dp"/>
32         </shape>
33     </item>
34 
35     <item android:bottom="3dp"
36         android:right="3dp">
37         <shape android:shape="rectangle">
38             <solid android:color="#fff"/>
39             <size android:width="100dp" android:height="80dp"/>
40         </shape>
41     </item>
42 
43 </layer-list>

 

效果比較生硬,其本質就是顏色的漸變,如下:

還有如讓ui切陰影背景圖,但由於控制項大小規格差異較大,風格差異較大,並不推薦使用。

自定義陰影佈局

這是我比較推薦的方式,可參考CardView的陰影實現自定義一個陰影佈局實現。其實現是通過 setShadowLayer、setMaskFilter 實現。

1 //        mPaint.setShadowLayer(blurRadius,0,0,shadowColor);  
2         if (blurRadius>0){
3             mPaint.setMaskFilter(new BlurMaskFilter(blurRadius,BlurMaskFilter.Blur.NORMAL));
4         }

 

相較於 setShadowLayer 來說,setMaskFilter 可供選中的實現方式要多一個blur實現類型,效果更好些,所以我是通過使用 setMaskFilter 來實現自定義陰影佈局。


 1 <cn.enjoytoday.shadow.ShadowLayout
 2     android:id="@+id/shadow3"
 3     app:layout_constraintStart_toStartOf="parent"
 4     app:layout_constraintTop_toBottomOf="@id/shadow1"
 5     android:layout_marginTop="20dp"
 6     android:text=""
 7     app:shadowRadius="0dp"
 8     app:shadowColor="#333"
 9     app:blurRadius="5dp"
10     app:xOffset="0dp"
11     app:yOffset="0dp"
12     android:layout_marginStart="15dp"
13     android:gravity="center"
14     android:background="@drawable/shadow_layer"
15     android:textSize="14sp"
16     android:textColor="@color/colorBlack"
17     android:layout_width="wrap_content"
18     android:layout_height="wrap_content">
19 
20 
21     <TextView
22         android:padding="5dp"
23         android:text="自定義應用佈局"
24         android:gravity="center"
25         android:textSize="14sp"
26         android:textColor="@color/colorBlack"
27         android:layout_width="100dp"
28         android:layout_height="80dp"/>
29 
30 </cn.enjoytoday.shadow.ShadowLayout>

 

使用

ShadowView 托管於GitHub, 仿照css的Box Shadow 的陰影實現效果設計實現,可通過設置水平、豎直偏移確認陰影方向,可設置模糊半徑和圓角半徑、陰影顏色等。可通過gradle直接依賴使用:

添加依賴

repositories {
    //...
    maven { url 'https://jitpack.io' }
}

dependencies {
    implementation 'com.github.amikoj:ShadowView:1.0.1'
}

 

xml中使用

 1   <cn.enjoytoday.shadow.ShadowLayout
 2         android:orientation="vertical"
 3         android:id="@+id/shadowLayout"
 4         app:layout_constraintBottom_toBottomOf="parent"
 5         app:layout_constraintLeft_toLeftOf="parent"
 6         app:layout_constraintRight_toRightOf="parent"
 7         app:layout_constraintTop_toTopOf="parent"
 8         android:gravity="center"
 9         app:shadowRadius="10dp"
10         app:shadowColor="#bebebe"
11         app:bgColor="#fff"
12         app:xOffset="10dp"
13         app:yOffset="0dp"
14         app:blurRadius="5dp"
15         android:layout_width="wrap_content"
16         android:layout_height="wrap_content">
17 
18    <!--嵌套需要添加陰影的佈局 -->
19 
20     </cn.enjoytoday.shadow.ShadowLayout>

 

 

屬性說明

屬性名類型說明
shadowColor color 陰影渲染顏色
shadowRadius dimension 背景圓角半徑(0為矩形)
blurRadius dimension 模糊半徑
xOffset dimension 水平位移
yOffset dimension 豎直位移
bgColor color 背景色

代碼設置

也可通過代碼設置陰影屬性:

1 shadowLayout.getShadowConfig()   //獲取配置類
2             . setBlurRadius(blurRadius)  //設置模糊半徑
3              .setXOffset(xoffset)   //設置水平位移,最大為20dp
4              .setYOffset(yoffset)   //設置豎直位移,最大為20dp
5              .setShadowRadius(shadowRadius) //設置圓角半徑,為0時不是圓角
6              .setShadowColor(shadowColor)    //設置陰影顏色
7              .commit();             //生效修改

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • https://www.jb51.net/article/52269.htm註:本文譯自《Oracle Data Guard 11g Handbook》 Page 78 – Page 88這篇文章主要介紹了Oracle 11g Dataguard參數詳解,包含了獨立參數、主庫參數、備庫參數的詳細說明 ...
  • 一、 Redis 介紹 Remote Dictionary Server(Redis)是一個開源的使用 ANSI C 語言編寫、支持網路、可基於記憶體亦可持久化的日誌型、Key-Value 資料庫,並提供多種語言的 API。它通常被稱為數據結構伺服器,因為值(value)可以是 字元串(String) ...
  • [toc] 發表日期:2019年9月19日 上節回顧 在學習新的內容之前,先回顧一下上節的內容,上節主要講述了以下的內容: 1. ElasticSearch是什麼?什麼是搜索引擎?為什麼選擇ElasticSearch? 2. 搜索是怎麼做到的:分詞、倒排索引? 3. 環境的搭建 4. 如何通過kib ...
  • Linux下如何設置每天自動備份資料庫 本文以Centos7.6系統與Oracle11g為例: 一.先找到資料庫的環境變數 如果是在root賬戶下,須先登錄到資料庫所在賬戶 export PATHexport ORACLE_BASE=/home/nnc_db/appexport ORACLE_HOM ...
  • 首先在命令提示符下進入mysqldump.exe所在目錄(如果mysqldump.exe所在目錄已添加到系統path環境變數,可以省略此步驟) 備份mysqldump.exe --opt --add-drop-database --add-drop-table -hlocalhost -uroot ...
  • SELECT INTO 語句可用於創建表的備份復件。 SELECT INTO 語句 SELECT INTO 語句從一個表中選取數據,然後把數據插入另一個表中。 SELECT INTO 語句常用於創建表的備份復件或者用於對記錄進行存檔。 SQL SELECT INTO 語法 您可以把所有的列插入新表: ...
  • 本文鏈接: "Android mmap 文件映射到記憶體介紹" Android開發中,我們可能需要記錄一些文件。例如記錄log文件。如果使用流來寫文件,頻繁操作文件io可能會引起性能問題。 為了降低寫文件的頻率,我們可能會採用緩存一定數量的log,再一次性把它們寫到文件中。如果app異常退出,我們有可 ...
  • 關於小程式的載入快慢這可是一大學問,自古以來性能都是重點,所以下麵我淺談一下自己遇到的問題和解決方法吧 首先,先從網路請求network說起: 這裡基本不關前端的事情,但是這也是優化小程式的一大重點,後端響應我們請求數據的速度影響了整個頁面的速度,所以,把它拿到第一位 請求超過300ms就已經算是慢 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...