关于程序员:官方总结鸿蒙应用开发常见问题与实现方法典型案例

44次阅读

共计 12308 个字符，预计需要花费 31 分钟才能阅读完成。

如何实现自定义的 Dialog？

增加自定义 Dialog 代码

CommonDialog commonDialog = new   CommonDialog(this);
 
Component component =   LayoutScatter.getInstance(getContext())
 
                   .parse(ResourceTable.Layout_dialog_custom_layout,   null, true);
 
commonDialog.setSize(800, 500);
 
commonDialog.setContentCustomComponent(component);

commonDialog.show();

自定义 Dialog 的布局文件

<?xml version="1.0"   encoding="utf-8"?>

<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" 
                     ohos:width="match_parent"
                     ohos:height="match_content"
                     ohos:padding="10vp"
                     ohos:background_element="@graphic:grey"
                   ohos:orientation="vertical">
                   
      <Text
              ohos:width="match_parent"
              ohos:height="match_content"
              ohos:text="Dialog 题目"
              ohos:text_color="$color:Black"
              ohos:text_style="bold"
              ohos:text_size="40fp"/>

      <Text 
              ohos:width="match_parent"
              ohos:height="match_parent"
              ohos:text="自定义 Dialog 内容"
              ohos:text_color="$color:Black" 
              ohos:text_style="bold"
              ohos:weight="1"
              ohos:text_alignment="vertical_center"
              ohos:top_margin="30vp"
              ohos:bottom_margin="30vp"
              ohos:left_margin="10vp"
              ohos:right_margin="10vp"
              ohos:text_size="30fp"/>

      <DirectionalLayout 
              ohos:height="match_content"
              ohos:width="match_parent"
              ohos:orientation="horizontal">

       <Button
              ohos:width="match_parent"
              ohos:text="勾销"
              ohos:text_size="30fp"
              ohos:padding="10vp"
              ohos:text_color="$color:White"
              ohos:weight="1"
              ohos:margin="10vp"
              ohos:background_element="$graphic:yellow"
              ohos:height="match_content"/>

        <Button
              ohos:width="match_parent"
              ohos:text="确定"
              ohos:text_size="30fp"
              ohos:weight="1"
              ohos:padding="10vp"
              ohos:text_color="$color:White"
              ohos:margin="10vp"
              ohos:background_element="$graphic:green"
              ohos:height="match_content"/>
      </DirectionalLayout>
</DirectionalLayout>

在 xml 布局中设置控件 ohos:background_element=”$color:yellow” 有效，目前背景色彩不反对以 $color 形式设置，只反对 $graphic 形式设置。

形式 1：xml 中设置控件背景色彩应用 $graphic

<Button
      ohos:width="match_parent"
      ohos:text="控件按钮"
      ohos:text_size="30fp"
      ohos:padding="10vp"
      ohos:text_color="$color:White"
      ohos:background_element="$graphic:yellow"
      ohos:height="match_content"/>

资源文件 graphic 中 yellow.xml 代码如下：

<?xml version="1.0"   encoding="utf-8"?>
<shape   xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="rectangle">  
    <solid
        ohos:color="#fff9a825"/>
</shape>

形式 2：纯代码设置控件色彩

DirectionalLayout.LayoutConfig   config = new   DirectionalLayout.LayoutConfig(DirectionalLayout.LayoutConfig.MATCH_CONTENT,   DirectionalLayout.LayoutConfig.MATCH_CONTENT);

config.setMargins(30, 10, 10, 10); 
ShapeElement element = new   ShapeElement();
element.setRgbColor(new RgbColor(255,   111, 0));
Text text = new Text(this);
text.setText("xml 增加背景");
text.setTextColor(new Color(0xFFFFFFFF));
text.setTextSize(40);
text.setPadding(30, 20, 30, 20);
text.setTextAlignment(TextAlignment.CENTER);
text.setBackground(element);
text.setLayoutConfig(config);

ScrollView 嵌套 DirectionalLayout 如何进行滚动？

应用 xml 布局，须要将 ScrollView 的高度设置成“match_parent”，ScrollView 子布局的高度设置成“match_content”

<?xml version="1.0" encoding="utf-8"?>

<ScrollView 
          xmlns:ohos="http://schemas.huawei.com/res/ohos"
          ohos:width="match_parent"
          ohos:height="match_parent"
          ohos:orientation="vertical">
          
      <DirectionalLayout   xmlns:ohos="http://schemas.huawei.com/res/ohos"
                         ohos:width="match_parent"
                         ohos:height="match_content"
                         ohos:orientation="vertical">
         ...
      </DirectionalLayout>
</ScrollView>

