前言:
各位同學(xué)大家好有段時間沒有給大家更新文章普碎,具體多久我也不記得烈疚,最近在學(xué)習(xí)鴻蒙開發(fā)(第二天學(xué))寫了一些小demo 就想著分享給家 今天要講的是 ListContainer 鴻蒙OS開發(fā)中的 列表組件
準(zhǔn)備工作
1 安裝鴻蒙開發(fā)環(huán)境 大家可以看我之前的文章
華為鴻蒙系統(tǒng)開發(fā)初體驗(yàn) :http://www.reibang.com/p/f94c847c7fdc
效果圖:
具體實(shí)現(xiàn):
ListContainer是用來呈現(xiàn)連續(xù)浩销、多行數(shù)據(jù)的組件账磺,包含一系列相同類型的列表項购披。
ListContainer的使用方法
1.在layout目錄下的xml文件中創(chuàng)建ListContainer杖挣。
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<ListContainer
ohos:id="$+id:list_container"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:layout_alignment="horizontal_center"/>
</DirectionalLayout>
2.在layout目錄下新建xml文件(例:item_sample.xml),作為ListContainer的子布局
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_content"
ohos:width="match_parent"
ohos:left_margin="16vp"
ohos:right_margin="16vp"
ohos:orientation="vertical">
<Text
ohos:id="$+id:item_index"
ohos:height="match_content"
ohos:width="match_content"
ohos:padding="4vp"
ohos:text="Item0"
ohos:text_size="20fp"
ohos:layout_alignment="center"/>
</DirectionalLayout>
3.創(chuàng)建SampleItem.java刚陡,作為ListContainer的數(shù)據(jù)包裝類惩妇。
public class SampleItem {
private String name;
public SampleItem(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
4.ListContainer每一行可以為不同的數(shù)據(jù),因此需要適配不同的數(shù)據(jù)結(jié)構(gòu)筐乳,使其都能添加ListContainer上歌殃。創(chuàng)建SampleItemProvider.java,繼承自RecycleItemProvider蝙云。必須重寫的方法如下:
代碼示例如下:
package com.example.listview;
import ohos.agp.components.*;
import java.util.List;
/**
* 創(chuàng)建人:xuqing
* 創(chuàng)建時間:2020年12月18日13:37:27
* 類說明: 適配器
*
*
*
*/
public class SampleItemProvider extends RecycleItemProvider {
private List<SampleItem> list;
private MainAbility slice;
public SampleItemProvider(List<SampleItem> list, MainAbility slice) {
this.list = list;
this.slice = slice;
}
@Override
public int getCount() {
return list.size();
}
@Override
public Object getItem(int position) {
return list.get(position);
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
if (convertComponent== null) {
Component cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_item_sample,null,false);
SampleItem sampleItem = list.get(position);
Text text = (Text) cpt.findComponentById(ResourceTable.Id_item_index);
text.setText(sampleItem.getName());
return cpt;
} else {
return convertComponent;
}
}
}
5.在Java代碼中添加ListContainer的數(shù)據(jù)氓皱,并適配其數(shù)據(jù)結(jié)構(gòu)。
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_ability_main);
initListContainer();
}
private void initListContainer() {
ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);
List<SampleItem> list = getData();
SampleItemProvider sampleItemProvider = new SampleItemProvider(list,this);
listContainer.setItemProvider(sampleItemProvider);
listContainer.setItemClickedListener(new ListContainer.ItemClickedListener() {
@Override
public void onItemClicked(ListContainer listContainer, Component component, int i, long l) {
SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(i);
new ToastDialog(MainAbility.this)
.setText("你點(diǎn)點(diǎn)擊是:"+item.getName())
// Toast顯示在界面中間
.setAlignment(LayoutAlignment.BOTTOM)
.show();
}
});
listContainer.setItemLongClickedListener(new ListContainer.ItemLongClickedListener() {
@Override
public boolean onItemLongClicked(ListContainer listContainer, Component component, int i, long l) {
SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(i);
new ToastDialog(MainAbility.this)
.setText("長按事件點(diǎn)擊:"+item.getName())
// Toast顯示在界面中間
.setAlignment(LayoutAlignment.BOTTOM)
.show();
return false;
}
});
}
private ArrayList<SampleItem> getData() {
ArrayList<SampleItem> list = new ArrayList<>();
for (int i = 0; i <= 10; i++) {
list.add(new SampleItem("item"+i));
}
return list;
}
假數(shù)據(jù)
private ArrayList<SampleItem> getData() {
ArrayList<SampleItem> list = new ArrayList<>();
for (int i = 0; i <= 10; i++) {
list.add(new SampleItem("item"+i));
}
return list;
}
顯示效果:
ListContainer的常用設(shè)置
item 子布局 的點(diǎn)擊事件
listContainer.setItemClickedListener(new ListContainer.ItemClickedListener() {
@Override
public void onItemClicked(ListContainer listContainer, Component component, int i, long l) {
SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(i);
new ToastDialog(MainAbility.this)
.setText("你點(diǎn)點(diǎn)擊是:"+item.getName())
// Toast顯示在界面中間
.setAlignment(LayoutAlignment.BOTTOM)
.show();
}
});
效果如下
item 子布局 的長按事件
listContainer.setItemLongClickedListener(new ListContainer.ItemLongClickedListener() {
@Override
public boolean onItemLongClicked(ListContainer listContainer, Component component, int i, long l) {
SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(i);
new ToastDialog(MainAbility.this)
.setText("長按事件點(diǎn)擊:"+item.getName())
// Toast顯示在界面中間
.setAlignment(LayoutAlignment.BOTTOM)
.show();
return false;
}
});
效果如下
ListContainer的樣式設(shè)置
表2 ListContainer的樣式設(shè)置
- 設(shè)置ListContainer的布局方向:orientation設(shè)置為“horizontal”勃刨,表示橫向布局波材;orientation設(shè)置為“vertical”,表示縱向布局身隐。默認(rèn)為縱向布局
在xml中設(shè)置:
<ListContainer
...
ohos:orientation="horizontal"/>
在Java代碼中設(shè)置
listContainer.setOrientation(Component.HORIZONTAL);
橫向滑動效果如圖
設(shè)置ListContainer的開始和結(jié)束偏移量
listContainer.setContentOffSet(32,16);
為了便于觀察廷区,分別在子布局和ListContainer布局中添加背景色:
在item_sample.xml的根布局中添加背景色。
<DirectionalLayout
...
ohos:background_element="#FAEBD7">
...
</DirectionalLayout>
在ListContainer布局文件中添加背景色贾铝。
<ListContainer
...
ohos:background_element="#FFDEAD"/>
設(shè)置列表容器的開始偏移量為32隙轻,結(jié)束偏移量為16效果
設(shè)置回彈效果。
在xml中設(shè)置:
<ListContainer
...
ohos:rebound_effect="true"/>
在Java代碼中設(shè)置
listContainer.setReboundEffect(true);
在開啟回彈效果后垢揩,可以調(diào)用setReboundEffectParams()方法調(diào)整回彈效果玖绿。
listContainer.setReboundEffectParams(40,0.6f,20);
- 設(shè)置著色器顏色。
在xml中設(shè)置:
<ListContainer
...
ohos:shader_color="#90EE90"/>
在Java代碼中設(shè)置:
listContainer.setShaderColor(new Color(Color.getIntColor("#90EE90")));
效果如下圖
到此鴻蒙os 列表組件 ListContainer 基礎(chǔ)知識就講完了
最后總結(jié)
鴻蒙 os ListContainer 列表組件基本用法和Android原生的lsitview 比較像 但是比起原生安卓的listview 更加強(qiáng)大 原生android 并不直接支持橫向滑動 以及直接支持回彈效果 ListContainer 基本用法對于安卓程序員來說比較好上手 看一下api 學(xué)習(xí)下本就能靈活運(yùn)用了 以上就是我個人在學(xué)習(xí)了2天的鴻蒙os開發(fā) ListContainer 基礎(chǔ)總結(jié) 如果有紕漏和錯誤的地方希望大家指正 最后希望我的文章能幫助到各位解決問題 叁巨,以后我還會貢獻(xiàn)更多有用的代碼分享給大家斑匪。各位同學(xué)如果覺得文章還不錯 ,麻煩給關(guān)注和star俘种,小弟在這里謝過啦