【Android、IOS、Flutter、鸿蒙、ReactNative 】自定义View

Android Java 自定义View

步骤

创建一个新的Java类,继承自ViewViewGroup或其他任何一个视图类。

如果需要,重写构造函数以支持不同的初始化方式。

重写onMeasure方法以提供正确的测量逻辑。

重写onDraw方法以实现绘制逻辑。

根据需要重写其他方法,如onSizeChangedonTouchEvent等。

自定义 View 

public class CustomView extends View {private Paint paint;public CustomView(Context context) {super(context);init();}public CustomView(Context context, @Nullable AttributeSet attrs) {super(context, attrs);init();}private void init() {paint = new Paint();paint.setColor(Color.BLUE);paint.setStyle(Paint.Style.FILL);}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {int defaultSize = 200;setMeasuredDimension(getDefaultSize(defaultSize, widthMeasureSpec),getDefaultSize(defaultSize, heightMeasureSpec));}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);// 绘制一个简单的蓝色圆形canvas.drawCircle(getWidth() / 2, getHeight() / 2, 100, paint);}
}
<com.example.yourapplication.CustomViewandroid:layout_width="wrap_content"android:layout_height="wrap_content" />

Android Java 自定义View

步骤

创建一个新的Kotlin类,继承自View或其子类(如TextViewLinearLayout等)。

重写构造函数,至少提供一个能够接受ContextAttributeSet的构造函数。

如果需要,重写其他构造函数。

重写onMeasure方法以提供正确的测量逻辑。

重写onDraw方法以提供绘制逻辑。

根据需要重写其他方法,如onSizeChangedonTouchEvent等。

自定义View 

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.util.AttributeSet
import android.view.Viewclass CustomView @JvmOverloads constructor(context: Context,attrs: AttributeSet? = null,defStyleAttr: Int = 0
) : View(context, attrs, defStyleAttr) {private val paint = Paint().apply {color = Color.REDstrokeWidth = 5f}override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {// 设置默认的大小val defaultSize = 200setMeasuredDimension(resolveSize(defaultSize, widthMeasureSpec),resolveSize(defaultSize, heightMeasureSpec))}override fun onDraw(canvas: Canvas) {super.onDraw(canvas)// 绘制一个简单的矩形canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), paint)}
}

ios Object-c 自定义 View

在Objective-C中创建自定义视图通常涉及到继承自UIView类并实现自定义的初始化方法、绘图方法和其他需要的方法。以下是一个简单的自定义视图的例子:

 自定义View

// MyCustomView.h
#import <UIKit/UIKit.h>@interface MyCustomView : UIView@end// MyCustomView.m
#import "MyCustomView.h"@implementation MyCustomView// 初始化方法,可以自定义或使用默认的初始化方法
- (instancetype)initWithFrame:(CGRect)frame {self = [super initWithFrame:frame];if (self) {// 自定义初始化代码}return self;
}// 当视图需要重绘时调用
- (void)drawRect:(CGRect)rect {// 获取图形上下文CGContextRef context = UIGraphicsGetCurrentContext();// 在这里绘制图形或图像// 例如,绘制一个简单的红色矩形CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);CGContextFillRect(context, rect);
}@end
// 在你的视图控制器中
#import "MyCustomView.h"// ...MyCustomView *customView = [[MyCustomView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
[self.view addSubview:customView];

IOS Swift 自定义 View

在Swift中创建自定义视图通常涉及到定义一个继承自UIView的新类,并且通常需要重写init(frame:)layoutSubviews()方法。以下是一个简单的自定义视图的例子:

import UIKitclass CustomView: UIView {// 自定义视图的初始化override init(frame: CGRect) {super.init(frame: frame)setupView()}// 使用Storyboard或者XIB时需要的初始化方法required init?(coder aDecoder: NSCoder) {super.init(coder: aDecoder)setupView()}// 视图布局发生变化时调用override func layoutSubviews() {super.layoutSubviews()// 在这里可以根据视图的新布局进行调整}// 设置视图的共有属性private func setupView() {backgroundColor = .blue // 设置背景颜色为蓝色// 其他自定义设置...}// 可以添加更多自定义的方法和属性
}
class ViewController: UIViewController {override func viewDidLoad() {super.viewDidLoad()let customView = CustomView()customView.frame = CGRect(x: 50, y: 100, width: 200, height: 200)view.addSubview(customView)}
}

HarmonyOS Next 自定义View

@Component 表示这是一个自定义组件

@Entry 表示该自定义组件为入口组件

@State 表示组件中的状态变量,状态变量变化会触发UI刷新

UI部分 :以声明式的方式来描述UI的结构

@Component
export struct HelloPage {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(40).fontWeight(FontWeight.Bold).onClick(() => {this.message = "Hello Harmonyos"})}.width('100%')}.height('100%')}
}

React Native 自定义组件

描述

