HMS11.Image, TabList与Tab, Picker

01.Image

　　共有XML属性继承自 Component;

　　特有属性：

　　　　clip_alignment: 图像裁剪模式； --> left, right, top, bottom, center;

　　　　image_src: 标识图像来源；可以配置色值，color资源和media下的图片资源;

　　　　scal_mode: 图像缩放类型;  zoom-center; zoom_start; zoom_end; stretch; center; inside; clip_center; 

　　>>> 透明度属性: alpha; 
　　　　当存在透明度时，对于颜色值的配置，可以带透明度配置，

　　　　

 02. TabList 和 Tab

　　TabList 继承自 ScrollView; 

　　关联问题:

　　　　a. tab 项之间，如何平分屏幕空间(或者说平分空闲空间);
　　　　b. tab项宽度，能否按Text长度自适应;
　　　　c. tab项内容能否在XML中进行配置;

 　  设置fixedMode

　　　　默认为false，该模式下TabList的总宽度是各Tab宽度的总和，若固定了TabList的宽度，当超出可视区域，则可以通过滑动TabList来显示。
　　　　如果设置为true，TabList的总宽度将与可视区域相同，各个Tab的宽度也会根据TabList的宽度而平均分配，该模式适用于Tab较少的情况。
　　　　tabList.setFixedMode(true);

　　TabList的常用接口

　　　　

 03. Picker

　　Picker 提供了滑动选择器，允许用户从预定义的范围中进行选择;

　　Picker的共有XML属性，继承自： DirectionalLayout;

　　>>> 特有属性说明

　　　　element_padding: 文本与Element之间的间距，Element必须通过 setElementFormatter 接口配置；

　　　　max_value, min_value,value: 最大值，最小值和当前值；Integer类型; 

　　　　selected_text_color, selected_text_size: 选中文本的颜色和文本大小；

　　　　selector_item_num: 显示的项目数量 ; 

　　　　selected_normal_text_margin_ration: 选中文本边距与默认文本边距的比例，要求>0.0f, 默认为 1.0f; 

　　　　shadow_color: 着色器颜色;

　　　　top_line_element, bottom_line_element: 选中项的顶行和底线；Element类型，可直接配置色值，也可引用color资源或图片资源 ；

　　　　wheel_mode_enabled: 选择轮是否循环显示数据；

 　　>>> 关于Picker的使用，只提供了数值的范围值，但可以通过格式化显示或者配置显示内容，来达到值与显示文本内容的对应关系;

　　　　　

 　　　　 当前标识项内容的上下隔离线配置

　　　　    

　　　　在代码中配置：

　　　　　　

　　　　着色器， 选中项间距，首尾值循环：

　　　　　　

 　　　　关于Picker的联动控制
　　　　　　*** 关于 wheel_mode_enabled:true 模式下的首尾相连效果，当实际内容数量>selector_item_num 时，可以看到首尾相连效果；（默认5个）

　　　　　　

 >>布局

<?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:alignment="center"
    ohos:orientation="vertical">

    <Text
        ohos:id="$+id:text_chg"
        ohos:height="match_content"
        ohos:width="300vp"
        ohos:text="show infomations"
        ohos:text_size="30vp"
        ohos:margin="10vp"
        ohos:padding="10vp"
        ohos:text_alignment="horizontal_center"
        ohos:background_element="$graphic:background_text"
        />

    <Picker
        ohos:id="$+id:picker_test"
        ohos:height="150vp"
        ohos:width="300vp"
        ohos:background_element="#E1FFFF"
        ohos:layout_alignment="center"

        ohos:normal_text_size="16fp"
        ohos:normal_text_color="#FFA500"
        ohos:selected_text_size="16fp"
        ohos:selected_text_color="#FF0000"

        ohos:bottom_line_element="#40E0D0"
        ohos:top_line_element="#40E0D0"

        ohos:shader_color="#1E90FF"
        ohos:selected_normal_text_margin_ratio="5.0"
        ohos:wheel_mode_enabled="true"
        />

    <DirectionalLayout
        ohos:top_margin="10vp"
        ohos:left_margin="20vp"
        ohos:height="100vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        >

        <Picker
            ohos:id="$+id:picker_Group"
            ohos:height="match_parent"
            ohos:width="150vp"
            ohos:background_element="#E1FFFF"
            ohos:layout_alignment="center"

            ohos:normal_text_size="16fp"
            ohos:normal_text_color="#FFA500"
            ohos:selected_text_size="16fp"
            ohos:selected_text_color="#FF0000"

            ohos:bottom_line_element="#40E0D0"
            ohos:top_line_element="#40E0D0"

            ohos:shader_color="#1E90FF"
            ohos:selected_normal_text_margin_ratio="5.0"
            ohos:wheel_mode_enabled="true"
            />
        <Picker
            ohos:id="$+id:picker_Item"
            ohos:height="match_parent"
            ohos:width="150vp"
            ohos:background_element="#E1FFFF"
            ohos:layout_alignment="center"
            ohos:left_margin="1vp"

            ohos:normal_text_size="16fp"
            ohos:normal_text_color="#FFA500"
            ohos:selected_text_size="16fp"
            ohos:selected_text_color="#FF0000"

            ohos:bottom_line_element="#40E0D0"
            ohos:top_line_element="#40E0D0"

            ohos:shader_color="#1E90FF"
            ohos:selected_normal_text_margin_ratio="5.0"
            ohos:wheel_mode_enabled="true"
            />

    </DirectionalLayout>