应用代码增加，则须要给 ScrollView 和子布局设置 LayoutConfig

ComponentContainer.LayoutConfig   scrollConfig = new   ComponentContainer.LayoutConfig(DirectionalLayout.LayoutConfig.MATCH_PARENT,   DirectionalLayout.LayoutConfig.MATCH_PARENT);

scrollView.setLayoutConfig(scrollConfig);
 
DirectionalLayout.LayoutConfig config =   new   DirectionalLayout.LayoutConfig(DirectionalLayout.LayoutConfig.MATCH_PARENT,   DirectionalLayout.LayoutConfig.MATCH_CONTENT);
 
myLayout.setLayoutConfig(config);
 
...
 
scrollView.addComponent(myLayout);
 
super.setUIContent(scrollView);

如何实现加载和显示网络图片？

在 config.json 中增加网络权限

{
    "module": {
      "reqPermissions": [
        {"name": "ohos.permission.INTERNET"}
      ]
  }
}

获取并设置网络图片

String   urlImage = "https://www.harmonyos.com/resource/image/community/20201009-164134eSpace.jpg";

HttpURLConnection   connection = null;
 
try {URL url = new URL(urlImage);
         URLConnection urlConnection =   url.openConnection();
         if (urlConnection instanceof   HttpURLConnection) {connection =   (HttpURLConnection) urlConnection;
         }
         if (connection != null) {connection.connect();
                   // 之后可进行 url 的其余操作
                   // 失去服务器返回过去的流对象
                   InputStream inputStream =   urlConnection.getInputStream();
                   ImageSource imageSource = ImageSource.create(inputStream,   new ImageSource.SourceOptions());
                   ImageSource.DecodingOptions   decodingOptions = new ImageSource.DecodingOptions();
                   decodingOptions.desiredPixelFormat   = PixelFormat.ARGB_8888;
                   // 一般解码叠加旋转、缩放、裁剪
                   PixelMap pixelMap = imageSource.createPixelmap(decodingOptions);
                   // 一般解码
                   getUITaskDispatcher().syncDispatch(()   -> {Image image = new   Image(HttpImageSlice.this);
                            DirectionalLayout.LayoutConfig   config = new DirectionalLayout.LayoutConfig(DirectionalLayout.LayoutConfig.MATCH_CONTENT,   DirectionalLayout.LayoutConfig.MATCH_CONTENT);
                       config.setMargins(10, 10,   10, 10);
                            image.setLayoutConfig(config);
                            image.setPixelMap(pixelMap);
                            myLayout.addComponent(image);
                            pixelMap.release();});
         }

}   catch (Exception e) {e.printStackTrace();
}

ListContainer 列表组件如何应用？

在 xml 文件中申明组件

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:width="match_parent"
        ohos:height="match_parent"
        ohos:orientation="vertical">

    <ListContainer
            ohos:id="$+id:list_container"
            ohos:orientation="vertical"
            ohos:width="match_parent"
            ohos:height="match_parent"/>
</DirectionalLayout>

获取 ListContainer 组件，并设置 itemProvider


private void initView() {mListContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);
ListItemProvider listItemProvider = new ListItemProvider();
mListContainer.setItemProvider(listItemProvider);
}

自定义 ListItemProvider 继承 RecycleItemProvider

class ListItemProvider extends RecycleItemProvider {
    @Override
    public int getCount() {return data.size();
    }
    @Override
    public long getItemId(int i) {return 0;}
    @Override
    public Component getComponent(int position, Component convertView, ComponentContainer componentContainer) {Component component = LayoutScatter.getInstance(getContext())
                .parse(ResourceTable.Layout_layout_container_item, null, false);
        if (!(component instanceof ComponentContainer)) {return null;}
        ComponentContainer rootLayout = (ComponentContainer) component;
        Text rightText = (Text) rootLayout.findComponentById(ResourceTable.Id_content);
        rightText.setText(data.get(position));
        return component;
    }
}

如何读取利用的资源文件?

对于图片文件，倡议放到 base/media 目录下，Image 组件能够间接设置，办法如下。

Image image = (Image) findComponentById(ResourceTable.Id_component_image);
image.setPixelMap(ResourceTable.Media_huawei);

对于 rawfile 文件的读写，请参考上面的办法：

ohos.global.resource.ResourceManager resourceManager = getApplicationContext().getResourceManager();
ohos.global.resource.RawFileEntry rawFileEntry = resourceManager.getRawFileEntry("resources/rawfile/test.png");
RawFileDescriptor rawFileDescriptor = rawFileEntry.openRawFileDescriptor();
// 或者
Resource resource = rawFileEntry.openRawFile();

