【寫在前面】如果看完這篇博客,對你有幫助的話,歡迎加入全棧技術交流羣,羣內不定時發佈熱門學習資料,也歡迎進行技術交流,對我的博客有疑問也可以在羣裏@我。《全棧技術交流羣歡迎你》
好久沒有寫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