用貝塞爾曲線本身寫的一個電量顯示的控件

前幾天看到貝塞爾曲線的時候，想一想用貝塞爾作些什麼東西出來。很快一個電量顯示的控件就立刻登場了，先來看下效果圖吧：

充電中

不在充電狀況下，電量大於20%

不在充電狀況下，而且電量在20%之下

充電狀況下，而且電量充滿了

充電中，規定波浪從右到左滾動(後補)

看到效果圖基本就這幾種狀態了，這幾種狀態裏面首先分了兩大類:充電中，未充電中；充電中又細分了充電到100%和未達到100%兩種；未充電中又細分了電量低中和電量不在低中的兩種。

本來想的是錄個視頻來模擬充電和未充電兩種狀況的，後來生成的gif一直是大於簡書上傳的要求，所以這裏就上傳多個gif了**(爲了演示幾種狀況，代碼中狀態是寫死的，所以你們看到的狀態欄和控件顯示的不同)**。demo我都經過動態數據獲取電量測試過了。

使用

• 屬性部分：

屬性名	類型	描述
ring_stroke_width	dimension	外圈的寬度
ring_radius	dimension	外圈的半徑
wave_width	dimension	一個波浪的寬度
wave_peek	dimension	波浪的峯值
wave_cycle_time	integer	波浪走動的速度
wave_color	color	波浪的顏色
battery_status_color	color	充電狀態文字顏色
battery_status_size	dimension	充電狀態文字大小
battery_level_color	color	充電百分比文字顏色
battery_level_size	dimension	充電百分比文字大小
battery_status_size	dimension	充電文字狀態顏色
battery_lowpower_color	color	低電量下的文字閃動的顏色
battery_charging_text	string或reference	正在充電的文字
battery_fill_text	string或reference	充滿的文字
battery_using_text	string或reference	正在使用的文字
battery_lowpower_text	string或reference	低電量的文字
battery_lowpower_percnet	fraction	百分之多少時才顯示低電量
charging_direction	enum	充電的時候波浪滾動的方向

• 佈局部分:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#12b3c9"
    android:gravity="center"
    android:orientation="vertical">

    <com.library.battery.BatteryView
        android:id="@+id/batteryView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:battery_lowpower_color="#d96d15"
        app:battery_lowpower_percnet="10%"
        app:ring_radius="@dimen/ring_radius"
        app:ring_stroke_width="@dimen/ring_stroke_width"
        app:wave_color="#3acf38"
        app:wave_cycle_time="1000"
        app:wave_peek="@dimen/wave_peek"
        app:wave_width="@dimen/wave_width" />

</LinearLayout>
複製代碼

佈局中用到的屬性不是全的，就拿了幾個試試。想要看更多的屬性本身添加吧。效果圖以下:

• 代碼部分：

public class MainActivity extends AppCompatActivity {
    BatteryView batteryView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        batteryView = (BatteryView) findViewById(R.id.batteryView);
        batteryView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                batteryView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                IntentFilter filter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
                registerReceiver(new BatteryReceiver(), filter);
            }
        });
    }

    public void setBattery(BatteryStatus status) {
        Log.d("TAG", "status:" + status.status + ",level:" +status.level);
        batteryView.setChanges(status.status, status.level);
    }
}
複製代碼

切記:這裏調用BatteryView的setChange方法必需要在layout都加載完才能調用該方法。

關於我:

email: a1002326270@163.com

github: enter

更多你喜歡的文章

仿360手機助手下載按鈕

仿蘋果版小黃車(ofo)app主頁菜單效果

設計一個銀行app的最大額度控件

帶你實現ViewGroup規定行數、item居中的流式佈局

定製一個相似地址選擇器的view

3D版翻頁公告效果

一分鐘搞定觸手app主頁酷炫滑動切換效果

快速利用RecyclerView的LayoutManager搭建流式佈局

用貝塞爾曲線本身寫的一個電量顯示的控件

快速搞定一個自定義的日曆