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 实现办法
- 应用 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); 3.3 实际效果
4 加载和显示网络图片
4.1 问题形容
如何实现加载和显示网络图片？
4.2 实现办法
- 在 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();
}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 实现办法
- 对于图片文件，倡议放到 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();6.3 实际效果
7 JS 办法获取地位信息
7.1 问题形容
应用 JS 开发时，如何获取地位信息？
7.2 实现办法
- 导入获取地位模块，并调用 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"}
],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