Android学习笔记 82. 可绘制对象、样式和主题

Android学习笔记

Android 开发者基础知识 (Java) —— Google Developers 培训团队

文章目录

- Android学习笔记

第2单元用户体验

第5课愉悦的用户体验

82. 可绘制对象、样式和主题

你会做什么

创建一个新应用并向布局添加Button元素TextView。
在 XML 中创建Drawable资源并将它们用作Button元素的背景。
将样式应用于 UI 元素。
添加一个菜单项，将应用程序的主题更改为低对比度的“夜间模式”。

项目地址：https://github.com/google-developer-training/android-fundamentals-apps-v2/tree/master/Scorekeeper

82.1 创建记分员应用程序

创建项目

修改布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context="com.example.android.scorekeeper.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:text="@string/team_1" />

        <ImageButton
            android:id="@+id/decreaseTeam1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_minus"
            android:contentDescription=
                             "@string/minus_button_description" />

        <TextView
            android:id="@+id/score_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="@string/initial_count" />

        <ImageButton
            android:id="@+id/increaseTeam1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_plus"
            android:contentDescription=
                              "@string/plus_button_description" />
    RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:text="@string/team_2" />

        <ImageButton
            android:id="@+id/decreaseTeam2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_minus"
            android:contentDescription=
                               "@string/minus_button_description" />

        <TextView
            android:id="@+id/score_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="@string/initial_count" />

        <ImageButton
            android:id="@+id/increaseTeam2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:src="@drawable/ic_plus"
            android:contentDescription=
                                "@string/plus_button_description" />
    RelativeLayout>
LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94

在这里插入图片描述

初始化TextView和得分计数变量

