Лучшие пользовательские интерфейсы с панелью действий Android

 <application>
  ...
  <activity
    android:name="com.example.actionbar.SecondActivity"
    android:label="@string/second_activity_title"
    android:parentActivityName="com.example.actionbar.MainActivity" >
    <meta-data
      android:name="android.support.PARENT_ACTIVITY"
      android:value="com.example.actionbar.MainActivity" />
  </activity>
  ...
</application>

Затем добавьте кнопку в основное действие в res/layout/activity_main.xml

 <Button
  android:id="@+id/second"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_alignLeft="@+id/TextView1"
  android:layout_centerVertical="true"
  android:onClick="openSecondActivity"
  android:text="@string/second" />

Также добавьте обработчик onClickMainActivity.java Эта функция, показанная ниже, запускает второе действие при нажатии кнопки.

 public void openSecondActivity(View view) {
  Intent intent = new Intent(this, SecondActivity.class);
  startActivity(intent);
}

Запустите приложение. На первом экране будет кнопка, которая при нажатии откроет второй экран с панелью действий, показанной ниже. Обратите внимание на каретку, которая перемещается к родительской активности при нажатии.

Интерактивность Action Bar

Пока что мы создали элементы действий, которые ничего не делают при нажатии. Далее мы увидим, как добавить интерактивность на панель действий.

Обработка щелчков на элементах действий

При нажатии действия вызывается метод действия onOptionsItemSelected() Действие можно определить, вызвав getItemId() Добавьте метод onOptionsItemSelected()MainActivity.java Здесь мы показываем другое сообщение, когда на каждое действие нажимают.

 @Override
public boolean onOptionsItemSelected(MenuItem item) {
  // Handle presses on the action bar items
  switch (item.getItemId()) {
    case R.id.action_search:
      // Code you want run when activity is clicked
      Toast.makeText(this, "Search clicked", Toast.LENGTH_SHORT).show();
      return true;
    case R.id.action_record:
      Toast.makeText(this, "Record clicked", Toast.LENGTH_SHORT).show();
      return true;
    case R.id.action_save:
      Toast.makeText(this, "Save clicked", Toast.LENGTH_SHORT).show();
      return true;
    case R.id.action_label:
      Toast.makeText(this, "Label clicked", Toast.LENGTH_SHORT).show();
      return true;
    case R.id.action_play:
      Toast.makeText(this, "Play clicked", Toast.LENGTH_SHORT).show();
      return true;
    case R.id.action_settings:
      Toast.makeText(this, "Settings clicked", Toast.LENGTH_SHORT).show();
      return true;
    default:
      return super.onOptionsItemSelected(item);
  }
}

Виды действий

Представления действий — это интерактивные виджеты, которые отображаются на панели действий вместо кнопок действий. Они позволяют размещать случайно используемые элементы пользовательского интерфейса на панели действий, что позволяет избежать ненужного использования места на экране и переключения действий для их использования.

Чтобы объявить представление действия, используйте actionLayoutactionViewClass В качестве быстрого примера, чтобы добавить виджет SearchViewres/menu/main_activity_bar.xml

 <item android:id="@+id/action_search"
  android:icon="@drawable/ic_action_search"
  android:title="@string/action_search"
  android:showAsAction="ifRoom|collapseActionView"
  android:actionViewClass="android.widget.SearchView" />

При запуске приложения появится окно редактирования текста при нажатии на действие поиска.

Мы добавим наш собственный вид на панель действий. Создайте файл макета с именем res/layout/my_action.xml Это будет ресурс макета пользовательского представления.

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" >
  <TextView
    android:id="@+id/myActionTextView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Type here:"
    android:gravity="right" />
  <EditText
    android:id="@+id/myActionEditText"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="left" />
</LinearLayout>

Затем добавьте элемент действия в файл res/menu/main_activity_bar.xml

 <item android:id="@+id/my_action"
  android:icon="@drawable/ic_action_edit"
  android:title="My Action"
  android:showAsAction="ifRoom|collapseActionView"
  android:actionLayout="@layout/my_action" />

Это будет использовать макет, который мы добавили выше. collapseActionView Нажатие на каретку вверх выходит из вида действия.

Затем обновил основной файл активности MainActivity.java Обратите внимание на комментарии по всему коду.

 package com.example.actionbar;