定义组件结构: 使用 JSX 定义组件的 UI 结构。
定义组件样式: 使用 StyleSheet 或内联样式定义组件的样式。
处理组件逻辑: 使用 React Hooks(如 useState, useEffect)管理组件状态和副作用。
定义组件接口: 通过 props 传递数据和事件处理器,实现组件的可配置性。

自定义组件 

// components/MyButton.js
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';const MyButton = ({ title, onPress, style, textStyle }) => {return (<TouchableOpacity style={[styles.button, style]} onPress={onPress}><Text style={[styles.text, textStyle]}>{title}</Text></TouchableOpacity>);
};const styles = StyleSheet.create({button: {backgroundColor: '#007bff',padding: 10,borderRadius: 5,alignItems: 'center',},text: {color: '#fff',fontSize: 16,},
});export default MyButton;
// screens/HomeScreen.js
import React from 'react';
import { View, StyleSheet } from 'react-native';
import MyButton from '../components/MyButton';const HomeScreen = () => {const handlePress = () => {alert('Button Pressed!');};return (<View style={styles.container}><MyButton title="Press Me" onPress={handlePress} /><MyButton title="Custom Style" onPress={handlePress} style={{ backgroundColor: '#28a745' }} textStyle={{ fontSize: 18 }} /></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',padding: 20,},
});export default HomeScreen;

Flutter 自定义Widget

描述

创建一个新的Dart文件。

导入必要的Flutter库。

定义一个继承自StatelessWidgetStatefulWidget的类。

重写build方法以返回一个Widget。

自定义Widget 

import 'package:flutter/material.dart';class CustomButton extends StatelessWidget {final String label;final VoidCallback onPressed;const CustomButton({Key? key, required this.label, required this.onPressed}) : super(key: key);@overrideWidget build(BuildContext context) {return ElevatedButton(onPressed: onPressed,child: Text(label),);}
}

CustomButton是一个继承自StatelessWidget的自定义Widget,它接受两个参数:labelonPressedbuild方法返回一个ElevatedButton,它是Flutter提供的一个按钮Widget,并使用构造函数中传入的参数。

