Android工具列教程– XML布局和Kotlin

时间:2020-02-23 14:29:22  来源:igfitidea点击:

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

什么是Android工具列?

Android工具列小部件通常位于屏幕顶部。
工具列内显示应用程序标题,徽标,导航图标和菜单列。

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

工具列Gradle依赖关系

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

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

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

Android Apps默认工具列

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

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

主题工具列

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

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

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

工具列XML布局

我们使用以下代码在我们的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>

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

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

1.设置工具列背景色

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

android:background="@color/colorPrimary"

2.设置主题

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

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

我们使用默认主题作为布局。
深色表示文本颜色为浅色(通常为白色)。

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

3.设置标题,副标题,图标

  • 标题:ʻapp:title =" Androidly工具列""
  • 字幕:ʻapp:subtitle =" Sub""
  • 徽标:ʻapp:logo =" @ android:drawable/ic_menu_call""
  • 导航图标:ʻapp:navigationIcon =" @ drawable/ic_menu_black_24dp""

4.工具列预览

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

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

有许多XML属性可用于自定义工具列属性。
例如:titleTextColor,subtitleTextColor,subtitleTextAppearance,titleTextAppearance等。

Android工具列主题

我们可以创建自己的自定义样式,并在工具列上将其分配为主题。
这比添加所有这些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>

让我们在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>

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

Android自定义工具列

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

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

使用Kotlin代码创建工具列

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

下面定义了以下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() }
  }
}

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

当从菜单中单击导航图标时,setNavigationOnClickListener将触发一条toast消息。