iT邦幫忙

DAY 2
4

菜逼八的 Android 開發 30天系列 第 2

【菜逼八學Android】像抽屜一樣,可以開關的MENU,Navigation Drawer(2)

  • 分享至 

  • xImage
  •  

哈囉,大家早安,早起的鳥兒有蟲(BUG)吃,大家都吃飽了嗎?
今天要延續昨天的主題來製作抽屜,也就是大家常看到的左側選單,
大概就像~這個樣子 (圖是google的

Step1. 建立一個 Drawer Layout

首先我們要在Layout底下的資料夾建立一個 DrawerLayout 的 activity_main.xml ,
裡面放進右側內容的框架(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">
    <!-- 我是主要內容的 view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- 我是導航抽屜 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>

這裡有幾項非常重要的重點!根據官方的文件說明,

1.主要內容(也就是FrameLayout)一定要是DrawerLayout的第一個View,
因為XML的View順序是Z-ordering,且抽屜必須要在內容之上。
(SO,本魯實驗過只要FrameLayout沒有放在第一個就會Error,所以我們就乖乖地擺在第一個)

2.主要內容View的高度和寬度必須和父View一樣,因為當導航抽屜隱藏時,主頁面就代表了整個UI

3.抽屜View(就是ListView)一定要用Android:layout_gravity為水平的gravity值,
如果要支援從左向右閱讀,就把"start"改成"left"(所以Start就是由右向左)

4.抽屜的寬度是dp單位且高度必須和父View一樣,抽屜的寬度不得超過320dp,
這是為了抽屜打開時,還可以看到一些內容所設計(不會完全遮住內容)

Step2. 初始化抽屜列表(Drawer List)

接下來我們要在Activity資料夾中,建立一個MainActivity,

在內容中,我們需要設定一個Adapter數據給ListView,就像這樣

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);
 
        // 設定adapter給listview
        mDrawerList.setAdapter(new ArrayAdapter<String>(this,
                R.layout.drawer_list_item, mPlanetTitles));
        // 設定列表的按下事件
        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
 
    }
}

今天就先做到這邊,明天繼續製作Navigation Drawer,大家明天見~

以上內容參考官方文件:

http://developer.android.com/training/implementing-navigation/nav-drawer.html#Init


上一篇
【菜逼八學Android】像抽屜一樣,可以開關的MENU,Navigation Drawer(1)
下一篇
【菜逼八學Android】像抽屜一樣,可以開關的MENU,Navigation Drawer(3)
系列文
菜逼八的 Android 開發 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言