android初学者_Android初学者应用程序-第2部分：设计活动布局

android初学者

Previous…

以前…

Next…

下一个…

目的 (Aims)

• Learn what an activity is
  了解什么是活动
• Learn how to import dependencies
  了解如何导入依赖项
• Learn how to define constants for designs
  了解如何为设计定义常量
• Learn how to create layouts
  了解如何创建布局

回顾 (Recap)

So far we have set up a project and handled permissions. Today we will be learning about activities and designing layouts. To do this we will need to learn how to import a dependency into our project. We will then need to define our styles and colours using specific files set up to help us. We will then be in a position to create the looks of an activity.

到目前为止，我们已经建立了一个项目并处理了权限。 今天，我们将学习有关活动和设计布局的信息。 为此，我们将需要学习如何将依赖项导入我们的项目。 然后，我们将需要使用为帮助我们而设置的特定文件来定义样式和颜色。 然后，我们将能够创建活动的外观。

活动项目 (Activities)

Firstly, let us discuss what an activity is: an activity can be thought of as one of the screens or views within an application. There are two distinct files that describe an activity in Android Studio. We have a “.java” file: where we can put all of the logic to describe how the screen will function. There is then a “.xml” layout file: where we can put all of our components to describe how the screen will look.

首先，让我们讨论什么是活动：可以将活动视为应用程序中的屏幕或视图之一。 有两个不同的文件描述了Android Studio中的活动。 我们有一个“ .java”文件：我们可以在其中放置所有逻辑来描述屏幕的功能 。 然后有一个“ .xml”布局文件：我们可以在其中放置所有组件来描述屏幕外观 。

In this tutorial we are going to look primarily at the looks of the activity and discussing how this works. We want to create layouts that are extensible and functional. Android does a great job of encouraging you to build apps that can be easily changed through the constants files. Files such as a “colors.xml”, “styles.xml” and “strings.xml”. Ideally we never want to hard code a string like “Click me” anywhere other then in these constants files. This way we can control all of the constant text throughout the app from a single file. It may seem like overkill when you are just getting started. However, it is critical that you design your applications like this otherwise they can become unwieldy.

在本教程中，我们将主要研究活动的外观并讨论其工作方式。 我们想要创建可扩展且实用的布局。 Android鼓励您构建可通过常量文件轻松更改的应用程序，这是一项出色的工作。 诸如“ colors.xml”，“ styles.xml”和“ strings.xml”之类的文件。 理想情况下，我们永远都不想在这些常量文件中以外的任何地方对“ Click me”之类的字符串进行硬编码。 这样，我们可以从一个文件控制整个应用程序中的所有常量文本。 当您刚入门时，这似乎有些矫kill过正。 但是，至关重要的是您必须像这样设计应用程序，否则它们可能变得笨拙。

Figure 1 — Activity flow: an activity is comprised of two files, a “.java” logic file as well as a “.xml” layout file which is inflated when the activity is created

图1-活动流程：活动由两个文件组成，一个“ .java”逻辑文件以及一个“ .xml”布局文件，在创建活动时会对其进行放大

材料UI (Material-UI)

For this tutorial we are going to be using Material-UI [1] for the templates. This is an external dependency. Within Android Studio we can use a build automation tool like Gradle. We can add dependencies easily from within the “build.gradle” file. Locating this file is easy as we can use the following Android Studio shortcut:

在本教程中，我们将使用Material-UI [1]作为模板。 这是一个外部依赖性。 在Android Studio中，我们可以使用诸如Gradle之类的构建自动化工具。 我们可以从“ build.gradle”文件中轻松添加依赖项。 找到此文件很容易，因为我们可以使用以下Android Studio快捷方式：

• Ctrl-N — Search for project files
  Ctrl-N —搜索项目文件
• This will pop up a window, select the “all” tab
  这将弹出一个窗口，选择“全部”标签
• Search for “build.gradle”
  搜索“ build.gradle”
• Click the file to open it
  点击文件将其打开

You will notice that there are two different “build.gradle” files. We are interested in the “app” module “build.gradle (app)” file, so select this one.

