【Android、IOS、Flutter、鸿蒙、ReactNative 】自界说View

Android Java 自界说View

步调

创建一个新的Java类，继承自View、ViewGroup或其他任何一个视图类。
假如必要，重写构造函数以支持差异的初始化方式。
重写onMeasure方法以提供精确的丈量逻辑。
重写onDraw方法以实现绘制逻辑。
根据必要重写其他方法，如onSizeChanged、onTouchEvent等。
自界说 View 

2. public class CustomView extends View {
4.     private Paint paint;
6.     public CustomView(Context context) {
7.         super(context);
8.         init();
9.     }
11.     public CustomView(Context context, @Nullable AttributeSet attrs) {
12.         super(context, attrs);
13.         init();
14.     }
16.     private void init() {
17.         paint = new Paint();
18.         paint.setColor(Color.BLUE);
19.         paint.setStyle(Paint.Style.FILL);
20.     }
22.     @Override
23.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
24.         int defaultSize = 200;
25.         setMeasuredDimension(
26.             getDefaultSize(defaultSize, widthMeasureSpec),
27.             getDefaultSize(defaultSize, heightMeasureSpec)
28.         );
29.     }
31.     @Override
32.     protected void onDraw(Canvas canvas) {
33.         super.onDraw(canvas);
34.         // 绘制一个简单的蓝色圆形
35.         canvas.drawCircle(getWidth() / 2, getHeight() / 2, 100, paint);
36.     }
37. }

复制代码

2. <com.example.yourapplication.CustomView
3.     android:layout_width="wrap_content"
4.     android:layout_height="wrap_content" />

复制代码

Android Java 自界说View

步调

创建一个新的Kotlin类，继承自View或其子类（如TextView, LinearLayout等）。
重写构造函数，至少提供一个可以大概担当Context和AttributeSet的构造函数。
假如必要，重写其他构造函数。
重写onMeasure方法以提供精确的丈量逻辑。
重写onDraw方法以提供绘制逻辑。
根据必要重写其他方法，如onSizeChanged，onTouchEvent等。
自界说View 

2. import android.content.Context
3. import android.graphics.Canvas
4. import android.graphics.Color
5. import android.graphics.Paint
6. import android.util.AttributeSet
7. import android.view.View
9. class CustomView @JvmOverloads constructor(
10.     context: Context,
11.     attrs: AttributeSet? = null,
12.     defStyleAttr: Int = 0
13. ) : View(context, attrs, defStyleAttr) {
15.     private val paint = Paint().apply {
16.         color = Color.RED
17.         strokeWidth = 5f
18.     }
20.     override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
21.         // 设置默认的大小
22.         val defaultSize = 200
23.         setMeasuredDimension(
24.             resolveSize(defaultSize, widthMeasureSpec),
25.             resolveSize(defaultSize, heightMeasureSpec)
26.         )
27.     }
29.     override fun onDraw(canvas: Canvas) {
30.         super.onDraw(canvas)
31.         // 绘制一个简单的矩形
32.         canvas.drawRect(0f, 0f, width.toFloat(), height.toFloat(), paint)
33.     }
34. }

复制代码

ios Object-c 自界说 View

在Objective-C中创建自界说视图通常涉及到继承自UIView类并实现自界说的初始化方法、画图方法和其他必要的方法。以下是一个简朴的自界说视图的例子：
 自界说View

2. // MyCustomView.h
3. #import <UIKit/UIKit.h>
5. @interface MyCustomView : UIView
7. @end
9. // MyCustomView.m
10. #import "MyCustomView.h"
12. @implementation MyCustomView
14. // 初始化方法，可以自定义或使用默认的初始化方法
15. - (instancetype)initWithFrame:(CGRect)frame {
16.     self = [super initWithFrame:frame];
17.     if (self) {
18.         // 自定义初始化代码
19.     }
20.     return self;
21. }
23. // 当视图需要重绘时调用
24. - (void)drawRect:(CGRect)rect {
25.     // 获取图形上下文
26.     CGContextRef context = UIGraphicsGetCurrentContext();
27.    
28.     // 在这里绘制图形或图像
29.     // 例如，绘制一个简单的红色矩形
30.     CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor);
31.     CGContextFillRect(context, rect);
32. }
34. @end

复制代码

