Android 抽屜導航

jopen 12年前發布 | 175K 次閱讀 Android Android開發移動開發

原文地址 http://developer.android.com/training/implementing-navigation/nav-drawer.html

創建抽屜導航

導航抽屜是在屏幕左側邊緣的應用主導航選項的面板. 它大多數時間是隱藏的, 但當用戶用手指從屏幕的左側滑動, 或者當用戶點擊應用頂部工具欄的應用圖標的時候, 它就會顯示.

此課程是描述怎樣有效的使用在Support Library中的DrawLayout接口去實現一個導航抽屜.下面是一張效果圖：

創建一個抽屜布局

添加一個抽屜, 聲明UI的時候需要吧DrawLayout作為你的布局文件的根視圖(root view). 在DrawLayout里面, 添加一個主要內容的視圖(當抽屜導航隱藏的時候你的主要的布局文件), 和另一個包含導航抽屜的視圖.

舉例來說, 下面的布局使用了DrawLayout, 它有2個子視圖: 一個FrameLayout包含主要的內容, 一個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">
    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- The navigation drawer -->
    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        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>

這個布局文件示范了一些重要的布局特征.

主要內容的視圖(FrameLayout)必須是DrawLayout的第一個子元素, 因為導航抽屜是在主要內容視圖的上面.

主要內容視圖設置為匹配父視圖的寬度和高度, 因為它代表了整個界面導航抽屜是隱藏的.

抽屜視圖(ListView)必須指定其水平重力與android:layout_gravity屬性。支持從右到左(RTL)語言,指定值與 "start" 代替 "left"(所以抽屜里出現在布局的右側當布局是RTL時).

抽屜視圖指定其寬度用dp單位和高度匹配父視圖。抽屜里的寬度不能超過320 dp, 所以用戶總是可以看到主要內容視圖的一部分.

初始化抽屜列表

在你的Activity中, 第一件事就是初始化導航抽屜列表里面的元素, 你如何做取決于你的應用程序的內容,但一個導航抽屜通常包括一個ListView, 因此清單應該由一個Adapter填充(例如ArrayAdapter或SimpleCursorAdapter).

例如, 這里演示了如何用String array來初始化一個導航列表.

public class MainActivity extends Activity {
    private String[] mPlanetTitles;
    private ListView mDrawerList;
    ...

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

    mPlanetTitles = getResources().getStringArray(R.array.planets_array);
    mDrawerList = (ListView) findViewById(R.id.left_drawer);

    // Set the adapter for the list view
    mDrawerList.setAdapter(new ArrayAdapter<String>(this,
            R.layout.drawer_list_item, mPlanetTitles));
    // Set the list's click listener
    mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

    ...
}

}</pre>這個代碼調用setOnItemClickListener()去接收導航抽屜列表的點擊事件. 下一節將展示如何實現這個接口,當用戶選擇一個Item時改變內容視圖.</span> 

處理導航點擊事件

當用戶選擇了抽屜列表里面的一個Item時, 系統調用onItemClickListener上的onItemClick(), 給setOnItemClickListener().

你在onItemClick()方法里面做什么, 取決于你的app實現的結構. 在下面的例子中, 選擇每一個Item都會在主要內容的布局中插入一個不同的Fragment.


