Android版簡歷(三)

涉及技術

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。

發佈留言