今天呢
我們一行code都不打
來跟各位介紹一下
AS在Activity Gallery裡面有哪些現成的UI Design Pattern可以用(其實我也不確定是不是這麼叫)

本日效果

開始之前先說明一下找到Activity Gallery的方法

簡介

我們今天要介紹的是下面這四種Activity

1. Drawer
   抽屜選單/側邊欄/或是俗稱的漢堡選單，這個模式一直是Google所提倡的害我們也要跟著刻
   不過現在越來越少見了
   以前最扯的是看到又做漢堡又做TabBarController，然後兩邊的內容是一模一樣的真的很有事
2. Tabbed
   結果他們的Tab在上面Orz...⚠️⚠️⚠️
   HMSegmentedControl這個套件滿有名的
   但我個人最愛用DLSlideView
   不只提供那條tabBar，連下面的畫面都幫你處理好
   用起來跟TableView的DataSource Method很像
   大力推薦～
   另外這邊也是很多人用UIPageViewController去刻
3. Master/Detail
   這次的叫法就跟我們一樣了☘️☘️☘️
   其實主從式架構，不只在APP上會看到
   在一般的桌面軟體也很常見
   他們的應用模式也是跟我們一樣☘️☘️☘️：
   在手機上是點Master跳到Detail
   在平板上是Master跟Detail同一個畫面
   
4. FullScreen
   這玩意就是Android特有的了
   因為它們系統有常駐一條在下面(我的LG手機管它叫"系統操作鍵")
   所以有提供這個模式可以hide它

架構說明

由於這些code都是AS自動產生的
也是個很好機會可以學習的地方
接著來跟各位大概說明一下程式的架構

1. Drawer
   1. Lesson15DrawerActivity
      主程式
   2. activity_lesson15_drawer.xml
      主畫面(DrawerLayout)
      1. app_bar_lesson15_drawer.xml
         畫面本體上面的Bar
         1. content_lesson15_drawer.xml
            Bar下面的內容
      2. nav_header_lesson15.xml
         抽屜選單上半部
      3. activity_lesson15_drawer.xml
         抽屜選單的選項
2. Tabbed
   1. Lesson15TabbedActivity
      主程式
      1. SectionsPagerAdapter
         適配器的地位大概就跟Delegate一樣重要☘️☘️☘️
         1. PlaceholderFragment
            一個Activity上有多個畫面就是用Fragment
            1. PageViewModel
   2. activity_lesson15_tabbed.xml
      主畫面(CoordinatorLayout)
      1. com.google.android.material.tabs.TabLayout
         那條tabBar
      2. androidx.viewpager.widget.ViewPager
         Fragment畫面的容器
3. Master/Detail
   1. 他在new的時候畫面不太一樣，就是清單跟它的詳情怪獸跟牠的產地
      所以AS會問你這個東西是什麼
      
   2. 例如我當初填的是“Activity”(本來想放各種不同的Activity)
      檔案生出來就會像下面這樣
      1. ActivityListActivity
         清單程式
      2. activity_list.xml
         清單畫面
      3. layout-w900dp/activity_list.xml
         平板用的清單畫面
      4. ActivityDetailActivity
         詳情程式
      5. ActivityDetailFragment
         其實都是用Fragment去顯示
   3. 核心邏輯
      先判斷是否大畫面, 是的話就Fragment, 不是就先Activity(再Fragment)

if (findViewById(R.id.activity_detail_container) != null) {
    // The detail container view will be present only in the
    // large-screen layouts (res/values-w900dp).
    // If this view is present, then the
    // activity should be in two-pane mode.
    mTwoPane = true;
}
        
if (mTwoPane) {
    Bundle arguments = new Bundle();
    arguments.putString(ActivityDetailFragment.ARG_ITEM_ID, item.id);
    ActivityDetailFragment fragment = new ActivityDetailFragment();
    fragment.setArguments(arguments);
    mParentActivity.getSupportFragmentManager().beginTransaction()
            .replace(R.id.activity_detail_container, fragment)
            .commit();
} else {
    Context context = view.getContext();
    Intent intent = new Intent(context, ActivityDetailActivity.class);
    intent.putExtra(ActivityDetailFragment.ARG_ITEM_ID, item.id);

    context.startActivity(intent);
}

4. FullScreen
   請自行研究XD

坑

又到了大家最喜愛的單元

1. R
   不知道為什麼自動產生的code會有各種關於R的錯誤
   導致build不過
   各位要有心理準備就是了

   1. 根本沒import .R的路徑
      
   2. .R路徑多加了這個檔案所在的package
      
   3. .R路徑import到錯誤的module
      
   4. 要取一個根本不存在的id
      

2. 閃退
   
   是上述最後一點問題所導致
   Dubug下去才發現他的code跟畫面檔根本對不起來= =
   改成這樣就好了

//            ((TextView) rootView.findViewById(R.id.activity_detail)).setText(mItem.details);
            TextView tv = (TextView) rootView;
            tv.setText(mItem.details);

今天的範例程式

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

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