自學(xué)HarmonyOS應(yīng)用開發(fā)(75)- 顯示拍攝結(jié)果

照片拍攝完成接下來的動(dòng)作就是確認(rèn)拍照結(jié)果。我們的實(shí)現(xiàn)方法是對(duì)前面文章中用到的文件瀏覽器功能進(jìn)行擴(kuò)展,從而實(shí)現(xiàn)一個(gè)簡(jiǎn)單的照片瀏覽器功能。
增加照片瀏覽器畫面
照片瀏覽器畫面使用下面的布局。
<xwg.dynamiclayout.DynamicLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:background_element="$graphic:main_ability_title_background"ohos:orientation="vertical"><xwg.fileitems.FileListContainerohos:id="$+id:list_container"ohos:height="0"ohos:weight="300"ohos:width="match_parent"ohos:layout_alignment="left"/><xwg.dynamiclayout.LayoutSeparatorohos:id="$+id:seperator"ohos:height="20vp"ohos:width="match_parent"ohos:background_element="#7F7F7F"/><DirectionalLayoutohos:id="$+id:detail_view_container"ohos:width="match_parent"ohos:height="0"ohos:weight = "300"/>xwg.dynamiclayout.DynamicLayout>
代碼中用到的FileListContainer,LayoutSeparator都在之前的文章中有過說明,這里就不再贅述了。
和這個(gè)布局文件配套的頁(yè)面文件如下:
public class BrowserSlice extends AbilitySlice {static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0x00101, "MainAbilitySlice");public void onStart(Intent intent) {setUIContent(ResourceTable.Layout_browser_ability);String path = intent.getStringParam("Path");initListContainer(path);}public void onActive() {super.onActive();}public void onForeground(Intent intent) {super.onForeground(intent);}FileListContainer.SelectedListener listener = new FileListContainer.SelectedListener() {public void onItemSelected(FileListContainer listContainer, BrowserItem item) {HiLog.info(LABEL, "MainAbilitySlice.onItemSelected, item=%{public}s!", item.getName());ComponentContainer container =(ComponentContainer)(BrowserSlice.this.findComponentById(ResourceTable.Id_detail_view_container));item.buildView(container);container.invalidate();}};private void initListContainer(String path) {FileListContainer container = (FileListContainer)findComponentById(ResourceTable.Id_list_container);container.setSelectedListener(listener);container.setRootDir(path);}}
準(zhǔn)備ListContainer相關(guān)類
稍微需要說明的是,這個(gè)BrowserSlice類會(huì)在onStart方法中從Intent參數(shù)中獲取一個(gè)瀏覽起始路徑并通過調(diào)用setRootDir方法將這個(gè)路徑傳遞給FileListContainer組件。
而FileListContainer組件又將這個(gè)路徑傳遞給BrowerItemProvider:
public class FileListContainer extends ListContainer {public void setRootDir(String path){fileItemProvider = new BrowserItemProvider(this.mContext, new BrowserItem.DirChangeListener() {public void dirChanged(File dir) {changeDir(dir);}});fileItemProvider.setRoot(path);setItemProvider(fileItemProvider);}
BrowerItemProvider在接受的起始路徑時(shí)遍歷該目錄下的所有文件,如果找到擴(kuò)展名為jpg的文件,就會(huì)生成用來表示照片文件的ImageItem。具體處理見代碼第18行。
public class BrowserItemProvider extends BaseItemProvider {...public void setRoot(String path){File root = new File(path);setCurrentDir(root);}????...public void setCurrentDir(File dir) {list.clear();int index = 0;File[] files = dir.listFiles();if(files != null) {for (File file : files) {if (file.isDirectory()) {list.add(new DirItem(context, file, index++, dirChangeListener));} else {if(file.getName().endsWith(".jpg")){list.add(new ImageItem(context, file, index++));}else {list.add(new FileItem(context, file, index++));}}}}}}
ImageItem是為了表示照片文件而增加的新類。
public class ImageItem extends BrowserItem {static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0x00104, "ImageItem");File file = null;public ImageItem(Context context, File file, int index) {super(context, file.getName(), index);this.file = file;}public int getComponentId(){return ResourceTable.Id_image_layout;}public Component createUiComponent(){HiLog.info(LABEL, "ImageItem.createUiComponent of %{public}s", name);return LayoutScatter.getInstance(context).parse(ResourceTable.Layout_image_item, null, false);}public void buildView(ComponentContainer container) {container.removeAllComponents();DirectionalLayout image_container = (DirectionalLayout) LayoutScatter.getInstance(context).parse(ResourceTable.Layout_image_container,null,false);Image image = (Image)image_container.findComponentById(ResourceTable.Id_image);ImageSource.SourceOptions srcOpts = new ImageSource.SourceOptions();srcOpts.formatHint = "image/png";String pathName = this.file.getPath();ImageSource imageSource = ImageSource.create(pathName, srcOpts);PixelMap pixelMapNoOptions = imageSource.createPixelmap(null);image.setPixelMap(pixelMapNoOptions);????????container.addComponent(image_container);}}
當(dāng)用戶選擇照片文件,照片瀏覽器需要表示其內(nèi)容時(shí),ImageItem的buildView方法會(huì)被調(diào)用并按照如下步驟表示照片。
解析布局文件image_container.xml。
xml?version="1.0"?encoding="utf-8"?>xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:id="$+id:image_layout"ohos:height="match_content"ohos:width="match_parent"ohos:left_margin="16vp"ohos:right_margin="16vp"ohos:orientation="vertical"ohos:background_element="#7f7f7f">ohos:id="$+id:image"ohos:height="match_parent"ohos:width="match_parent"ohos:padding="4vp"ohos:layout_alignment="left"/>讀取照片文件并生成Image對(duì)象
將Image對(duì)象設(shè)置到image_container布局中的Image組件上。
image_container布局動(dòng)態(tài)裝配在照片瀏覽器頁(yè)面的布局文件中。
動(dòng)作效果視頻
參考資料
相機(jī)示例代碼
https://gitee.com/openharmony/app_samples/tree/master/media/Camera
權(quán)限開發(fā)概述
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/security-permissions-overview-0000000000029883
權(quán)限開發(fā)指導(dǎo)
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/security-permissions-guidelines-0000000000029886
應(yīng)用權(quán)限列表
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/security-permissions-available-0000001051089272
作者著作介紹
《實(shí)戰(zhàn)Python設(shè)計(jì)模式》是作者去年3月份出版的技術(shù)書籍,該書利用Python 的標(biāo)準(zhǔn)GUI 工具包tkinter,通過可執(zhí)行的示例對(duì)23 個(gè)設(shè)計(jì)模式逐個(gè)進(jìn)行說明。這樣一方面可以使讀者了解真實(shí)的軟件開發(fā)工作中每個(gè)設(shè)計(jì)模式的運(yùn)用場(chǎng)景和想要解決的問題;另一方面通過對(duì)這些問題的解決過程進(jìn)行說明,讓讀者明白在編寫代碼時(shí)如何判斷使用設(shè)計(jì)模式的利弊,并合理運(yùn)用設(shè)計(jì)模式。

對(duì)設(shè)計(jì)模式感興趣而且希望隨學(xué)隨用的讀者通過本書可以快速跨越從理解到運(yùn)用的門檻;希望學(xué)習(xí)Python GUI 編程的讀者可以將本書中的示例作為設(shè)計(jì)和開發(fā)的參考;使用Python 語(yǔ)言進(jìn)行圖像分析、數(shù)據(jù)處理工作的讀者可以直接以本書中的示例為基礎(chǔ),迅速構(gòu)建自己的系統(tǒng)架構(gòu)。
覺得本文有幫助?請(qǐng)分享給更多人。
關(guān)注微信公眾號(hào)【面向?qū)ο笏伎肌枯p松學(xué)習(xí)每一天!
面向?qū)ο箝_發(fā),面向?qū)ο笏伎迹?/span>
