iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 17
1
Mobile Development

iOS Developer Learning Android系列 第 17

iOS Developer Learning Android. Lesson 17 - BottomNavigationView + Fragment (人家的Navigation是長在下面的喔~)

先說說iOS上的三大Controller: ViewController, NavigationController, TabBarController
在Android上的對應是ViewController 對應 Activity
NavigationController呢,因為人家天生最左下方就是有系統的返回鍵,感覺不是非常必要
而TabBarController就是今天要講的主題:BottomNavigationView

而講到BottomNavigationView呢,就不得不講到Fragment
Fragment根據官方的定義:

Fragment 代表一種行為或 Activity 中的一部分使用者介面。
您可以合併單一 Activity 中的多個片段,藉此建置 多窗格 UI 以及在多個 Activity 中重複使用片段。
您可以將片段想成是 Activity 的模組化區段,片段擁有自己的生命週期、接收自己的輸入事件,
而且您可以在 Activity 執行時新增或移除片段 (有點像是您可以在不同 Activity 中重複使用的「子 Activity」)。

而我自己簡單的想法就是:因為Android不像iOS可以ViewController addChildViewController,所以他們發明了可以加在Activity上的東西:Fragment
所以iOS上常見的ContainerViewController模式到的Android上就要請Fragment出馬了
例如官網提供的下面這張圖,不正是我們的SplitViewController嗎?

另外Fragment也有所謂的生命週期,
請見官方提供的另兩張圖
|-|


強行置入工商分隔線
如果您是愛寫MarkDown的工程師(不是工程師也沒關係)
那麼您千萬不能錯過HackMD這個服務
光是多~圖拖拉直接上傳並生成連結這個功能就夠好用的(我鐵人賽都靠它)
更不用說即時預覽/整合VSCode/簡報模式...等等千千萬萬的功能
請立即試用~


很弱的本日效果

實現步驟

  1. 先去res區建一個menu的xml(Android真的很愛XML)
  2. 要放這個xml的話,還要給他一個叫做menu的家(還一定要放在這裡,不然你右鍵沒有上圖的選項)

  3. 設定有哪些item
    <item android:title="red"
        android:icon="@color/red"
        android:id="@+id/bottom_navi_red"/>
    <item android:title="yellow"
        android:icon="@color/red"
        android:id="@+id/bottom_navi_yellow" />
    <item android:title="green"
        android:icon="@color/red"
        android:id="@+id/bottom_navi_green" />
  1. 再來是建立Fragment
  2. 然後不知道為什麼IDE自己幫我建的,import還會import錯package name,導致找不到資源
  3. 最後是主要的Activity,畫面就先拉一個BottomNavigationView在下面(其實我試過貼在上面也可以XDDD),然後愛多高就多高XDDDD
  4. 再來是剩餘的空間給FrameLayout(記不記得我們第六堂課說過FrameLayout的主要用途就是拿來顯示Fragment?)
  5. Activity的code就兩個部分,第一部分:寫個function負責把Fragment顯示在FrameLayout
    private void changeFragment(FragmentType index)
    {
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        switch (index)
        {
            case red:
                fragmentTransaction.replace(R.id.frame_layout_for_fragment,new RedFragment());
                break;
            case yellow:
                fragmentTransaction.replace(R.id.frame_layout_for_fragment,new YellowFragment());
                break;
            case green:
                fragmentTransaction.replace(R.id.frame_layout_for_fragment,new GreenFragment());
                break;
        }
        fragmentTransaction.commit();
    }
  1. 第二部分:監聽點擊
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem)
            {
                switch (menuItem.getItemId())
                {
                    case R.id.bottom_navi_red:
                        changeFragment(FragmentType.red);
                        return true;
                    case R.id.bottom_navi_yellow:
                        changeFragment(FragmentType.yellow);
                        return true;
                    case R.id.bottom_navi_green:
                        changeFragment(FragmentType.green);
                        return true;
                }
                return false;
            }
        });
  1. 做完了,其實跟iOS的感覺很不一樣⚠️⚠️⚠️,很像View上面放幾個按鈕然後把subView換掉的感覺,給我感覺比較像這個

  1. 跟iOS一樣不能超過五個☘️☘️☘️,不一樣的是一但超過,
    編譯得過但會閃退= =⚠️⚠️⚠️
  2. 只要超過三個item,就不會顯示未選中的item的title,字夠多的話,還會有漂移動畫
    我是覺得很帥啦,不過不知道為什麼大家都不喜歡想要把它拿掉XDDDD
  3. 這可能是我語法不會,不過我不懂同一個Enum為何兩樣情(一邊一定要加TypeName,一邊不行)

參考資料

今天的範例程式

可以去 https://github.com/mark33699/IDLA 看一下順便給顆⭐️


如果你喜歡我的影片別忘了按讚分享加訂閱,開啟紅色的小鈴鐺,我們明天見~


上一篇
iOS Developer Learning Android. Lesson 16 - RecyclerView (這玩意可是跟UITableView差滿多的喔...)
下一篇
iOS Developer Learning Android. Lesson 18 - call API (使用超越AFNetworking的網路套件)
系列文
iOS Developer Learning Android30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
MarkFly~
iT邦新手 4 級 ‧ 2019-10-03 00:11:14

文章已經更新啦~~~~~~~~

我要留言

立即登入留言