Руководство по использованию пользовательской панели действий Android

В этом уроке мы создадим приложение, состоящее из пользовательской панели действий Android с пользовательским макетом. Мы предполагаем, что у вас есть общее представление о компоненте ActionBar, обсуждаемом в этом руководстве.

Пользовательская панель действий Android

Чтобы настроить панель действий, сначала нам нужно настроить тему в 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, поскольку он обеспечивает максимальную совместимость с версиями Android до 3.0.

Пользовательский макет панели действий

Ниже приведен макет представления, который будет установлен на ActionBar из нашей MainActivity. 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.journaldev.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 пользовательским представлением, как показано выше. Чтобы установить onClickListeners для кнопок ActionBar, нам нужно сначала получить CustomView с помощью getCustomView(). В этом уроке мы запрограммировали кнопку «Назад» для закрытия действия с помощью finish(); и кнопку «Вперед» для отображения всплывающего уведомления. Примечание. Добавьте следующую строку в AndroidManifest.xml внутри тега приложения.

android:theme="@style/CustomTheme"

Загрузить проект пользовательской панели действий Android

Ссылка: Android-документ