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

1自定义Dialog的布局

1.1 问题形容

如何实现自定义的Dialog?

1.2 实现办法

增加自定义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>

1.3 实际效果

2 设置控件背景色彩

2.1 问题形容

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

2.2 实现办法

形式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);

2.3 实际效果

3 ScrollView嵌套DirectionalLayout进行滚动

3.1 问题形容

ScrollView嵌套DirectionalLayout如何进行滚动?

3.2 实现办法

  1. 应用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>
  1. 应用代码增加,则须要给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); 

3.3 实际效果

4 加载和显示网络图片

4.1 问题形容

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

4.2 实现办法

  1. 在config.json中增加网络权限
{
    "module": {
      "reqPermissions": [
        {
          "name": "ohos.permission.INTERNET"
        }
      ]
  }
}
  1. 获取并设置网络图片
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();
}

4.3 实际效果

5 ListContainer列表组件的应用

5.1 问题形容

ListContainer列表组件如何应用?

5.2 实现办法

在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;
    }
}

5.3 实际效果

6 读取资源文件

6.1 问题形容

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

6.2 实现办法

  1. 对于图片文件,倡议放到base/media目录下,Image组件能够间接设置,办法如下。
Image image = (Image) findComponentById(ResourceTable.Id_component_image);
image.setPixelMap(ResourceTable.Media_huawei);
  1. 对于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();

6.3 实际效果

7 JS办法获取地位信息

7.1 问题形容

应用JS开发时,如何获取地位信息?

7.2 实现办法

  1. 导入获取地位模块,并调用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");
            }
        });
    }
}
  1. 在config.json中减少获取地位信息的权限
"reqPermissions": [
  {
    "name": "ohos.permission.LOCATION"
  }
],

7.3 实际效果

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

8.1 问题形容

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

8.2 实现办法

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

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

8.3 实际效果

9 Text控件中文字换行

9.1 问题形容

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

9.2 实现办法

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

<?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>

9.3 实际效果

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

10.1 问题形容

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

10.2 实现办法

能够通过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>

10.3 实际效果

NA

11 自定义Swtich控件的色彩

11.1 问题形容

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

11.2 实现办法

在资源文件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());

        }

    });

}

11.3 实际效果

12 视频播放

12.1 问题形容

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

12.2 实现办法

创立布局文件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"
      },
]

12.3 实际效果


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

原作者:eva3w

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据