Action bar là một yếu tố thiết kế quan trọng, thường là ở đầu mỗi màn hình trong một ứng dụng, cung cấp một cái nhìn quen thuộc nhất quán giữa các ứng dụng khi lập trình android. Nó được sử dụng để cung cấp cho người dùng tương tác tốt hơn và kinh nghiệm bằng cách hỗ trợ điều hướng dễ dàng thông qua các tab và danh sách thả xuống.

Thiết lập Action Bar

Để bắt đầu, chúng ta sẽ tạo ra một dự án mới. Chúng tôi sẽ không được sử dụng các thư viện hỗ trợ Android, vì vậy hãy chắc chắn để chọn một phiên bản SDK tối thiểu là 11 hoặc cao hơn.

Thêm Actions Bar

Mã:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
  <item android:id="@+id/action_search"
    android:icon="@drawable/ic_action_search"
    android:title="@string/action_search"
    android:showAsAction="ifRoom" />
  <item android:id="@+id/action_record"
    android:icon="@drawable/ic_action_video"
    android:title="@string/action_record"
    android:showAsAction="ifRoom" />
  <item android:id="@+id/action_save"
    android:icon="@drawable/ic_action_save"
    android:title="@string/action_save"
    android:showAsAction="ifRoom" />
  <item android:id="@+id/action_label"
    android:icon="@drawable/ic_action_new_label"
    android:title="@string/action_label"
    android:showAsAction="ifRoom" />
  <item android:id="@+id/action_play"
    android:icon="@drawable/ic_action_play"
    android:title="@string/action_play"
    android:showAsAction="ifRoom" />
  <item android:id="@+id/action_settings"
    android:title="@string/action_settings"
    android:showAsAction="never" />
</menu>


Next, add the string literals to res/values/strings.xml, as shown below.


Mã:
<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">ActionBar</string>
  <string name="action_settings">Settings</string>
  <string name="action_search">Search</string>
  <string name="action_record">Record Video</string>
  <string name="action_save">Save</string>
  <string name="action_label">Add Label</string>
  <string name="action_play">Play Video</string>
  <string name="hello_world">Hello world!</string>
</resources>
>> Khóa học android tại hà nội!

Mã:
@Override
public boolean onCreateOptionsMenu(Menu menu) {
  MenuInflater inflater = getMenuInflater();


  inflater.inflate(R.menu.main_activity_bar, menu);
  return super.onCreateOptionsMenu(menu);
}


Khởi động dự án và bạn sẽ thấy một cái gì đó tương tự như hình dưới đây. Một số nút hành động xuất hiện trên Action bar trong khi phần còn lại có thể được nhìn thấy trên tràn hành động mở rộng.



Tách Action Bar

Kể từ khi các hành động chia sẻ Action bar bất động sản với các biểu tượng ứng dụng và tiêu đề, bạn có thể muốn chia Action bar là các mục của hành động xuất hiện ở dưới cùng của màn hình.

Chia Action Bar

Để chia Action bar, thêm android: uiOptions = "splitActionBarWhenNarrow" với từng hoạt động trong tập tin manifest của bạn mà bạn muốn có một thanh tách hành động.
Mã:
<activity
  android:name="com.example.actionbar.MainActivity"
  android:label="@string/app_name"
  android:uiOptions="splitActionBarWhenNarrow" >
  <meta-data android:name="android.support.UI_OPTIONS"
    android:value="splitActionBarWhenNarrow" />
  <intent-filter>
    <action android:name="android.intent.action.MAIN" />

    <category android:name="android.intent.category.LAUNCHER" />
  </intent-filter>
</activity>


Giấu Action Bar

Bạn có thể không muốn có Action bar nhìn thấy mọi lúc cho người dùng. Một ví dụ phổ biến này là việc ứng dụng Gallery để giấu Action bar khi người dùng đang nhìn vào một hình ảnh và hiển thị Action bar khi họ chạm vào hình ảnh. Để chuyển đổi hành động thanh khả năng hiển thị trên cảm ứng, thêm dòng sau vào tập tin hoạt động của bạn.

Mã:
@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();
    }
  }
}


Phủ rộng Action Bar

Đè Action bar cung cấp một hide / show trải nghiệm tốt hơn kể từ khi hoạt động không thay đổi kích thước trên mỗi hide / show, cho phép nội dung của bạn để ở lại. Bạn có thể kích hoạt năng bao phủ bằng cách thiết lập android: windowActionBarOverlay true trong file theme của bạn. Bạn nên sử dụng các chủ đề Theme.Holo (hoặc một trong các hậu duệ của nó). Nếu minSdkVersion của bạn đã được thiết lập đến 11, điều này cần được các trường hợp.

Trong res / values / styles.xml, thêm vào như sau:


Mã:
<resources>
  <style name="AppBaseTheme" parent="android:Theme.Light">
  </style>


  <!-- Application theme. -->
  <style name="AppTheme" parent="AppBaseTheme">
    <item name="android:windowActionBarOverlay">true</item>
  </style>
</resources>


Chạy các ứng dụng, và nhận thấy rằng nội dung trên màn hình không thay đổi vị trí khi Action bar được ẩn và tiết lộ.


Thêm Up Navigation