2. // 在你的视图控制器中
3. #import "MyCustomView.h"
5. // ...
7. MyCustomView *customView = [[MyCustomView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
8. [self.view addSubview:customView];

复制代码

IOS Swift 自界说 View

在Swift中创建自界说视图通常涉及到界说一个继承自UIView的新类，而且通常必要重写init(frame和layoutSubviews()方法。以下是一个简朴的自界说视图的例子：

2. import UIKit
4. class CustomView: UIView {
5.     // 自定义视图的初始化
6.     override init(frame: CGRect) {
7.         super.init(frame: frame)
8.         setupView()
9.     }
10.    
11.     // 使用Storyboard或者XIB时需要的初始化方法
12.     required init?(coder aDecoder: NSCoder) {
13.         super.init(coder: aDecoder)
14.         setupView()
15.     }
16.    
17.     // 视图布局发生变化时调用
18.     override func layoutSubviews() {
19.         super.layoutSubviews()
20.         // 在这里可以根据视图的新布局进行调整
21.     }
22.    
23.     // 设置视图的共有属性
24.     private func setupView() {
25.         backgroundColor = .blue // 设置背景颜色为蓝色
26.         // 其他自定义设置...
27.     }
28.    
29.     // 可以添加更多自定义的方法和属性
30. }

复制代码

2. class ViewController: UIViewController {
4.     override func viewDidLoad() {
5.         super.viewDidLoad()
6.         
7.         let customView = CustomView()
8.         customView.frame = CGRect(x: 50, y: 100, width: 200, height: 200)
9.         view.addSubview(customView)
10.     }
11. }

复制代码

HarmonyOS Next 自界说View

@Component 表现这是一个自界说组件
@Entry 表现该自界说组件为入口组件
@State 表现组件中的状态变量，状态变量厘革会触发UI革新
UI部门 ：以声明式的方式来形貌UI的布局

2. @Component
3. export struct HelloPage {
4.   @State message: string = 'Hello World'
6.   build() {
7.     Row() {
8.       Column() {
9.         Text(this.message)
10.           .fontSize(40)
11.           .fontWeight(FontWeight.Bold)
12.           .onClick(() => {
13.             this.message = "Hello Harmonyos"
14.           })
15.       }
16.       .width('100%')
17.     }
18.     .height('100%')
19.   }
20. }

复制代码

React Native 自界说组件

形貌

界说组件布局： 利用 JSX 界说组件的 UI 布局。
界说组件样式： 利用 StyleSheet 或内联样式界说组件的样式。
处置惩罚组件逻辑： 利用 React Hooks（如 useState, useEffect）管理组件状态和副作用。
界说组件接口： 通过 props 通报数据和变乱处置惩罚器，实现组件的可设置性。
自界说组件 

2. // components/MyButton.js
3. import React from 'react';
4. import { TouchableOpacity, Text, StyleSheet } from 'react-native';
6. const MyButton = ({ title, onPress, style, textStyle }) => {
7.   return (
8.     <TouchableOpacity style={[styles.button, style]} onPress={onPress}>
9.       <Text style={[styles.text, textStyle]}>{title}</Text>
10.     </TouchableOpacity>
11.   );
12. };
14. const styles = StyleSheet.create({
15.   button: {
16.     backgroundColor: '#007bff',
17.     padding: 10,
18.     borderRadius: 5,
19.     alignItems: 'center',
20.   },
21.   text: {
22.     color: '#fff',
23.     fontSize: 16,
24.   },
25. });
27. export default MyButton;

复制代码

2. // screens/HomeScreen.js
3. import React from 'react';
4. import { View, StyleSheet } from 'react-native';
5. import MyButton from '../components/MyButton';
7. const HomeScreen = () => {
8.   const handlePress = () => {
9.     alert('Button Pressed!');
10.   };
12.   return (
13.     <View style={styles.container}>
14.       <MyButton title="Press Me" onPress={handlePress} />
15.       <MyButton title="Custom Style" onPress={handlePress} style={{ backgroundColor: '#28a745' }} textStyle={{ fontSize: 18 }} />
16.     </View>
17.   );
18. };
20. const styles = StyleSheet.create({
21.   container: {
22.     flex: 1,
23.     justifyContent: 'center',
24.     alignItems: 'center',
25.     padding: 20,
26.   },
27. });
29. export default HomeScreen;

复制代码

Flutter 自界说Widget

形貌

创建一个新的Dart文件。
导入须要的Flutter库。
界说一个继承自StatelessWidget或StatefulWidget的类。
重写build方法以返回一个Widget。
自界说Widget 

2. import 'package:flutter/material.dart';
4. class CustomButton extends StatelessWidget {
5.   final String label;
6.   final VoidCallback onPressed;
8.   const CustomButton({Key? key, required this.label, required this.onPressed}) : super(key: key);
10.   @override
11.   Widget build(BuildContext context) {
12.     return ElevatedButton(
13.       onPressed: onPressed,
14.       child: Text(label),
15.     );
16.   }
17. }

复制代码

CustomButton是一个继承自StatelessWidget的自界说Widget，它担当两个参数：label和onPressed。build方法返回一个ElevatedButton，它是Flutter提供的一个按钮Widget，并利用构造函数中传入的参数。

2. void main() {
3.   runApp(MyApp());
4. }
6. class MyApp extends StatelessWidget {
7.   @override
8.   Widget build(BuildContext context) {
9.     return MaterialApp(
10.       home: Scaffold(
11.         body: Center(
12.           child: CustomButton(
13.             label: 'Click Me',
14.             onPressed: () {
15.               // Handle button press
16.             },
17.           ),
18.         ),
19.       ),
20.     );
21.   }
22. }

复制代码