[[374067]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz

聲明一下哦，本篇是接著我的上一篇文章——#2020征文-手機#獲取系統照片并解碼渲染顯示(附完整demo) 原創 來寫的。需要的可以先讀讀上一篇文件滴，本篇則是在上一篇代碼基礎上進一步修改而來。

說一下功能的升級(較上一版本)：(ps:我也想搞分布式，可目前的現實不允許，還是等遠程模擬器的多設備分布式聯調能力開放吧)

1.沒有圖片會出現提示

2.相冊中的所有照片都可顯示，并且顯示計數

3.應用隨打開隨刷新

不多說，先上demo跑起來的效果，如下兩張圖：第一張圖是在手機遠程模擬器中一張圖片都沒有時候的顯示界面，第二張是自己打開遠程模擬器的照相功能一頓亂點，照了N張之后的顯示界面

完整的demo在附件中進行下載

老規矩先說升級的大概思路：

1.采用TableLayout布局實現了所有照片的顯示

2.添加兩個Text用來顯示無照片的提示信息和照片的計數信息

3.在onActive生命周期函數中添加方法實現實時刷新

1.采用TableLayout布局實現了所有照片的顯示

1.1 在布局文件中添加TableLayout布局代碼，需要注意的是：這里我外邊套了一層ScrollView，這是為了在圖片多的時候，TableLayout可以滑動

<ScrollView ohos:width="match_parent" 
                ohos:height="600vp" 
                ohos:left_padding="25vp" 
                > 
    <TableLayout 
        ohos:id="$+id:layout_id" 
        ohos:height="match_content" 
        ohos:width="match_parent" 
        > 
    </TableLayout> 
    </ScrollView> 

 1.2 在java代碼中獲取到這個布局

 TableLayout img_layout;         
img_layout = (TableLayout)findComponentById(ResourceTable.Id_layout_id); 
img_layout.setColumnCount(3); 

 1.3 將新生成的圖片放入布局中 

Image img = new Image(MainAbilitySlice.this); 
img.setId(mediaId); 
img.setHeight(300); 
img.setWidth(300); 
img.setMarginTop(20); 
img.setMarginLeft(20); 
img.setPixelMap(pixelMap); 
img.setScaleMode(Image.ScaleMode.ZOOM_CENTER); 
img_layout.addComponent(img); 

 2.添加兩個Text用來顯示無照片的提示信息和照片的計數信息

2.1 首先在布局文件中加入兩個text

<Text 
      ohos:id="$+id:text_pre_id" 
      ohos:width="match_parent" 
      ohos:height="match_parent" 
      ohos:text_alignment="center" 
      ohos:text_size="45fp" 
      ohos:text="Opening..."></Text> 
  <Text 
      ohos:id="$+id:text_id" 
      ohos:width="match_content" 
      ohos:height="match_content" 
      ohos:text_alignment="center" 
      ohos:text_size="20fp"></Text> 

 2.2 在java中獲得這兩個text組件

Text pre_text,text; 
pre_text = (Text)findComponentById(ResourceTable.Id_text_pre_id); 
text = (Text)findComponentById(ResourceTable.Id_text_id); 

 2.3 利用能不能獲取到圖片來判斷這兩個text組件的顯示邏輯

if(img_ids.size() > 0){ 
         pre_text.setVisibility(Component.HIDE); 
         text.setVisibility(Component.VISIBLE); 
         text.setText("照片數量："+img_ids.size()); 
     }else{ 
         pre_text.setVisibility(Component.VISIBLE); 
         pre_text.setText("No picture."); 
         text.setVisibility(Component.HIDE); 
     } 

 3.在onActive生命周期函數中添加方法實現實時刷新

3.1 onActive生命周期函數介紹

• Page會在進入INACTIVE狀態后來到前臺，然后系統調用此回調。Page在此之后進入ACTIVE狀態，該狀態是應用與用戶交互的狀態。所以當你把應用放到后臺，打開照相機照相的時候，然后在打開此應用的時候就會調用該生命周期函數

3.2 在onActive函數中添加需要的調用

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

 3.3 displayPic函數封裝了整個展示圖片的代碼

public void displayPic(){ 
        img_layout.removeAllComponents(); 
        ArrayList<Integer> img_ids = new ArrayList<Integer>(); 
        DataAbilityHelper helper = DataAbilityHelper.creator(getContext()); 
        try { 
            ResultSet result = helper.query(AVStorage.Images.Media.EXTERNAL_DATA_ABILITY_URI, null, null); 
            if(result == null){ 
                pre_text.setVisibility(Component.VISIBLE); 
            }else{ 
                pre_text.setVisibility(Component.HIDE); 
            } 
            while(result != null && result.goToNextRow()){ 
                int mediaId = result.getInt(result.getColumnIndexForName(AVStorage.Images.Media.ID)); 
                Uri uri = Uri.appendEncodedPathToUri(AVStorage.Images.Media.EXTERNAL_DATA_ABILITY_URI,""+mediaId); 
                FileDescriptor filedesc = helper.openFile(uri,"r"); 
                ImageSource.DecodingOptions decodingOpts = new ImageSource.DecodingOptions(); 
                decodingOpts.desiredSize = new Size(300,300); 
                ImageSource imageSource = ImageSource.create(filedesc,null); 
                PixelMap pixelMap = imageSource.createThumbnailPixelmap(decodingOpts,true); 
                Image img = new Image(MainAbilitySlice.this); 
                img.setId(mediaId); 
                img.setHeight(300); 
                img.setWidth(300); 
                img.setMarginTop(20); 
                img.setMarginLeft(20); 
                img.setPixelMap(pixelMap); 
                img.setScaleMode(Image.ScaleMode.ZOOM_CENTER); 
                img_layout.addComponent(img); 
                System.out.println("xxx"+uri); 
                img_ids.add(mediaId); 
            } 
        }catch (DataAbilityRemoteException | FileNotFoundException e){ 
            e.printStackTrace(); 
        } 
        if(img_ids.size() > 0){ 
            pre_text.setVisibility(Component.HIDE); 
            text.setVisibility(Component.VISIBLE); 
            text.setText("照片數量："+img_ids.size()); 
        }else{ 
            pre_text.setVisibility(Component.VISIBLE); 
            pre_text.setText("No picture."); 
            text.setVisibility(Component.HIDE); 
        } 
    } 

 這個demo目前來說，還算基本能看。。。有時間的我會繼續嘗試修改完善。

有興趣的朋友可以關注一下

完整demo的源碼見附件

©著作權歸作者和HarmonyOS技術社區共同所有，如需轉載，請注明出處，否則將追究法律責任

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com/#zz