ohos扩展包——控件集合

jacksky

发布于 2021-9-29 18:26

浏览

0收藏

控件

ExpandableListContainer

ExpandableListContainer

ExpandableListContainer可折叠收起列表 ohos扩展包——控件集合-鸿蒙开发者社区

使用方法

在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

自定义吐司，可以显示在不同的位置 ohos扩展包——控件集合-鸿蒙开发者社区

使用

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修改