【Android、IOS、Flutter、鸿蒙、ReactNative 】文本Text显示

TTO
215 阅读2分钟

XML布局

android:text

<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Android Java TextView"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

image.png

android:textSize

<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Android Java TextView"
    android:textSize="28sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

image.png

android:textStyle

<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Android Java TextView"
    android:textStyle="bold"
    android:textSize="28sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

image.png

文本显示一行

<TextView
    android:id="@+id/textview"
    android:layout_width="200dp"
    android:layout_height="wrap_content"
    android:text="Android Java TextView Android Java TextView Android Java TextView"
    android:textStyle="bold"
    android:textSize="28sp"
    android:maxLines="1"
    android:ellipsize="end"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

image.png

Compose 布局

build.gradle下面配置

image.png

image.png

导入依赖包：

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

class MainComposeActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent { showTextView() }
    }
}

@Preview
@Composable
private fun showTextView() {
    Text(text = "Android Compose TextView",
        fontSize = 28.sp,
        fontStyle = FontStyle.Italic)
}

image.png

文本显示一行

Text(
    text = "Android Compose TextView Android Compose TextView Android Compose TextView ",
    fontSize = 28.sp,
    fontStyle = FontStyle.Italic,
    maxLines = 1,
    overflow = TextOverflow.Ellipsis
)

image.png

Flutter 布局

Text(
  'Flutter Dart TextView',
  style: TextStyle(fontSize: 12.sp, fontWeight: FontWeight.bold),
),

image.png

显示一行文本

Text(
  'Flutter Dart TextView Flutter Dart TextView Flutter Dart TextView ',
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(
    fontSize: 28.sp,
    fontWeight: FontWeight.bold,
  ),
)

image.png

HarmonyOS布局

Text(this.message)
  .fontSize(50)
  .fontWeight(FontWeight.Bold)

image.png

显示一行文本

Text(this.message)
  .fontSize(50)
  .fontWeight(FontWeight.Bold)
  .maxLines(1)
  .textOverflow({overflow:TextOverflow.Ellipsis})

image.png

IOS Object-c 布局

- (void)viewDidLoad {
    [super viewDidLoad];

    // Do any additional setup after loading the view.

    UITextView* textView = [[UITextView alloc]initWithFrame:CGRectMake(0, 100, 320, 300)];

    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc] initWithString:@"IOS Object-c TextView"];

    [attributedString addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:28.0] range:NSMakeRange(0, attributedString.length)];

    textView.attributedText = attributedString;
    [self.view addSubview:textView];
}

image.png

显示一行文本

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    UITextView* textView = [[UITextView alloc]initWithFrame:CGRectMake(0, 100, 320, 300)];

    NSMutableAttributedString *attributedString = [[NSMutableAttributedString alloc]
                                                   initWithString:@"IOS Object-c TextView IOS Object-c TextView IOS Object-c TextView IOS Object-c TextView"];

    [attributedString addAttribute:NSFontAttributeName value:[UIFont boldSystemFontOfSize:28.0] range:NSMakeRange(0, attributedString.length)];

    textView.textContainer.maximumNumberOfLines = 1;
    textView.textContainer.lineBreakMode =  NSLineBreakByTruncatingTail;

    textView.attributedText = attributedString;
    [self.view addSubview:textView];
}

image.png

IOS Swift 布局


attributedString.addAttribute(NSAttributedString.Key.font, value: UIFont.boldSystemFont(ofSize: 28.0), range: NSRange(location: 0, length: attributedString.length))

let textView = UITextView(frame: CGRect(x: 0, y: 100, width: 320, height: 300))

textView.attributedText = attributedString      
self.view.addSubview(textView)

image.png

显示一行文本

override func viewDidLoad() {

super.viewDidLoad()

// Do any additional setup after loading the view.
     
let attributedString = NSMutableAttributedString(string: "Ios Swift TextView Ios Swift TextView Ios Swift TextView Ios Swift TextView")

attributedString.addAttribute(NSAttributedString.Key.font, value: UIFont.boldSystemFont(ofSize: 28.0), range: NSRange(location: 0, length: attributedString.length))

let textView = UITextView(frame: CGRect(x: 0, y: 100, width: 320, height: 300))

textView.attributedText = attributedString
textView.textContainer.maximumNumberOfLines = 1;
textView.textContainer.lineBreakMode =  .byTruncatingTail
self.view.addSubview(textView)
    }

image.png

React Native 布局

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
import {name as appName} from './app.json';

const ReactNativeTextView = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.hello}>React Native TextView</Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 28.0,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent(
  appName,
  () => ReactNativeTextView,
);

image.png

显示一行文本

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
import {name as appName} from './app.json';

const ReactNativeTextView = () => {
  return (
    <View style={styles.container}>
      <Text numberOfLines={1} ellipsizeMode="tail" style={styles.hello}>
        React Native TextView React Native TextView
      </Text>
    </View>
  );
};
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 28.0,
    textAlign: 'center',
    margin: 10,

  },
});

AppRegistry.registerComponent(
  appName,
  () => ReactNativeTextView,
);

image.png

案例

切换到分支 flutter_textview

avatar
文章
阅读
粉丝