import android.os.Bundle;
import android.app.ActionBar;
import android.app.Activity;
import android.content.Intent;
import android.support.v4.view.MenuItemCompat;
import android.support.v4.view.MenuItemCompat.OnActionExpandListener;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends Activity implements TextView.OnEditorActionListener {

  private MenuItem myActionMenuItem;
  private EditText myActionEditText;

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

  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu items for use in the action bar
    MenuInflater inflater = getMenuInflater();
    inflater.inflate(R.menu.main_activity_bar, menu);
  
    // Here we get the action view we defined
    myActionMenuItem = menu.findItem(R.id.my_action);
    View actionView = myActionMenuItem.getActionView();
  
    // We then get the edit text view that is part of the action view
    if(actionView != null) {
      myActionEditText = (EditText) actionView.findViewById(R.id.myActionEditText);

      if(myActionEditText != null) {
        // We set a listener that will be called when the return/enter key is pressed
        myActionEditText.setOnEditorActionListener(this);
      }   
    }
  
    // For support of API level 14 and below, we use MenuItemCompat
    MenuItemCompat.setOnActionExpandListener(myActionMenuItem, new OnActionExpandListener() {
      @Override
      public boolean onMenuItemActionCollapse(MenuItem item) {
        // Do something when collapsed
        return true;  // Return true to collapse action view
      }

      @Override
      public boolean onMenuItemActionExpand(MenuItem item) {
        // Do something when expanded
        if(myActionEditText != null) {
          myActionEditText.setText("");
        }

        return true;  // Return true to expand action view
      }
    });
  
    return super.onCreateOptionsMenu(menu);
  }

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    if(event.getAction() == MotionEvent.ACTION_DOWN) {
      toggleActionBar();
    }
  
    return true;
  }

  private void toggleActionBar() {
    ActionBar actionBar = getActionBar();

    if(actionBar != null) {
      if(actionBar.isShowing()) {
        actionBar.hide();
      }
      else {
        actionBar.show();
      }
    }
  }

  public void openSecondActivity(View view) {
    Intent intent = new Intent(this, SecondActivity.class);
    startActivity(intent);
  }

  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    // Handle presses on the action bar items
    switch (item.getItemId()) {
      case R.id.action_search:
        // Code you want run when activity is clicked
        Toast.makeText(this, "Search clicked", Toast.LENGTH_SHORT).show();
        return true;
      case R.id.action_record:
        Toast.makeText(this, "Record clicked", Toast.LENGTH_SHORT).show();
        return true;
      case R.id.action_save:
        Toast.makeText(this, "Save clicked", Toast.LENGTH_SHORT).show();
        return true;
      case R.id.action_label:
        Toast.makeText(this, "Label clicked", Toast.LENGTH_SHORT).show();
        return true;
      case R.id.action_play:
        Toast.makeText(this, "Play clicked", Toast.LENGTH_SHORT).show();
        return true;
      case R.id.action_settings:
        Toast.makeText(this, "Settings clicked", Toast.LENGTH_SHORT).show();
        return true;
      default:
        return super.onOptionsItemSelected(item);
    }
  }

  @Override
  public boolean onEditorAction(TextView textView, int i, KeyEvent keyEvent) {
    if(keyEvent != null) {
      // When the return key is pressed, we get the text the user entered, display it and collapse the view
      if(keyEvent.getAction() == KeyEvent.ACTION_DOWN && keyEvent.getKeyCode() == KeyEvent.KEYCODE_ENTER) {
        CharSequence textInput = textView.getText();
        // Do something useful with the text
        Toast.makeText(this, textInput, Toast.LENGTH_SHORT).show();
        MenuItemCompat.collapseActionView(myActionMenuItem);
      }
    }
    return false;
  }
}

В этом коде мы получаем представление редактирования текста в макете представления действия myActionEditText Мы хотим, чтобы операция выполнялась, когда пользователь вводит какой-то текст и нажимает клавишу возврата. По умолчанию, когда пользователь нажимает Return, курсор переходит на новую строку. Вместо этого мы хотим свернуть вид действия и получить ввод пользователя. Это делается методом onEditorAction Если это Enter, ввод текста захватывается и отображается. Затем вид действия свернут.

Мы устанавливаем слушателя в представлении действия с помощью MenuItemCompat.setOnActionExpandListener MenuItemCompat

По умолчанию, когда пользователь вводит текст и покидает вид действия, при его повторном расширении предыдущий текст все еще виден. Мы используем onMenuItemActionExpand()

Вывод

Панель действий является важным элементом дизайна, и ее можно использовать для значительного улучшения пользовательского интерфейса приложения. Мы рассмотрели некоторые конфигурации, которые вы можете использовать на панели действий для пользовательского интерфейса вашего приложения, но есть и другие. Для получения дополнительной информации ознакомьтесь с документацией . Вы можете увидеть код, используемый в этой статье на GitHub.