应用 JS 开发时，如何获取地位信息？

导入获取地位模块，并调用 getLocation 办法获取地位信息

import geolocation from '@system.geolocation';
export default {
    data: {
        longitude: 0.0,
        latitude: 0.0
    },
    onInit() {this.getLocation();
    },
    getLocation() {
        var temp = this;
        geolocation.getLocation({success: function(data) {console.info("get location success，longitude:" + data.longitude +", latitude:" + data.latitude);
                temp.longitude = data.longitude
                temp.latitude = data.latitude;
            },
            fail: function(data, code) {console.error("get location failed, code:" + code + ",  data:" + data);
            },
            complete: function() {console.info("get location complete");
            }
        });
    }
}

在 config.json 中减少获取地位信息的权限

"reqPermissions": [
  {"name": "ohos.permission.LOCATION"}
],

开发一个利用反对左右滑动的操作，然而在模拟器中右滑时，默认跳转到零碎页面，并退出利用，如何禁用零碎右滑？

笼罩 MainAbility 中的 onTouchEvent 办法，实现如下

@Override
protected boolean onTouchEvent(TouchEvent event) {super.onTouchEvent(event);
    return true;
}

Text 控件中文字目前不反对 \n 换行，如何进行换行？

能够应用零碎主动换行，放弃两行文字长度统一，实现如下

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
                   ohos:width="match_parent"
                   ohos:height="match_parent"
                   ohos:orientation="vertical">
    <Text
            ohos:id="$+id:text"
            ohos:width="150vp"
            ohos:height="match_content"
            ohos:multiple_lines="true"
            ohos:max_text_lines="2"
            ohos:auto_font_size="true"
            ohos:text="目前车辆尊享服务已过期, 车主续费后才可持续应用"/>
</DirectionalLayout>

定义了一个公共的 XML 布局文件，如何在其余 XML 布局文件中援用这个公共的 XML 布局文件？

能够通过 include 标签援用其余的 XML 布局文件，示例如下：

<?xml version="1.0" encoding="utf-8"?>
<include ohos:id="$+id:include_layout"
             ohos:layout="$layout:include_layout"
             ohos:width="match_parent"
             ohos:height="match_content"/>
</DirectionalLayout>

NA

如何自定义 Swtich 控件的开关两个状态下的按钮色彩？

在资源文件 graphic 文件下创立 bg_element.xml 和 fg_element.xml，bg_element.xml 文件内容如下


<?xml version="1.0" encoding="utf-8"?>

<shape
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:shape="rectangle">

    <corners
            ohos:radius="30"/>
    <solid
            ohos:color="#424242"/>
</shape>

fg_element.xml 文件内容如下


<?xml version="1.0" encoding="utf-8"?>

<shape
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:shape="oval">
    <solid
            ohos:color="#D81B60"/>
</shape>

代码实现自定义色彩：


private void setupSwitch() {mSwitch = (Switch) findComponentById(ResourceTable.Id_switch_custom);

    Element elementBackground = ElementScatter.getInstance(this).parse(ResourceTable.Graphic_bg_element);

    mSwitch.setTrackElement(elementBackground);

    Element elementThumb = ElementScatter.getInstance(this).parse(ResourceTable.Graphic_fg_element);

    mSwitch.setThumbElement(elementThumb);

    mSwitch.setClickedListener(new Component.ClickedListener() {

        @Override

        public void onClick(Component component) {Log.i("switch:" + mSwitch.isChecked());

        }

    });

}

如何播放本地视频文件和网络视频？

创立布局文件 video_player_layout.xml，内容如下

<?xml version="1.0" encoding="utf-8"?>

<DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
                   ohos:id="$+id:video_player_dl"
                   ohos:width="match_parent"
                   ohos:height="match_parent"
                   ohos:orientation="vertical">
</DependentLayout>

定义上面的变量，内容如下：

private static Player mPlayer;
private SurfaceProvider mSurfaceProvider;
private DependentLayout mLayout;

实现 SurfaceOps.Callback 接口，代码如下：

class VideoSurfaceCallback implements SurfaceOps.Callback {
    @Override
    public void surfaceCreated(SurfaceOps surfaceOps) {Log.i("surfaceCreated() called.");
        if (mSurfaceProvider.getSurfaceOps().isPresent()) {Surface surface = mSurfaceProvider.getSurfaceOps().get().getSurface();
            playUrl(surface);
        }
    }
    @Override
    public void surfaceChanged(SurfaceOps surfaceOps, int i, int i1, int i2) {Log.i("surfaceChanged() called.");
    }
    @Override
    public void surfaceDestroyed(SurfaceOps surfaceOps) {Log.i("surfaceDestroyed() called.");
    }
}

