SwiftUI Practice – AvatarActivityIcon

Today I created a SwiftUI project featuring a customizable avatar with activity indication.

Customizations

• Avatar Size
• Avatar background color
• Show or hide activity indication
• Activity indicator alignment
• Activity indicator background color
• Activity indicator icon (SF Symbols)
• Activity indication icon color

Use in your code

AvatarView(
  image: "me2", 
  height: 150, 
  backgroundColor: .gray, 
  showActiveIndicator: true, 
  indicatorAlignment: .topTrailing, 
  iconImage: "camera", 
  activeIndicatorColor: .green, 
  iconColor: .black)

AvatarView

struct AvatarView: View {
  @Environment(\.colorScheme) var colorScheme
  
  var image: String
  var height: CGFloat
  var backgroundColor: Color
  var showActiveIndicator: Bool
  var indicatorAlignment: Alignment?
  var iconImage: String?
  var activeIndicatorColor: Color?
  var iconColor: Color?
  
  var hasIcon: Bool {
    iconImage != nil ? true : false
  }
  
  var icon: String {
    iconImage ?? ""
  }
  
  var indicatorSize: CGFloat {
    height / 3
  }
  
  var alignment: Alignment {
    indicatorAlignment ?? .topTrailing
  }
  
  var isDarkMode: Bool {
    colorScheme == .dark
  }
  
  var offset: CGPoint {
    var position = CGPoint(x: 10, y: 0)
    
    switch alignment {
      case .bottomLeading, .topLeading:
        position.x = -10
        position.y = 0
      case .bottomTrailing, .topTrailing:
        position.x = 10
        position.y = 0
      default:
        position.x = 10
        position.y = 0
    }
    return position
  }
  
  init(image: String, height: CGFloat, backgroundColor: Color, showActiveIndicator: Bool, indicatorAlignment: Alignment? = .topTrailing, iconImage: String? = nil, activeIndicatorColor: Color? = nil, iconColor: Color? = nil) {
    self.image = image
    self.height = height
    self.backgroundColor = backgroundColor
    self.showActiveIndicator = showActiveIndicator
    self.indicatorAlignment = indicatorAlignment
    self.iconImage = iconImage
    self.activeIndicatorColor = activeIndicatorColor
    self.iconColor = iconColor
  }
  
  var body: some View {
    Image(image)
      .resizable()
      .scaledToFit()
      .background(backgroundColor)
      .clipShape(Circle())
      .frame(width: height, height: height)
      .overlay(alignment: alignment) {
        if showActiveIndicator {
          Circle()
            .fill(activeIndicatorColor ?? .black)
            .stroke(isDarkMode ? .black : .white, lineWidth: 5)
            .frame(width: indicatorSize)
            .offset(x: offset.x)
          if hasIcon {
            Image(systemName: icon)
              .resizable()
              .scaledToFit()
              .frame(width: indicatorSize / 1.7)
              .foregroundStyle(iconColor ?? .white)
              .offset(x: offset.x)
          }
        }
      }
  }
}

You can download the code for this on GitHub