手把手教你用鴻蒙HarmonyOS實作微信聊天界面（二）-有解無憂

簡介

本系列文章記錄作者大三開學第一個月中學習HarmonyOS移動應用開發學習經歷，此篇為《微信聊天界面》專案，實作功能有

1、聊天資訊功能，包括圖片、文字

2、發送定位功能

3、選擇發送本機圖片功能

4、拍照并發送圖片功能

如果在真機除錯請將config檔案中包名換成自己的應用包名即可，申請權限有檔案讀寫、位置獲取、相機呼叫、麥克風呼叫，

之前文章

手把手教你用鴻蒙HarmonyOS實作微信聊天界面（一）_hys1124388788的博客-CSDN博客

聊天界面效果如圖

圖片選擇效果如圖

圖片獲取

本篇講關于圖片的獲取，一種方式是在專案中放置靜態資源，另一種則是從本機中獲取圖片，

第一種

第一種方式使用很簡單，只需要在Image組件添加src屬性即可，

 <Image
            ohos:id="$+id:image_message"
            ohos:width="match_content"
            ohos:image_src="$media:rick_c137"
            ohos:height="match_content"
            ohos:scale_mode="zoom_center"
            ohos:background_element="$graphic:message_background"
            ohos:left_margin="15vp"
            ohos:left_padding="15vp"
            ohos:right_padding="15vp"
            ohos:right_margin="15vp"
            ohos:top_margin="15vp"
            ohos:top_padding="15vp"
            ohos:bottom_margin="15vp"
            ohos:bottom_padding="15vp"
            ohos:margin="5vp"/>

第二種

第二種的使用場景更加普遍，是根據圖片檔案的uri來訪問媒體資源轉換為PixelMap物件傳給Image組件實作的，

 Component container = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_image_message_list_item, null, false);
            Image image = (Image) container.findComponentById(ResourceTable.Id_image_message);

            DataAbilityHelper helper=DataAbilityHelper.creator(context);
            ImageSource imageSource;
            Uri uri = Uri.parse(aMessage.getMessage());
            FileDescriptor fd = null;
            try {
                fd = helper.openFile(uri, "r");
            } catch (DataAbilityRemoteException | FileNotFoundException e) {
                e.printStackTrace();
            }
            imageSource = ImageSource.create(fd, null);
            //創建位圖
            PixelMap pixelMap = imageSource.createPixelmap(null);
            image.setPixelMap(pixelMap);
            imageSource.release();
            helper.release();

            return container;

獲取Uri

如何獲取圖片的Uri呢？是通過DataAbilityHelper這個類查詢本機的資源（參考官方檔案檔案中心），媒體存盤相關類AVStorage類中AVStorage.Images.Media.EXTERNAL_DATA_ABILITY_URI是獲取用于處理影像媒體資訊的Uri,視瞥澩也類似，根據查詢結果獲取到的資源id拼接處Uri

Uri.appendEncodedPathToUri(AVStorage.Images.Media.EXTERNAL_DATA_ABILITY_URI, String.valueOf(id));

專案中獲取圖片URI資源的類

public class PictureManager {
    private static final String TAG = PictureManager.class.getSimpleName();

    private List<Uri> imagePathElements = new ArrayList<>();

    private Context context;

    /**
     * The construction method of this class
     *
     * @param context Context
     */
    public PictureManager(Context context) {
        this.context = context;
        loadFromMediaLibrary(context);
    }

    private void loadFromMediaLibrary(Context context) {
        Uri remoteUri = AVStorage.Images.Media.EXTERNAL_DATA_ABILITY_URI;
        DataAbilityHelper helper = DataAbilityHelper.creator(context, remoteUri, false);
        try {
            ResultSet resultSet = helper.query(remoteUri, null, null);
            LogUtil.info(TAG, "The result size: " + resultSet.getRowCount());
            processResult(resultSet);
            resultSet.close();
        } catch (DataAbilityRemoteException e) {
            LogUtil.error(TAG, "Query system media failed.");
        } finally {
            helper.release();
        }
    }

    private void processResult(ResultSet resultSet) {
        while (resultSet.goToNextRow()) {
            String path = resultSet.getString(resultSet.getColumnIndexForName(AVStorage.AVBaseColumns.DATA));
            String title = resultSet.getString(resultSet.getColumnIndexForName(AVStorage.AVBaseColumns.TITLE));
            String id = resultSet.getString(resultSet.getColumnIndexForName(AVStorage.Images.Media.ID));
            Uri uri = Uri.appendEncodedPathToUri(AVStorage.Images.Media.EXTERNAL_DATA_ABILITY_URI, String.valueOf(id));

            LogUtil.info(TAG, "The title is: " + title);
            LogUtil.info(TAG, "The path is: " + path);
            LogUtil.info(TAG, "The id is: " + id);
            LogUtil.info(TAG, "The uri is: " + uri);
            imagePathElements.add(uri);
        }
    }

    public List<Uri> getimageElements() {
        LogUtil.info(TAG, "The size is: " + imagePathElements.size());
        return imagePathElements;
    }
}

Uri轉圖片

??????具體怎么選擇圖片是通過ListContiner組件將圖片按行展示在手機上，通過添加圖片的點擊方法呼叫發送訊息方法將圖片發出，

如何將Uri顯示為圖片？在鴻蒙中Image組件可通過呼叫setPixelMap方法設定，引數是PixMap物件，可以通過ImageSource根據FileDescriptor 創建位圖

