Android Studio 漢堡選單

利用 Android Studio 內提供的範例來修改,觀察APP頁面間的連結關係,與切換至新頁面該如何設置。

【漢堡選單】

左圖:漢堡選單範例畫面、右圖:xml相關文件

從範例中選擇” Navigation Drawer Activity “建立新專案,漢堡選單應該是所有範例當中最複雜的頁面,開啟視窗後會發現增加不少預設 .xml 文件(上圖)。

  • 選單整體包覆多層,框架內分別是由“ nav_header_main.xml ”上區塊、“ activity_main_drawer.xml ”下區塊組成,再由下區塊文件引用“ fragment ”檔名開頭的 .xml 文件,為各個選項的頁面。
  • 承上,fragment(片段) 為靜態的畫面切割功能,效果類似網頁頁籤切換,在“ MainActivity.java ”內添加宣告來執行效果;與先前實作頁面切版大有不同,這裡每個需要添加效果的頁面(頁面切換也算效果),每頁都會額外搭配一份 .java 文件。

原生 fragment 頁面與 Activity 頁面不同,後者為一個完整的頁面元件,可包覆數個 fragment 頁面,類似 fragment Group,除了漢堡選單,底部選單與分頁功能也可能使用 fragment 製作,皆可利用範例直接修改,若要新增一個原生頁面(上圖other),設定方式如下。

  • java資料夾右鍵新增,New > Fragment > Fragment(Blank),命名為“ OtherFragment.java ”,完成後將自動產生“ fragment_other.xml ”,即為連結的頁面。
  • 接著設定所有關聯的 .xml 編碼,menu/activity_main_drawer.xml 內編寫選單樣式,包含選單小圖示。
  • navigation/mobile_navigation.xml 內編寫嵌入頁面的 .java 文件。

【修改範例】

activity_main.xml文件

範例的缺點是框架已經寫死,排版的自由度降低,若需要將範例頁的框架簡化,則新增 .xml 文件編寫區塊內容,以玩運彩討論區APP的選單樣式進行。

  • ” activity_main.xml “文件內(上圖),可看到包覆 <include> 與 <NavigationView> 標籤,<include> 是用來嵌入主畫面需要的 .xml 文件,<NavigationView> 則是需要調整的選單標籤。
  • 承上,可替換成 <LinearLayout> 標籤,編寫漢堡選單框架樣式,再嵌入新增的文件編寫區塊內容,實作如下,新增“ hamburger_main.xml ”文件。
<LinearLayout
    android:id="@+id/nav_view"
    android:orientation="horizontal"
    android:layout_width="300dp"
    android:layout_height="match_parent"
    android:layout_gravity="left">

    <include
        layout="@layout/hamburger_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1" />
</LinearLayout>
  • 因不使用 <NavigationView>,在“ MainActivity.java ”文件內需註解/刪除宣告,如下。
//NavigationView navigationView = findViewById(R.id.nav_view);

//NavigationUI.setupWithNavController(navigationView, navController);
左圖:hamburger_main.xml編寫結果;右圖:嵌入框架內結果(編寫自適應元件)
範例

【新頁面與連結】

為設定按鈕添加連結頁面

  • 由工具列 File > New > Activity > Empty Activity 新增適合的空白頁面,必須使用駝峰式命名,範例命名為“ SetupActivity.java ”,需添加效果的頁面,於新增 .java 文件後會自動產生 .xml 文件,範例為“ activity_setup.xml ”。
  • “ hamburger_main.xml ”文件內,設定按鈕 <Button> 添加 id=”@+id/setup”。
  • “ MainActivity.java ”文件內,於“ onCreate ”底下新增點擊事件,如下。
findViewById(R.id.setup).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainActivity.this, "設定頁", Toast.LENGTH_SHORT).show();
        Intent intent = new Intent(MainActivity.this, SetupActivity.class);
        startActivity(intent);
    }
});
  • 承上,指定 id 元件執行效果;Toast.makeText 為點擊後會同時執行的動作,可作其他提示用途;末兩行為連結目標頁的固定編碼。
範例

【 參考資料/教學 】

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *