自定義View基礎篇

基礎篇

一、坐標系

1、屏幕坐標系和數學坐標系的區別

由于移動設備一般定義屏幕左上角為坐標原點,向右為x軸增大方向,向下為y軸增大方向, 所以在手機屏幕上的坐標系與數學中常見的坐標系是稍微有點差別的。下圖為屏幕坐標系:


2、View的坐標系

注意:View的坐標系統是相對于父控件而言的。如下圖所示:

  • getTop(); //獲取子View左上角距父View頂部的距離
  • getLeft(); //獲取子View左上角距父View左側的距離
  • getBottom(); //獲取子View右下角距父View頂部的距離
  • getRight(); //獲取子View右下角距父View左側的距離

3、MotionEvent中 get 和 getRaw 的區別

  • event.getX(); //觸摸點相對于其所在組件坐標系的坐標
  • event.getY();
  • event.getRawX(); //觸摸點相對于屏幕默認坐標系的坐標
  • event.getRawY();

如下圖所示,其中相同顏色的內容是對應的,其中為了顯示方便,藍色箭頭向左稍微偏移了一點.


4、核心要點

二、角度與弧度

安卓中角度(angle)與弧度(radian)的有關問題。

1、前言

①、為什么講這個?

在我們自定義View,尤其是制作一些復雜炫酷的效果的時候,實際上是將一些簡單的東西通過數學上精密的計算組合到一起形成的效果。
這其中可能會涉及到畫布的相關操作(旋轉),以及一些正余弦函數的計算等,這些內容就會用到一些角度、弧度相關的知識。

②、為什么對角的描述存在角度與弧度兩種單位?

簡單來說就是為了方便,為了精確描述一個角的大小引入了角度與弧度的概念。
由于兩者進制是不同的(角度是60進制,弧度是10進制),在合適的地方使用合適的單位來描述會更加方便。

例如: 角度是60進位制,遇到30°6′這樣的角,應該轉化為10進制的30.1°。但弧度就不需要,因為弧度本身就是十進制的實數。

2、角度與弧度的定義

角度和弧度一樣都是描述角的一種度量單位,下面是它們的定義:

角度:

兩條射線從圓心向圓周射出,形成一個夾角和夾角正對的一段弧。當這段弧長正好等于圓周長的360分之一時,兩條射線的夾角的大小為1度。

弧度:

兩條射線從圓心向圓周射出,形成一個夾角和夾角正對的一段弧。當這段弧長正好等于圓的半徑時,兩條射線的夾角大小為1弧度.


3、角度和弧度的換算關系

rad 是弧度, deg 是角度

4、一些細節問題

由于默認屏幕坐標系和常見數學坐標系的小差別(坐標系問題點這里),所以在角上必然也會存在一些區別,例如:
在常見的數學坐標系中角度增大方向為逆時針,
在默認的屏幕坐標系中角度增大方向為順時針。

三、顏色

簡要介紹安卓中的顏色相關內容,包括顏色的定義,創建顏色的幾種方式,以及顏色的混合模式等

1、簡單介紹顏色

安卓支持的顏色模式:

PS:其中字母表示通道類型,數值表示該類型用多少位二進制來描述。如ARGB8888則表示有四個通道(ARGB),每個對應的通道均用8位來描述。

注意:我們常用的是ARGB8888和ARGB4444,而在所有的安卓設備屏幕上默認的模式都是RGB565,請留意這一點。

以ARGB8888為例介紹顏色定義:

其中 A R G B 的取值范圍均為0255(即16進制的0x000xff)
A 從ox00到oxff表示從透明到不透明。
RGB 從0x00到0xff表示顏色從淺到深。
當RGB全取最小值(0或0x000000)時顏色為黑色,全取最大值(255或0xffffff)時顏色為白色。

2、幾種創建或使用顏色的方式

①、java中定義顏色

int color = Color.GRAY;     //灰色

由于Color類提供的顏色僅為有限的幾個,通常還是用ARGB值進行表示。

int color = Color.argb(127, 255, 0, 0);   //半透明紅色
int color = 0xaaff0000;                   //帶有透明度的紅色

②、在xml文件中定義顏色

在/res/values/color.xml 文件中如下定義:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#ff0000</color>
    <color name="green">#00ff00</color>
</resources>

詳解: 在以上xml文件中定義了兩個顏色,紅色和綠色,是沒有alpha(透明)通道的。

定義顏色以‘#’開頭,后面跟十六進制的值,有如下幾種定義方式:

#f00            //低精度 - 不帶透明通道紅色
#af00           //低精度 - 帶透明通道紅色
#ff0000         //高精度 - 不帶透明通道紅色
#aaff0000       //高精度 - 帶透明通道紅色

③、在java文件中引用xml中定義的顏色:

int color = getResources().getColor(R.color.mycolor);

④、在xml文件(layout或style)中引用或者創建顏色

<!--在style文件中引用-->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/red</item>
</style>

android:background="@color/red"     //引用在/res/values/color.xml 中定義的顏色
android:background="#ff0000" 

三、取色工具

顏色都是用RGB值定義的,而我們一般是無法直觀的知道自己需要顏色的值,需要借用取色工具直接從圖片或者其他地方獲取顏色的RGB值。

①、ColorPix(for Win)

簡單的取色調色工具,可以從屏幕取色,非常小而精簡。
點擊下載ColorPix

②、Picpick(for Win)

功能更加強大的工具:PicPick。
PicPick具備了截取全屏、活動窗口、指定區域、固定區域、手繪區域功能,支持滾動截屏,屏幕取色,支持雙顯示器,具備白板、屏幕標尺、直角座標或極座標顯示與測量,具備強大的圖像編輯和標注功能。
點擊下載PicPick

四、顏色混合模式(Alpha通道相關)

通過前面介紹我們知道顏色一般都是四個通道(ARGB)的,其中(RGB)控制的是顏色,而A(Alpha)控制的是透明度。
因為我們的顯示屏是沒法透明的,因此最終顯示在屏幕上的顏色里可以認為沒有Alpha通道。Alpha通道主要在兩個圖像混合的時候生效。

默認情況下,當一個顏色繪制到Canvas上時的混合模式是這樣計算的:
(RGB通道) 最終顏色 = 繪制的顏色 + (1 - 繪制顏色的透明度) × Canvas上的原有顏色

*** 注意: ***
1.這里我們一般把每個通道的取值從0(ox00)到255(0xff)映射到0到1的浮點數表示。
2.這里等式右邊的“繪制的顏色”、“Canvas上的原有顏色” 都是經過預乘了自己的Alpha通道的值。如繪制顏色:0x88ffffff,那么參與運算時的每個顏色通道的值不是1.0,而是(1.0 * 0.5333 = 0.5333)。 (其中0.5333 = 0x88/0xff)

使用這種方式的混合,就會造成后繪制的內容以半透明的方式疊在上面的視覺效果。

其實還可以有不同的混合模式供我們選擇,用Paint.setXfermode,指定不同的PorterDuff.Mode。

下表是各個PorterDuff模式的混合計算公式:(D指原本在Canvas上的內容dst,S指繪制輸入的內容src,a指alpha通道,c指RGB各個通道)


用示例圖來查看使用不同模式時的混合效果如下(src表示輸入的圖,dst表示原Canvas上的內容):


文章來自 GcsSloop

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,327評論 6 537
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,996評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,316評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,406評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,128評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,524評論 1 324
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,576評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,759評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,310評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,065評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,249評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,821評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,479評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,909評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,140評論 1 290
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,984評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,228評論 2 375

推薦閱讀更多精彩內容