Android和HarmonyOS 设置透明度

Android/HarmonyOS 透明度百分比与十六进制值对照表及实现

透明度百分比 ↔ 十六进制值完整对照表

百分比	十六进制	百分比	十六进制	百分比	十六进制	百分比	十六进制
100%	FF	75%	BF	50%	80	25%	40
99%	FC	74%	BD	49%	7D	24%	3D
98%	FA	73%	BA	48%	7A	23%	3B
97%	F7	72%	B8	47%	78	22%	38
96%	F5	71%	B5	46%	75	21%	36
95%	F2	70%	B3	45%	73	20%	33
94%	F0	69%	B0	44%	70	19%	30
93%	ED	68%	AD	43%	6E	18%	2E
92%	EB	67%	AB	42%	6B	17%	2B
91%	E8	66%	A8	41%	69	16%	29
90%	E6	65%	A6	40%	66	15%	26
89%	E3	64%	A3	39%	63	14%	24
88%	E0	63%	A1	38%	61	13%	21
87%	DE	62%	9E	37%	5E	12%	1F
86%	DB	61%	9C	36%	5C	11%	1C
85%	D9	60%	99	35%	59	10%	1A
84%	D6	59%	96	34%	57	9%	17
83%	D4	58%	94	33%	54	8%	14
82%	D1	57%	91	32%	52	7%	12
81%	CF	56%	8F	31%	4F	6%	0F
80%	CC	55%	8C	30%	4D	5%	0D
79%	C9	54%	8A	29%	4A	4%	0A
78%	C7	53%	87	28%	47	3%	08
77%	C4	52%	85	27%	45	2%	05
76%	C2	51%	82	26%	42	1%	03
						0%	00

核心概念

格式 : #AARRGGBB(前两位AA是透明度，后六位是颜色)
100% : 完全不透明 (FF)
50% : 半透明 (80)
0% : 完全透明 (00)

Android 实现 (使用XML)

1. 直接在XML中使用

xml 复制代码

<!-- 直接在View中设置透明度 -->
<View
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:background="#80FF0000" />  <!-- 50%透明红色 -->

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="20%透明文字"
    android:textColor="#33000000" />    <!-- 20%透明黑色 -->

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="80%透明按钮"
    android:background="#CC2196F3" />   <!-- 80%透明蓝色 -->

2. 在res/colors.xml中定义

xml 复制代码

<resources>
    <!-- 完全不透明 -->
    <color name="red">#FF0000</color>
    <color name="blue">#0000FF</color>
    <color name="green">#00FF00</color>
    
    <!-- 50%透明 -->
    <color name="red_50">#80FF0000</color>
    <color name="blue_50">#800000FF</color>
    
    <!-- 20%透明 -->
    <color name="black_20">#33000000</color>
    <color name="white_20">#33FFFFFF</color>
    
    <!-- 80%透明 -->
    <color name="black_80">#CC000000</color>
    <color name="white_80">#CCFFFFFF</color>
</resources>

3. 在布局文件中使用颜色资源

ini 复制代码

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">
    
    <!-- 50%透明红色背景 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:background="@color/red_50"
        android:text="50%透明红色背景"
        android:textColor="#FFFFFF"
        android:gravity="center"
        android:layout_marginBottom="8dp"/>
    
    <!-- 20%透明黑色文字 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="20%透明黑色文字"
        android:textColor="@color/black_20"
        android:textSize="18sp"
        android:layout_marginBottom="8dp"/>
    
    <!-- 80%透明蓝色按钮 -->
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="80%透明按钮"
        android:background="@color/blue_50"
        android:textColor="#FFFFFF"
        android:layout_marginBottom="8dp"/>
    
    <!-- 不同透明度示例 -->
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="#FFFF0000"
        android:text="100% 红色"
        android:gravity="center"
        android:layout_marginBottom="4dp"/>
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="#CCFF0000"
        android:text="80% 红色"
        android:gravity="center"
        android:layout_marginBottom="4dp"/>
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="#80FF0000"
        android:text="50% 红色"
        android:gravity="center"
        android:layout_marginBottom="4dp"/>
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:background="#33FF0000"
        android:text="20% 红色"
        android:gravity="center"
        android:layout_marginBottom="4dp"/>
        
</LinearLayout>

HarmonyOS (ArkTS) 实现

1. 直接在ArkTS中使用

scss 复制代码