您会注意到有两个不同的“ build.gradle”文件。 我们对“ app”模块的“ build.gradle(app)”文件感兴趣，因此选择此文件。

(NB: We can control project wide properties from the “build.gradle (.)” file)

(注意：我们可以从“ build.gradle(。)”文件控制整个项目的属性)

Adding dependencies is made easy through Gradle. There is a section called “dependencies” within the “build.gradle” file which holds references to all of the packages we need. Inside of the dependencies block we need to add one line:

通过Gradle可以轻松添加依赖项。 在“ build.gradle”文件中有一个称为“依赖项”的部分，其中包含对我们需要的所有软件包的引用。 在依赖关系块内部，我们需要添加一行：

dependencies {
    
    ...
    
    // MaterialUI
    implementation 'com.google.android.material:material:1.1.0'
}

Figure 2 — Adding Material-UI dependency

图2 —添加Material-UI依赖项

Two things to watch out for before continuing:

在继续之前要注意两件事：

• Check that the other dependencies are “androidx.<…>” as we will need to have our project converted to AndroidX if they are not. This can be done from the navigation bar at the top of Android Studio: Refactor -> Migrate to AndroidX.
  检查其他依赖项是否为“ androidx。<…>”，因为如果没有，则需要将项目转换为AndroidX。 可以从Android Studio顶部的导航栏中完成：重构->迁移到AndroidX。
• Check that the compileSDKVersion tag at the top of the build.gradle file is set to at least 29 and that the minSDKVersion is set to at least 23 for some of the features we will need for later in the tutorial.
  检查build.gradle文件顶部的compileSDKVersion标记是否至少设置为29，minSDKVersion是否至少设置为23，以获取我们稍后在本教程中需要的某些功能。

What will now pop up at the top of the window is a reminder to sync Gradle; click the sync Gradle link in the top right of the window. This will trigger a build in which Material-UI will be imported into our project.

现在将在窗口顶部弹出，提醒您同步Gradle。 点击窗口右上角的同步Gradle链接。 这将触发将Material-UI导入到我们的项目中的构建。

样式和颜色 (Styles and Colours)

Material-UI is one dependency I would encourage you to use in your future projects because the style of the components is sleek and it is easy to use compared to constantly making custom designs. We will now discuss setting up the constants files, starting with the styles.

Material-UI是一个依赖项，我鼓励您在将来的项目中使用它，因为与不断进行定制设计相比，组件的样式时尚且易于使用。 现在，我们将从样式开始讨论设置常量文件。

We will update our style to be a Material-UI compatible style. Locate the file “styles.xml” using the same approach discussed earlier. We want to edit the “styles.xml” file to look like the following:

我们将把样式更新为与Material-UI兼容的样式。 使用前面讨论的相同方法找到文件“ styles.xml”。 我们要编辑“ styles.xml”文件，如下所示：

<resources>
    <style 
        name="AppTheme" 
        parent="Theme.MaterialComponents"
    >
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:colorBackground">
             @color/colorBackground
        </item>
        <item name="actionBarStyle">@style/MyActionBar</item>
    </style>
    <style 
         name="MyActionBar" 
         parent="Widget.AppCompat.Light.ActionBar"
    >
        <item name="titleTextColor">@color/actionBarText</item>
        <item name="background">@color/actionBarBackground</item>
    </style>
</resources>

Figure 3 — Styles.xml alteration to use a material ui style

图3 —使用材质ui样式的Styles.xml更改

The first change is the “parent” of our overall style which is now “Theme.MaterialComponents”. We are now using a Material-UI theme. The most important thing is the item named “actionBarStyle” which allows us to change the text colour and the background of the Material-UI action bar in a seperate style, “MyActionBar”. The other change is adding a “colorBackground” item to the style.

第一个更改是我们整体样式的“父项”，现在是“ Theme.MaterialComponents”。 我们现在正在使用Material-UI主题。 最重要的是名为“ actionBarStyle”的项目，它使我们可以使用单独的样式“ MyActionBar”来更改Material-UI操作栏的文本颜色和背景。 另一个更改是在样式中添加了“ colorBackground”项。

