kotlin xml布局

Android Toolbar widget is used to create menus in the apps. We will learn how to create a Toolbar using the XML layout and Kotlin code. We will implement various toolbar properties in an example Android app.

Android工具栏小部件用于在应用程序中创建菜单。 我们将学习如何使用XML布局和Kotlin代码创建工具栏。 我们将在示例Android应用程序中实现各种工具栏属性。

什么是Android工具栏？ (What is Android Toolbar?)

Android Toolbar widget is generally found on the top of the screen. The application title, logo, navigation icon, and the menu bar is displayed inside the toolbar.

通常在屏幕顶部找到Android工具栏小部件。 工具栏内显示应用程序标题，徽标，导航图标和菜单栏。

The toolbar is the material design replacement for the old and now deprecated ActionBar.

工具栏是旧的和现在不推荐使用的ActionBar的材质设计替代。

工具栏Gradle依赖关系 (Toolbar Gradle Dependencies)

The toolbar is available with the following dependency.

该工具栏具有以下依赖性。

implementation 'com.android.support:appcompat-v7:27.1.0'

Android Toolbar can be supplied either from the themes or from the layout.

可以从主题或布局中提供Android工具栏。

Android Apps默认工具栏 (Android Apps Default Toolbar)

When you create a new android studio project, you might see that the activity_main.xml doesn’t have any Toolbar defined in the XML. Still, when you see the XML preview, there is a Toolbar with the application name by default at the top.

创建新的android studio项目时，您可能会看到activity_main.xml在XML中没有定义任何工具栏。 仍然，当您看到XML预览时，默认情况下在顶部有一个工具栏，其名称为应用程序名称。

This is because the following style is defined in the styles.xml, which is ultimately attached in the AndroidManifest.xml file.

这是因为在styles.xml中定义了以下样式，该样式最终附加在AndroidManifest.xml文件中。

主题工具栏 (Toolbar from Themes)

DarkActionBar theme adds the Toolbar at the top of the app by default.

默认情况下，DarkActionBar主题将工具栏添加到应用程序的顶部。

We can change the parent theme in the above image from Theme.AppCompat.Light.DarkActionBar to Theme.AppCompat.Light.NoActionBar to remove the Toolbar that is displayed as a part of the activity theme.

我们可以将上图中的父主题从Theme.AppCompat.Light.DarkActionBar为Theme.AppCompat.Light.NoActionBar以删除作为活动主题一部分显示的工具栏。

Let’s change the theme and add the Toolbar in the activity_main.xml file.

让我们更改主题并将工具栏添加到activity_main.xml文件中。

工具栏XML布局 (Toolbar XML Layout)

We have added the toolbar in our activity_main.xml layout file using the following code.

我们使用以下代码在我们的activity_main.xml布局文件中添加了工具栏。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    

</LinearLayout>

This will display a Transparent Toolbar with no text or any other items.

这将显示一个透明工具栏，其中没有文本或任何其他项目。

We have to add more properties to utilize Toolbar effectively.

我们必须添加更多属性才能有效利用工具栏。

1.设置工具栏背景色 (1. Setting Toolbar Background Color)

We have to add the following XML attribute in our Toolbar tag for the background color.

我们必须在工具栏标签中为背景色添加以下XML属性。

android:background="@color/colorPrimary"

2.设置主题 (2. Setting the Theme)

We can set the toolbar theme using the following code.

我们可以使用以下代码设置工具栏主题。

android:theme="@style/ThemeOverlay.AppCompat.Dark"

We are using a default theme for the layout. Dark indicates that the text colors would be light (generally white).

我们正在使用默认主题的布局。 深色表示文本颜色为浅色（通常为白色）。

We can also create our own custom themes in the styles.xml file.

我们还可以在styles.xml文件中创建自己的自定义主题。

3.设置标题，副标题，图标 (3. Setting title, subtitle, icons)

• Title: app:title="Androidly Toolbar"
  标题： app:title="Androidly Toolbar"
• Subtitle: app:subtitle="Sub"
  字幕： app:subtitle="Sub"
