android滑動圖片輪播
⑴ app啟動圖標設計規范-技術干貨：ApplewatchAPP設計規范
androidapp界面設計規范(dpi,dp,px等)PPI(Pixelsperinch):每英寸所擁有的像素數,即像素密度。
DPI(dotsperinch):即每英寸上,所能印刷的網點數,一般稱為像素密度。ppi計算公式:ppi=屏幕對角線像素數/屏幕對角線英寸數,通過勾股定理計算屏幕對角線像素數。
ScreenSize(屏幕尺寸):手機屏幕尺寸大小,如3英寸、4英寸、4.3英寸、5.7英寸,指的是對角線的長度。
DIP(deviceindependentpixel):即dip/dp,設備獨立像素。1px=1dp
density(由dpi決定)
Resolution(解析度):指手機屏幕垂直和水平方向上的像素個數。eg解析度480
800,指該設備垂直方向有800個像素點,水平方向有480個像素點。
px(Pixel像素):相同像素的ui,在不同解析度的設備上效果不同。在小解析度設備上會放大導致失真,大解析度上被縮小。
AndroidDesign里把主流設備的dpi歸成了四個檔次:
120dpi、160dpi、240dpi、320dpi
,具體見如下表格。
實際開發當中,我們經常需要對這幾個尺寸進行相互轉換(比如先在某個解析度下完成設計,然後縮放到其他尺寸微調後輸出),一般按照dpi之間的比例即2:1.5:1:0.75來給界面中的元素來進行尺寸定義。
也就是說如果以160dpi作為基準的話,只要尺寸的DP是4的公倍數,XHDPI下乘以2,HDPI下乘以1.5,LDPI下乘以0.75即可滿足所有尺寸下都是整數pixel。但假設以240dpi作為標准,那需要DP是3的公倍數,XHDPI下乘以1.333,MDPI下乘以0.666,LDPI下除以2。而以LDPI和XHDPI為基準就更復雜了。同時第一款Android設備(HTC的T-MobileG1)是屬於160dpi的。鑒於以上各種原因,
標准dpi=160
谷歌官方對dp的解釋如下:
,-independentway.
Thedensity-,"medium"densityscreen.Atruntime,,asnecessary,.:
px=dp*(dpi/160).
Forexample,ona240dpiscreen,1dpequals1.5physicalpixels.'sUI,.
簡單來說,以160dpi的設備為准,該設備上1dp=1px;如果屏幕密度大,1dip代表的px就多,比如在320dpi的屏幕上,1dip=2px(即1dp代表2個像素)。在app開發時,最好用dp來做界面的布局,以保證適配不同屏幕密度的手機。
dp和px的換算公式:
我的理解,該公式表示px的數值等於dp的數值*(設備dpi/160)
注意,px、dp是單位,但density沒單位。
applyDimension的源碼如下,可參考:
android的尺寸眾多,建議使用解析度為
720x1280
的尺寸設計。這個尺寸720x1280中顯示完美,在1080x1920中看起來也比較清晰;切圖後的圖片文件大小也適中,應用的內存消耗也不會過高。
app啟動圖標為48*48dp,對應各dpi設備,圖像資源像素如下:
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|48
48px|72
72px|94
96px|144px
144px|
操作欄圖標為32*32dp,對應各dpi設備,圖像資源像素如下:其中圖形區域尺寸是24*24dp,可參考平時ui切圖會有部分留白。
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|32
32px|48
48px|64
64px|96px
96px|
通知欄圖標為24*24dp,對應各dpi設備,圖標像素如下:
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|24
24px|36
36px|48
48px|72px
72px|
某些場景需要用到小圖標,大小應當是16*16dp,其中圖形區域尺寸12*12dp。
|mdpi|hdpi|xhdpi|xxhdpi|
|---:|---:|---:|---:|---:|
|16
16px|24
24px|32
32px|48px
48px|
APP界面標注及切圖注意事項一、App屏幕適配通用知識簡介
1.標注時注意事項
一般情況要定位一個Icon只需給出上/下邊距,左/右邊距
標注圖標距離只需標到可點擊范圍外
通用型顏色、字體單獨標明一份
通用型模塊只需單獨標明一份,如導航欄
手機可視區域一般為寬度固定,長度超出邊界可滑動,所以,標注物體寬度時可按比例說明
如果要標注內容上下居中,左右居中,或等比可不標注
當繪制的是一個列表時且每一條內容一樣時,只需標注一條,如果每條內容有少許不同時,只需標明差異____糠
當交付的是一張完整圖片時,不需做機型適配,只需給高清圖(1920*1080)即可,注意進行壓縮
當背景是純色時只需給出色值(iOS使用RGB色值,Android使用16進制色值)
圖標應給出可點擊區域
若圖標在不同頁面重復出現,且尺寸相差不大,直接給出最大一份切圖,並在圓形圖標明尺寸,程序會根據需求縮放
可點擊按鈕通常要給出兩種狀態:普通/點擊(選中)
按鈕如果只是矩形、圓角矩形、圓形、橢圓形,給出尺寸和色值,可程序設置
漸變效果可通過程序實現,只需給出起始和結束色值跟范圍
2.切圖命名規范
背景:bg_
按鈕:btn_xxx_
圖片:img_
標簽:tab_
圖標:icon_
照片:pht_
導航:nav_
圖示:tip_
菜單:menu_
側欄:sidebar_
二、iOS應用屏幕適配
1.iOS究竟要是適配多少種機型,以哪款機型解析度作為設計尺寸最好
2016-3
iOS只需兼容iPhone4,完美兼容iphone5以上機型
如果按矢量圖製作設計圖按1X尺寸作圖,後期放大成2X、3X;如果按傳統的px作圖應用最大尺寸(3X)作為畫布。
以3X作為畫布(1242*2208)難記且不能整除,我們可直接以1280(640*2)作為寬度,完美縮放為1X、2X;
2X->3X以1.5來算尺寸和字型大小可得到較好效果
2.界面尺寸
設備解析度狀態欄高度導航欄高度標簽欄高度
iPhone6plus1242*2208px60px132px146px
iPhone6750*1334px40px88px98px
iPhone5/5s/5c640*1136px40px88px98px
iPhone4/4s640*960px40px88px98px
iPad3/4/Air/Air2/mini22048*1536px40px88px98px
iPad1/21024*768px20px44px49px
iPadmini1024*768px20px44px49px
導航欄背景圖中,如果考慮狀態欄背景,則背景圖尺寸為導航欄px+狀態欄px,如果只改變導航欄顏色則只需要導航欄px
3.圖標尺寸
設備AppStore程序應用主屏幕spotlight搜索標簽欄工具欄和導航欄
iPhone6plus1024*1024px180*180px144*144px87*87px75*75px66*66px
iPhone61024*1024px120*120px144*144px58*58px75*75px44*44px
iPhone5/5s/5c1024*1024px120*120px144*144px58*58px75*75px44*44px
iPhone4/4s1024*1024px120*120px144*144px58*58px75*75px44*44px
iPad3/4/Air/Air2/mini21024*1024px180*180px144*144px100*100px50*50px44*44px
iPad1/21024*1024px90*90px72*72px50*50px25*25px22*22px
iPadmini1024*1024px90*90px72*72px50*50px25*25px22*22px
按鈕切圖建議以等寬高尺寸切圖,且像素必須>=88、*88px,當本身圖片寬度或高度不足時,補充空白像素(透明像素).一般情況下,只需要普通狀態下按鈕切圖即可
(適配不建議等比放大)
4.參考文獻
友盟設備指數
APP切圖流程和APP切圖命名規范詳細完整版
APP切圖詳細規范終極指南
iOS和Android的app界面設計規范
APP界面切圖命名和文件整理規范
三、Android應用屏幕適配
1.用px作為基礎單位的缺陷
對比上圖可以知道,ppi越低圖片顯示的越大,ppi越高圖片顯示的越小,造成不同手機上顯示圖片布局不統一!
使用dp作為單位所有機子顯示統一
2.衡量一個屏幕清晰度單位————屏幕密度(dpi==ppi)
計算公式:屏幕dpi=√(屏幕長^2+屏幕寬^2)/屏幕尺寸
名稱密度代表解析度Android單位與像素換算
mdpi120dpi~160dpi320*4801dp=1px
hdpi160dpi~240dpi480*8001dp=1.5px
xhdpi240dpi~320dpi720*12801dp=2px
xxhdpi320dpi~480dpi720*1280/1080*19201dp=3px
xxxhdpi480dpi~640dpi2k~4k1dp=4px
屏幕大小啟動圖標操作欄圖標上下文圖標系統通知圖標(白色)最細筆畫
320*480px48*48px32*32px16*16px24*24px不小於2px
480*800px/480×854px/540×960px72*72px48*48px24*24px36*36px不小於3px
720*1280px96*96px64*64px32*32px48*48px不小於4px
1080*1920px144*144px96*96px48*48px72*72px不小於6px
3.究竟要適配多少種機型
2016-3
得出結論:只需適配高端的xxhdpi(720*1280/1080*1920),低端的hdpi(480*800)
4.度量單位與邊框
可觸摸控制項都是以48dp為單位的
為什麼是48dp?一般情況下,48dp在設備上的物理大小是9mm(會有一些變化)。這剛好在觸摸控制項推薦的大小范圍(7-10mm)內,而且這樣的大小,用戶用手指觸摸起來也比較准確、容易。(xxhdpi標准下為144px)
邊框注意留白界面元素之間的留白應當是8dp。
例:
5.字體排版
Roboto是Android系統的默認字體集,字體大小單位sp(可縮放像素數,scaleablepixels)
根據Android設計規范,推薦使用12、14、16、20和34號,字體粗細可調
spHDPIXHDPIXXHDPI
12sp18px24px36px:
14sp21px28px42px
16sp24px32px48px
18sp27px36px54px
20sp30px40px60px
34sp51px68px102px
(注意:字型大小要為雙數,且不可帶小數位)
6.9-patch圖製作
什麼是9-patch圖
為什麼要用9-patch格式製作圖
適應各種手機屏幕拉伸圖片需求,有效縮減圖片體積
什麼情況下使用
當發現圖片是背景時且可能拉伸被拉伸時,或圖片過大時
如何製作patch9圖
圖片外層增加一全透明像素,在透明像素區花4條純黑色邊
1.寬度可拉伸區域
2.高度可拉伸區域
3.垂直內容區域
4.水平內容區域
8.參考文獻
友盟設備指數
Android設計指南簡體中文版4.x
MaterialDesign中文版
Android設計中的.9.png
技術干貨：ApplewatchAPP設計規范一、規范概要
1.導航形式
層級式,通過當前頁面點擊跳轉到另外頁面的形式。適合應用於復雜產品,需要層層遞進。
頁面式,頁面切換,滑動,類似輪播
AppleWatch導航形式任選其一,不得同時存在。
2.交互方式
輕觸:列表、按鈕、切換等控制項的操作
手勢:縱向輕掃,界面滾動;橫向輕掃,界面導航之間的查看;從屏幕左側邊緣向右輕掃,返回父級界面。
壓力觸控:喚出當前頁面情景菜單
實體控制項(手錶旋鈕):長頁面瀏覽,避免手指長時間輕掃界面何遮擋界面
3.色彩
使用黑色作為APP的背景色,或者深色且高斯模糊的圖片作為背景
高對比度的顏色使用於文字、圖標、界面
4文字
SF和蘋方
5.圖標
通知圖標、首屏圖標和長看圖標、短看圖標
情景圖標(App內功能圖標)
6.布局
並排放置的圖標一行不要超過三個
布局優先採用左對齊
二、設計尺寸
1.1屏幕尺寸
38mm(272*340px)
42mm(312*390px)
1.2圖標尺寸
通知圖標48PX(38mm)55px(42mm)
首屏圖標和常看圖標80px(38mm)88px(42mm)
短看圖標172px(38mm)196px(42mm)
菜單情景圖標(App內的功能圖標)
圖標大小70px,實際圖標大小46px。(38mm)
圖標大小80px,實際圖標大小54px。(42mm)
圖標線寬不得小於4px
1.3圖標
1.3.1
通知圖標,系統通知彈出的圖標
1.3.2
首屏圖標,如下圖所示。首屏圖標80px(38mm)88px(42mm)
1.3.3長看圖標,如下所示,左上角圖標。常看圖標80px(38mm)88px(42mm)
1.3.4短看圖標,如下圖所示。短看圖標172px(38mm)196px(42mm)
2.字體和文字
2.1字體
SF和蘋方
2.2文字(字型大小,常見字型大小單位是PT和PX,PT是開發單位,PX是設計單位,在@2X下換算關系1PT=2PX)
標題headline18PT
正文標題caption15PT
正文body15PT
備注、腳注、輔助文字footnote12PT、13PT
3.顏色
高對比度的顏色使用於文字、圖標、界面
1.主色,如下圖所示
2.輔助色、點睛色(控制項、按鈕)
按鈕控制項在設計中通常帶有透明度
3.字體顏色和透明度
4.布局
1狀態欄和下方圖片和列表布局間距
38mm(30px),42mm(32px)
2狀態欄和列表按鈕布局間距
38mm(11px),42mm(13px)
3狀態欄和下方文本布局間距
38mm(46px),42mm(50px)
4文字邊距和分割線按鈕列表圖片邊距
38mm和42mm邊距相同
5.圖片和按鈕到屏幕兩邊距離
38mm和42mm邊距相同
5.控制項和列表
1單行控制項和列表布局尺寸
38mm
42mm
2.雙行控制項和列表布局尺寸
2.1正文+備注
38mm
42mm
2.2雙行正文
38mm
42mm
3.三行控制項和列表布局尺寸
38mm
42mm
4.多行控制項和列表布局尺寸
38mm
42mm
5.控制項和列表類型
_
⑵ Android-自定義輪播Banner-Viewpaper2實現+貪吃蛇原點指示器+觸摸暫停輪播處理
在構建Android自定義輪播Banner的進程中，我們通過整合Viewpaper2，實現了一款更為完善的輪播組件。此組件已經集成至github倉庫，以便開發者探索和使用。
在實現過程中，我們關注了細節優化和內存管理，盡管還有待完善的細節和潛在的bug，但整體效果已接近預期。用戶界面的展示效果顯著提升，使得輪播體驗更流暢、更直觀。
具體實現步驟包括：
1. 繼承ViewGroup，以便為輪播Banner添加圓角效果。通過自定義測量和布局邏輯，確保內嵌的Viewpaper2組件內容在邊框內正確排列，最終通過重寫dispatchDraw方法，實現圓角覆蓋效果。
2. 指示器的繪制相對簡單，關鍵在於准確定位和實現動態變化效果。結合ViewPager2的OnPageChangeCallback回調，我們能夠精準計算當前頁面位置，動態調整指示器顏色和貪吃蛇效果，確保視覺體驗連貫且引人入勝。
3. 為了響應觸摸事件，停止輪播，我們利用了Viewpaper2提供的onPageScrollStateChanged回調方法。值得注意的是，外部的setTouchEvent事件對Viewpaper2無效，因此我們需直接通過回調處理觸摸事件，避免了不必要的繼承和事件重寫。
整個實現過程中，我們關注了性能、內存和顯示問題，力求提供一個功能豐富、體驗優化的輪播組件。建議在性能和內存優化上進一步完善，以提升用戶體驗。同時，考慮將此組件封裝成開源項目，與開發者社區共享，共同促進移動應用開發的進步。
總結，此輪播Banner組件已具備基礎功能，滿足項目需求，適用於多種場景。未來，我們計劃繼續優化和完善此組件庫，增加刷新功能，並進一步簡化工程模板。在此過程中，我們期待與開發者社區共同探索和創新，共同進步。
最後，作為開發者，我們應持續關注技術進步，不斷優化和創新，為用戶提供更優質的移動應用體驗。在忙碌的准備面試期間，我們仍然保持對技術的熱情和追求，希望與開發者朋友們共勉，共同成長。
⑶ Android零基礎入門第60節：日歷視圖CalendarView和定時器Chronometer
上一期學習了時鍾組件，本期繼續深入學習日歷視圖CalendarView和定時器Chronometer。日歷視圖可用於顯示和選擇日期，通過調用setOnDateChangeListener()方法可監控日期改變。常用屬性包括日期格式、基準時間等。接下來，我們將通過示常式序學習CalendarView的使用，使用指定布局文件並運行程序，可以看到日期選擇界面效果。
接下來，我們將學習Chronometer定時器，它可通過setBase()方法設置基準時間開始計數，不設置基準時間將使用調用start()方法時的時間。默認顯示時間格式為"MM:SS"或"H:MM:SS"，也可自定義格式。Chronometer的重要屬性包括格式設置、開始計時、停止計時等。接下來，我們通過示常式序學習Chronometer的使用，使用指定布局文件並運行程序，可以看到定時器界面效果。
至此，關於時間和日期類組件的學習基本完成。你是否已經掌握了這些組件的使用？如果還有疑問，歡迎在下方留言討論，或加入Android零基礎入門技術討論微信群，共同成長！
版權聲明：本文版權為微信公眾號分享達人秀（ShareExpert）——鑫鱻所有，未經作者授權，不得擅自轉載。
往期總結分享：
Android零基礎入門第1節：Android的前世今生
Android零基礎入門第2節：Android系統架構和應用組件
Android零基礎入門第3節：Android開發環境入門
Android零基礎入門第4節：正確安裝和配置JDK
Android零基礎入門第5節：ADT Bundle的高效使用
Android零基礎入門第6節：SDK Manager配置優化
Android零基礎入門第7節：Android模擬器配置
Android零基礎入門第8節：編寫第一個HelloWorld應用
Android零基礎入門第9節：Android應用實戰：無需代碼也能開發
Android零基礎入門第10節：升級開發IDE：Android Studio
Android零基礎入門第11節：運行Android Studio工程
Android零基礎入門第12節：熟悉Android Studio界面
Android零基礎入門第13節：優化Android Studio開發工具
Android零基礎入門第14節：使用Genymotion加速開發
Android零基礎入門第15節：Android Studio項目結構應用
Android零基礎入門第16節：用戶界面開發基礎
Android零基礎入門第17節：文本框TextView的使用
Android零基礎入門第18節：輸入框EditText的使用
Android零基礎入門第19節：按鈕Button的基本操作
Android零基礎入門第20節：復選框CheckBox和單選按鈕RadioButton的使用
Android零基礎入門第21節：開關組件ToggleButton和Switch的應用
Android零基礎入門第22節：圖像視圖ImageView的使用
Android零基礎入門第23節：圖像按鈕ImageButton和縮放按鈕ZoomButton的使用
Android零基礎入門第24節：自定義View的簡單使用
Android零基礎入門第25節：簡單且常用的LinearLayout布局
Android零基礎入門第26節：布局對齊方式對比
Android零基礎入門第27節：正確使用padding和margin
Android零基礎入門第28節：RelativeLayout相對布局的使用
Android零基礎入門第29節：TableLayout表格布局
Android零基礎入門第30節：FrameLayout幀布局應用
Android零基礎入門第31節：AbsoluteLayout絕對布局的使用
Android零基礎入門第32節：新推出的GridLayout網格布局
Android零基礎入門第33節：Android事件處理概述
Android零基礎入門第34節：監聽事件處理
Android零基礎入門第35節：回調事件處理
Android零基礎入門第36節：系統事件處理
Android零基礎入門第37節：ListView組件介紹
Android零基礎入門第38節：Adapter組件介紹
Android零基礎入門第39節：ListActivity和自定義列表項
Android零基礎入門第40節：自定義ArrayAdapter
Android零基礎入門第41節：使用SimpleAdapter
Android零基礎入門第42節：自定義BaseAdapter
Android零基礎入門第43節：ListView優化和列表首尾使用
Android零基礎入門第44節：ListView數據動態更新
Android零基礎入門第45節：GridView網格視圖
Android零基礎入門第46節：Spinner列表選項框
Android零基礎入門第47節：AutoCompleteTextView自動完成文本框
Android零基礎入門第48節：ExpandableListView可折疊列表
Android零基礎入門第49節：AdapterViewFlipper圖片輪播
Android零基礎入門第50節：StackView卡片堆疊
Android零基礎入門第51節：ProgressBar進度條
Android零基礎入門第52節：自定義ProgressBar炫酷進度條
Android零基礎入門第53節：SeekBar拖動條和RatingBar星級評分條
Android零基礎入門第54節：ViewSwitcher視圖切換組件
Android零基礎入門第55節：ImageSwitcher和TextSwitcher
Android零基礎入門第56節：ViewFlipper翻轉視圖
Android零基礎入門第57節：DatePicker和TimePicker選擇器
Android零基礎入門第58節：NumberPicker數值選擇器
Android零基礎入門第59節：Clock時鍾組件
掃碼了解更多內容：