本次主要目标是实现一个简单的商品展示列表页， 包括商品缩略图，商品名称、商品编号、商品库存。 事件处理暂时不添加。

效果如下：

效果图

MainAbilitySlice使用了ListHolder实现数据管理

public class MainAbilitySlice extends AbilitySlice { private ListHolder listHolder; @Override public void onStart(Intent intent) { listHolder = new ListHolder(this); setUIContent(listHolder.createComponent()); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); }}

声明一个DataHolder， ListHolder

public class ListHolder { private static final String TAG = "ListHolder"; private AbilitySlice mSlice; private ComponentContainer mRootLayout; private ListContainer listContainer; private ListItemProvider listItemProvider; public ListHolder(AbilitySlice abilitySlice) { mSlice = abilitySlice; listItemProvider = new ListItemProvider(abilitySlice); } public ComponentContainer createComponent() { Component mainComponent = LayoutScatter.getInstance(mSlice).parse(ResourceTable.Layout_ability_main, null, false); if (!(mainComponent instanceof ComponentContainer)) { return null; } mRootLayout = (ComponentContainer) mainComponent; listContainer = (ListContainer) mRootLayout.findComponentById(ResourceTable.Id_list); listContainer.setItemProvider(listItemProvider); return mRootLayout; }}

具体负责数据与控件绑定关系的是ListItemProvider

public class ListItemProvider extends RecycleItemProvider { private List goodEntityList = new ArrayList(10); private AbilitySlice mSlice; ListItemProvider(AbilitySlice abilitySlice) { mSlice = abilitySlice; initGoodData(); } @Override public long getItemId(int i) { if (i >= goodEntityList.size()) return 0; return goodEntityList.get(i).getId(); } @Override public int getCount() { return goodEntityList.size(); } @Override public Component getComponent(int position, Component convertView, ComponentContainer parent) { Component component = LayoutScatter.getInstance(mSlice).parse(ResourceTable.Layout_list_item, null, false); if (!(component instanceof ComponentContainer)) { return null; } if(position < goodEntityList.size()) { GoodEntity goodEntity = goodEntityList.get(position); ComponentContainer rootLayout = (ComponentContainer) component; /** * 图片 */ PixelMap pixelMap = createPixelMap(goodEntity.getImageUrl()); if (pixelMap != null) { Image image = (Image) rootLayout.findComponentById(ResourceTable.Id_good_image); image.setPixelMap(pixelMap); } Text goodIdText = (Text) rootLayout.findComponentById(ResourceTable.Id_good_id); goodIdText.setText(goodEntity.getId() ""); Text goodNameText = (Text) rootLayout.findComponentById(ResourceTable.Id_good_name); goodNameText.setText(goodEntity.getName()); Text goodStockText = (Text) rootLayout.findComponentById(ResourceTable.Id_good_stock); goodStockText.setText(goodEntity.getStock() ""); return component; } return null; } /** * 暂时固定数据源，后期使用网络获取远程服务器上的商品列表信息 */ private void initGoodData() { GoodEntity good001 = new GoodEntity(); good001.setId(10000L); good001.setName("香菇肥牛酱肥牛 80g/袋"); good001.setImageUrl("1.png"); good001.setStock(3000L); goodEntityList.add(good001); GoodEntity good002 = new GoodEntity(); good002.setId(10001L); good002.setName("可比克薯片 烧烤味 45g/罐"); good002.setImageUrl("2.jpg"); good002.setStock(5011L); goodEntityList.add(good002); GoodEntity good003 = new GoodEntity(); good003.setId(10003L); good003.setName("洽洽香瓜子 大包装 200g/包"); good003.setImageUrl("3.jpg"); good003.setStock(3000L); goodEntityList.add(good003); } /** * 创建PixelMap图片内存对象,该对象可以直接渲染到控件image上 * @param fileName * @return */ private PixelMap createPixelMap(String fileName) { String filePath = String.format("assets/entry/resources/rawfile/image/%s", fileName); InputStream snputStream = this.getClass().getClassLoader().getResourceAsStream(filePath); if(snputStream == null) { return null; } try { //ImageSource.SourceOptions srcOpts = new ImageSource.SourceOptions(); //srcOpts.formatHint = "image/jpeg"; ImageSource.DecodingOptions decodingOptions = new ImageSource.DecodingOptions(); /**图片缩放200*200*/ decodingOptions.desiredSize = new Size(200,200); ImageSource imageSource = ImageSource.create(snputStream, null /*srcOpts*/); PixelMap pixelMap = imageSource.createPixelmap(decodingOptions); imageSource.release(); return pixelMap; } catch (RuntimeException e) { e.printStackTrace(); } return null; }}

布局文件ability_layout.xml

商品列表控件list_item.xml

花粉社群VIP加油站