2018年8月25日 星期六

CP計算機第二版開箱




CP計算機第二版製作時間:2018.06.07 ~ 2018.08.24


這幾個月為了CP計算機真的忙翻,連最簡單的Doodle都不更新就知道有多忙,所以一定要寫篇紀念。


先從第一版開始,起因是我在長榮海運工作的時候每個月都有花不完的統一集團禮卷,所以很常去統一超商買飲料,為了省錢都會選有第二件打折或加幾塊多一件的飲料,但手機只有一個,需要計算的飲料卻有好幾個。就一句話,麻煩!這肯定是不想算啦,麻煩!麻煩!



後來資策會結業後為了暖手,寫了CP計算機第一版,真是不忍直視


視覺部份因為有家人視力不好,所以用黑白高反差,想法是像班馬線這樣每格都很明顯,成效如何就不清楚


技術部份用現在的角度看就滿慘的,文字都沒有自適應大小,列表用過時的ListView,輸入資料用AlertDialog混過去,可以拿來稍微講一下的就是用SQLite排序和存取資料


給Line群的朋友試用後,有個朋友可能看不下去,幫我重新畫一個圖示,左邊是我自己畫的,右邊是朋友畫的。



仔細看還會發現我連透明圓角都不會,所以安裝後會在四個角看到白點,真是醜爆了,不過用黑底白字的理由一樣是方便視力不好的人看,只要看到一塊黑黑的就知道是CP計算機。


開始工作後,每天都在趕公司的程式,每天上班八小時寫程式,回家再寫四小時,週末再寫一天,CP計算機就這樣被我忘記啦,這狀態持續一年多,某天和朋友聊到相關的話題,想說推廣一下CP計算機,進到Play商店頁才發現這程式真是夠爛的,開始了重構的計劃。


視覺出圖、企劃出流程、程式寫功能,這樣真的很單純也不用花腦力,但是一個人全包後真的有點累。


為了讓首頁有最大顯示空間和沉浸式布局,把Toolbar拔掉,但原本的頁面切換是靠Toolbar的Menu功能,所以改用Tablayout加ViewPager鑲嵌計算和清單頁面。輸入方式統一改成點擊TextView跳出軟鍵盤再跳出PopupWindows裡面掛EditText,送出後再修改TextView的內容


計算頁面原本和第一版一樣,只有額外計算的四個選項從RadioGroup改成跳出PopupWindows裡面RecyclerView;有次我去家樂福順便拿出來試用,發現要多產品比較只能算完後存檔,自己都覺得難用更何況是路人甲乙丙丁,所以改流程鑲了一個RecyclerView進去,這樣計算頁面就能多筆計算,順便做一個最划算的高亮顯示,這個流程改動花了一星期重新設計,一堆Interface傳來傳去(其實用EventBus做會很快,不過這樣太怠惰所以不想掛EventBus上去)這時候雖然能多筆計算,但額外計算還是只能用同一個計算方式


某天和同事討論該買大罐的舒跑,還是兩瓶小罐搭配第二件七折,這時發現雖然能多筆計算,但是額外選項不同還是上次遇到的問題一樣,額外計算應該也要抽出來適配,所以又小改一次流程,改完後馬上就遇到額外計算Position錯亂的問題,最後把PopupWindows拆掉改成DialogFragment;本來以為解決一個坑,沒想到上版前夕我自己測試的時候發現新增刪除再寫入資料會引發數組錯亂的BUG,修了四天怎樣都修不好,後來火大重新寫一個RecyclerViewAdapter,也妥協輸入方式,改成用EditText直接輸入真的是寫的很厭倦,原本還租郵報密戰想說測完上版後來看,結果過了二十八天才看完這部片。



原本的儲存頁面只是AlertDialog輸入商店、品名、備註,現在也給他一個頁面,因為我剛學完SDK 27的相機和檔案動態權限,所以也把這功能放進去;懶的手動輸入地址所以加入衛星定位輸入地址功能,原本輸入商店和品名打算用掃條碼的方式自動輸入,但後來發現只能掃出條碼的數字,要把這數字轉成商店和品名要付錢買API才有,而且還滿貴的所以作罷;也為了以後可能有後端管理,把SQLite儲存改成JsonArray的方式儲存資料,不過少了排序功能有點可惜



