iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 16
0
Mobile Development

iOS Developer Learning Android系列 第 16

iOS Developer Learning Android. Lesson 16 - RecyclerView (這玩意可是跟UITableView差滿多的喔...)

  • 分享至 

  • xImage
  •  

從今天開始
元件篇已經結束了
接下來就會是一些比較大的主題
第一彈就是大名鼎鼎的RecyclerView

不過有個問題
就是我的文章庫存已經用完了
每天半夜12點都是截稿日
很刺激呢
加上我最近剛換公司
可能也沒什麼機會上班偷寫文章
所以可能什麼時候都結束也不意外...

雖然不知道有多少人在看
或是對大家有沒有幫助
我會盡量寫,寫到真的來不及為止
如果來不及的話我就只能先貼畫面再來補了(打文章真的會很花時間)

-----------------------------------------閒聊為止分隔線-----------------------------------

本日效果

就是做一個會自己長高的tableView

實作解說

  1. 在安卓的世界裡,不像iOS只有UITableView⚠️⚠️⚠️
    滾動列表可以用兩種View去實現,就是ListView跟RecyclerView。
    RecyclerView顧名思義,就是跟UITableView一樣有reuse機制,但是實作起來就會比較麻煩(是說我也沒實作過客製的ListView就是了...)
  2. 先列出大致的步驟如下:
    1. 先畫cell的XML
    2. 新增一個Class繼承RecyclerView.Adapter
    3. 在客製的Adapter再新增一個Class繼承RecyclerView.ViewHolder
    4. 在客製的Adapter實作建構子(就是initWith☘️☘️☘️)
    5. 最後再實作Adapter的三個override方法
    6. 要做Model的話還要再加一個.java檔
    7. 好!萬事俱備了,串起來的流程就是:models > adapter > recycleView
  3. 畫面的話比較單純,跟以前在xib差不多,要注意的是root layout的高不能是match_parent,不然就會一頁一個cell了...(☘️☘️☘️heightForRowAtIndexPath)
  4. 重頭戲來了(Adapter)
    1. new一個Class
    2. 空空如也,按下自動神鍵opt+ent
    3. 我全都要~~~(豹頭)
    4. 變出來了
  5. 在實作這三個function之前,先歡迎另一位主角(ViewHolder)
    負責持有畫面跟更新資料
    class CustViewHolder extends RecyclerView.ViewHolder
    {
        private TextView textViewName;
        private TextView textViewTitle;
        private TextView textViewBio;

        public CustViewHolder(@NonNull View itemView)
        {
            super(itemView);
            textViewName = itemView.findViewById(R.id.textViewName);
            textViewTitle = itemView.findViewById(R.id.textViewTitle);
            textViewBio = itemView.findViewById(R.id.textViewBio);
        }

        void updateUI(Staff staff)
        {
            textViewName.setText(staff.name);
            textViewTitle.setText(staff.title);
            textViewBio.setText(staff.bio);
        }
    }
  1. 有了ViewHolder,才有辦法實作:

    1. onCreateViewHolder(給它畫面)
        View cell = LayoutInflater.from(parent.getContext()).inflate(R.layout.cell_lesson11,parent,false);
        return new CustViewHolder(cell);
  1. onBindViewHolder(給它資料或監聽點擊)
        CustViewHolder custViewHolder = (CustViewHolder)holder;
        custViewHolder.updateUI((Staff) this.items.get(position));

        custViewHolder.itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Log.d("MF",position + "被點");
            }
        });

3.getItemCount(☘️☘️☘️numberofSection)

  1. Model部分
    1. 本來打算寫在同一個file,但人家說不行
    2. 不過可以幫你搬家(超讚的~)
    3. 甚至也可以幫你產生建構子
  2. 大集合
        recyclerView = findViewById(R.id.recycleView_staff);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));//決定要列表或格子
        recyclerView.setAdapter(new Lesson11Adapter(new ArrayList()));
        recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));//分隔線
  1. 等等,你有看到reloadData嗎?
    1. 只要給recycleView新的adapter就會刷新囉
  2. 一些類比☘️☘️☘️
    1. Adapter like datasource + delegate
    2. Adapter的三個function like protocol required function

參考資料

今天的範例程式

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


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


上一篇
iOS Developer Learning Android. Lesson 15 - Buttons=[Radio,Chip,Switch,Toggle,Material] (輕鬆實現Tag功能)
下一篇
iOS Developer Learning Android. Lesson 17 - BottomNavigationView + Fragment (人家的Navigation是長在下面的喔~)
系列文
iOS Developer Learning Android30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言