自学HarmonyOS应用开发（75）- 显示拍摄结果
自学HarmonyOS应用开发（75）- 显示拍摄结果
面向对象思考
发布于 2021-11-25 15:07:16
发布于 2021-11-25 15:07:16
照片拍摄完成接下来的动作就是确认拍照结果。我们的实现方法是对前面文章中用到的文件浏览器功能进行扩展，从而实现一个简单的照片浏览器功能。
增加照片浏览器画面
照片浏览器画面使用下面的布局。
<?xml version="1.0" encoding="utf-8"?>
<xwg.dynamiclayout.DynamicLayout
xmlns: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.FileListContainer
ohos:id="$+id:list_container"
ohos:height="0"
ohos:weight="300"
ohos:width="match_parent"
ohos:layout_alignment="left"/>
<xwg.dynamiclayout.LayoutSeparator
ohos:id="$+id:seperator"
ohos:height="20vp"
ohos:width="match_parent"
ohos:background_element="#7F7F7F"/>
<DirectionalLayout
ohos:id="$+id:detail_view_container"
ohos:width="match_parent"
ohos:height="0"
ohos:weight = "300"/>
</xwg.dynamiclayout.DynamicLayout>代码中用到的FileListContainer，LayoutSeparator都在之前的文章中有过说明，这里就不再赘述了。
和这个布局文件配套的页面文件如下：
public class BrowserSlice extends AbilitySlice {
static final HiLogLabel LABEL = new HiLogLabel(HiLog.LOG_APP, 0x00101, "MainAbilitySlice");
@Override
public void onStart(Intent intent) {
setUIContent(ResourceTable.Layout_browser_ability);
String path = intent.getStringParam("Path");
initListContainer(path);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
FileListContainer.SelectedListener listener = new FileListContainer.SelectedListener() {
@Override
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);
}
}准备ListContainer相关类
稍微需要说明的是，这个BrowserSlice类会在onStart方法中从Intent参数中获取一个浏览起始路径并通过调用setRootDir方法将这个路径传递给FileListContainer组件。
而FileListContainer组件又将这个路径传递给BrowerItemProvider：
public class FileListContainer extends ListContainer {
public void setRootDir(String path){
fileItemProvider = new BrowserItemProvider(this.mContext, new BrowserItem.DirChangeListener() {
@Override
public void dirChanged(File dir) {
changeDir(dir);
}
});
fileItemProvider.setRoot(path);
setItemProvider(fileItemProvider);
}BrowerItemProvider在接受的起始路径时遍历该目录下的所有文件，如果找到扩展名为jpg的文件，就会生成用来表示照片文件的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;
}
@Override
public int getComponentId(){
return ResourceTable.Id_image_layout;
}
@Override
public Component createUiComponent(){
HiLog.info(LABEL, "ImageItem.createUiComponent of %{public}s", name);
return LayoutScatter.getInstance(context).parse(ResourceTable.Layout_image_item, null, false);
}
@Override
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);
}
}当用户选择照片文件，照片浏览器需要表示其内容时，ImageItem的buildView方法会被调用并按照如下步骤表示照片。
- 解析布局文件image_container.xml。
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
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">
<Image
ohos:id="$+id:image"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:padding="4vp"
ohos:layout_alignment="left"/>
</DirectionalLayout>2. 读取照片文件并生成Image对象
3. 将Image对象设置到image_container布局中的Image组件上。
4. image_container布局动态装配在照片浏览器页面的布局文件中。
参考资料
相机示例代码
https://gitee.com/openharmony/app_samples/tree/master/media/Camera
权限开发概述
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/security-permissions-overview-0000000000029883
权限开发指导
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/security-permissions-guidelines-0000000000029886
应用权限列表
https://developer.harmonyos.com/cn/docs/documentation/doc-guides/security-permissions-available-0000001051089272
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2021-11-22，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读