输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
文档管理中心

HMS Core

App Services
输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
CTRL+K
指南

Customized View自定义页面元素

更新时间: 2024-07-11 02:41
本文导读

以下为一些常见的页面元素示例供开发者参考。

Android

  • 自定义标题
    定义文本信息为“title”变量。在layout文件中配置如下示例：
    <TextView 
    android:layout_marginStart="10sp" 
    android:layout_toEndOf="@+id/back_img" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center_vertical" 
    android:text="@string/title" 
    android:textAllCaps="false" 
    android:textColor="#FFFFFF" 
    android:textSize="20sp" 
    android:textStyle="bold" />
  • 自定义返回按钮
    定义id为“back_img”的页面视图，并且绑定点击返回操作。在layout文件中配置如下示例：
    <ImageView  
    android:id="@+id/back_img"  
    android:layout_width="48dp"  
    android:layout_height="48dp"  
    android:padding="12dp"  
    android:layout_alignParentStart="true"  
    android:layout_marginStart="12dp"  
    android:layout_marginTop="4dp"  
    android:gravity="center"  
    android:src="@drawable/back" />
    在自定义的activity中绑定返回操作示例：
    private void setBackOperation() { 
    ImageView backBtn = findViewById(R.id.back_img); 
    backBtn.setOnClickListener(new View.OnClickListener() { 
        @Override 
        public void onClick(View v) { 
            DefinedActivity.this.finish(); 
        } 
    }); 
}
  • 自定义闪光灯按钮
    定义闪光灯按钮的页面视图，并且绑定开启关闭操作。在layout文件中配置如下示例：
    <ImageView 
    android:id="@+id/flush_btn" 
    android:layout_width="48dp" 
    android:layout_height="48dp" 
    android:layout_alignParentBottom="true" 
    android:layout_centerHorizontal="true" 
    android:visibility="gone" 
    android:gravity="center" 
    android:src="@drawable/flashlight_off" />
    在自定义的activity中绑定闪光灯按钮操作示例：
    private void setFlashOperation() { 
    ImageView flushBtn = findViewById(R.id.flush_btn);
    int[] img = new int[]{R.drawable.flashlight_on, R.drawable.flashlight_off};
    flushBtn.setOnClickListener(new View.OnClickListener() { 
        @Override 
        public void onClick(View v) { 
            if (remoteView.getLightStatus()) { 
                remoteView.switchLight(); 
                flushBtn.setImageResource(img[1]); 
            } else { 
                remoteView.switchLight(); 
                flushBtn.setImageResource(img[0]); 
            } 
        } 
    }); 
}
  • 自定义扫码界面
    绘制扫码框，在layout文件中配置如下示例：
    <RelativeLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <ImageView 
        android:layout_width="match_parent" 
        android:layout_height="match_parent" 
        android:layout_centerInParent="true" 
        android:layout_centerHorizontal="true" 
        android:background="#FF000000" 
        android:alpha="0.1" /> 
    <TextView 
        android:layout_marginTop="225dp" 
        android:layout_centerHorizontal="true" 
        android:text="@string/scan_tip" 
        android:textAllCaps="false" 
        android:textColor="#FFFFFF" 
        android:textSize="15sp" 
        android:textStyle="bold" 
        android:layout_height="20dp" 
        android:layout_width="220dp" /> 
    <!-- 设置扫码框--> 
    <ImageView 
        android:layout_width="300dp" 
        android:layout_height="300dp" 
        android:layout_centerInParent="true" 
        android:layout_centerHorizontal="true" 
        android:background="@drawable/cloors" /> 
</RelativeLayout>
    实现扫码框边框样式样例：
    <?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:shape="rectangle"> 
    <!-- 设置边框的宽度和颜色 --> 
    <stroke android:width="3dp" android:color="#e1ffff"/> 
    <!-- 设置框内的填充色  --> 
    <solid android:color="#1f00BCD4"/> 
    <!-- 设置圆角 --> 
    <corners android:radius="5dip"/> 
    <!-- 设置内边距 --> 
    <padding 
        android:left="2dp" 
        android:top="2dp" 
        android:right="2dp" 
        android:bottom="2dp" /> 
</shape>

iOS

  • 自定义标题
    CGRect statusBarFrame = [[UIApplication sharedApplication] statusBarFrame];
UILabel *titleLabel = [[UILabel alloc] init];
// 标题Label的位置
titleLabel.frame = CGRectMake(0, statusBarFrame.size.height+10, self.view.frame.size.width, 40);
titleLabel.text = @"ScanKit";
titleLabel.textAlignment = NSTextAlignmentCenter;
titleLabel.font = [UIFont fontWithName:@"Arial" size:20];
titleLabel.textColor = [UIColor whiteColor];
[hmsCustomScanViewController.view addSubview:titleLabel];
  • 自定义返回按钮

    定义图片名为“personal_back.png”的页面视图，并且绑定点击返回操作。在“.m”文件中配置如下示例：

    UIButton *backButton = [UIButton buttonWithType:0];
backButton.frame = CGRectMake(0, 10+statusBarFrame.size.height, 75, 40);
[backButton setImage:[UIImage imageNamed:@"personal_back.png"] forState:UIControlStateNormal];
[backButton addTarget:self action:@selector(backAction) forControlEvents:UIControlEventTouchUpInside];
[hmsCustomScanViewController.view addSubview:backButton];
    在自定义按钮中绑定返回操作示例：
    - (void)backAction:(id)sender{
    [hmsCustomScanViewController backAction];
}
    说明

    hmsCustomScanViewController被初始化之前，需要定义为全局变量。

  • 自定义扫码页面
    绘制扫码框，在“.m”文件中配置如下示例：
    UIImageView  *scanView = [[UIImageView alloc] init];
scanView.bounds = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height);
scanView.center = CGPointMake(self.view.frame.size.width/2.0, self.view.frame.size.height/2.0);
scanView.backgroundColor = [UIColor clearColor];
scanView.image = [UIImage imageNamed:@"scanImage.png"];
[hmsCustomScanViewController.view addSubview:scanView];
// 扫码框浮动条，需要加入动画上下浮动
UIImageView *lineLabel = [[UIImageView alloc] initWithFrame:CGRectMake(scanView.frame.origin.x+2.0, scanView.frame.origin.y + 2.0, scanView.frame.size.width-4.0, 3.0)];
lineLabel.image = [UIImage imageNamed:@"scanLine.png"];
[hmsCustomScanViewController.view addSubview:lineLabel];
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 指南 中进行搜索
请输入您想要搜索的关键词