Android自定义动作栏示例教程

1 年 ago

科, 颖

3 minutes

在本教程中，我们将创建一个包含自定义布局的Android自定义操作栏的应用程序。我们假设您对本教程中讨论的ActionBar组件有基本的了解。

Android自定义操作栏

要自定义ActionBar，首先我们需要在res/values/styles.xml中配置主题，并在AndroidManifest.xml中为相应的活动类设置主题。以下是用于此目的的xml布局：styles.xml

<resources>
    
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
    </style>

    <style name="CustomTheme" parent="Theme.AppCompat.Light">

        <item name="contentInsetStart">0dp</item>
        <item name="contentInsetEnd">0dp</item>
    </style>

</resources>

从上面的片段中可以看出，如果我们在我们的活动中使用AppTheme样式，它将抛出一个空指针异常，因为它明确指定了NoActionBar主题。因此，在这个项目中我们将使用CustomTheme样式。contentInsetStart和contentInsetEnd是填充值。请注意，我们将使用AppCompatActivity，因为它能与3.0之前的Android版本最兼容。

自定义操作栏布局

下面是我们从MainActivity设置给ActionBar的视图布局，名为custom_action_bar_layout.xml。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >

    <TableRow>

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/back"
            android:layout_gravity="center_vertical"
            android:background="@android:color/transparent"
            android:id="@+id/action_bar_back"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name"
            android:gravity="center_horizontal"
            android:textAppearance="?android:attr/textAppearanceMedium"
            android:textStyle="bold"
            android:padding="10dp"
            android:layout_alignParentTop="true"
            android:layout_weight="1"
            />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/forward"
            android:id="@+id/action_bar_forward"
            android:layout_gravity="center_vertical"
            android:background="@android:color/transparent"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true" />


    </TableRow>

</TableLayout>

视图布局由代表向前和向后的图像按钮的两个 ImageButton 和一个居中的 TextView 组成。

Android自定义操作栏项目结构

Android自定义操作栏代码

activity_main.xml是一个空的RelativeLayout，因为我们在这里强调的是ActionBar。MainActivity.java如下所示。

package com.Olivia.customactionbar;

import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageButton;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
        getSupportActionBar().setDisplayShowCustomEnabled(true);
        getSupportActionBar().setCustomView(R.layout.custom_action_bar_layout);
        View view =getSupportActionBar().getCustomView();

        ImageButton imageButton= (ImageButton)view.findViewById(R.id.action_bar_back);

        imageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

        ImageButton imageButton2= (ImageButton)view.findViewById(R.id.action_bar_forward);

        imageButton2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),"Forward Button is clicked",Toast.LENGTH_LONG).show();
            }
        });
    }


}

在上述的代码中，我们正在使用支持库。因此，我们使用了getSupportActionBar()而不是getActionBar()。为了向ActionBar添加自定义布局，我们在getSupportActionBar()上调用了以下两个方法：

getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
getSupportActionBar().setDisplayShowCustomEnabled(true);

使用setCustomView（）方法可将ActionBar用自定义视图进行填充。要为ActionBar按钮设置onClickListeners，需要首先使用getCustomView（）方法获取CustomView。在本教程中，我们已将返回按钮编程为使用finish（）关闭活动，并将前进按钮编程为显示Toast。注意：请在AndroidManifest.xml文件的application标签内添加以下行。

android:theme="@style/CustomTheme"

这是我们带有自定义主题和布局的安卓应用。注意：两侧有固定的边距，无法修改。为了解决这个问题，我们需要用一个工具栏（ToolBar）来替换ActionBar。这个后续教程中我们会讨论。至此，安卓自定义操作栏教程结束。你可以从下面的链接下载最终的安卓自定义操作栏项目。

下载Android自定义操作栏项目

参考文献： Android 文档