1. 程式人生 > >【Android 基礎 5.1】Drawables, styles, and themes(夜間模式)

【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 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>

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>
  1. Use as a src for ImageView

    app:srcCompat="@drawable/battary"
    
  2. 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.

  1. 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.

  1. 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>
  1. 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
        }
    

    在這裡插入圖片描述