void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(body: Center(child: CustomButton(label: 'Click Me',onPressed: () {// Handle button press},),),),);}
}

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/61134.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OceanBase 分区表详解

1、分区表的定义 在OceanBase数据库中&#xff0c;普通的表数据可以根据预设的规则被分割并存储到不同的数据区块中&#xff0c;同一区块的数据是在一个物理存储上。这样被分区块的表被称为分区表&#xff0c;而其中的每一个独立的数据区块则被称为一个分区。 如下图所示&…

【Android原生问题分析】夸克、抖音划动无响应问题【Android14】

1 问题描述 偶现问题&#xff0c;用户打开夸克、抖音后&#xff0c;在界面上划动无响应&#xff0c;但是没有ANR。回到Launcher后再次打开夸克/抖音&#xff0c;发现App的界面发生了变化&#xff0c;但是仍然是划不动的。 2 log初分析 复现问题附近的log为&#xff1a; 用户…

使用 K-means 算法进行豆瓣读书数据的文本聚类分析

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…

Django5 2024全栈开发指南(二):Django项目配置详解

目录 一、基本配置信息二、资源文件配置2.1 资源路由——STATIC_URL2.2 资源集合——STATICFILES_DIRS2.3 资源部署——STATIC_ROOT2.2.4 媒体资源——MEDIA 三、模板配置四、数据库配置4.1 mysqlclient连接MySQL4.2 pymysql连接MySQL4.3 多个数据库的连接方式4.4 使用配置文件…

数据结构-二叉搜索树(Java语言)

目录 1.概念 2.查找search 3.插入insert ​编辑4.删除remove&#xff08;难点&#xff09; 5.性能分析 1.概念 二叉搜索树又称二叉排序树&#xff0c;它或者是一棵空树&#xff0c;或者是具有以下性质的二叉树 : 1.若它的左子树不为空&#xff0c;则左子树上所有节点的值都…

学习笔记:黑马程序员JavaWeb开发教程(2024.11.18)

9.8 Mybatis-基础操作-查询&#xff08;条件查询&#xff09; 需要模糊查询&#xff0c;根据要求&#xff0c;我们需要在关键词前后都加上%&#xff0c;但是我们不能使用‘%#{内容}%’的形式&#xff0c;因为#{内容}最终会变成?&#xff0c;而?不能放在‘’之中&#xff…

数据分析-48-时间序列变点检测之在线实时数据的CPD

文章目录 1 时间序列结构1.1 变化点的定义1.2 结构变化的类型1.2.1 水平变化1.2.2 方差变化1.3 变点检测1.3.1 离线数据检测方法1.3.2 实时数据检测方法2 模拟数据2.1 模拟恒定方差数据2.2 模拟变化方差数据3 实时数据CPD3.1 SDAR学习算法3.2 Changefinder模块3.3 恒定方差CPD3…

学习大数据DAY61 宽表加工

目录 模型设计 加工宽表 任务调度&#xff1a; 大表 - 把很多数据整合起来 方便后续的明细查询和指标计算 模型设计 设计 建模 设计: excel 文档去编写 建模: 使用建模工具 PowerDesigner Navicat 在线画图工具... 把表结构给绘 制出来 共享\项目课工具\pd 加工宽表 数…

C#.Net筑基-模式匹配汇总

01、模式匹配概述 从C#7开始支持的 模式匹配 语法&#xff08;糖&#xff0c;挺甜&#xff09;&#xff0c;可非常灵活的对数据进行条件匹配和提取&#xff0c;经过多个版本的完善&#xff0c;已经非常强大了。 C# 支持多种模式&#xff0c;包括声明、类型、常量、关系、属性…

Python蓝桥杯刷题1

1.确定字符串是否包含唯一字符 题解&#xff1a;调用count函数计算每一个字符出现的次数&#xff0c;如果不等于1就输出no&#xff0c;并且结束循环&#xff0c;如果等于1就一直循环直到计算到最后一个字符&#xff0c;若最后一个字符也满足条件&#xff0c;则输出yes import…

Unity类银河战士恶魔城学习总结(P127 Stat ToolTip属性提示)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了把鼠标放到属性上面就会显示属性的作用 UI_StatToolTip.cs 这段代码实现了一个UI提示框&#xff08;ToolTip&#xff09;功能…

计算机编程中的事件驱动编程模型及其在构建响应式用户界面中的应用

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 计算机编程中的事件驱动编程模型及其在构建响应式用户界面中的应用 计算机编程中的事件驱动编程模型及其在构建响应式用户界面中…

ROS第九梯:ROS+VSCode+Python+C++自定义消息发布和订阅

首先,Python版本的ROS项目和C++版本的ROS项目前期创建功能包的步骤基本一致,具体可参考第二章。 费一步:新建msg文件 在功能包(data_input)目录下创建一个msg文件夹,并在msg文件夹下创建一个名为Box的msg文件,具体如下图所示: 该msg文件为一个用于描述3D Box的文件,…

selenium元素定位---元素点击交互异常解决方法

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、异常原因 在编写ui自动化时&#xff0c;执行报错元素无法点击&#xff1a;ElementClickInterceptedException 具体报错&#xff1a;selenium.common.exc…

Front Panel Window Bounds 与 Front Panel Window Bounds 的区别与应用

在LabVIEW中&#xff0c;Front Panel Window Bounds 和 Front Panel WindowBounds 是两个不同的属性节点&#xff0c;用于描述前面板窗口的位置和大小。它们的区别主要体现在它们表示的是窗口的不同部分&#xff0c;具体如下&#xff1a; 1 Window Bounds&#xff1a;调整整个…

H.265流媒体播放器EasyPlayer.js播放器出现加载视频等待画面时长过长的原因排查

在数字媒体时代&#xff0c;用户体验是衡量播放器性能的关键指标之一。EasyPlayer.js网页web无插件播放器作为一款流行的Web视频播放器&#xff0c;其加载速度和响应时间直接影响着用户的观看体验。 1、问题描述 加载视频等待画面时长过长。 2、可能的原因&#xff1a; 检查下…

计算机网络-MSTP基础实验一(单域多实例)

前面我们已经大致了解了MSTP的基本概念和工作原理&#xff0c;但是我自己也觉得MSTP的理论很复杂不结合实验是很难搞懂的&#xff0c;今天来做一个配套的小实验以及一些配置命令。 一、网络拓扑 单域多实例拓扑 基本需求&#xff1a;SW1为VLAN10的网关&#xff0c;SW2为VLAN20的…

大数据-227 离线数仓 - Flume 自定义拦截器(续接上节) 采集启动日志和事件日志

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; Java篇开始了&#xff01; 目前开始更新 MyBatis&#xff0c;一起深入浅出&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff0…

【langchain4j】AIservices能够实现更加灵活的chain

文章目录 AI service介绍如何工作的AiServices提供的能力支持的返回形式 简单的例子&#xff1a;接收用户消息&#xff0c;并按规定返回接收单个变量接收更多动态变量 advanced RAGChaining multiple AI Services&#xff1a;多个AiSerives合并到一起相关教程&#xff1a;[Lang…

【UGUI】背包的交互01(道具信息跟随鼠标+道具信息面板显示)

详细程序逻辑过程 初始化物品栏&#xff1a; 在 Awake 方法中&#xff0c;通过标签找到提示框和信息面板。 循环生成10个背包格子&#xff0c;并为每个格子设置图标和名称。 为每个格子添加 UInterMaager232 脚本&#xff0c;以便处理交互事件。 关闭提示框和信息面板&#…