Action bar bao gồm:
- Biểu tượng App - Điều này được sử dụng để xác định các ứng dụng của bạn với một logo hoặc biểu tượng.
- Xem kiểm soát - Điều này cũng có thể được sử dụng để xác định các ứng dụng hoặc các hoạt động cụ thể của người sử dụng là theo tiêu đề. - - Nếu ứng dụng của bạn có quan điểm khác nhau, nó cũng có thể được sử dụng để hiển thị những điều này và cho phép dễ dàng chuyển đổi giữa các quan điểm.
- Nút Action - Chúng được sử dụng để hiển thị các hành động quan trọng nhất và / hoặc thường xuyên sử dụng. Nếu không có đủ không gian để hiển thị tất cả các nút hành động, những người không phù hợp sẽ được tự động chuyển đến các hành động tràn.
- Tràn Hành động - này được sử dụng cho những hành động ít được sử dụng.
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
Code:
<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.
Code:
<?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!
Code:
@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.
Code:
<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.
Code:
@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:
Code:
<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 ().
Code:
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:
Code:
<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.
Code:
<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.
Code:
<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:
Code:
<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:
Code:
<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.
Code:
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.
Code:
@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.
Code:
<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.
Code:
<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.
Code:
<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ã.
Code:
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!
----------
Nguồn
www.yeuquangngai.net 
No comments:
Post a Comment