回复
ohos扩展包——控件集合
jacksky
发布于 2021-9-29 18:26
浏览
0收藏
控件
- ExpandableListContainer
ExpandableListContainer
ExpandableListContainer可折叠收起列表
使用方法
在xml 中使用ExpandableListContainer
<ExpandableListContainer
ohos:id="$+id:exlist_lol"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:long_click_enabled="false"
/>自定义Provider
public class MyBaseExpandableItemProvider extends BaseExpandableItemProvider {
private String[] gData;
private String[][] iData;
private Context mContext;
private String[] colorsArr = new String[]{
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
"#5470c6",
"#91cc75",
"#fac858",
"#ee6666",
"#73c0de",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
};
public MyBaseExpandableItemProvider(String[] gData, String[][] iData, Context mContext) {
this.gData = gData != null ? gData.clone() : null;
this.iData = iData != null ? iData.clone() : null;
this.mContext = mContext;
}
@Override
public int getGroupCount() {
return gData.length;
}
@Override
public int getChildrenCount(int groupPosition) {
return iData[groupPosition].length;
}
@Override
public String getGroupItem(int groupPosition) {
return gData[groupPosition];
}
@Override
public String getChildItem(int groupPosition, int childPosition) {
return iData[groupPosition][childPosition];
}
@Override
public long getGroupId(int groupPosition) {
return groupPosition;
}
@Override
public long getChildId(int groupPosition, int childPosition) {
return childPosition;
}
@Override
public boolean hasStableIds() {
return false;
}
//取得用于显示给定分组的视图. 这个方法仅返回分组的视图对象
@Override
public Component getGroupComponent(int groupPosition, boolean isExpanded, Component convertView, ComponentContainer parent) {
ViewHolderGroup groupHolder;
if (convertView == null || !(convertView.getTag() instanceof ViewHolderGroup)) {
convertView = LayoutScatter.getInstance(mContext).parse(
ResourceTable.Layout_item_exlist_group, parent, false);
groupHolder = new ViewHolderGroup();
groupHolder.tv_group_name = (Text) convertView.findComponentById(ResourceTable.Id_tv_group_name);
groupHolder.image_arrow = (Image) convertView.findComponentById(ResourceTable.Id_image_arrow);
convertView.setTag(groupHolder);
} else {
groupHolder = (ViewHolderGroup) convertView.getTag();
}
groupHolder.tv_group_name.setText(gData[groupPosition]);
if (isExpanded) {
groupHolder.image_arrow.setRotation(180);
} else {
groupHolder.image_arrow.setRotation(0);
}
return convertView;
}
//取得显示给定分组给定子位置的数据用的视图
@Override
public Component getChildComponent(int groupPosition, int childPosition, boolean isLastChild, Component convertView, ComponentContainer parent) {
ViewHolderItem itemHolder;
if (convertView == null || !(convertView.getTag() instanceof ViewHolderItem)) {
convertView = LayoutScatter.getInstance(mContext).parse(
ResourceTable.Layout_item_exlist_item, parent, false);
itemHolder = new ViewHolderItem();
itemHolder.tv_color_dot = (Text) convertView.findComponentById(ResourceTable.Id_tv_color_dot);
itemHolder.tv_name = (Text) convertView.findComponentById(ResourceTable.Id_tv_name);
convertView.setTag(itemHolder);
} else {
itemHolder = (ViewHolderItem) convertView.getTag();
}
String colorStr = colorsArr[groupPosition];
int intColor = Color.getIntColor(colorStr);
Color color = new Color(intColor);
itemHolder.tv_color_dot.setTextColor(color);
itemHolder.tv_name.setText(iData[groupPosition][childPosition]);
return convertView;
}
//设置子列表是否可选中
@Override
public boolean isChildSelectable(int groupPosition, int childPosition) {
return true;
}
private static class ViewHolderGroup {
private Text tv_group_name;
private Image image_arrow;
}
private static class ViewHolderItem {
private Text tv_color_dot;
private Text tv_name;
}
}item 布局文件 item_exlist_group.xml
<?xml version="1.0" encoding="utf-8"?>
<StackLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="#ffffff"
>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:orientation="horizontal"
ohos:padding="5vp"
>
<Image
ohos:id="$+id:image_arrow"
ohos:height="match_content"
ohos:width="30vp"
ohos:image_src="$media:icon_arrow_down"
/>
<Text
ohos:id="$+id:tv_group_name"
ohos:height="match_content"
ohos:width="match_content"
ohos:bottom_margin="8vp"
ohos:left_margin="10vp"
ohos:multiple_lines="true"
ohos:text="AP"
ohos:text_color="#000000"
ohos:text_size="20fp"
ohos:text_weight="500"
ohos:top_margin="8vp"
/>
</DirectionalLayout>
<Component
ohos:height="1vp"
ohos:width="match_parent"
ohos:background_element="#eeeeee"
ohos:layout_alignment="bottom"/>
</StackLayout>item_exlist_item.xml
<?xml version="1.0" encoding="utf-8"?>
<StackLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_content"
ohos:width="match_parent"
ohos:background_element="#ffffff"
>
<DirectionalLayout
ohos:height="match_content"
ohos:width="match_parent"
ohos:alignment="vertical_center"
ohos:orientation="horizontal"
ohos:padding="5vp"
>
<Text
ohos:id="$+id:tv_color_dot"
ohos:height="match_content"
ohos:width="48vp"
ohos:text="◉"
ohos:text_alignment="center"
ohos:text_size="28vp"
/>
<Text
ohos:id="$+id:tv_name"
ohos:height="match_content"
ohos:width="match_parent"
ohos:bottom_margin="5vp"
ohos:left_margin="5vp"
ohos:right_margin="5vp"
ohos:text="图表名称"
ohos:text_alignment="vertical_center|left"
ohos:multiple_lines="true"
ohos:text_color="#123456"
ohos:text_size="18fp"
ohos:top_margin="5vp"
/>
</DirectionalLayout>
<Component
ohos:height="1vp"
ohos:width="match_parent"
ohos:background_element="#eeeeee"
ohos:layout_alignment="bottom"/>
</StackLayout>在项目中使用
String[][] chartTypeNameArr = {
/*基础类型图表*/
{
"Column Chart---柱形图",
"Bar Chart---条形图",
"Area Chart---折线填充图",
"Areaspline Chart---曲线填充图",
"Step Area Chart--- 直方折线填充图",
"Step Line Chart--- 直方折线图",
"Line Chart---折线图",
"Spline Chart---曲线图",},
/*特殊类型图表*/
{
"Polar Chart---极地图图",
"Pie Chart---扇形图",
"Bubble Chart---气泡图",
"Scatter Chart---散点图",
"Arearange Chart---区域范围图",
"Columnrange Chart--- 柱形范围图",
"Step Line Chart--- 直方折线图",
"Step Area Chart--- 直方折线填充图",
"Boxplot Chart--- 箱线图",
"Waterfall Chart--- 瀑布图",
"Pyramid Chart---金字塔图",
"Funnel Chart---漏斗图",
"Errorbar Chart---误差图",},
/*Mixed Chart---混合图*/
{
"arearangeMixedLine",
"columnrangeMixedLine",
"stackingColumnMixedLine",
"dashStyleTypeMixed",
"negativeColorMixed",
"scatterMixedLine",
"negativeColorMixedBubble",
"polygonMixedScatter",
"polarChartMixed",},
/*自定义样式图表*/
{
"colorfulChart",
"gradientColorfulChart",
"discontinuousDataChart",
"colorfulColumnChart",
"nightingaleRoseChart",
"chartWithShadowStyle",
"colorfulGradientAreaChart",
"colorfulGradientSplineChart",
"gradientColorAreasplineChart",
"SpecialStyleMarkerOfSingleDataElementChart",
"SpecialStyleColumnOfSingleDataElementChart",
"AreaChartThreshold",
"customScatterChartMarkerSymbolContent",
"customLineChartMarkerSymbolContent",
"TriangleRadarChart",
"QuadrangleRadarChart",
"PentagonRadarChart",
"HexagonRadarChart",
"adjustYAxisMaxAndMinValues---调整 X 轴和 Y 轴最大值",
"custom Special Style DataLabel Of Single Data Element Chart---指定单个数据元素的 DataLabel 为特殊样式",
"custom Bar Chart Hover Color and Select Colorc---自定义条形图手指滑动颜色和单个长条被选中颜色",
"custom Line Chart Chart Hover And Select Halo Style---自定义直线图手指略过和选中的 Halo 样式",
"custom Spline Chart Marker States Hover Style---自定义曲线图手指略过时的 Marker 样式",
"customNormalStackingChartDataLabelsContentAndStyle---自定义堆积柱状图 DataLabels 的内容及样式",
"upsideDownPyramidChart---倒立的金字塔图",
"doubleLayerPieChart---双层嵌套扇形图",
"disableSomeOfLinesMouseTrackingEffect---针对部分数据列关闭鼠标或手指跟踪行为",
"configureColorfulShadowChart---彩色阴影效果的曲线图",
"configureColorfulDataLabelsStepLineChart---彩色 DataLabels 的直方折线图",
"configureColorfulGradientColorAndColorfulDataLabelsStepAreaChart---彩色渐变效果且彩色 DataLabels 的直方折线填充图",
"disableSplineChartMarkerHoverEffect---禁用曲线图的手指滑动 marker 点的光圈变化放大的效果",
"Top Rounded Corners Stacking Column Chart---顶部为圆角的堆积柱状图"
},
/*使用AAOptions绘制图表*/
{
"customLegendStyle",
"drawChartWithOptionsOne",
"AAPlotLinesForChart",
"customAATooltipWithJSFunction",
"customXAxisCrosshairStyle",
"XAxisLabelsFontColorWithHTMLString",
"XAxisLabelsFontColorAndFontSizeWithHTMLString",
"_DataLabels_XAXis_YAxis_Legend_Style",
"XAxisPlotBand",
"configureTheMirrorColumnChart",
"configureDoubleYAxisChartOptions",
"configureTripleYAxesMixedChart",
"customLineChartDataLabelsFormat",
"configureDoubleYAxesAndColumnLineMixedChart",
"configureDoubleYAxesMarketDepthChart",
"customAreaChartTooltipStyleLikeHTMLTable",
"simpleGaugeChart",
"gaugeChartWithPlotBand",},
/*即时刷新📈📊图表数据*/
{
"Column Chart---柱形图",
"Bar Chart---条形图",
"Area Chart---折线填充图",
"Areaspline Chart---曲线填充图",
"Step Area Chart--- 直方折线填充图",
"Step Line Chart--- 直方折线图",
"Line Chart---折线图",
"Spline Chart---曲线图",
"Scatter Chart---散点图",},
/*自定义 formatter 函数*/
{
"简单字符串拼接",
"自定义不同单位后缀",
"自定义多彩颜色文字",
"值为0时,在tooltip中不显示",
"自定义箱线图的浮动提示框头部内容",
"自定义Y轴文字",
"自定义Y轴文字2",
"自定义分组堆积柱状图tooltip内容",
"双 X 轴镜像图表",
"customArearangeChartTooltip---自定义折线范围图的tooltip",
"调整折线图的 X 轴左边距",
"通过来自外部的数据源来自定义 tooltip (而非常规的来自图表的 series)",},
/*执行由 JavaScript 字符串映射转换成的 js function 函数*/
{
"eval JS function 1",
"eval JS function 2",
"eval JS function 3",},
/*Double Charts Linked Work---双表联动*/
{
"doubleChartsLinkedWork",},
/*Scrollable Chart---可滚动图表*/
{
"Column Chart---柱形图",
"Bar Chart---条形图",
"Area Chart---折线填充图",
"Areaspline Chart---曲线填充图",
"Step Area Chart--- 直方折线填充图",
"Step Line Chart--- 直方折线图",
"Line Chart---折线图",
"Spline Chart---曲线图",}
};
String[] groupTitleArr = {
"Basic Type Chart --- 基础类型图表",
"Special Type Chart --- 特殊类型图表",
"Mixed Chart --- 混合图形",
"Custom Style Chart---一些自定义风格样式图表",
"Draw Chart With AAOptions---通过Options绘图",
"Only Refresh data ---即时刷新图表数据",
"JS Function For AAOptionns ---通过带有 JS 函数的 Options 绘图",
"Evaluate JS String Function---执行js函数",
"Double Charts Linked Work---双表联动",
"Scrollable chart ---可滚动の图表",
};
ExpandableListContainer listContainer = (ExpandableListContainer) findComponentById(ResourceTable.Id_exlist_lol);
MyBaseExpandableItemProvider myAdapter = new MyBaseExpandableItemProvider(groupTitleArr, chartTypeNameArr, this);
listContainer.setItemProvider(myAdapter);
//为列表设置点击事件
listContainer.setOnChildClickListener(new ExpandableListContainer.OnChildClickListener() {
@Override
public boolean onChildClick(ExpandableListContainer parent, Component v, int groupPosition, int childPosition, long id) {
return true;
}
});
评论 ( 0 )
- 圆角圆形图片控件 CircularImageView
CircularImageView
可以设置圆形或圆角图片的Image控件
使用
CircularImageView image = (CircularImageView) findComponentById(ResourceTable.Id_image);
// 设置圆形
image.setPixelMapAndCircle(pixelMap);
image.setPixelMapAndCircle(ResourceTable.Media_image);
// 设置圆角
image.setPixelMapAndRoundRect(pixelMap, 100);
image.setPixelMapAndRoundRect(ResourceTable.Media_image, 100);
- 吐司 Toast
Toast
自定义吐司，可以显示在不同的位置
使用
Toast.show(getContext(), "Toast Content");
Toast.show(getContext(), "Toast Content", Toast.ToastLayout.CENTER);
Toast.show(getContext(), ResourceTable.String_content);
Toast.show(getContext(), ResourceTable.String_content, Toast.ToastLayout.CENTER);
已于2021-9-29 18:26:00修改
赞
1
收藏
回复
相关推荐