实现 Player.IplayerCallback 接口，代码如下：

private class VideoPlayerCallback implements Player.IPlayerCallback {
    @Override
    public void onPrepared() {Log.i("onPrepared");
    }
    @Override
    public void onMessage(int i, int i1) {Log.i("onMessage");
    }
    @Override
    public void onError(int i, int i1) {Log.i("onError: i=" + i + ", i1=" + i1);
    }
    @Override
    public void onResolutionChanged(int i, int i1) {Log.i("onResolutionChanged");
    }
    @Override
    public void onPlayBackComplete() {Log.i("onPlayBackComplete");
        if (mPlayer != null) {mPlayer.stop();
            mPlayer = null;
        }
    }
    @Override
    public void onRewindToComplete() {Log.i("onRewindToComplete");
    }
    @Override
    public void onBufferingChange(int i) {Log.i("onBufferingChange");
    }
    @Override
    public void onNewTimedMetaData(Player.MediaTimedMetaData mediaTimedMetaData) {Log.i("onNewTimedMetaData");
    }
    @Override
    public void onMediaTimeIncontinuity(Player.MediaTimeInfo mediaTimeInfo) {Log.i("onMediaTimeIncontinuity");
    }
}

实现播放本地文件的办法，其中 test.mp4 文件放到资源文件目录下，内容如下：


private void playLocalFile(Surface surface) {
    try {RawFileDescriptor filDescriptor = getResourceManager().getRawFileEntry("resources/rawfile/test.mp4").openRawFileDescriptor();
        Source source = new Source(filDescriptor.getFileDescriptor(),filDescriptor.getStartPosition(),filDescriptor.getFileSize());
        mPlayer.setSource(source);
        mPlayer.setVideoSurface(surface);
        mPlayer.setPlayerCallback(new VideoPlayerCallback());
        mPlayer.prepare();
        mSurfaceProvider.setTop(0);
        mPlayer.play();} catch (Exception e) {Log.e("playUrl Exception:" + e.getMessage());
    }
}

实现播放网络 URL 的办法，其中 video url 为视频资源 URL，内容如下：


private void playUrl(Surface surface) {

    try {Source source = new Source("video url");
        mPlayer.setSource(source);
        mPlayer.setVideoSurface(surface);
        mPlayer.setPlayerCallback(new VideoPlayerCallback());
        mPlayer.prepare();
        mSurfaceProvider.setTop(0);
        mPlayer.play();} catch (Exception e) {Log.e("playUrl Exception:" + e.getMessage());
    }
}

播放网络视频，须要申请网络应用权限，在 config.json 中减少如下内容：

"reqPermissions": [
      {"name": "ohos.permission.INTERNET"},
]

原文链接：https://developer.huawei.com/consumer/cn/forum/topic/0204410755673870341?fid=0101303901040230869

原作者：eva3w

正文完

程序员

发表至：程序员

2020-11-18

0

关于程序员:2022年4月20日第13天

关于程序员:融云斩获-2022-中国信创数字化办公门户卓越产品奖

关于程序员:华为云云计算服务

关于程序员:送你5个MindSpore算子使用经验

关于c++:理解复杂数组声明

关于程序员:官方总结鸿蒙应用开发常见问题与实现方法典型案例

1 自定义 Dialog 的布局

1.1 问题形容

1.2 实现办法

1.3 实际效果

2 设置控件背景色彩

2.1 问题形容

2.2 实现办法

2.3 实际效果

3 ScrollView 嵌套 DirectionalLayout 进行滚动

3.1 问题形容

3.2 实现办法

3.3 实际效果

4 加载和显示网络图片

4.1 问题形容

4.2 实现办法

4.3 实际效果

5 ListContainer 列表组件的应用

5.1 问题形容

5.2 实现办法

5.3 实际效果

6 读取资源文件

6.1 问题形容

6.2 实现办法

6.3 实际效果

7 JS 办法获取地位信息

7.1 问题形容

7.2 实现办法

7.3 实际效果

8 禁用手表中零碎的左右滑动

8.1 问题形容

8.2 实现办法

8.3 实际效果

9 Text 控件中文字换行

9.1 问题形容

9.2 实现办法

9.3 实际效果

10 在一个布局 xml 中引入其余 xml 布局文件

10.1 问题形容

10.2 实现办法

10.3 实际效果

11 自定义 Swtich 控件的色彩

11.1 问题形容

11.2 实现办法

11.3 实际效果

12 视频播放

12.1 问题形容

12.2 实现办法

12.3 实际效果

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）