@Entry
@Component
struct ColorDemo {
  build() {
    Column({ space: 10 }) {
      // 50%透明红色
      Text('50%透明红色')
        .width('100%')
        .height(60)
        .backgroundColor('#80FF0000')
        .fontColor('#FFFFFF')
        .fontSize(16)
        .textAlign(TextAlign.Center)

      // 20%透明黑色文字
      Text('20%透明黑色文字')
        .width('100%')
        .fontColor('#33000000')
        .fontSize(18)
        .margin({ bottom: 8 })

      // 80%透明蓝色按钮
      Button('80%透明按钮')
        .backgroundColor('#CC2196F3')
        .fontColor('#FFFFFF')
        .margin({ bottom: 8 })

      // 不同透明度示例
      Text('100% 红色')
        .width('100%')
        .height(30)
        .backgroundColor('#FFFF0000')
        .textAlign(TextAlign.Center)
        .margin({ bottom: 4 })

      Text('80% 红色')
        .width('100%')
        .height(30)
        .backgroundColor('#CCFF0000')
        .textAlign(TextAlign.Center)
        .margin({ bottom: 4 })

      Text('50% 红色')
        .width('100%')
        .height(30)
        .backgroundColor('#80FF0000')
        .textAlign(TextAlign.Center)
        .margin({ bottom: 4 })

      Text('20% 红色')
        .width('100%')
        .height(30)
        .backgroundColor('#33FF0000')
        .textAlign(TextAlign.Center)
        .margin({ bottom: 4 })
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

2. 使用常量定义颜色

scss 复制代码

@Entry
@Component
struct TransparencyDemo {
  // 定义颜色常量
  private readonly COLORS = {
    // 不透明颜色
    RED: '#FF0000',
    BLUE: '#0000FF',
    GREEN: '#00FF00',
    BLACK: '#000000',
    WHITE: '#FFFFFF',
    
    // 50%透明
    RED_50: '#80FF0000',
    BLUE_50: '#800000FF',
    GREEN_50: '#8000FF00',
    
    // 20%透明
    BLACK_20: '#33000000',
    WHITE_20: '#33FFFFFF',
    
    // 80%透明
    BLACK_80: '#CC000000',
    WHITE_80: '#CCFFFFFF'
  }

  build() {
    Column({ space: 8 }) {
      // 使用常量
      Text('50%透明红色背景')
        .width('100%')
        .height(50)
        .backgroundColor(this.COLORS.RED_50)
        .fontColor(this.COLORS.WHITE)
        .fontSize(16)
        .textAlign(TextAlign.Center)

      Text('20%透明黑色文字')
        .width('100%')
        .fontColor(this.COLORS.BLACK_20)
        .fontSize(18)

      Text('80%透明背景上的白色文字')
        .width('100%')
        .height(50)
        .backgroundColor(this.COLORS.BLUE_50)
        .fontColor(this.COLORS.WHITE_80)
        .fontSize(16)
        .textAlign(TextAlign.Center)
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

3. 完整示例：透明度对比

php 复制代码

@Entry
@Component
struct AlphaComparison {
  build() {
    Column({ space: 2 }) {
      // 标题
      Text('透明度对照示例')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 20 })
        .width('100%')
        .textAlign(TextAlign.Center)

      // 红色系列
      this.buildColorRow('红色', '#FF0000', [
        { percent: 100, alpha: 'FF' },
        { percent: 80, alpha: 'CC' },
        { percent: 50, alpha: '80' },
        { percent: 20, alpha: '33' },
        { percent: 0, alpha: '00' }
      ])

      Divider().strokeWidth(1).color('#EEEEEE').margin({ vertical: 10 })

      // 蓝色系列
      this.buildColorRow('蓝色', '#0000FF', [
        { percent: 100, alpha: 'FF' },
        { percent: 80, alpha: 'CC' },
        { percent: 50, alpha: '80' },
        { percent: 20, alpha: '33' },
        { percent: 0, alpha: '00' }
      ])

      Divider().strokeWidth(1).color('#EEEEEE').margin({ vertical: 10 })

      // 绿色系列
      this.buildColorRow('绿色', '#00FF00', [
        { percent: 100, alpha: 'FF' },
        { percent: 80, alpha: 'CC' },
        { percent: 50, alpha: '80' },
        { percent: 20, alpha: '33' },
        { percent: 0, alpha: '00' }
      ])
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }

  @Builder
  buildColorRow(colorName: string, colorCode: string, alphas: Array<{percent: number, alpha: string}>) {
    Column() {
      Text(colorName)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .margin({ bottom: 8 })
        .width('100%')
        .textAlign(TextAlign.Start)

      ForEach(alphas, (item: {percent: number, alpha: string}) => {
        Row() {
          Text(`${item.percent}%`)
            .width(60)
            .fontSize(14)
          
          Text(`#${item.alpha}${colorCode.substring(1)}`)
            .width(120)
            .fontSize(12)
            .fontColor('#666666')
          
          // 颜色块
          Row()
            .width(100)
            .height(30)
            .backgroundColor(`#${item.alpha}${colorCode.substring(1)}`)
            .border({ width: 1, color: '#CCCCCC' })
        }
        .width('100%')
        .justifyContent(FlexAlign.SpaceBetween)
        .margin({ bottom: 4 })
      })
    }
  }
}

使用总结

Android (XML方式):

xml 复制代码

<!-- 直接使用十六进制值 -->
android:background="#80FF0000"      <!-- 50%透明红色 -->
android:textColor="#33000000"       <!-- 20%透明黑色 -->

<!-- 或者定义在colors.xml中 -->
android:background="@color/red_50"
android:textColor="@color/black_20"

HarmonyOS (ArkTS方式):

arduino 复制代码

// 直接在backgroundColor/textColor中使用
.backgroundColor('#80FF0000')      // 50%透明红色
.fontColor('#33000000')            // 20%透明黑色

常用值速记

100% → FF
80% → CC
50% → 80
20% → 33
0% → 00

规律：每10%大约差19（十六进制），比如90%是E6，80%是CC，70%是B3，60%是99，50%是80。

Android和HarmonyOS 设置透明度

Android/HarmonyOS 透明度百分比与十六进制值对照表及实现

透明度百分比 ↔ 十六进制值 完整对照表

核心概念

Android 实现 (使用XML)

1. 直接在XML中使用

2. 在res/colors.xml中定义

3. 在布局文件中使用颜色资源

HarmonyOS (ArkTS) 实现

1. 直接在ArkTS中使用

2. 使用常量定义颜色

3. 完整示例：透明度对比

使用总结

Android (XML方式):

HarmonyOS (ArkTS方式):

常用值速记

透明度百分比 ↔ 十六进制值完整对照表