Android和HarmonyOS 设置透明度

Gemini001
203 阅读6分钟

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

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

百分比十六进制百分比十六进制百分比十六进制百分比十六进制
100%FF75%BF50%8025%40
99%FC74%BD49%7D24%3D
98%FA73%BA48%7A23%3B
97%F772%B847%7822%38
96%F571%B546%7521%36
95%F270%B345%7320%33
94%F069%B044%7019%30
93%ED68%AD43%6E18%2E
92%EB67%AB42%6B17%2B
91%E866%A841%6916%29
90%E665%A640%6615%26
89%E364%A339%6314%24
88%E063%A138%6113%21
87%DE62%9E37%5E12%1F
86%DB61%9C36%5C11%1C
85%D960%9935%5910%1A
84%D659%9634%579%17
83%D458%9433%548%14
82%D157%9132%527%12
81%CF56%8F31%4F6%0F
80%CC55%8C30%4D5%0D
79%C954%8A29%4A4%0A
78%C753%8728%473%08
77%C452%8527%452%05
76%C251%8226%421%03
0%00

核心概念

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

Android 实现 (使用XML)

1. 直接在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中定义

<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. 在布局文件中使用颜色资源

<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中使用

@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. 使用常量定义颜色

@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. 完整示例：透明度对比

@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方式):

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

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

HarmonyOS (ArkTS方式):

// 直接在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。

avatar
文章
阅读
粉丝