涉及技術

ListView使用、動畫、自定義控件

第一步：ListView

ListView應該是每個學習Android的人都會學到的，所以我在這也就不仔細的說瞭，我隻說一下設計的細節。
我們需要建立一個佈局，用來顯示在上一篇文章的PagerActivity中。xml不貼出瞭，可以看這裡。其實很簡單，就是建立瞭一個ListView，設置分割距離和顏色並且去掉上下的陰影。ListView中每個item顯示的佈局可以看這裡，就隻是一個TextView，用於顯示標題。
關於數據我覺得我也不用多說，xml的處理也是Android學習的必學課程，為瞭練習xml的處理，所以我處理數據用瞭不同的方法，這裡用的是SAX。數據提取出來之後給item加上點擊事件：跳轉到我們還未創建的HonorActivity。HonorActivity是用來顯示每個榮譽的詳細信息，也就是三個TextView，很簡單，代碼和佈局可以看這裡和這裡。代碼大概如下：

            honorsListView = (ListView) honors.findViewById(R.id.honors_list);
            honorsListView.setAdapter(new ArrayAdapter(this, R.layout.honors_item, honorsListData()));
            honorsListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView parent, View view,final int position, long id) {
                            Intent toHonor = new Intent(context, HonorActivity.class);
                            toHonor.putExtra("id", position + 1);
                            startActivity(toHonor);
                }
            });

但是簡簡單單的展示這些文字，完全沒有一點吸引力，有吸引力的界面都是有動態交互的，所以我決定給這個列表的交互加一些動畫，效果如下：

這有兩個動畫，第一個是點擊瞭某一個條目之後和返回條目列表的動畫，第二個是Activity切換的動畫。
先說第二個動畫，這個動畫比較簡單，我是基於主題來實現的，在Android中，AndroidManifest.xml文件中對Activity指定android:theme屬性就可以設置主題瞭，如下：

然後再定義這個主題：

    
        @style/honorAnimation
    

這個主題隻有一個item，就是android:windowAnimationStyle，顧名思義，這個屬性指定瞭窗口動畫的樣式，這個樣式也是我們自己創建的，如下：

    
        @anim/bottomslidein_anim
        @anim/fadeout_anim
        @anim/fadein_anim
        @anim/bottomslideout_anim
    

關於這個樣式的四個屬性大傢看名字也能看的到，也就是新打開的Activity進入退出的動畫和舊Activity進入退出的動畫，動畫的定義由於代碼比較多，占篇幅太大，我就不貼出來瞭，這裡有四個鏈接：
bottomslidein_anim、fadeout_anim、fadein_anim、bottomslideout_anim
如果覺得有必要解釋這些動畫的話，我會重新寫一篇文章來介紹Android的動畫。
現在要實現第一個動畫瞭，因為要達到圖片中那樣像拉簾子一樣的效果，所以我們針對每一個ListView的item都要做處理，思路如下：
1.獲取到每個item。
2.為每個item添加一個左右方向壓縮的動畫。
3.每個動畫都延遲一定時間執行。
4.最後一個動畫執行完成之後跳轉Activity。
思路一出來，代碼寫起來就很簡單瞭，修改之前的代碼後，如下：

            honorsListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView parent, View view,final int position, long id) {
                    int count = honorsListView.getChildCount();
                    for (int i = 0; i < count; i++) {
                        View child = honorsListView.getChildAt(i);//獲取到item
                        ScaleAnimation sa = new ScaleAnimation(1.0f, 0.0f, 1.0f, 1.0f, Animation.RELATIVE_TO_SELF, 0.5f,
                                Animation.RELATIVE_TO_SELF, 0);//縮放動畫，隻縮放左右
                        sa.setDuration(500);//動畫執行的時間
                        sa.setFillAfter(true);//這個一定要設置，不然動畫執行完後item又會變回原來的樣子
                        sa.setStartOffset((count - i)*50);//設置開始時間的偏移量，就是靠這個來實現拉簾子的效果
                        if (child != null) {
                            child.setAnimation(sa);//將動畫設置給item
                        }
                        child.startAnimation(sa);//執行動畫
                    }
                    //因為我們的拉簾子效果是從下面拉到上面，所以最後一個執行的動畫是第一個item，給item設置一個
                    //AnimationListener，在onAnimationEnd中完成跳轉Activity
                    honorsListView.getChildAt(0).getAnimation().setAnimationListener(new Animation.AnimationListener() {
                        @Override
                        public void onAnimationStart(Animation animation) {
                        }
                        @Override
                        public void onAnimationEnd(Animation animation) {
                            Intent toHonor = new Intent(context, HonorActivity.class);
                            toHonor.putExtra("id", position + 1);
                            startActivity(toHonor);
                        }
                        @Override
                        public void onAnimationRepeat(Animation animation) {
                        }
                    });

                }
            });