You should notice a red highlight of some of the colours because you have not defined them yet. We need to define this constant in a different constants file:

您应该注意到某些颜色的红色突出显示，因为您尚未定义它们。 我们需要在其他常量文件中定义此常量：

Q1: What file should we use? (Answer at the bottom)

Q1：我们应该使用什么文件？ (底部答案)

C: styles.xml

C：styles.xml

B: build.gradle

B：build.gradle

C: colors.xml

C：colors.xml

Locate this file in the same way as before. Inside we need to add a new item “colorBackground”. If you are familiar with xml then this file should look pretty straight forward, but if you are new to xml then all you need to know is that you change the name property of each <color> and place the colour in hexadecimal format between the <color></color> tags.

以与以前相同的方式找到该文件。 在内部，我们需要添加一个新项目“ colorBackground”。 如果您熟悉xml，那么此文件应该看起来很简单，但是，如果您是xml的新手，那么您需要知道的是更改每个<color>的name属性并将颜色以十六进制格式放在< color> </ color>标签。

(N.B: Hexadecimal is a base 16 number system so the colour #FF9800 is Red: FF = 256, Blue 98=152, Green 00 = 00)

(注意：十六进制是一个以16为底的数字系统，因此颜色＃FF9800为红色：FF = 256，蓝色98 = 152，绿色00 = 00)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#FF9800</color>
    <color name="colorPrimaryDark">#EF6C00</color>
    <color name="colorAccent">#FFFFFF</color>
    <color name="colorBackground">#F2FBFF</color>
    <color name="actionBarText">#FFFFFF</color>
    <color name="actionBarBackground">#FF9800</color>
</resources>

Figure 4 — Colors.xml is used to store all the colours used throughout the app in one simple to edit file which stops us hard coding in colours that will be hard to edit later. For the British, this file and its tags use the Americanised spelling colors not colours, so watch out.

图4 – Colors.xml用于将整个应用程序中使用的所有颜色存储在一个简单的编辑文件中，这使我们无法采用以后将很难编辑的颜色进行硬编码。 对于英国人来说，此文件及其标签使用的是美国化拼写颜色而不是颜色，因此请当心。

Feel free to change each colour and see what it changes when you have finished constructing our layout. Perhaps even try adding in some other colours and elements if you feel like the layout is a bit too empty at the end.

完成构造布局后，可以随意更改每种颜色并查看其变化。 如果您觉得布局最后有点太空，甚至可以尝试添加其他颜色和元素。

Q2: How would you add the colour red to the “colors.xml” file? (Answer at the bottom)

问题2：如何将红色添加到“ colors.xml”文件中？ (底部答案)

Material-UI图标按钮 (Material-UI Icon Button)

A good first component to learn to use is the button. Let’s create an icon button so that we can learn how to import vector assets in Android Studio at the same time. This button is going to be the button that we click to navigate to the next activity where we will be able to take photos. We need a camera icon and I would encourage using material icons as we can use them royalty free. They also have most icons you could ever need for an app [2].

按钮是一个很好的学习使用的第一组件。 让我们创建一个图标按钮，以便我们可以学习如何同时在Android Studio中导入矢量资产。 该按钮将成为我们单击以导航到下一个可以拍照的活动的按钮。 我们需要一个相机图标，我鼓励您使用材质图标，因为我们可以免费使用它们。 它们还包含您可能需要为应用提供的大多数图标[2]。

Now that we have downloaded the image, we will need to import this image into Android Studio. Follow these instructions to load a vector image into Android Studio:

现在我们已经下载了图像，我们将需要将该图像导入Android Studio。 请按照以下说明将矢量图像加载到Android Studio中：

Figure 5— Opening up the import asset window by right clicking res and navigating to “Vector Asset”.

图5 –通过右键单击res并导航到“ Vector Asset”，打开导入资产窗口。

• Open the project view on the left hand side and locate the folder named “res”
  打开左侧的项目视图，然后找到名为“ res”的文件夹
• Open this folder up and right click on the “drawable” folder
  向上打开此文件夹，然后右键单击“可绘制”文件夹
• Navigate to “New ->Vector Asset”
  导航到“新建->矢量资产”
• Change the asset type to a local file
  将资产类型更改为本地文件
• The “Path” field, has a folder icon on the right hand side: click this to open up a browser where you can find your downloaded icon to import
  “路径”字段的右侧有一个文件夹图标：单击此按钮可打开浏览器，您可以在其中找到要导入的已下载图标
• Name the file “ic_camera”
  将文件命名为“ ic_camera”
• Click next and then finish
  单击下一步，然后完成

Figure 6— When importing a vector asset this is how the final window should look before you click next and finish.

图6 —导入矢量资产时，这是在单击下一步并完成之前最终窗口的外观。

Congratulations, you have now imported your first vector asset into Android Studio to use! It may have seemed like more of a pain then copy and pasting the resource but you will see that it actually makes your life easier with scaling and accessing throughout the app.

恭喜，您现在已将您的第一个矢量资产导入Android Studio中以供使用！ 复制和粘贴资源似乎更麻烦，但是您会发现通过扩展和访问整个应用程序，这实际上使您的生活更轻松。

Now navigate to the “activity_main.xml” file again. Make sure that you have the window in side by side mode (See the diagram below). Using the palette on the design side, look for a button. Drag the button into the view. Now looking at the code side, you should see a <Button> tag. We want to change this from “Button” to “com.google.android.material.button.MaterialButton”

现在，再次导航到“ activity_main.xml”文件。 确保窗口处于并排模式(请参见下图)。 使用设计侧的调色板，寻找一个按钮。 将按钮拖动到视图中。 现在看一下代码侧，您应该看到一个<Button>标记。 我们要将其从“按钮”更改为“ com.google.android.material.button.MaterialButton”

Figure 7— Icons in the top right corner to change between views. From left to right: XML only view, side by side view and design only view.

图7-右上角的图标可在视图之间切换。 从左到右：仅XML视图，并排视图和仅设计视图。

Now that we have an empty component we will have a red warning as we have not constrained our component. Make sure you are now in the design only tab. If you select the button on screen you should see four blue circles, by dragging these to other component’s circles we can define a relative position for our button. Drag the left circle to the left side of the screen and the right circle to the right side of the screen. We have constrained our button to be equally spaced (centred) horizontally. Now drag the bottom circle to the bottom of the screen. We have constrained the button vertically to the bottom of the screen.

现在我们有一个空的组件，因为我们没有限制组件，所以将有一个红色警告。 确保您现在位于“仅设计”选项卡中。 如果选择屏幕上的按钮，您应该会看到四个蓝色圆圈，通过将它们拖动到其他组件的圆圈，我们可以为按钮定义一个相对位置。 将左圆拖动到屏幕的左侧，将右圆拖动到屏幕的右侧。 我们已将按钮限制为水平等距(居中)。 现在将底部的圆圈拖到屏幕底部。 我们已经将按钮垂直限制在屏幕底部。

Figure 8 — Constraining a view using the visual design tab built into Android Studio.

图8 —使用Android Studio内置的视觉设计选项卡约束视图。

To add padding navigate to the layout tab in the attributes menu on the right hand side. Change the “Constraint Widget” bottom margin to 24. This should be significant enough to stop the button from looking glued to the floor.

要添加填充，请导航到右侧属性菜单中的布局选项卡。 将“约束控件”的底部边距更改为24。这应该足够重要，以防止按钮看起来粘在地板上。

Having positioned the button we will now style the button to contain our text, image and colours. To do this navigate to the code only view. Add the following in between the tag < … >:

定位按钮后，我们现在将为按钮设置样式以包含我们的文本，图像和颜色。 为此，请导航至仅代码视图。 在标签<…之间添加以下内容：

android:text="@string/camera_button_text"
android:textColor="@color/colorAccent"
app:icon="@drawable/ic_camera"
app:iconTint="@color/colorAccent"

Figure 9 — Adding the custom style to a Material-UI component by editing the XML file directly.

图9 —通过直接编辑XML文件将自定义样式添加到Material-UI组件。

Breaking this down line by line:

逐行细分此内容：

• ‘android:text=”@string/camera_button_text”’ defines the text as a constant from the “strings.xml” file
  'android：text =” @ string / camera_button_text”'将文本定义为来自“ strings.xml”文件的常量
• ‘android:textColor=”@color/colorAccent”’ defines the color of the text as a constant from the “colors.xml” file
  'android：textColor =“ @ color / colorAccent”'将文本的颜色定义为“ colors.xml”文件中的常量
• ‘app:icon=”@drawable/ic_camera”’ defines the icon at the left side of the button as the image which we imported earlier (Android helpfully allows us to access this just by using “@drawable/ic_camera”)
  “ app：icon =” @ drawable / ic_camera””将按钮左侧的图标定义为我们先前导入的图像(Android通过使用“ @ drawable / ic_camera”帮助我们访问了此图像)
• ‘app:iconTint=”@color/colorAccent”’ defines the color which the icon should be as a constant from the “colors.xml” file
  'app：iconTint =“ @ color / colorAccent”'定义图标“ colors.xml”文件中的常量颜色

The line starting “android:text…” should be underlined in red, as we have not yet defined this string. To define it, click on it and press ALT-ENTER and then ENTER again. Set the resource value to “Take Photo” and then press OK. Now if you switch back to the design tab you should have a beautifully styled button which has the correct colours, text and also an icon! We are now done with editing the layout and so we move onto running the application on our phone or emulator.

由于我们尚未定义此字符串，因此以“ android：text…”开头的行应以红色下划线。 要定义它，请单击它，然后按ALT-ENTER，然后再次按ENTER。 将资源值设置为“拍照”，然后按OK。 现在，如果您切换回设计选项卡，则应该有一个样式精美的按钮，该按钮具有正确的颜色，文本以及图标！ 现在，我们完成了编辑布局的工作，因此我们继续在手机或仿真器上运行应用程序。

In the case of using your phone: connect it to your laptop or desktop, allow USB debugging (You will need to have enabled developer options) and then click run. If you are using an emulator you can simply click run at this stage. The final product should look something like this:

在使用手机的情况下：将其连接到笔记本电脑或台式机，允许进行USB调试(您需要启用开发人员选项)，然后单击运行。 如果您使用的是仿真器，则可以在此阶段单击运行。 最终产品应如下所示：

N.B To run an application you can either press SHIFT-F10 or you can click the green triangle at the top of Android Studio.

注意：要运行应用程序，可以按SHIFT-F10或单击Android Studio顶部的绿色三角形。

Figure 10— The final activity layout that should be displayed on your screen after following the tutorial!

图10-遵循教程后，最终的活动布局应显示在屏幕上！

NB: I have added an image which is vertically centred and horizontally centred. The component to add an image is called an ImageView. Using the steps described above you should be able to: add an ImageView, centre it and import a vector asset to display, give it a go!

注意：我添加了垂直居中和水平居中的图像。 添加图像的组件称为ImageView。 使用上述步骤，您应该能够：添加ImageView，将其居中并导入要显示的矢量资产，试试吧！

摘要 (Summary)

We have imported Material-UI into our project, set up a style and created a layout. If all of this made sense to you then this you are well on your way to having the skills needed to make static android applications. In the next tutorial we will learn how to have our app react to interactions such as clicking a button in order to learn how to develop dynamic android apps.

我们已经将Material-UI导入到我们的项目中，设置了样式并创建了布局。 如果所有这些对您都有意义，那么您就可以掌握制作静态android应用程序所需的技能。 在下一个教程中，我们将学习如何使我们的应用程序对诸如单击按钮之类的交互做出React，以学习如何开发动态android应用程序。

Next…

下一个…

源代码 (Source Code)

BeginnerAndroidAppTutorial — GitHub

BeginnerAndroidAppTutorial — GitHub

翻译自: https://medium.com/swlh/beginner-android-app-part-2-designing-activity-layouts-76f99c1f9508

android初学者