package com.dingjiaxiong.scorekeeper;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {


    private int mScore1;
    private int mScore2;

    private TextView mScoreText1;
    private TextView mScoreText2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mScoreText1 = (TextView)findViewById(R.id.score_1);
        mScoreText2 = (TextView)findViewById(R.id.score_2);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

实现 ImageButton 元素的点击处理程序

在这里插入图片描述

一共四个

逻辑代码

public void decreaseScore(View view) {
    int viewID = view.getId();
    switch (viewID) {
        // If it was on Team 1
        case R.id.decreaseTeam1:
            //Decrement the score and update the TextView
            mScore1--;
            mScoreText1.setText(String.valueOf(mScore1));
            break;
        // If it was Team 2
        case R.id.decreaseTeam2:
            // Decrement the score and update the TextView
            mScore2--;
            mScoreText2.setText(String.valueOf(mScore2));
    }

}

public void increaseScore(View view) {
    int viewID = view.getId();
    switch (viewID) {
        // If it was on Team 1
        case R.id.increaseTeam1:
            // Increment the score and update the TextView
            mScore1++;
            mScoreText1.setText(String.valueOf(mScore1));
            break;
        // If it was Team 2
        case R.id.increaseTeam2:
            // Increment the score and update the TextView
            mScore2++;
            mScoreText2.setText(String.valueOf(mScore2));
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

运行程序

82.2 创建可绘制资源

创建一个ShapeDrawable

ShapeDrawable是在 XML 文件中由许多属性定义的原始几何形状，包括颜色、形状、填充等。它定义了一个矢量图形，可以放大和缩小而不会丢失任何定义。



<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="2dp"
        android:color="@color/colorPrimary"/>
shape>
1
2
3
4
5
6
7
8
9

在这里插入图片描述

应用ShapeDrawable作为背景

四个图片按钮

修改组件宽度，现在按钮太小了

82.3 设置View元素的样式

创建按钮样式

在 Android 中，样式可以继承其他样式的属性。您可以使用可选parent参数为您的样式声明父级，并具有以下属性：

由父样式定义的任何样式属性都会自动包含在子样式中。
在父样式和子样式中定义的样式属性使用子样式的定义（子样式覆盖父样式）。
子样式可以包含父样式未定义的附加属性。

styles.xml


<resources>

    <style name="AppTheme"
        parent="Theme.AppCompat.Light.DarkActionBar">
        
        "colorPrimary">@color/colorPrimary
        "colorPrimaryDark">@color/colorPrimaryDark
        "colorAccent">@color/colorAccent
    style>

    <style name="ScoreButtons" parent="AppTheme">
        "android:background">@drawable/button_background
    style>

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

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

    <style name="ScoreText">
        "android:textAppearance">@style/TextAppearance.AppCompat.Headline
    style>
resources>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

布局文件


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:text="@string/team_1"
            style="@style/ScoreText" />

        <ImageButton
            android:id="@+id/decreaseTeam1"
            android:layout_width="@dimen/button_size"
            android:layout_height="@dimen/button_size"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            style="@style/MinusButtons"
            android:onClick="decreaseScore"/>

        <TextView
            android:id="@+id/score_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="@string/initial_count"
            style="@style/ScoreText" />

        <ImageButton
            android:id="@+id/increaseTeam1"
            android:layout_width="@dimen/button_size"
            android:layout_height="@dimen/button_size"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            style="@style/PlusButtons"
            android:onClick="increaseScore"/>

    RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:text="@string/team_2"
            style="@style/ScoreText" />

        <ImageButton
            android:id="@+id/decreaseTeam2"
            android:layout_width="@dimen/button_size"
            android:layout_height="@dimen/button_size"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:layout_centerVertical="true"
            style="@style/MinusButtons"
            android:onClick="decreaseScore"/>

        <TextView
            android:id="@+id/score_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="@string/initial_count"
            style="@style/ScoreText" />

        <ImageButton
            android:id="@+id/increaseTeam2"
            android:layout_width="@dimen/button_size"
            android:layout_height="@dimen/button_size"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            style="@style/PlusButtons"
            android:onClick="increaseScore"/>
    RelativeLayout>
LinearLayout>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

在这里插入图片描述

更新样式

styles.xml


<resources>

    <style name="AppTheme" parent="Theme.AppCompat.DayNight.DarkActionBar">
        
        "colorPrimary">@color/colorPrimary
        "colorPrimaryDark">@color/colorPrimaryDark
        "colorAccent">@color/colorAccent
    style>

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

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

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

    <style name="ScoreText">
        "android:textAppearance">
            @style/TextAppearance.AppCompat.Display3
        
    style>

    <style name="TeamText">
        "android:textAppearance">
            @style/TextAppearance.AppCompat.Display1
        
    style>
resources>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

运行程序

仅对文件style.xml进行调整，所有视图都会更新以反映更改。

82.4 主题和最后的润色

探索主题

改AppTheme

将主题按钮添加到菜单

添加字符资源

<string name="night_mode">Night Modestring>
<string name="day_mode">Day Modestring>
1
2

创建menu文件夹

在这里插入图片描述

<item 
    android:id="@+id/night_mode"
    android:title="@string/night_mode"/>
1
2
3

在这里插入图片描述

运行程序

在这里插入图片描述

配置从菜单更改主题

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main_menu, menu);
    // Change the label of the menu based on the state of the app.
    int nightMode = AppCompatDelegate.getDefaultNightMode();
    if(nightMode == AppCompatDelegate.MODE_NIGHT_YES){
        menu.findItem(R.id.night_mode).setTitle(R.string.day_mode);
    } else{
        menu.findItem(R.id.night_mode).setTitle(R.string.night_mode);
    }
    return true;
}


/**
 * Handles options menu item clicks.
 *
 * @param item The item that was pressed
 * @return returns true since the item click wa handled
 */
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Check if the correct item was clicked.
    if (item.getItemId() == R.id.night_mode) {
        // Get the night mode state of the app.
        int 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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

保存Activity状态

当前MainActivity.java完整代码

package com.dingjiaxiong.scorekeeper;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.app.AppCompatDelegate;

import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    // Member variables for holding the score
    private int mScore1;
    private int mScore2;

    // Member variables for the two score TextView elements
    private TextView mScoreText1;
    private TextView mScoreText2;

    // Tags to be used as the keys in OnSavedInstanceState
    static final String STATE_SCORE_1 = "Team 1 Score";
    static final String STATE_SCORE_2 = "Team 2 Score";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //Find the TextViews by ID
        mScoreText1 = findViewById(R.id.score_1);
        mScoreText2 = findViewById(R.id.score_2);

        // Restores the scores if there is savedInstanceState.
        if (savedInstanceState != null) {
            mScore1 = savedInstanceState.getInt(STATE_SCORE_1);
            mScore2 = savedInstanceState.getInt(STATE_SCORE_2);

            //Set the score text views
            mScoreText1.setText(String.valueOf(mScore1));
            mScoreText2.setText(String.valueOf(mScore2));
        }
    }

    /**
     * Handles the onClick of both the decrement buttons.
     *
     * @param view The button view that was clicked
     */
    public void decreaseScore(View view) {
        // Get the ID of the button that was clicked.
        int viewID = view.getId();
        switch (viewID) {
            // If it was on Team 1:
            case R.id.decreaseTeam1:
                // Decrement the score and update the TextView.
                mScore1--;
                mScoreText1.setText(String.valueOf(mScore1));
                break;
            // If it was Team 2:
            case R.id.decreaseTeam2:
                // Decrement the score and update the TextView.
                mScore2--;
                mScoreText2.setText(String.valueOf(mScore2));
        }
    }

    /**
     * Handles the onClick of both the increment buttons.
     *
     * @param view The button view that was clicked
     */
    public void increaseScore(View view) {
        // Get the ID of the button that was clicked.
        int viewID = view.getId();
        switch (viewID) {
            // If it was on Team 1:
            case R.id.increaseTeam1:
                // Increment the score and update the TextView.
                mScore1++;
                mScoreText1.setText(String.valueOf(mScore1));
                break;
            // If it was Team 2:
            case R.id.increaseTeam2:
                // Increment the score and update the TextView.
                mScore2++;
                mScoreText2.setText(String.valueOf(mScore2));
        }
    }

    /**
     * Creates the night mode menu option.
     *
     * @param menu The menu in the action bar
     * @return True to display the menu, false to hide it
     */
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu, menu);
        // Change the label of the menu based on the state of the app.
        int nightMode = AppCompatDelegate.getDefaultNightMode();
        if(nightMode == AppCompatDelegate.MODE_NIGHT_YES){
            menu.findItem(R.id.night_mode).setTitle(R.string.day_mode);
        } else{
            menu.findItem(R.id.night_mode).setTitle(R.string.night_mode);
        }
        return true;
    }


    /**
     * Handles options menu item clicks.
     *
     * @param item The item that was pressed
     * @return returns true since the item click wa handled
     */
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Check if the correct item was clicked.
        if (item.getItemId() == R.id.night_mode) {
            // Get the night mode state of the app.
            int 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;
    }

    /**
     * Method that is called when the configuration changes,
     * used to preserve the state of the app.
     *
     * @param outState The bundle that will be passed in to the Activity when it is restored.
     */
    @Override
    protected void onSaveInstanceState(Bundle outState) {
        // Save the scores.
        outState.putInt(STATE_SCORE_1, mScore1);
        outState.putInt(STATE_SCORE_2, mScore2);
        super.onSaveInstanceState(outState);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151

运行程序

82.5 小结

Drawable元素增强了应用程序 UI 的外观。
ShapeDrawable是在 XML 文件中定义的原始几何形状。定义 a 的属性ShapeDrawable包括颜色、形状、填充等。
Android 平台提供了大量的样式和主题。
使用样式可以减少 UI 组件所需的代码量。
style可以指定常见的属性，例如高度、填充、字体颜色、字体大小和背景颜色。
style不应包含与布局相关的信息。
style可以应用于View、Activity或整个应用程序。style应用于一个或整个应用程序的AActivity必须在AndroidManifest.xml文件中定义。
为了继承样式，新样式标识parentXML 中的属性。
当您将 astyle应用于活动或整个应用程序中的元素集合时View，这称为主题。
要应用主题，请使用android:theme属性。

相关阅读:
GSW同态加密方案学习
 VoLTE端到端业务详解 | 网元标识类
 编写一款2D CAD/CAM软件（十六）交互绘制图形
 Salesforce ServiceCloud考证学习（3）
系统分屏后录音机向左右滑动报错问题
 js进阶笔记之原型，原型链
 基于ssm框架的毕业设计管理系统毕业设计源码211633
非线性链表之树结构和堆的代码实现
 Dockerfile 语法教程
 Codeforces Round #834 (Div. 3) C. Thermostat
原文地址：https://blog.csdn.net/weixin_44226181/article/details/126399090

Android学习笔记 82. 可绘制对象、样式和主题

Android学习笔记

Android 开发者基础知识 (Java) —— Google Developers 培训团队

文章目录

第2单元 用户体验

第5课 愉悦的用户体验

82. 可绘制对象、样式和主题

你会做什么

82.1 创建记分员应用程序

82.2 创建可绘制资源

82.3 设置View元素的样式

82.4 主题和最后的润色

82.5 小结

第2单元用户体验

第5课愉悦的用户体验