private class DrawerItemClickListener implements ListView.OnItemClickListener {
    @Override
    public void onItemClick(AdapterView parent, View view, int position, long id) {
        selectItem(position);
    }
}
/* 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 PlanetFragment();
    Bundle args = new Bundle();
    args.putInt(PlanetFragment.ARG_PLANET_NUMBER, 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
mDrawer.setItemChecked(position, true);
setTitle(mPlanetTitles[position]);
mDrawerLayout.closeDrawer(mDrawer);

}
@Override
public void setTitle(CharSequence title) {
    mTitle = title;
    getActionBar().setTitle(mTitle);
}</pre> 

監聽打開和關閉事件


偵聽抽屜打開和關閉事件,調用你的DrawerLayout setDrawerListener(), 并將其傳遞給DrawerLayout.DrawerListener的實現. 這個接口提供了回調抽屜事件, 如onDrawerOpened()和onDrawerClosed ()。

然而, 相對于實現DrawerLayout.DrawerListener, 如果你的Activity包括工具欄, 可以代替繼承ActionBarDrawerToggle類. ActionBarDrawerToggle實現了DrawerLayout.DrawerListener. 所以你仍然可以覆蓋這些回調, 但它也有助于正確的交互行為, 在工具欄的圖標和導航抽屜之間(下一節將進一步討論)。

就像在導航抽屜設計指南一樣,當抽屜是可見的時候, 你應該修改工具欄的內容, 如改變標題和刪除操作Item. 下面的代碼用ActionBarDrawerToggle類的一個實例, 顯示了如何重寫DrawerLayout.DrawerListener的回調方法:


public class MainActivity extends Activity {
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    private CharSequence mDrawerTitle;
    private CharSequence mTitle;
    ...

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

    mTitle = mDrawerTitle = getTitle();
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
            R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {

        /** Called when a drawer has settled in a completely closed state. */
        public void onDrawerClosed(View view) {
            getActionBar().setTitle(mTitle);
            invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
        }

        /** Called when a drawer has settled in a completely open state. */
        public void onDrawerOpened(View drawerView) {
            getActionBar().setTitle(mDrawerTitle);
            invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
        }
    };

    // Set the drawer toggle as the DrawerListener
    mDrawerLayout.setDrawerListener(mDrawerToggle);
}

/* Called whenever we call invalidateOptionsMenu() */
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
    // If the nav drawer is open, hide action items related to the content view
    boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
    menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
    return super.onPrepareOptionsMenu(menu);
}

}</pre> 

下一節描述ActionBarDrawerToggle構造函數參數和其他所需的步驟來設置它來處理工具欄的圖標.

打開關閉應用圖標

用戶可以打開和關閉導航抽屜, 通過手指從屏幕左側的邊緣滑動, 但如果你使用工具欄, 你應該也能允許用戶打開和關閉它, 通過觸摸應用程序圖標. 應用程序圖標也可以顯示一個特殊的圖標關于導航抽屜的狀態. 你可以實現所有這些行為通過使用ActionBarDrawerToggle, 如前一節所示。

讓ActionBarDrawerToggle工作, 創建一個它的實例用它的構造方法, 這就需要以下參數:




持有抽屜的Activity.

DrawerLayout對象.

一個Drawable資源作為抽屜指示器.

字符串資源描述"打開抽屜"動作.

字符串資源描述"關閉抽屜"動作.
</ul>

然后, 無論你是否已經創建了一個ActionBarDrawerToggle的子類作為你的抽屜的Listener, 你需要在幾個Activity生命周期的地方, 調用你的ActionBarDrawerToggle:


public class MainActivity extends Activity {
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    ...

public void onCreate(Bundle savedInstanceState) {
    ...

    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    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(mTitle);
        }

        /** Called when a drawer has settled in a completely open state. */
        public void onDrawerOpened(View drawerView) {
            getActionBar().setTitle(mDrawerTitle);
        }
    };

    // Set the drawer toggle as the DrawerListener
    mDrawerLayout.setDrawerListener(mDrawerToggle);

    getActionBar().setDisplayHomeAsUpEnabled(true);
    getActionBar().setHomeButtonEnabled(true);
}

@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 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...

    return super.onOptionsItemSelected(item);
}

...

}</pre>來自：http://blog.csdn.net/lc19850921/article/details/8982315

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1369880871769.html

Android Android開發移動開發

Android 抽屜導航

創建抽屜導航

創建一個抽屜布局

初始化抽屜列表

相關經驗

相關資訊

相關文檔

目錄