android之cpu使用率曲線效果的實現！

標籤：android   android開發   布局   path   cpu   

最近做一個效果：在手機設定裡面“關於手機”裡面添加一項來顯示當前手機cpu使用率的曲線！其實現效果如所示：

關於手機的第一項就是我要實現的效果！今天來講講這個曲線的view（cpu_speedcurve_view）是如何?的！

首先要注意以下幾點：

（1）由於我設計的cpu_speedcurve_view不僅僅顯示動態曲線，還需要用textview顯示一些cpu相關資訊！所以，我選擇cpu_speedcurve_view繼承一個viewgroup，這裡我選擇的是FrameLayout

（3）曲線的怎麼繪製？

           這裡我是在cpu_speedcurve_view的public void draw(Canvas canvas)裡面用Canvas的drawPath來繪製的。具體代碼如下：

public void draw(Canvas canvas) {super.draw(canvas);//mPaint.setColor(coordinateColor);//mPaint.setStrokeWidth(mStrokeSize*2);//canvas.drawPath(m_path_coordinate, mPaint);//canvas.clipRect(10, 10, 5, 5);if(flag_start){if(m_path_0 == null && m_path_1 == null){//Start_run_CpuTracker_to_show_curve();}else{mPaint.setColor(curveColor);mPaint.setStrokeWidth(mStrokeSize);if(m_path_0 != null){// Log.d("speedcurve", "cpu_speedcurve_view  draw  (m_path != null) ");if(!m_path_0.isEmpty()){canvas.drawPath(m_path_0, mPaint);}}if(m_path_1 != null){// Log.d("speedcurve", "cpu_speedcurve_view  draw  (m_path != null) ");if(!m_path_1.isEmpty()){canvas.drawPath(m_path_1, mPaint);}}}}}

      從上面代碼可以看到，這裡居然有兩個Path，從上面的可以看出只是一條曲線呀！為什麼這裡有兩個Path呢？

private Path m_path_0;private Path m_path_1;

      的確我定義了兩個Path，那是因為一個Path的曲線長度不是無線，總是會溢出的！所以我就設計了兩個曲線（Path），當m_path_0使用一段時間後，就啟動另一個曲線m_path_1，使其重疊顯示，直到m_path_1長度超過這個view顯示的寬度時候，把m_path_0給清除掉。整個啟動並執行機制就是這樣反覆。

（2）對於曲線的動態顯示，我的辦法是定義一個Handler定時的自動發送資訊來更新cpu啟動並執行資料，最後用invalidate();來重新整理曲線：

private Handler mHandler = new Handler() {        @Override        public void handleMessage(Message msg) {            switch (msg.what) {                case 000: m_CpuTracker.update();TotalCpuPercent = m_CpuTracker.getTotalCpuPercent();int h = view_h - 2;//int CpuPercent_po = (int) (h * TotalCpuPercent);if(flag_num < 400){if(m_path_0 == null){m_path_0 = new Path();m_path_0.moveTo(view_w+4, h - TotalCpuPercent);}if(flag_num > 200){if(m_path_1 == null){m_path_1 = new Path();m_path_1.moveTo(view_w+4, h - TotalCpuPercent);}}else{m_path_1 = null;}}else if(flag_num < 600){m_path_0 = null;if(m_path_1 == null){m_path_1 = new Path();m_path_1.moveTo(view_w+4, h - TotalCpuPercent);}}else if(flag_num < 800){if(m_path_0 == null){m_path_0 = new Path();m_path_0.moveTo(view_w+4, h - TotalCpuPercent);}}else{flag_num = 0;}if(m_path_0 != null){m_path_0.lineTo(view_w+4, h - TotalCpuPercent);matrix.setTranslate(-4,0);m_path_0.transform(matrix);}if(m_path_1 != null){m_path_1.lineTo(view_w+4, h - TotalCpuPercent);matrix.setTranslate(-4,0);m_path_1.transform(matrix);}//Log.d("speedcurve", "cpu_speedcurve_view  handleMessage  msg.what=000 flag_num="+flag_num);//Log.d("speedcurve", "cpu_speedcurve_view  handleMessage  TotalCpuPercent="+TotalCpuPercent+"view_h="+view_h+"getCurCpuFreq()="+Cpu_info_manager.getCurCpuFreq());    if(flag_start){mHandler.sendEmptyMessageDelayed(000,300);invalidate();flag_num++;}else{Stop_run_CpuTracker_to_show_curve();}break;                case 111:                 break;            }        }    };

       從上面的代碼可以知道：首先擷取當前cpu使用的百分率，再通過這個百分率來計算出曲線高度！最後通過path的moveTo來完成曲線的繪製儲存。

（3）如何擷取cpu的使用率呢？

      用android提供的ProcessCpuTracker就可以了。

m_CpuTracker = new ProcessCpuTracker(false);

   實際上在ProcessCpuTracker裡面就是在/proc/stat 去讀取cpu的資訊（user time /nice time/sys time/idle time/iowait time等）來計算出使用率的百分比的！

（4）最後記得 在這個裡面 protected void onDetachedFromWindow()停止運行就可以了！

就這樣問題就基本解決了！如果要實現如上的的則需要定義一個PreferenceGroup：

PreferenceGroup mCPUStatusPref = (PreferenceGroup) findPreference("cpu_key");      mCPUStatusPref.setLayoutResource(R.layout.cpu_curve_preference); 

在layout: cpu_curve_preference就可以布局成上面的效果了！

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:minHeight="85dip"    android:gravity="center_vertical"    android:paddingStart="@*android:dimen/preference_item_padding_side"    android:paddingEnd="?android:attr/scrollbarSize"    android:background="?android:attr/selectableItemBackground"    android:paddingTop="6dip"    android:paddingBottom="6dip">    <RelativeLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_weight="1"        android:paddingTop="6dip"        android:paddingBottom="6dip">        <TextView            android:id="@+android:id/title"            android:text="@string/XunHu_Setting_Cpu_Info"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:singleLine="true"            android:textAppearance="?android:attr/textAppearanceMedium"            android:ellipsize="marquee"            android:fadingEdge="horizontal" />        <TextView            android:id="@android:id/summary"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="@string/usage_type_cpu_foreground"            android:layout_below="@android:id/title"            android:layout_alignStart="@android:id/title"            android:visibility="gone"            android:textAppearance="?android:attr/textAppearanceSmall"            android:textColor="?android:attr/textColorSecondary"            android:maxLines="4" />    </RelativeLayout>    <com.android.settings.widget.cpu_speedcurve_view        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:minWidth="180dip"        android:background="@drawable/cpu_curve_bg"        android:layout_marginBottom="8dip"        android:layout_marginTop="8dip"        > <TextView android:id="@+android:id/cpu_speedcurve_view_title" android:text="@string/XunHu_Setting_Cpu_Info_util" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:ellipsize="marquee" android:fadingEdge="horizontal" /> </com.android.settings.widget.cpu_speedcurve_view></LinearLayout>

android之cpu使用率曲線效果的實現！