【 Android 】Layout ICON 設計
在開發andorid應用app時,因為各個device的解析度不一定相同,所以layout上會有自適應的問題,主要會遇到的三個問題如下:
一、橫屏和直屏顯示的切換。
橫屏和直屏的解決方式如下:在res目錄下建立layout-port(直式)和layout-land(橫式)的目錄,裡面分別放上直式的佈局和橫式的佈局,而當裝置螢幕的方向改變的時候,系統會自動切換相對應的佈局。
二、圖片大小。
1. 在res的目錄下,基本上有三個資料夾可以存放不同尺吋的圖檔(如上圖)
【DPI是“dot per inch”的缩写,每英寸像素数。】
drawable-hdpi (高解析度):854*480、800*480 (density 240)
drawable-mdpi(中解析度):480*320 (density 160)
drawable-ldpi (低解析度):320*240 (density 120)
圖片設計的流程為: 先設計出mdpi的圖,再放大至150%( 240 / 160 = 1.5 )當hdpi的圖,縮小至75%( 120 / 160 = 0.75 )當ldpi的圖。
2. 另一種方式是可以借由該裝置的解析度並套用公式來算出適合該裝置的圖片大小
公式 : screen pixels = file pixels * ( screen density / 160 ) ; /160是以mdpi為基準作計算;
此公式是在算設計出來的icon在每個大小不一樣的顯示器上顯示出來所看到的ICON大小都一樣的公式。
由目前的專案所使用到的裝置來看: HTC one 801e, 4.7 inch, 1080p Full HD(1920×1080), 468PPI;【 PPI: pixel per inch,像素密度(pixel density)單位,即每英吋的長度中所具有的像素。
http://0123456789.tw/?p=3156,此網頁可以計算出ppi,輸入HTC one 的尺吋4.7,再輸入解析度的長(1920)和寬(1080),可以算出大約的PPI約為469。】
由於目前andorid支援的最大螢幕解析度是320 density,所以468PPI已經超過320density所以使用320來計算(參考下圖),假設以1920*1080所設計出來的圖案為 160*160 pixels(實際點數),那要在裝置上顯示的點數是多少呢?
160(實際點數) = x * ( 320 / 160 ) x = 80(裝置點數)
那麼要放到裝置上顯示的圖案應該為 80*80 的大小。
假設再大一點的解析度是640density那icon應該變成 160 = x * ( 640 / 160 ) x = 40
那麼在640density的解析度上需要的icon大小就是40,這樣icon就會跟320density的解析度一樣大了。
所以若是解析度放大,icon需要跟著變大,就需要重新設計icon大小,然後再套公式算出該解析度的大小即可。
可以參考這個網友的分享:http://kny.cc/post/89831938759/android-units
三、佈局
將圖案設計好之後,接下來就要進入佈局的動作了,而佈局則有各個解析度的自適應的考量,所以可以參考下列幾項原則:
1. 在layout文件中設置元件尺寸用fill_parent、wrap_content、match_parent和dp;
一、橫屏和直屏顯示的切換。
橫屏和直屏的解決方式如下:在res目錄下建立layout-port(直式)和layout-land(橫式)的目錄,裡面分別放上直式的佈局和橫式的佈局,而當裝置螢幕的方向改變的時候,系統會自動切換相對應的佈局。
二、圖片大小。
1. 在res的目錄下,基本上有三個資料夾可以存放不同尺吋的圖檔(如上圖)
【DPI是“dot per inch”的缩写,每英寸像素数。】
drawable-hdpi (高解析度):854*480、800*480 (density 240)
drawable-mdpi(中解析度):480*320 (density 160)
drawable-ldpi (低解析度):320*240 (density 120)
圖片設計的流程為: 先設計出mdpi的圖,再放大至150%( 240 / 160 = 1.5 )當hdpi的圖,縮小至75%( 120 / 160 = 0.75 )當ldpi的圖。
2. 另一種方式是可以借由該裝置的解析度並套用公式來算出適合該裝置的圖片大小
公式 : screen pixels = file pixels * ( screen density / 160 ) ; /160是以mdpi為基準作計算;
此公式是在算設計出來的icon在每個大小不一樣的顯示器上顯示出來所看到的ICON大小都一樣的公式。
由目前的專案所使用到的裝置來看: HTC one 801e, 4.7 inch, 1080p Full HD(1920×1080), 468PPI;【 PPI: pixel per inch,像素密度(pixel density)單位,即每英吋的長度中所具有的像素。
http://0123456789.tw/?p=3156,此網頁可以計算出ppi,輸入HTC one 的尺吋4.7,再輸入解析度的長(1920)和寬(1080),可以算出大約的PPI約為469。】
由於目前andorid支援的最大螢幕解析度是320 density,所以468PPI已經超過320density所以使用320來計算(參考下圖),假設以1920*1080所設計出來的圖案為 160*160 pixels(實際點數),那要在裝置上顯示的點數是多少呢?
160(實際點數) = x * ( 320 / 160 ) x = 80(裝置點數)
那麼要放到裝置上顯示的圖案應該為 80*80 的大小。
假設再大一點的解析度是640density那icon應該變成 160 = x * ( 640 / 160 ) x = 40
那麼在640density的解析度上需要的icon大小就是40,這樣icon就會跟320density的解析度一樣大了。
所以若是解析度放大,icon需要跟著變大,就需要重新設計icon大小,然後再套公式算出該解析度的大小即可。
可以參考這個網友的分享:http://kny.cc/post/89831938759/android-units
三、佈局
將圖案設計好之後,接下來就要進入佈局的動作了,而佈局則有各個解析度的自適應的考量,所以可以參考下列幾項原則:
1. 在layout文件中設置元件尺寸用fill_parent、wrap_content、match_parent和dp;
設置view的属性android:layout_width和android:layout_height的值时,wrap_content,match_parent或dp比px更好,文字大小应该使用sp来定義。
2. 在程序的代码中不要出现具體的像素值;为了使程式簡單,android内部使用pix为单位表示控件的尺寸,但這是基於目前的裝置上。为了適應多種螢幕,android建議開發者不要使用具体的像素来表示元件尺寸。
3. 對不同的螢幕提供合適大小的圖片。不同大小螢幕用不同大小的圖片,low:medium:high:extra-high图片大小的比例为3:4:6:8。
以上是參考網路上的資訊和實作上的一點心得,之後若有新的資訊會再補充。
以上是參考網路上的資訊和實作上的一點心得,之後若有新的資訊會再補充。
留言
張貼留言