مشخصات مقاله
-
3166
-
0.0
-
4256
-
0
-
0
آموزش نحوه ی استفاده از action bar اندروید قسمت پنجم
دوره آموزش برنامه نویسی اندروید
کلیه حقوق مادی و معنوی این مقاله متعلق به آموزشگاه تحلیل داده می باشد و هر گونه استفاده غیر قانونی از آن پیگرد قانونی دارد.
آموزش نحوه ی استفاده از action bar اندروید قسمت پنجم
8. استفاده از navigation drawer
نحوه و الگوی جدید پیمایش (با navigation drawer)
پیمایش (navigation) در اندروید الگوی جدیدی پیدا کرده که به navigation drawer شهرت یافته است. navigation drawer پَنِلی است که گزینه های پیمایش (navigation options) را در سمت چپ صفحه به نمایش می گذارد. به صورت پیش فرض این پنل پنهان می باشد ولی اگر کاربر انگشت خود در کناره ی صفحه (روی آیکون اپلیکیشن) قرار داده و آن را از چپ به راست بکشد، پنل گفته شده دوباره ظاهر می شود.
تصویر زیر کاربرد navigation drawer را در gmail به نمایش می گذارد.
پَنِل navigation drawer جزئی از compatability library v4 می باشد. برای استفاده از این الگوی پیمایش ابتدا طرح بندیی (layout) با android.support.v4.widget.DrawerLayout layout manager ایجاد کنید. layout manager موردنظر نباید بیش از دو view فرزند (زیر مجموعه یا مشتق) داشته باشد. اولین زیرمجموعه، عنصرِ محتوای اصلی (main content) است ولی دومین زیرمجموعه، container ای است برای navigation drawer. drawer menu به طور معمول توسط ابزارک ListView بکار گرفته می شود.
<android.support.v4.widget.drawerlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<framelayout android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<listview android:id="@+id/left_drawer"
android:layout_width="180dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choicemode="singleChoice"
android:divider="@android:color/transparent"
android:dividerheight="0dp"
android:background="#111" />
android.support.v4.widget.DrawerLayout>
شما می توانید ListView را در کد activity خود پر کرده و از طریق متد ListView.onItemClickListener یک listener در لیست آیتم (list item) خود به ثبت برسانید. در این listener می توانید عمل پیمایش (navigation action) را پیاده سازی کنید، به طور مثال، یک activity جدید آغاز می کنید یا یک fragment را در شَمای کلی (layout) جایگزین fragment دیگری می کنید.
مثال : نحوه ی بکارگیری navigation drawer
مثال زیر کاربرد و استفاده از navigation drawer را نمایش می دهد. اگر مایل هستید این مثال را دنبال کنید، ابتدا یک پروژه ی جدید اندروید ایجاد کنید، سپس اطمینان کسب کنید کتابخانه ی پشتیبانی به آن اضافه شده.
نکته
به منظور افزودن کتابخانه ی پشتیبانی به پروژه، روی پروژه ی مربوطه راست کلیک کرده سپس Android Tools → Add Support Library را از فهرست گزینش متنی (context menu) انتخاب کنید.
فایل layout ای بر اساس لیست زیر به این نام ایجاد کنید : fragment_layout
xml version="1.0" encoding="utf-8" ?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<textview android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Placeholder Text"
android:layout_gravity="center"
android:textappearance="?android:attr/textAppearanceLarge" />
linearlayout>
سپس، کلاس OperatingSystemFragment را ویژه ی fragment ایجاد کنید.
package com.vogella.android.actionbar.navigationdrawer;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
public class OpertingSystemFragment extends Fragment {
public static final String ARG_OS= "OS";
private String string;
@Override
public View onCreateView(LayoutInflater inflater، ViewGroup container،
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_layout، null);
TextView textView = (TextView) view.findViewById(R.id.textView1);
textView.setText(string);
return view;
}
@Override
public void onActivityCreated(Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
}
@Override
public void setArguments(Bundle args) {
string = args.getString(ARG_OS);
}
}
حال، تعدادی رشته و یک آرایه ی رشته ای (string array) به فایل values/strings.xml خود اضافه کنید.
xml version="1.0" encoding="utf-8" ?>
<resources>
<string name="app_name">Navigationdrawerstring>
<string name="action_settings">Settingsstring>
<string name="action_update">Updatestring>
<string name="drawer_open">Open Drawerstring>
<string name="drawer_close">Close Drawerstring>
<string name="hello_world">Hello world!string>
<string-array name="operating_systems">
<item>Androiditem>
<item>iPhoneitem>
<item>Windows Mobileitem>
string-array>
resources>
در مرحله ی نهایی activity مورد نظر را بدین ترتیب ایجاد کنید.
package com.vogella.android.actionbar.navigationdrawer;
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager;
import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.widget.DrawerLayout;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends Activity {
private String[] mPlanetTitles;
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
private ActionBarDrawerToggle mDrawerToggle;
private CharSequence title;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
title = getActionBar().getTitle();
mPlanetTitles = getResources().getStringArray(R.array.operating_systems);
System.out.println(mPlanetTitles.length);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);
// Set the adapter for the list view
mDrawerList.setAdapter(new ArrayAdapter<String>(this،
R.layout.drawer_item،R.id.content، mPlanetTitles));
// Set the list's click listener
mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
mDrawerToggle = new ActionBarDrawerToggle(this، /* host Activity */
mDrawerLayout، /* DrawerLayout object */
R.drawable.ic_drawer، /* nav drawer icon to replace 'Up' caret */
R.string.drawer_open، /* "open drawer" description */
R.string.drawer_close /* "close drawer" description */) {
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
getActionBar().setTitle(title);
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
getActionBar().setTitle("Open Drawer");
}
};
// Set the drawer toggle as the DrawerListener
mDrawerLayout.setDrawerListener(mDrawerToggle);
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
}
private class DrawerItemClickListener implements ListView.OnItemClickListener {
@Override
public void onItemClick(AdapterView parent، View view، int position، long id) {
selectItem(position);
}
}
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
mDrawerToggle.syncState();
}
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main، menu);
return super.onCreateOptionsMenu(menu);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Pass the event to ActionBarDrawerToggle، if it returns
// true، then it has handled the app icon touch event
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
// Handle your other action bar items...
switch (item.getItemId()) {
case R.id.action_settings:
Toast.makeText(this، "Settings selected"، Toast.LENGTH_LONG).show();
break;
default:
break;
}
return super.onOptionsItemSelected(item);
}
/** Swaps fragments in the main content view */
private void selectItem(int position) {
// create a new fragment and specify the planet to show based on position
Fragment fragment = new OpertingSystemFragment();
Bundle args = new Bundle();
args.putInt(OpertingSystemFragment.ARG_OS، position);
fragment.setArguments(args);
// Insert the fragment by replacing any existing fragment
FragmentManager fragmentManager = getFragmentManager();
fragmentManager.beginTransaction()
.replace(R.id.content_frame، fragment)
.commit();
// Highlight the selected item، update the title، and close the drawer
mDrawerList.setItemChecked(position، true);
getActionBar().setTitle((mPlanetTitles[position]));
mDrawerLayout.closeDrawer(mDrawerList);
}
}
این activity بر پایه ی پیشنهادات و ملزومات گوگل آیکون navigation drawer بکاربرده است. گوگل مجموعه ای سرشار از انواع آیکون ها را تحت URL زیر ارائه می دهد.
Navigation Drawer Icons
نکته
استفاده از navigation drawer هم اکنون بسیار محبوب می باشد. به نظر می رسد این امکان یا الگوی پیمایش بی نظیر کاربر پسند بوده و در خیلی از برنامه های کاربردی اندروید مورد استفاده قرار می گیرد.