Tất cả các màn hình trong ứng dụng của bạn mà không phải là lối vào chính của ứng dụng của bạn (màn hình "nhà") nên cung cấp cho người dùng một cách để điều hướng đến màn hình cha mẹ hợp lý trong hệ thống phân cấp của ứng dụng bằng cách nhấn vào nút Up trên Action bar. Bắt đầu từ API level 14, bạn có thể khai báo các mẹ logic của từng hoạt động bằng cách xác định android: thuộc tính parentActivityName trong các yếu tố hoạt động trong file manifest. Để hỗ trợ các phiên bản thấp hơn, bao gồm các thư viện hỗ trợ và xác định các hoạt động phụ huynh làm giá trị cho android.support.PARENT_ACTIVITY, phù hợp với các android: thuộc tính parentActivityName.


Chúng tôi sẽ thêm một hoạt động khác để chứng minh điều này. Thêm một tập tin gọi là hoạt động SecondActivity, như được hiển thị trong danh sách mã sau. Chúng tôi kêu gọi setDisplayHomeAsUpEnabled () để cho phép Up navigation với các biểu tượng ứng dụng trong Action bar. Điều này sẽ thêm một dấu mũ trái-phải đối mặt cùng với các biểu tượng ứng dụng. Khi nó được nhấn, các hoạt động nhận được một cuộc gọi đến onOptionsItemSelected ().


Mã:
package com.example.actionbar;


import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.NavUtils;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;


public class SecondActivity extends Activity {


  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.second_activity);
    getActionBar().setDisplayHomeAsUpEnabled(true);
  }


  @Override
  public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu items for use in the action bar
    MenuInflater inflater = getMenuInflater();


    inflater.inflate(R.menu.second_activity_bar, menu);
    return super.onCreateOptionsMenu(menu);
  }


  @Override
  public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
      // Respond to the action bar's Up/Home button
      case android.R.id.home:
        NavUtils.navigateUpFromSameTask(this);
        return true;
    }


    return super.onOptionsItemSelected(item);
  }
}


In res/layout/second_activity.xml, add the following:


Mã:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/RelativeLayout1"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent"
  android:orientation="vertical" >


  <TextView
    android:id="@+id/TextView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:text="@string/hello_world_again" />
</RelativeLayout>


Next, add the following strings to res/values.strings.xml.


Mã:
<string name="hello_world_again">Hello world, again!</string>
<string name="second">Go To Second Activity</string>
<string name="second_activity_title">Second Activity</string>


Sau đó, tạo ra một tập tin tài nguyên cho thanh hành các hoạt động thứ hai. Tên này res file / menu / second_activity_bar.xml, và thêm các XML sau đây.


Mã:
<menu xmlns:android="http://schemas.android.com/apk/res/android" >
  <item
    android:id="@+id/action_settings"
    android:orderInCategory="100"
    android:showAsAction="never"
    android:title="@string/action_settings"/>
</menu>

Next, add the activity to the manifest file:


Mã:
<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>


Then, add a button to the main activity in res/layout/activity_main.xml:


Mã:
<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" />
Ngoài ra, thêm các handler onClick trong MainActivity.java. Chức năng này, hiển thị dưới đây, sẽ bắt đầu hoạt động thứ hai khi nút được click.
Mã:
public void openSecondActivity(View view) {
  Intent intent = new Intent(this, SecondActivity.class);
  startActivity(intent);
}
Chạy ứng dụng. Sẽ có một nút trên màn hình đầu tiên, khi nhấn, mang lên một màn hình thứ hai với Action bar hiển thị dưới đây. Chú ý caret rằng điều hướng tới các hoạt động phụ huynh khi nhấp vào.


Action Bar tương tác


Vì vậy, đến nay chúng tôi đã tạo ra các hành động mà không phải làm gì khi nhấp vào. Tiếp theo chúng ta sẽ thấy làm thế nào để thêm một số tương tác vào các Action bar.


Xử lý Nhấp chuột vào mục Action


Khi một hành động được nhấp, onOptionsItemSelected () phương pháp của hoạt động được gọi. Những hành động có thể được xác định bằng cách gọi getItemId (). Thêm onOptionsItemSelected () để MainActivity.java, như trong ví dụ sau. Ở đây chúng ta đang hiển thị một thông báo khác nhau khi mỗi hành động được nhấp vào.


Mã:
@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);
  }
}
Action Views

Để khai báo một điểm hành động, sử dụng một trong hai actionLayout hoặc actionViewClass thuộc tính để xác hoặc là một nguồn lực bố trí hoặc lớp widget để sử dụng, tương ứng. Như một ví dụ nhanh chóng, để thêm một widget SearchView với ví dụ của chúng tôi, sửa đổi các hành động tìm kiếm trong res / menu / main_activity_bar.xml như sau.


Mã:
<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" />
Khi chạy các ứng dụng, một quan điểm văn bản chỉnh sửa sẽ xuất hiện khi các hành động tìm kiếm được nhấp vào.

Search widget


Chúng tôi sẽ bổ sung thêm giao diện tùy chỉnh riêng của chúng tôi để Action bar. Tạo một file layout tên res / layout / my_action.xml. Đây sẽ là nguồn lực bố trí các giao diện tùy chỉnh của.


Mã:
<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>


Then, add the action item to res/menu/main_activity_bar.xml, as shown below.


Mã:
<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" />


Custom Action View


Tiếp theo, cập nhật các tập tin hoạt động chính, MainActivity.java, như hình dưới đây. Hãy lưu ý các ý kiến trong suốt mã.



Mã:
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;
  }
}


Tham khảo: Khóa học photoshop cơ bản nâng cao tại Vietpro!


Chủ đề tương tự: