Android工具栏教程 – XML布局和Kotlin
Android的工具栏小部件用于在应用中创建菜单。我们将学习如何使用XML布局和Kotlin代码创建工具栏。我们将在一个示例的Android应用中实现各种工具栏属性。
安卓工具栏是什么?
Android 的 Toolbar 组件通常位于屏幕顶部。在工具栏内显示应用标题、logo、导航图标和菜单栏。工具栏是材料设计对旧有、现已弃用的 ActionBar 的替代品。
Gradle依赖工具栏
工具栏与以下依赖项一同提供。
implementation 'com.android.support:appcompat-v7:27.1.0'
Android工具栏可以通过主题或布局进行提供。
Android应用程序默认工具栏
![android toolbar default style](https://cdn.silicloud.com/blog-img/blog/img/65647f06a4b2f92e6c72d9c6/8-0.png)
主題中的工具欄 de
默认情况下,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. 设置工具栏的背景颜色。
我们必须在Toolbar标签中添加以下XML属性来设置背景颜色。
android:background="@color/colorPrimary"
2. 设定主题
我们可以使用以下代码来设置工具栏的主题。
android:theme="@style/ThemeOverlay.AppCompat.Dark"
我们正在使用默认的主题布局。深色表示文字颜色会是浅色的(通常是白色)。我们还可以在styles.xml文件中创建自定义主题。
3. 设置标题,副标题,图标
- Title: app:title=”Androidly Toolbar”
- Subtitle: app:subtitle=”Sub”
- Logo: app:logo=”@android:drawable/ic_menu_call”
- Navigation Icon: app:navigationIcon=”@drawable/ic_menu_black_24dp”
4. 工具栏预览
![android toolbar xml inverted colors](https://cdn.silicloud.com/blog-img/blog/img/65647f06a4b2f92e6c72d9c6/25-2.png)
有许多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>
![android custom toolbar theme](https://cdn.silicloud.com/blog-img/blog/img/65647f06a4b2f92e6c72d9c6/32-0.png)
定制的安卓工具栏
我们可以在工具栏中定义自己的自定义视图。以下布局在工具栏内部定义了自定义视图。
<?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>
![android custom toolbar](https://cdn.silicloud.com/blog-img/blog/img/65647f06a4b2f92e6c72d9c6/36-0.png)
使用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消息。