鸿蒙Java开发模式10:鸿蒙图片选择器的实现及应用 原创

1.鸿蒙图片选择器通过页面路由和数据适配器，页面参数和回调完成，实现效果UI如图：

点击请选择图片，页面路由跳转，选择图片，界面UI如下:

点击选中图片，跳转页面，返回上一级，通过页面参数传递，获取选择的图片:

2.Java 代码的实现：

package com.example.javahm10.slice;

import com.example.javahm10.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Button;
import ohos.agp.components.Component;
import ohos.agp.components.Image;

public class FirstAbilitySlice extends AbilitySlice {

    private Image image;
    private Button button;
    private int requestCode = 123;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_first);
        initLayout();
    }

    private void initLayout() {
        image = (Image)findComponentById(ResourceTable.Id_image_view);
        button = (Button)findComponentById(ResourceTable.Id_button_picture_select);
        button.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                Intent intent_picture_select = new Intent();
                presentForResult(new PictureSelectAbilitySlice(), intent_picture_select, requestCode);
            }
        });
    }

    @Override
    protected void onResult(int requestCode, Intent resultIntent) {
        super.onResult(requestCode, resultIntent);
        if (this.requestCode == requestCode){
            int res_id = resultIntent.getIntParam("picture_res_id", ResourceTable.Media_icon);
            image.setImageAndDecodeBounds(res_id);
        }
    }

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

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

跳转页面的java代码:

package com.example.javahm10.slice;

import com.example.javahm10.ResourceTable;
import com.example.javahm10.model.ListItemProvider;
import com.example.javahm10.model.PictureMo;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.ListContainer;

import java.util.ArrayList;

public class PictureSelectAbilitySlice extends AbilitySlice  implements ListItemProvider.OnItemClickListener{
    private ListContainer listContainer;
    private ListItemProvider listItemProvider;
    private ArrayList<PictureMo> pictures = new ArrayList<>();


    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_picture_select);
        initLayout();
        initPicture();
    }
    private void initLayout(){
        listContainer = (ListContainer)findComponentById(ResourceTable.Id_list_view);
        listItemProvider = new ListItemProvider(this, this);
        listContainer.setItemProvider(listItemProvider);
    }
    private void initPicture() {
        pictures.add(new PictureMo(ResourceTable.Media_a0, "resource/media/a0.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a1, "resource/media/a1.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a2, "resource/media/a2.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a3, "resource/media/a3.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a4, "resource/media/a4.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a5, "resource/media/a5.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a6, "resource/media/a6.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a7, "resource/media/a7.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a8, "resource/media/a8.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a9, "resource/media/a9.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a10, "resource/media/a10.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a11, "resource/media/a11.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a12, "resource/media/a12.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a13, "resource/media/a13.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a14, "resource/media/a14.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a15, "resource/media/a15.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a16, "resource/media/a16.jpg"));
        pictures.add(new PictureMo(ResourceTable.Media_a17, "resource/media/a17.jpg"));

        listItemProvider.setData(pictures);
    }

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

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

    @Override
    public void OnItemClick(PictureMo pictureMo, int position) {
        Intent intent_picture_select = new Intent();
        intent_picture_select.setParam("picture_res_id",  pictureMo.pictureId);
        setResult(intent_picture_select);
        terminate();
    }
}

3.页面布局代码:

<?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">

    <DirectionalLayout
        ohos:orientation="horizontal"
        ohos:width="match_parent"
        ohos:height="match_content"
        ohos:alignment="horizontal_center">
        <Image
            ohos:id="$+id:image_view"
            ohos:height="300vp"
            ohos:width="400vp"
            ohos:image_src="$media:bg1">
        </Image>
    </DirectionalLayout>
    <Button
        ohos:id="$+id:button_picture_select"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:layout_alignment="horizontal_center"
        ohos:text_size="60"
        ohos:text="请选择图片"/>

</DirectionalLayout>

<?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_view"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:top_margin="20vp"
        />
</DirectionalLayout>

4.java数据模型和数据适配器代码

package com.example.javahm10.model;

public class PictureMo {
    public int pictureId;
    public String imagePath;

    public PictureMo(int pictureId, String imagePath) {
        this.pictureId = pictureId;
        this.imagePath = imagePath;
    }
}


package com.example.javahm10.model;

import java.util.ArrayList;

public class DataMo {
    public ArrayList<PictureMo> pictureMos;

    public DataMo(ArrayList<PictureMo> pictureMos){
        this.pictureMos = pictureMos;
    }
}

package com.example.javahm10.model;

import com.example.javahm10.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;


import java.util.ArrayList;

public class ListItemProvider extends RecycleItemProvider {
    private AbilitySlice mSlice;
    private OnItemClickListener listener;
    private ArrayList<DataMo> dataMos = new ArrayList<>();

    public ListItemProvider(AbilitySlice abilitySlice, OnItemClickListener listener){
        this.mSlice = abilitySlice;
        this.listener = listener;
    }

    public void setData(ArrayList<PictureMo> pictureMos){
        this.dataMos.clear();
        int i = 0;
        ArrayList<PictureMo> tempList = new ArrayList<>();
        for (PictureMo mo:pictureMos){
            if (i == 3){
                i = 0;
                dataMos.add(new DataMo(tempList));
                tempList = new ArrayList<>();
            }
            tempList.add(mo);
            i++;
        }
        dataMos.add(new DataMo(tempList));
        this.notifyDataChanged();
    }
    @Override
    public int getCount() {
        return dataMos.size();
    }

    @Override
    public Object getItem(int i) {
        return dataMos.get(i);
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
        Component component_item = LayoutScatter.getInstance(mSlice).parse(ResourceTable.Layout_list_item, null, false);
        if ( !(component_item instanceof ComponentContainer)){
            return null;
        }
        ComponentContainer rootLayout = (ComponentContainer)component_item;
        DataMo dataMo = dataMos.get(i);
        for (PictureMo mo:dataMo.pictureMos){
            Image imageItem = (Image) LayoutScatter.getInstance(mSlice).parse(ResourceTable.Layout_item_title, null, false);
            imageItem.setImageAndDecodeBounds(mo.pictureId);
            rootLayout.addComponent(imageItem);
            imageItem.setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {
                    listener.OnItemClick(mo, i);
                }
            });
        }
        return component_item;
    }

    public interface OnItemClickListener{
        void OnItemClick(PictureMo pictureMo, int position);
    }
}