【移動開發】iOS和Android不規則按鈕解決方案
阿新 • • 發佈:2018-12-17
【寫在前面】如果看完這篇部落格,對你有幫助的話,歡迎加入全棧技術交流群,群內不定時釋出熱門學習資料,也歡迎進行技術交流,對我的部落格有疑問也可以在群裡@我。《全棧技術交流群歡迎你》
好久沒有寫Android和iOS了,最近看看之前寫的專案,別忘了,2333
效果圖
簡單介紹一下介面效果,按鈕開啟都是會高亮顯示,並且按下車燈開啟的按鈕時,頂部的車輛車燈處會有燈光,最後左側的光條會做來回掃描的效果。由於一些不明不白的原因,iOS介面寫到一半,這個方案被推翻了。所以iOS的介面跟Android的介面有一點不一樣。
首先說一下解決方案的思路,Android和iOS的原理差不多,其實底部的圓形按鈕是由五個相同大小的正方形按鈕疊加而成,按鈕的背景圖分上下左右四個扇形,中間一個較小的圓形,這麼五個部分,背景圖除了自己對應部分顯示以外,其他都是透明的背景色,如下圖:
通過按鈕的事件,獲取點選位置的背景圖是否有畫素,來判定點選事件是否生效,如果沒有生效那需要穿透到下一個按鈕。
上面的圖是UI的工作,程式碼的部分得分開來講。
1.Android
既然涉及到圖片的操作,那一想應該是用ImageButton唄
final ImageButton topBtn = (ImageButton) findViewById(R.id.top_btn); final Bitmap bitMap = ((BitmapDrawable)topBtn.getDrawable()).getBitmap(); topBtn.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View view, MotionEvent motionEvent) { if(bitMap.getPixel((int)(motionEvent.getX()),(int)(motionEvent.getY()))!=0) { //TODO Click }else{ } return false; } });
2.iOS
iOS有大神寫好的框架OBShapedButton(適用於storyboard),點選方法跟普通的UIButton一樣,用起來十分方便。
大神GitHub傳送門:https://github.com/ole/OBShapedButton