清單頁面沒什麼好講的,就ListView換成RecyclerView,都2018年了還有人ListView不換成RecyclerView



詳細資料頁面採用CoordinatorLayout和AppBarLayout的方式讓照片不會太佔位置,之前本來要讓公司的專案有這個效果,結果其他人說做起來有難度,所以換成ScrollView,把原本編輯的功能拿掉換成另存新檔和匯入計算頁面,把經緯度Intent到Google導航用就能做到簡易地圖功能,這方法不用申請GoogleMap金鑰,算是偷吃步的一種方法。



設定頁原本只有設定啟始頁的功能,做爽的,後來新加的功能都用AlertDialog當選項,已經懶的拉Xml了;原本我的規劃是只顯示"
數量/價格",某天幫我媽去全聯買雞蛋時發現一個潛在用戶,他正在很堅辛的用手機計算每種鮮奶的CP值,但我發現他的算法是"價格/數量",所以把兩種算法都加入,用切換顯示的方式呈現數據


視覺方面原本想用外包的方式來解決配色、畫Icon、拉Layout等問題,但視覺朋友說找業界外包的話一個頁面一千起跳,所以我還是自己來好了;微軟Metro配色、蘋果圓角、Google Material三位一體,每個按鈕的間隔也採用魔術8dp、選項旁邊有小圖示,每個按鈕有顏色和震動回饋等都是
Google的設計指示;後來我兩個朋友看到後都眉頭一皺覺得彩色配色很亂,委婉的跟我說按鈕改成白色比較好,所以多了黑底白字和白底黑字的顏色風格;其實我最喜歡的是儲存頁面,不只有微軟Metro配色,排列方式也有Metro風格;但開啟設定頁面的方式完全違反了Google Material方式,因為SwipeRefreshLayout的由上往下拉的手勢操作是下拉刷新,Google Material也明確指出滑動更新不應該被使用在導覽面板,不過我真的不知道要在那裡放啟動設定的按鈕,所以就這樣吧。


最後就是圖示Icon,前面不是說有朋友幫我畫一個嗎,原本要把黑白的版本拿掉改用朋友幫我畫的,結果我找不到原始的專案資料夾,上架金鑰和圖示都在裡面,所以只好重生一個金鑰,改PackgeName當做一個全新的專案上傳;也不好意思問朋友有沒有留圖檔,只好自己再畫一個,基本上大前提不變,就是大C包大P,一定要有圓角



第一版太醜了沒留檔,第二版如左圖,但覺得又很單薄少了點什麼,於是呼叫Google大神,看看其他人的圖示長什麼樣子尋求靈感,就讓我找到蘋果有給圖示素材工具,看著看著就想到裡面可以組成CP,最後用油漆桶倒啊倒,圖示就這樣產生啦,原本中間是沒切割的,但一樣覺得少了點什麼,切割畫下去後覺得滿意。




自從開始重新製作CP計算機,感覺又回到剛進公司那種白天寫程式、晚上寫程式、假日寫程式那種日子,程式內不放廣告依然是我的原則,廣告流量沒幾個錢又破壞美感又佔空間,本來想在這個版本上應用程式內付款,看看有沒有人會想斗內一下,結果想想還是算了,先把CP計算機送審再說。



如果接下來還有時間,會多一個單位換算的頁面,因為我看我媽抓過一個很破的單位換算程式,裡面就兩個EditText,這麼破的程式居然還放Google廣告,真的看不下去。



如果你覺得缺什麼功能但CP計算機沒有,也歡迎留言許願。




-----2018.08.27-----
貼去PTT省錢板安麗一波後,衝到竄升速度最快第一名



CP計算機Play商店

https://play.google.com/store/apps/details?id=andyawd.com.tw.costperformancecalculator2

Google Material Design 正體中文版

https://www.gitbook.com/book/wcc723/google_design_translate






沒有留言:

張貼留言