When you saw bezier curves the other day, think about making something out of Bezier. Soon a power display control will immediately appear, first look at the effect picture:
In the charging
Power is greater than 20% without charging
Not under charge and under 20% charge
On a charge, and it’s fully charged
While charging, set wave roll from right to left (afterfill)
See the renderings basically on these several states, which are divided into two categories: charging, not charging; The charging is subdivided into two kinds: charging to 100% and not 100%; Uncharged and subdivided the low and not low power of the two.
Originally thought is to record a video to simulate the charge and not charge two cases, later generated GIF has been greater than the simple book upload requirements, so here upload multiple GIF **(to demonstrate several cases, the code is written dead, so we see the status bar and control display is not the same)**. Demo I have passed the dynamic data power test.
use
- Attributes:
| The property name | type | describe |
|---|---|---|
| ring_stroke_width | dimension | The width of the outer ring |
| ring_radius | dimension | The radius of the outer ring |
| wave_width | dimension | The width of a wave |
| wave_peek | dimension | Wave peak |
| wave_cycle_time | integer | The speed at which waves move |
| wave_color | color | The color of the waves |
| battery_status_color | color | Charging status text color |
| battery_status_size | dimension | Charging status text size |
| battery_level_color | color | Charge % text color |
| battery_level_size | dimension | Charging percentage text size |
| battery_status_size | dimension | Charge text state color |
| battery_lowpower_color | color | Flash color of text on low battery |
| battery_charging_text | String or reference | Words are recharging |
| battery_fill_text | String or reference | Full of words |
| battery_using_text | String or reference | The text in use |
| battery_lowpower_text | String or reference | Low power text |
| battery_lowpower_percnet | fraction | What percentage indicates low battery |
| charging_direction | enum | The direction the waves roll while charging |
- Layout:
<? 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>
Copy the codeNot all attributes are used in the layout, so try a few. If you want to see more attributes add them yourself. The renderings are as follows:
- Code part:
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 voidsetBattery(BatteryStatus status) {
Log.d("TAG"."status:" + status.status + ",level:"+status.level); batteryView.setChanges(status.status, status.level); }}Copy the codeRemember: The setChange method that calls BatteryView must be loaded in layout before it can be called.
About me:
email: [email protected]
github: enter