iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 20
0
Mobile Development

iOS Developer Learning Android系列 第 20

iOS Developer Learning Android. Lesson 20 - Activity Gallery (不用再尋找或比較套件了,官方佛心內建常用UI Design Pattern)

今天呢
我們一行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);
}
  1. 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 看一下順便給顆⭐️


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


上一篇
iOS Developer Learning Android. Lesson 19 - JSON轉物件 (以Google爸爸的GSON為例)
下一篇
iOS Developer Learning Android. Lesson 21 - 指紋辨識 (不能靠臉我靠雙手可以吧)
系列文
iOS Developer Learning Android30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
MarkFly~
iT邦新手 4 級 ‧ 2019-10-06 01:55:37

先上傳圖片

0
MarkFly~
iT邦新手 4 級 ‧ 2019-10-06 03:41:29

完全更新
(天吶....要四點了)

我要留言

立即登入留言