相信有過Android開發(fā)經(jīng)驗的朋友們都了解ViewPager、RecyclerView的使用，當(dāng)綁定每一項數(shù)據(jù)時，需要在相應(yīng)的Adapter的instantiateItem()或onBindViewHolder()方法中去實現(xiàn)。
在Android動態(tài)界面開發(fā)框架VirtualView使用完整教程中我們學(xué)習(xí)了VirtualView基本的使用方法，在這里容器組件Page和Scroller等就類似于我們Android中的ViewPager和RecyclerView。但是這篇文章我們并沒有詳細講解如何使用這種控件，官方文檔也沒有找到使用方法，最后我通過官方的demo總結(jié)出了使用方式。本篇文章我們就以Page控件為例來講解如何綁定數(shù)據(jù)并進行展示，而其它可綁定數(shù)據(jù)的組件諸如Scroller的使用方法與此類似。
先來看看我們要實現(xiàn)的效果：
下面的Page測試就是我們實現(xiàn)的樣例。我們實現(xiàn)這樣一個Page：每2秒自動滑動一次；每個Item的布局是上面一張圖片，下面一行文字。
1. 編寫Item布局
首先來編寫每個Item的布局vvtest.xml，上面一個圖片組件，下面一個文本組件，代碼如下：
<?xml version="1.0" encoding="utf-8" ?>
<VHLayout
action="${action}"
background="${bgColor}"
flag="flag_exposure|flag_clickable"
layoutHeight="wrap_content"
layoutWidth="match_parent"
orientation="V">
<VImage
layoutGravity="h_center"
layoutHeight="72rp"
layoutMarginTop="10rp"
layoutWidth="72rp"
src="${imageUrl}"/>
<NText
layoutGravity="h_center"
layoutHeight="wrap_content"
layoutMarginBottom="10rp"
layoutMarginTop="10rp"
layoutWidth="wrap_content"
text="${text}"/>
</VHLayout>
2. 編寫Page布局和數(shù)據(jù)
接下來編寫Page布局view_pager.xml，實現(xiàn)每2秒自動滾動：
<?xml version="1.0" encoding="utf-8"?>
<Page
autoSwitch="true"
canSlide="true"
dataTag="${data}"
layoutHeight="wrap_content"
layoutWidth="match_parent"
orientation="H"
stayTime="2000"/>
注意這里的dataTag屬性，它對應(yīng)于json數(shù)據(jù)中的某一個列表數(shù)據(jù)，例如其對應(yīng)于如下json數(shù)據(jù)中的data字段：
{
"data": [
{
"type": "VVTest",
"bgColor": "#FF0000",
"imageUrl": "https://gw.alicdn.com/tfs/TB1vqF.PpXXXXaRaXXXXXXXXXXX-110-72.png",
"text": "Page測試1",
"action": "您點擊了Page1"
},
{
"type": "VVTest",
"bgColor": "yellow",
"imageUrl": "https://gw.alicdn.com/tfs/TB1vqF.PpXXXXaRaXXXXXXXXXXX-110-72.png",
"text": "Page測試2",
"action": "您點擊了Page2"
},
{
"type": "VVTest",
"bgColor": "#00FF00",
"imageUrl": "https://gw.alicdn.com/tfs/TB1vqF.PpXXXXaRaXXXXXXXXXXX-110-72.png",
"text": "Page測試3",
"action": "您點擊了Page3"
}
]
}
其中，data列表中每一條數(shù)據(jù)都要有一個type字段，其對應(yīng)于我們編寫的Item布局文件的類型。每個Item的type可以不同，這樣可以在Page中混合不同的布局。
3. 生成out文件
根據(jù)Android動態(tài)界面開發(fā)框架VirtualView使用完整教程中的方法，在virtualview_tools項目里的templatelist.properties文件中定義Item和Page模板的類型：
vvtest=VVTest,1
view_pager=ViewPager,1
然后執(zhí)行buildTemplate.sh腳本生成out或Java文件，這里我們將out文件復(fù)制到我們項目的assets目錄下。
4. 代碼加載
最后，通過Java代碼進行加載：
viewManager.loadBinBufferSync(Utils.getAssetsFile(this, "VVTest.out"));
viewManager.loadBinBufferSync(Utils.getAssetsFile(this, "ViewPager.out"));
vafContext.getEventManager().register(EventManager.TYPE_Click, new IEventProcessor() {
@Override
public boolean process(EventData data) {
Toast.makeText(VirtualViewActivity.this, data.mVB.getAction(), Toast.LENGTH_SHORT).show();
return true;
}
});
View container = vafContext.getContainerService().getContainer("ViewPager", true);
mLinearLayout.addView(container);
iContainer = (IContainer) container;
jsonObject = Utils.getJSONDataFromAsset(this, "view_pager.json");
if (jsonObject != null) {
iContainer.getVirtualView().setVData(jsonObject);
}
其中，1-2行加載我們生成的Page和Item的out文件；3-9行處理點擊事件，這里的點擊事件是處理每個Item的；10-11行加載生成的View；12-16行綁定json數(shù)據(jù)。
這樣，就可以實現(xiàn)我們想要的效果了。怎么樣，是不是很簡單？
所有示例代碼可以參見：https://github.com/jimmysuncpt/TangramDemo
