Android版簡曆（四）

涉及技術自訂控制項、自訂控制項動畫第一步：繼承自訂控制項雖然已經實現了需要的控制項，但是這個控制項的功能還是不夠強大，使用起來也不夠方便。舉個例子：讓控制項的顏色隨著能力值的大小而不同或者是點擊之後有動畫效果等。此時一個簡簡單單的控制項就不行了，接下來先讓控制項變得更方便使用。繼承上篇文章建立的自訂控制項Ring，首先讓這個控制項更容易控制其顏色，使用如下形式建立的時候是很容易控制顏色的：
也就是只需要傳入 名稱、技能值、技能顏色 就可以建立這個控制項，根據這個思路，我們很容易寫出下面的代碼（其中顏色來自此網站，感興趣的朋友可以看看）：

    public Skill(Context context, String name, int percent, int styleType) {        super(context);        this.context = context;        switch (styleType) {            case BLUE:                init(name, Color.WHITE, RING_WIDTH, Color.parseColor("#004884"), percent);                break;            case GREEN:                init(name, Color.WHITE, RING_WIDTH, Color.parseColor("#36B77D"), percent);                break;            case RED:                init(name, Color.WHITE, RING_WIDTH, Color.parseColor("#ED1654"), percent);                break;            case PINK:                init(name, Color.WHITE, RING_WIDTH, Color.parseColor("#EB9F9F"), percent);                break;            case YELLOW:                init(name, Color.WHITE, RING_WIDTH, Color.parseColor("#E2A937"), percent);                break;        }

這個init函數是父類Ring的函數。接下來還可以實現一個根據能力值來自動指明顏色的構造方法，並且可以使用這個方法批量的來產生不同顏色的控制項，想到了這點，我們自然又定義了一個xml來儲存資料，xml的格式在這裡。xml解析不贅述，我使用的pull方式，解析到了資料就能使用迴圈和我們定義的構造器來自動生產控制項了，構造器代碼如下：

    public Skill(Context context, int id, String name, int percent) {        super(context);        this.id = id;        this.context = context;        if(percent >= 90) {            init(name, Color.WHITE, RING_WIDTH, Color.parseColor("#ED1654"), percent);        } else if (percent >= 80) {            init(name, Color.WHITE, RING_WIDTH, Color.parseColor("#EB9F9F"), percent);        } else if (percent >= 75) {            init(name, Color.WHITE, RING_WIDTH, Color.parseColor("#E2A937"), percent);        } else if (percent >= 65) {            init(name, Color.WHITE, RING_WIDTH, Color.parseColor("#36B77D"), percent);        } else {            init(name, Color.WHITE, RING_WIDTH, Color.parseColor("#004884"), percent);        }        RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(UI_WIDTH,UI_WIDTH);        this.setLayoutParams(lp);    }

在PagerActivity中，解析到xml後可以如下的建立控制項：

        if (skills != null) {            LinearLayout ll = (LinearLayout) skills.findViewById(R.id.skills_layout);            List<Map<String, Object>> skillList = SkillsParser.getSkillsList(context);            for (Map<String, Object> skill : skillList) {                Skill o = new Skill(context, Integer.parseInt((String) skill.get("id")), (String) skill.get("name"),                        Integer.parseInt((String) skill.get("point")));                ll.addView(o);            }        }

其中構造器有一個id，是為了跳轉Activity來服務的，下一步就會知道。第二步：添加動畫我不是互動設計師，腦子只有這點想象力，所以就只能想出個發光的效果，呵呵，獻醜了。大家如果有什麼好的想法也可以自己實現試試，相信看了下面的代碼大家應該會啟發大家，以後什麼樣的特效都能做的出來。我想做的是點擊了控制項之後，控制項發出光波，然後頁面變大淡出，後面的頁面變小淡入，具體效果如下：
有了思路，接下來就分析代碼應該怎麼實現：1.首先控制項還是得畫出來。2.控制項上發出光。3.光閃完了之後進入下一個Activity。其實分析一下還是挺簡單的，第一步調用父類的onDraw就能實現，第二步藉助觸摸事件和變數來計數實現，第三步只需要稍微進行判斷就可以。首先定義這樣的一些變數來記錄動畫的一些資訊：
我們還需要複寫onTouchEvent函數，用於處理觸摸事件：

    @Override    public boolean onTouchEvent(MotionEvent event) {        if (event.getAction() == MotionEvent.ACTION_UP) {            Log.i("Ring", "Action Up Speed: " + ANIMATE_SPEED);            touched = true;            ringAlpha = START_ALPHA;            translateRadius = START_RADIUS;            invalidate();        }        return true;    }

將觸摸標誌設為true之後，調用invalidate來強制重繪，會調用onDraw，此時onDraw函數應該這樣寫：

    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        if(touched) {            Paint p = new Paint();            p.setStyle(Paint.Style.FILL);            p.setColor(skillColor);            p.setStrokeWidth(1);            p.setAlpha(ringAlpha);            int w = canvas.getClipBounds().width();//擷取高度            int c = w / 2;//計算中心點            int inner = Math.round(c - this.ringWidth - translateRadius); //設定內圓半徑            canvas.drawCircle(c,c, inner, p);            translateRadius -= ANIMATE_SPEED;            ringAlpha -= ANIMATE_SPEED * 5;            if(inner >= UI_WIDTH/2 || ringAlpha <= 0) {                touched = false;                Intent toSkill = new Intent(context, SkillActivity.class);                toSkill.putExtra("id", id);                context.startActivity(toSkill);            }            postInvalidateDelayed(20);        }    }

我們不停的繪製這個光圈（或者說光圓），直到光圈的透明度變為透明了或者光圈擴散到了看不見的地方。postInvalidateDelayed是為了控制動畫播放的速度，降低幀率的。做完了這些，我們自訂控制項的動畫就完成了。動畫雖然是小兒科，但是可以學習到做動畫的方法，其實還有很多的方法可以產生自訂控制項動畫，有興趣可以查一查，我見過的做的最漂亮的自訂控制項和自訂控制項動畫是Timely，它的數字動畫和背景顏色過渡簡直看醉了，我就不給連結了，有興趣的同學可以去百度一下安裝看看，不過好像需要Android 4.2+還是4.0+，安裝不了的可以看看宣傳視頻（Google的Android Design居然兩次提到了這款應用）。
真·結尾 + 扯淡四篇博文，寫完了我的這個安卓簡曆，其實這個安卓簡曆我已經使用了，但是效果只能說：呵呵。我想去的那家公司還是連筆試都沒有給我，我展示的安卓簡曆，hr也只是敷衍的看了一眼，點了下頭。說實話心情有些低落，但是低落歸低落，還是很感謝這個安卓簡曆。我真沒想到第一篇博文能夠被推薦到首頁，也沒想到有那麼多人給我鼓勵，很感動。進不進那個公司無所謂了，它要挑學校篩簡曆我也沒什麼辦法，只能再默默的提高自己實力。我的興趣肯定不會因為這點小事而被打壓，做更多的實踐，J2EE的項目做的夠多了，接下來就是Android和Hadoop，我從來不害怕學習新技術，學習新技術會讓我很興奮，自從大一開始，我就很享受這種解決問題的感覺，也許就是這種成就感，讓我有動力來不斷的學習。呵呵，扯多了，就到這吧，希望我後面能寫出更好的文章吧~