DataAbilityHelper helper=DataAbilityHelper.creator(slice.getContext());
ImageSource imageSource;
FileDescriptor fd = null;
fd = helper.openFile(uri, "r");
imageSource = ImageSource.create(fd, null);
PixelMap pixelMap = imageSource.createPixelmap(null);
image.setPixelMap(pixelMap);

以下是在專案中將圖片一行三張展示所以Uri采用陣列存盤，如果只想顯示一張將陣列換為單個物件即可，

DataAbilityHelper helper=DataAbilityHelper.creator(slice.getContext());
        //定義圖片來源物件
        ImageSource imageSource;
        Uri[] uris = imageLineItem.getUris();
        FileDescriptor fd = null;

        image1.setClickedListener(component1 -> {
            mainAbilitySlice.addAndUpdateMessage(mainAbilitySlice.getMessageDataSize(), String.valueOf(uris[0]),"image");
            mainAbilitySlice.getDialog().destroy();
        });
    
try {
            fd = helper.openFile(uris[0], "r");
        } catch (DataAbilityRemoteException | FileNotFoundException e) {
            e.printStackTrace();
        }
        imageSource = ImageSource.create(fd, null);
        //創建位圖
        PixelMap pixelMap = imageSource.createPixelmap(null);
        image1.setPixelMap(pixelMap);
        imageSource.release();
        helper.release();

ListContiner的內容物體類

public class ImageLineItem {
    private int index;
    private Uri[] uris;

    public ImageLineItem(int index) {
        this.index = index;
    }

    public int getIndex() {
        return index;
    }

    public void setIndex(int index) {
        this.index = index;
    }

    public Uri[] getUris() {
        return uris;
    }

    public void setUris(Uri[] uris) {
        this.uris = uris;
    }
}

Provider類

public class ImageLineProvider extends BaseItemProvider {
    private static final String TAG = ImageLineProvider.class.getSimpleName();
    private List<ImageLineItem> list;
    private AbilitySlice slice;

    private MainAbilitySlice mainAbilitySlice;

    public void setMainAbilitySlice(MainAbilitySlice mainAbilitySlice){
        this.mainAbilitySlice = mainAbilitySlice;
    }

    public ImageLineProvider(List<ImageLineItem> list, AbilitySlice slice) {
        LogUtil.info(TAG,"list.size() : "+list.size());
        this.list = list;
        this.slice = slice;
    }

    @Override
    public int getCount() {
        return list == null ? 0 : list.size();
    }

    @Override
    public Object getItem(int position) {
        if (list != null && position >= 0 && position < list.size()){
            return list.get(position);
        }
        return null;
    }

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

    private Component getItemComponent(int position) {
        return getComponent(position);
    }

    private Component getComponent(int position) {
        LogUtil.info(TAG,"list.size()"+list.size());
        final Component cpt;
        cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_images_line, null, false);
        ImageLineItem imageLineItem = list.get(position);
        Image image1,image2,image3;
        image1 = (Image) cpt.findComponentById(ResourceTable.Id_image1);
        image2 = (Image) cpt.findComponentById(ResourceTable.Id_image2);
        image3 = (Image) cpt.findComponentById(ResourceTable.Id_image3);

        DataAbilityHelper helper=DataAbilityHelper.creator(slice.getContext());
        //定義圖片來源物件
        ImageSource imageSource;
        Uri[] uris = imageLineItem.getUris();
        FileDescriptor fd = null;

        image1.setClickedListener(component1 -> {
            mainAbilitySlice.addAndUpdateMessage(mainAbilitySlice.getMessageDataSize(), String.valueOf(uris[0]),"image");
            mainAbilitySlice.getDialog().destroy();
        });
        image2.setClickedListener(component1 -> {
            mainAbilitySlice.addAndUpdateMessage(mainAbilitySlice.getMessageDataSize(), String.valueOf(uris[1]),"image");
            mainAbilitySlice.getDialog().destroy();
        });
        image3.setClickedListener(component1 -> {
            mainAbilitySlice.addAndUpdateMessage(mainAbilitySlice.getMessageDataSize(), String.valueOf(uris[2]),"image");
            mainAbilitySlice.getDialog().destroy();
        });

        try {
            fd = helper.openFile(uris[0], "r");
        } catch (DataAbilityRemoteException | FileNotFoundException e) {
            e.printStackTrace();
        }
        imageSource = ImageSource.create(fd, null);
        //創建位圖
        PixelMap pixelMap = imageSource.createPixelmap(null);
        image1.setPixelMap(pixelMap);
        imageSource.release();
        helper.release();

        try {
            fd = helper.openFile(uris[1], "r");
        } catch (DataAbilityRemoteException | FileNotFoundException e) {
            e.printStackTrace();
        }
        imageSource = ImageSource.create(fd, null);
        //創建位圖
        pixelMap = imageSource.createPixelmap(null);
        image2.setPixelMap(pixelMap);
        imageSource.release();
        helper.release();

        try {
            fd = helper.openFile(uris[2], "r");
        } catch (DataAbilityRemoteException | FileNotFoundException e) {
            e.printStackTrace();
        }
        imageSource = ImageSource.create(fd, null);
        //創建位圖
        pixelMap = imageSource.createPixelmap(null);
        image3.setPixelMap(pixelMap);
        imageSource.release();
        helper.release();

        return cpt;
    }

    @Override
    public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
        return getItemComponent(position);
    }
}

到此圖片獲取的方式講完了，下篇講前邊圖片中展示的效果怎么實作，

Gitee鏈接
WeChatPage: 鴻蒙版微信界面

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/308890.html

標籤：其他

上一篇：C++ 加速 cin 和 cout

下一篇：基于Android的微信主界面