【Android 基础 5.1】Drawables, styles, and themes（夜间模式）

ShapeDrawable

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
        <stroke 
            android:width="2dp"
            android:color="@color/colorPrimary"/>
</shape>

Apply ShapeDrawable as a background:

android:background="@drawable/button_background"

StateListDrawable

StateListDrawable which allows for a different graphic to be used depending on the state of the object.

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:shape="oval">
            <stroke
                    android:width="2dp"
                    android:color="@color/colorPrimaryDark"/>
        </shape>
    </item>

    <item android:state_pressed="false">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:shape="oval">
            <stroke
                    android:width="2dp"
                    android:color="@color/colorPrimary"/>
        </shape>
    </item>

</selector>

LevelListDrawable

This is introduce in homework. Here is my solution:

1. Create a XML in drawable dir named battery:

<level-list xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:maxLevel="0" android:drawable="@drawable/ic_battery_charging_20_black_24dp"/>
   <item android:maxLevel="1" android:drawable="@drawable/ic_battery_charging_30_black_24dp"/>
   <item android:maxLevel="2" android:drawable="@drawable/ic_battery_charging_50_black_24dp"/>
   <item android:maxLevel="3" android:drawable="@drawable/ic_battery_charging_60_black_24dp"/>
   <item android:maxLevel="4" android:drawable="@drawable/ic_battery_charging_80_black_24dp"/>
   <item android:maxLevel="5" android:drawable="@drawable/ic_battery_charging_90_black_24dp"/>
   <item android:maxLevel="6" android:drawable="@drawable/ic_battery_charging_full_black_24dp"/>
</level-list>

2. Use as a src for ImageView

   app:srcCompat="@drawable/battary"
   

3. Call setImageLevel

       companion object {
           var batteryLevel = 0;
           const val MAX_BATTERY_LEVEL = 6
           const val MIN_BATTERY_LEVEL = 0
       }
   
       fun increaseBattery(view: View) {
           if (batteryLevel < MAX_BATTERY_LEVEL) {
               batteryView.setImageLevel(++batteryLevel)
               decButton.isEnabled = true
               if (batteryLevel == MAX_BATTERY_LEVEL) {
                   incButton.isEnabled = false
               }
           }
       }
   
       fun decreaseBattery(view: View) {
           if (batteryLevel > MIN_BATTERY_LEVEL) {
               batteryView.setImageLevel(--batteryLevel)
               incButton.isEnabled = true
               if (batteryLevel == MIN_BATTERY_LEVEL) {
                   decButton.isEnabled = false
               }
           }
       }
   

Style

• Any style attributes defined by the parent style are automatically included in the child style.
• A style attribute defined in both the parent and child style uses the child style’s definition (the child overrides the parent).
• A child style can include additional attributes that the parent does not define.

1. In between the <resources> tags, add a new style with the following attributes to create a common style for all buttons:

<style name="ScoreButtons" parent="Widget.AppCompat.Button">
    <item name="android:background">@drawable/button_background</item>
</style>

The above snippet sets the parent style to Widget.AppCompat.Button to retain the default attributes of a Button. It also adds an attribute that changes the background of the Drawable to the one you created in the previous task.

2. Create the style for the plus buttons by extending the ScoreButtons style:

<style name="PlusButtons" parent="ScoreButtons">
    <item name="android:src">@drawable/ic_plus</item>
    <item name=
        "android:contentDescription">@string/plus_button_description</item>
</style>

The contentDescription attribute is for visually impaired users. It acts as a label that certain accessibility devices use to read out loud to provide some context about the meaning of the UI element.

3. Create the style for the minus buttons:

<style name="MinusButtons" parent="ScoreButtons">
    <item name="android:src">@drawable/ic_minus</item>
    <item name=
        "android:contentDescription">@string/minus_button_description</item>
</style>

4. use style: style="@style/PlusButton"

DayNight Theme

1. Change AppTheme’s parent to Theme.AppCompat.DayNight.DarkActionBar

2. Change Night Mode between Day Mode

       override fun onOptionsItemSelected(item: MenuItem): Boolean {
           if (item.itemId == R.id.menu_night_mode) {
               // Get the night mode state of the app.
               val nightMode = AppCompatDelegate.getDefaultNightMode();
               //Set the theme mode for the restarted activity
               if (nightMode == AppCompatDelegate.MODE_NIGHT_YES) {
                   AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
               } else {
                   AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
               }
   // Recreate the activity for the theme change to take effect.
               recreate();
           }
           return true
       }