第二步：自定義控件

做Android的開發，怎麼能不會自定義控件呢，所以為瞭體現我掌握瞭這個技術，我專門在簡歷中自定義瞭一個圖表控件：

通過這個控件，能夠展示我對某一個技術的熟練度。自定義控件怎麼做我也不詳細的說，我們定義一個繼承View的類。變量的初始化不是重點，各個變量的意義如下：

重點是繼承onDraw來繪制這個控件，思路如下：
1.繪制一個內圓，內填充。
2.繪制一個外扇形，內部不填充，不連接圓心，邊調粗一些。
3.繪制技能的名字。
話不多說，有瞭思路直接就有代碼：

    @Override
    protected void onDraw(Canvas canvas) {
//        Log.i("Ring","onDraw");
        super.onDraw(canvas);
        int width = canvas.getClipBounds().width();//獲取高度
        int center = width / 2;//計算中心點
        int innerCircle = Math.round(center - this.ringWidth - 4); //設置內圓半徑
        int ringWidth = Math.round(this.ringWidth); //設置圓環寬度

        //繪制內圓
        Paint p = new Paint();
        p.setStyle(Paint.Style.FILL);
        p.setColor(skillColor);
        p.setStrokeWidth(1);
        canvas.drawCircle(center, center, innerCircle-20, p);

        //繪制圓環
        this.paint.setColor(skillColor);
        //this.paint.setARGB(255, 212 ,225, 233);
        this.paint.setStrokeWidth(ringWidth);
        //創建繪制圓環的范圍
        RectF oval = new RectF();
        oval.top = this.ringWidth / 2 + 2;
        oval.left = this.ringWidth / 2 + 2;
        oval.right = width - this.ringWidth / 2 - 2;
        oval.bottom = width - this.ringWidth / 2 - 2;
        //掃過的角度，也就是能力值，註意一定要用float計算，不然會算出0
        float sweepAngle = (skillPoint / 100f) * 360f;
        //繪制能力值
        canvas.drawArc(oval, 270, sweepAngle, false, this.paint);

        p.setTextSize(TEXT_SIZE);
        p.setColor(skillTextColor);
        p.setTextAlign(Paint.Align.CENTER);
        canvas.drawText(skillText, 0, skillText.length(), center, center, p);
    }

這個控件大概就是這樣瞭，但是還有一些東西需要處理，比如點擊、顏色根據能力改變等等，我們在下一篇文章中會繼續討論。

結尾+扯淡

下一篇文章會繼承這篇文章創建的自定義控件，實現更多更強大的功能。
繼續扯淡，其實我很想做Android，但是目前成熟一些的做Android的公司投瞭簡歷就像石沉大海，完全沒有回應瞭，目前收到的offer也有幾個，但是都是做J2EE的，是我最熟練的，卻不是最感興趣的。找工作好辛苦啊，堅持瞭這麼久，也不能就這麼放棄，繼續加油吧~
腦袋裡還有很多的想法，比如我即將要做的課程設計（協作平臺）、或者是社交日歷等，如果我以後動手實現瞭，我也一定會分享出來。
本項目已經托管到瞭Github。