• Logo: app:logo="@android:drawable/ic_menu_call"
  徽标： app:logo="@android:drawable/ic_menu_call"
• Navigation Icon: app:navigationIcon="@drawable/ic_menu_black_24dp"
  导航图标： app:navigationIcon="@drawable/ic_menu_black_24dp"

4.工具栏预览 (4. Toolbar Preview)

Our toolbar looks like the below image after doing all the above changes.

完成上述所有更改后，我们的工具栏如下图所示。

Toggle the theme to @style/ThemeOverlay.AppCompat.Light and you shall see inverted colors.

将主题切换到@style/ThemeOverlay.AppCompat.Light ，您将看到反转的颜色。

Android工具栏主题 (Android Toolbar Themes)

We can create our own custom styles and assign them as a theme on our Toolbar. This will be much easier than adding all those XML properties.

我们可以创建自己的自定义样式，并在工具栏上将其分配为主题。 这比添加所有这些XML属性要容易得多。

<resources>
    
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="toolbarStyle">@style/ToolBarStyle</item>
    </style>

    <style name="ToolBarStyle" parent="Widget.AppCompat.Toolbar">
        <item name="android:background">#EA8D8D</item>
        <item name="titleTextAppearance">@style/TitleTextAppearance</item>
        <item name="subtitleTextAppearance">@style/SubTitleTextAppearance</item>
    </style>

    <style name="TitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
        <item name="android:textSize">18sp</item>
        <item name="android:textColor">#38ADAE</item>
    </style>

    <style name="SubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textSize">14sp</item>
        <item name="android:textColor">#00B7FF</item>
    </style>

</resources>

Let’s use the custom theme in the activity_main.xml file.

让我们在activity_main.xml文件中使用自定义主题。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:subtitle="Sub"
        app:title="AndroidlyToolbar" />


</LinearLayout>

The AppTheme style gets updated in the AndroidManifest.xml file. Our Toolbar will look like the below image.

AppTheme样式在AndroidManifest.xml文件中得到更新。 我们的工具栏将如下图所示。

Android自定义工具栏 (Android Custom Toolbar)

We can define our own custom views inside a Toolbar. The following layout defines custom views within the toolbar.

我们可以在工具栏中定义自己的自定义视图。 以下布局定义了工具栏中的自定义视图。

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <android.support.v7.widget.Toolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:subtitle="Sub"
        app:title="AndroidlyToolbar">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">


            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="Text" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:src="@drawable/ic_menu_black_24dp" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:text="BUTTON" />

        </RelativeLayout>


    </android.support.v7.widget.Toolbar>


</LinearLayout>

Output:

输出：

使用Kotlin代码创建工具栏 (Creating Toolbar using Kotlin Code)

We can create toolbars programmatically using Kotlin code. Each of the toolbar XML properties has its equivalent Kotlin methods.

我们可以使用Kotlin代码以编程方式创建工具栏。 工具栏的每个XML属性都有其等效的Kotlin方法。

The following MainActivity.kt class is defined below.

下面定义了以下MainActivity.kt类。

package net.androidly.androidlytoolbar

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.v4.content.ContextCompat
import android.support.v7.widget.Toolbar
import android.widget.Toast


class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val toolbar = findViewById(R.id.toolbar) as Toolbar?
        setSupportActionBar(toolbar)
        toolbar?.title = "Androidly"
        toolbar?.subtitle = "Sub"
        toolbar?.navigationIcon = ContextCompat.getDrawable(this,R.drawable.ic_menu_black_24dp)
        toolbar?.setNavigationOnClickListener { Toast.makeText(applicationContext,"Navigation icon was clicked",Toast.LENGTH_SHORT).show() }
    }
}

Using the as operator, we safely typecast the XML view to the toolbar instance.

使用as运算符，我们可以安全地将XML视图转换为工具栏实例。

The setNavigationOnClickListener triggers a toast message when the navigation icon is clicked from the menu.

当从菜单中单击导航图标时， setNavigationOnClickListener会触发一条敬酒消息 。

翻译自: https://www.journaldev.com/260/android-toolbar-xml-layout-kotlin

kotlin xml布局