自定義View基礎(chǔ)篇

基礎(chǔ)篇

一、坐標(biāo)系

1氢伟、屏幕坐標(biāo)系和數(shù)學(xué)坐標(biāo)系的區(qū)別

由于移動設(shè)備一般定義屏幕左上角為坐標(biāo)原點,向右為x軸增大方向幽歼,向下為y軸增大方向朵锣, 所以在手機屏幕上的坐標(biāo)系與數(shù)學(xué)中常見的坐標(biāo)系是稍微有點差別的。下圖為屏幕坐標(biāo)系:


2甸私、View的坐標(biāo)系

注意:View的坐標(biāo)系統(tǒng)是相對于父控件而言的诚些。如下圖所示:

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

3、MotionEvent中 get 和 getRaw 的區(qū)別

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

如下圖所示皇型,其中相同顏色的內(nèi)容是對應(yīng)的诬烹,其中為了顯示方便,藍色箭頭向左稍微偏移了一點.


4弃鸦、核心要點

二绞吁、角度與弧度

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

1唬格、前言

①家破、為什么講這個颜说?

在我們自定義View,尤其是制作一些復(fù)雜炫酷的效果的時候员舵,實際上是將一些簡單的東西通過數(shù)學(xué)上精密的計算組合到一起形成的效果脑沿。
這其中可能會涉及到畫布的相關(guān)操作(旋轉(zhuǎn)),以及一些正余弦函數(shù)的計算等马僻,這些內(nèi)容就會用到一些角度、弧度相關(guān)的知識注服。

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

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

例如: 角度是60進位制鸭你,遇到30°6′這樣的角,應(yīng)該轉(zhuǎn)化為10進制的30.1°擒权。但弧度就不需要袱巨,因為弧度本身就是十進制的實數(shù)。

2碳抄、角度與弧度的定義

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

角度:

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

弧度:

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


3爷光、角度和弧度的換算關(guān)系

rad 是弧度垫竞, deg 是角度

4、一些細節(jié)問題

由于默認(rèn)屏幕坐標(biāo)系和常見數(shù)學(xué)坐標(biāo)系的小差別(坐標(biāo)系問題點這里)瞎颗,所以在角上必然也會存在一些區(qū)別件甥,例如:
在常見的數(shù)學(xué)坐標(biāo)系中角度增大方向為逆時針,
在默認(rèn)的屏幕坐標(biāo)系中角度增大方向為順時針哼拔。

三引有、顏色

簡要介紹安卓中的顏色相關(guān)內(nèi)容,包括顏色的定義倦逐,創(chuàng)建顏色的幾種方式譬正,以及顏色的混合模式等

1宫补、簡單介紹顏色

安卓支持的顏色模式:

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

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

以ARGB8888為例介紹顏色定義:

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

2、幾種創(chuàng)建或使用顏色的方式

①型诚、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)中引用或者創(chuàng)建顏色

<!--在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)

簡單的取色調(diào)色工具踏揣,可以從屏幕取色,非常小而精簡匾乓。
點擊下載ColorPix

②捞稿、Picpick(for Win)

功能更加強大的工具:PicPick。
PicPick具備了截取全屏拼缝、活動窗口娱局、指定區(qū)域、固定區(qū)域咧七、手繪區(qū)域功能衰齐,支持滾動截屏,屏幕取色继阻,支持雙顯示器耻涛,具備白板废酷、屏幕標(biāo)尺、直角座標(biāo)或極座標(biāo)顯示與測量抹缕,具備強大的圖像編輯和標(biāo)注功能澈蟆。
點擊下載PicPick

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

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

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

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

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

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

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


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


文章來自 GcsSloop

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末抡谐,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子桐猬,更是在濱河造成了極大的恐慌麦撵,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,548評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件溃肪,死亡現(xiàn)場離奇詭異免胃,居然都是意外死亡,警方通過查閱死者的電腦和手機惫撰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評論 3 399
  • 文/潘曉璐 我一進店門羔沙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人润绎,你說我怎么就攤上這事撬碟〉ぃ” “怎么了?”我有些...
    開封第一講書人閱讀 167,990評論 0 360
  • 文/不壞的土叔 我叫張陵呢蛤,是天一觀的道長惶傻。 經(jīng)常有香客問我,道長其障,這世上最難降的妖魔是什么银室? 我笑而不...
    開封第一講書人閱讀 59,618評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮励翼,結(jié)果婚禮上蜈敢,老公的妹妹穿的比我還像新娘。我一直安慰自己汽抚,他們只是感情好抓狭,可當(dāng)我...
    茶點故事閱讀 68,618評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著造烁,像睡著了一般否过。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上惭蟋,一...
    開封第一講書人閱讀 52,246評論 1 308
  • 那天苗桂,我揣著相機與錄音,去河邊找鬼告组。 笑死煤伟,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的木缝。 我是一名探鬼主播便锨,決...
    沈念sama閱讀 40,819評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼氨肌!你這毒婦竟也來了鸿秆?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,725評論 0 276
  • 序言:老撾萬榮一對情侶失蹤怎囚,失蹤者是張志新(化名)和其女友劉穎卿叽,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體恳守,經(jīng)...
    沈念sama閱讀 46,268評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡考婴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,356評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了催烘。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片沥阱。...
    茶點故事閱讀 40,488評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖伊群,靈堂內(nèi)的尸體忽然破棺而出考杉,到底是詐尸還是另有隱情策精,我是刑警寧澤,帶...
    沈念sama閱讀 36,181評論 5 350
  • 正文 年R本政府宣布崇棠,位于F島的核電站咽袜,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏枕稀。R本人自食惡果不足惜询刹,卻給世界環(huán)境...
    茶點故事閱讀 41,862評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望萎坷。 院中可真熱鬧凹联,春花似錦、人聲如沸哆档。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,331評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽瓜浸。三九已至象泵,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間斟叼,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,445評論 1 272
  • 我被黑心中介騙來泰國打工春寿, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留朗涩,地道東北人。 一個月前我還...
    沈念sama閱讀 48,897評論 3 376
  • 正文 我出身青樓贞远,卻偏偏與公主長得像姊途,于是被迫代替她去往敵國和親源哩。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,500評論 2 359

推薦閱讀更多精彩內(nèi)容