作者: 牙叔
使用情景: 解析RecycleView常用方法
前置知识
- RecyclerView 复用 Item 的工作 Google 已经封装
- 自定义Adapter必须重写三个方法:
- onCreateViewHolder
- onBindViewHolder
- getItemCount
了解每个方法的作用
onCreateViewHolder视图创建onBindViewHolder数据绑定getItemCount数据总数
类比
- 视图创建: 视图比作礼盒, 礼盒里面有一些格子, 规划成为一个一个固定的格子, 格子类型可以一样, 也可以不一样
- 数据绑定: 把棒棒糖, 瓜子, 花生这些零食放到格子里
adapter
adapter中包含holder, holder处理view
代码分小段
1.主布局, 就一个RecyclerView
ui.layout( <vertical> <androidx.recyclerview.widget.RecyclerView id="recyclerView" h="*" w="*" /> </vertical> );
2. 两种礼盒布局
let redGiftBoxXml = ( <card cardCornerRadius="10" cardElevation="10dp" margin="10"> <horizontal bg="#88ff0000" padding="10" layout_width="wrap_content" layout_height="wrap_content"> <img src="@drawable/ic_brightness_4_black_48dp"></img> <text>棒棒糖</text> <text id="lollipops"></text> <text>花生</text> <text id="melonSeeds"></text> <text>瓜子</text> <text id="peanut"></text> </horizontal> </card> ); let blueGiftBoxXml = ( <horizontal layout_width="match_parent" layout_height="wrap_content"> <View layout_weight="1"></View> <card cardCornerRadius="10" cardElevation="6dp" margin="10"> <horizontal bg="#550000ff" gravity="right" padding="10"> <text>棒棒糖</text> <text id="lollipops">11111111111</text> <text>花生</text> <text id="melonSeeds"></text> <text>瓜子</text> <text id="peanut"></text> <img src="@drawable/ic_brightness_5_black_48dp"></img> </horizontal> </card> </horizontal> );
3. adapter
function createGiftBoxAdapter(giftBoxList) { return RecyclerView.Adapter({ onCreateViewHolder: function (parent, viewType) { // 视图创建 let view; let holder; if (viewType === 0) { view = ui.inflate(redGiftBoxXml, parent, false); holder = JavaAdapter(RecyclerView.ViewHolder, {}, view); } else { view = ui.inflate(blueGiftBoxXml, parent, false); // Holder holder = JavaAdapter(RecyclerView.ViewHolder, {}, view); } return holder; }, onBindViewHolder: function (holder, position) { // 数据绑定 giftBox = giftBoxList[position]; holder.itemView.lollipops.setText(giftBox.getLollipops()); holder.itemView.melonSeeds.setText(giftBox.getMelonSeeds()); holder.itemView.peanut.setText(giftBox.getPeanut()); }, getItemCount: function () { return giftBoxList.length; }, getItemViewType: function (position) { return giftBoxList[position].getGiftType(); }, }); }
4. view有了, adapter也有了(holder在adapter中), 我们就可以加载数据了
5. 创建数据
let giftBoxList = []; for (var i = 0; i < 10; i++) { giftBoxList.push(new GiftBox(i + "个", i * 2 + "斤", i * 3 + "袋")); }
6. 加载数据
recycleAdapter = createGiftBoxAdapter(giftBoxList); recyclerView.setAdapter(recycleAdapter);
7. 效果展示
完整代码
"ui"; importClass(Packages.androidx.recyclerview.widget.RecyclerView); importClass(Packages.androidx.recyclerview.widget.LinearLayoutManager); ui.layout( <vertical> <androidx.recyclerview.widget.RecyclerView id="recyclerView" h="*" w="*" /> </vertical> ); // lollipops: // 棒棒糖 // melonSeeds: //瓜子 // peanut: //花生 // 过年买东西, 瓜子,花生,棒棒糖 function GiftBox(lollipops, melonSeeds, peanut) { this.lollipops = lollipops; this.melonSeeds = melonSeeds; this.peanut = peanut; } GiftBox.prototype.getLollipops = function () { return this.lollipops; }; GiftBox.prototype.getMelonSeeds = function () { return this.melonSeeds; }; GiftBox.prototype.getPeanut = function () { return this.peanut; }; GiftBox.prototype.getGiftType = function () { return random(0, 1); }; // 礼盒界面 let redGiftBoxXml = ( <card cardCornerRadius="10" cardElevation="10dp" margin="10"> <horizontal bg="#88ff0000" padding="10" layout_width="wrap_content" layout_height="wrap_content"> <img src="@drawable/ic_brightness_4_black_48dp"></img> <text>棒棒糖</text> <text id="lollipops"></text> <text>花生</text> <text id="melonSeeds"></text> <text>瓜子</text> <text id="peanut"></text> </horizontal> </card> ); let blueGiftBoxXml = ( <horizontal layout_width="match_parent" layout_height="wrap_content"> <View layout_weight="1"></View> <card cardCornerRadius="10" cardElevation="6dp" margin="10"> <horizontal bg="#550000ff" gravity="right" padding="10"> <text>棒棒糖</text> <text id="lollipops">11111111111</text> <text>花生</text> <text id="melonSeeds"></text> <text>瓜子</text> <text id="peanut"></text> <img src="@drawable/ic_brightness_5_black_48dp"></img> </horizontal> </card> </horizontal> ); function createGiftBoxAdapter(giftBoxList) { return RecyclerView.Adapter({ onCreateViewHolder: function (parent, viewType) { // 视图创建 let view; let holder; if (viewType === 0) { view = ui.inflate(redGiftBoxXml, parent, false); holder = JavaAdapter(RecyclerView.ViewHolder, {}, view); } else { view = ui.inflate(blueGiftBoxXml, parent, false); // Holder holder = JavaAdapter(RecyclerView.ViewHolder, {}, view); } return holder; }, onBindViewHolder: function (holder, position) { // 数据绑定 giftBox = giftBoxList[position]; holder.itemView.lollipops.setText(giftBox.getLollipops()); holder.itemView.melonSeeds.setText(giftBox.getMelonSeeds()); holder.itemView.peanut.setText(giftBox.getPeanut()); }, getItemCount: function () { return giftBoxList.length; }, getItemViewType: function (position) { return giftBoxList[position].getGiftType(); }, }); } let recyclerView = ui.recyclerView; // //设置布局管理器 layoutManager = new LinearLayoutManager(context); recyclerView.setLayoutManager(layoutManager); let giftBoxList = []; for (var i = 0; i < 10; i++) { giftBoxList.push(new GiftBox(i + "个", i * 2 + "斤", i * 3 + "袋")); } //设置Adapter recycleAdapter = createGiftBoxAdapter(giftBoxList); recyclerView.setAdapter(recycleAdapter);