</DirectionalLayout>

>> Slice代码

package com.example.pickerdemo.slice;

import com.example.pickerdemo.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Picker;
import ohos.agp.components.Text;
import ohos.agp.text.Font;
import ohos.agp.utils.Color;

public class MainAbilitySlice extends AbilitySlice {

    String[] WEEKDAYS = {"Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"};
    String[] GROUPS = {"魏","蜀","吴"};
    String[][] ITEMS = {{"曹操","张辽","夏候惇","夏候渊","许褚","典韦"},
                        {"刘备","关羽","张飞"},
                        {"孙权","周瑜","吕蒙","孙坚","孙策","黄盖"}};
    //想实现首尾数据循环展示,最少要6个数据,因为可直接看到的5个
    //即使改变容器高度也是一样滴;

    Integer GroupIDX = 0;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        Text text = (Text) findComponentById(ResourceTable.Id_text_chg);
        Picker picker = (Picker) findComponentById(ResourceTable.Id_picker_test);
        SetPicker(text, picker, WEEKDAYS);
        //主从联动
        Picker group = (Picker) findComponentById(ResourceTable.Id_picker_Group);
        Picker item = (Picker) findComponentById(ResourceTable.Id_picker_Item);
        SetGrpItem(group,item);
    }

    private void SetGrpItem(Picker grp,Picker item) {
        //设置取值范围
        grp.setMinValue(0);
        grp.setMaxValue(GROUPS.length - 1);
        //值的变化
        grp.setValueChangedListener(new Picker.ValueChangedListener() {
            @Override
            public void onValueChanged(Picker picker, int i, int i1) {
                GroupIDX = i1; //标识当前选中的是第几组
                ReSetItem(item);
            }
        });
        //设置要显示的信息数组
        //picker.setDisplayedData(new String[]{"Mon","Tue","Wed","Thu","Fri","Sat","Sun"});
        //格式化显示
        grp.setFormatter(new Picker.Formatter() {
            @Override
            public String format(int i) {
                return GROUPS[i]; //返回格式化后的内容项
            }
        });
        grp.setValue(0);
        ReSetItem(item); //设置从表默认展示
        //字符设置
        grp.setNormalTextFont(Font.DEFAULT_BOLD);
        grp.setNormalTextSize(40);
        grp.setNormalTextColor(new Color(Color.getIntColor("#FFA500")));
        grp.setSelectedTextFont(Font.DEFAULT_BOLD);
        grp.setSelectedTextSize(40);
        grp.setSelectedTextColor(new Color(Color.getIntColor("#FF0000")));
    }

    private void ReSetItem(Picker item) {
        item.setMinValue(0);
        item.setMaxValue(ITEMS[GroupIDX].length-1); //取二维数组
        item.setValue(0);
        item.setFormatter(new Picker.Formatter() {
            @Override
            public String format(int i) {
                return ITEMS[GroupIDX][i]; //取二维组中的内容
            }
        });
        //字符设置
        item.setNormalTextFont(Font.DEFAULT_BOLD);
        item.setNormalTextSize(40);
        item.setNormalTextColor(new Color(Color.getIntColor("#FFA500")));
        item.setSelectedTextFont(Font.DEFAULT_BOLD);
        item.setSelectedTextSize(40);
        item.setSelectedTextColor(new Color(Color.getIntColor("#FF0000")));
    }


    private void SetPicker(Text text, Picker picker, String[] infos) {
        //设置取值范围
        picker.setMinValue(0);
        picker.setMaxValue(infos.length - 1);
        //值的变化
        picker.setValueChangedListener(new Picker.ValueChangedListener() {
            @Override
            public void onValueChanged(Picker picker, int i, int i1) {
                    text.setText("from " + i + " to " + i1);
            }
        });
        //设置要显示的信息数组
        //picker.setDisplayedData(new String[]{"Mon","Tue","Wed","Thu","Fri","Sat","Sun"});
        //格式化显示
        picker.setFormatter(new Picker.Formatter() {
            @Override
            public String format(int i) {
                return infos[i];
            }
        });
        picker.setValue(0);
        //字符设置
        picker.setNormalTextFont(Font.DEFAULT_BOLD);
        picker.setNormalTextSize(40);
        picker.setNormalTextColor(new Color(Color.getIntColor("#FFA500")));
        picker.setSelectedTextFont(Font.DEFAULT_BOLD);
        picker.setSelectedTextSize(40);
        picker.setSelectedTextColor(new Color(Color.getIntColor("#FF0000")));
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}