(tvOS) Kategorien bzw. Auswahl-Menüs passen vom Design nicht, bitte um Hilfe

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • (tvOS) Kategorien bzw. Auswahl-Menüs passen vom Design nicht, bitte um Hilfe

    Hallo zusammen,

    ich versuche mich gerade an einer eigenen Apple TV App, soweit klappt es ganz gut, aber aktuell hänge ich am Aussehen der Kategorien bzw. der Auswahl-Menüs.

    Anbei ein Screenshot wie es jetzt aussieht:
    Bildschirmfoto 2025-01-22 um 21.10.18.png

    Das grün und den Rahmen habe ich derzeit mit Absicht eingefüllt damit ich sehe, was wo ist, denn ich möchte eigentlich, dass der graue Balken weg ist (oder ist dieser der "Hauptbalken"?) und der pinke Balken inkl. Rahmen ist nur ein Design-Element was wenn dann entfernt werden kann? Denn ich möchte, dass es so "Original" aussieht:

    Bildschirmfoto 2025-01-22 um 21.13.56.png

    Anbei der Code:

    Quellcode

    1. struct SettingsCategoryView: View {
    2. let title: String
    3. let isSelected: Bool
    5. var body: some View {
    6. HStack {
    7. Text(title)
    8. .foregroundColor(isSelected ? .black : .white)
    9. .font(.system(size: 22, weight: .regular))
    10. .padding(.leading, 20)
    12. Spacer()
    14. Image(systemName: "chevron.right")
    15. .foregroundColor(isSelected ? .black : .gray)
    16. .padding(.trailing, 20)
    17. }
    18. .frame(height: 50) // Einheitliche Höhe für die Kategorien
    19. .background(Color.pink) // Innerer Hintergrund auf pink gesetzt
    20. .cornerRadius(10) // Abrundung direkt auf den Hintergrund anwenden
    21. .overlay(
    22. RoundedRectangle(cornerRadius: 10)
    23. .stroke(Color.green, lineWidth: 3) // Äußerer Rahmen auf grün gesetzt
    24. )
    25. .padding(.horizontal, 0) // Entferne äußere Ränder
    26. .background(Color.clear) // Entferne alle anderen Hintergründe
    27. }
    28. }
    30. struct SettingsView_Previews: PreviewProvider {
    31. static var previews: some View {
    32. SettingsView()
    33. }
    34. }
    Alles anzeigen


    Danke schon mal!

    Edit:
    Ich habe den Code jetzt mal angepasst, aber es passt noch nicht so ganz, wenn eine Kategorie nicht ausgewählt ist, dann ist diese schwarz und nicht wie im Original grau.
    Simulator Screenshot - Apple TV 4K (3rd generation) - 2025-01-22 at 21.45.02.png


    Hier der Code:

    Quellcode

    1. import SwiftUI
    3. struct SettingsView: View {
    4. @State private var selectedCategory: String?
    6. var body: some View {
    7. NavigationStack {
    8. ZStack {
    9. Color.black
    10. .edgesIgnoringSafeArea(.all)
    12. VStack(spacing: 0) {
    13. // Überschrift oben in der Mitte
    14. Text("Einstellungen")
    15. .font(.system(size: 40, weight: .semibold))
    16. .foregroundColor(.white)
    17. .padding(.top, 30)
    19. HStack {
    20. // Linke Seite mit Logo
    21. VStack {
    22. Spacer()
    23. Image(systemName: "applelogo")
    24. .resizable()
    25. .scaledToFit()
    26. .frame(width: 120, height: 120)
    27. .foregroundColor(.white)
    28. Spacer()
    29. }
    30. .frame(width: UIScreen.main.bounds.width * 0.4)
    32. // Rechte Seite mit Kategorien
    33. VStack(spacing: 15) {
    34. ForEach(categories, id: \.self) { category in
    35. NavigationLink(
    36. value: category,
    37. label: {
    38. SettingsCategoryView(
    39. title: category,
    40. isSelected: selectedCategory == category
    41. )
    42. }
    43. )
    44. .buttonStyle(PlainButtonStyle())
    45. }
    46. }
    47. .frame(width: UIScreen.main.bounds.width * 0.5)
    48. }
    49. }
    50. }
    51. .navigationDestination(for: String.self) { value in
    52. Text("\(value)-Ansicht")
    53. .font(.title)
    54. .foregroundColor(.white)
    55. .navigationTitle(value)
    56. }
    57. }
    58. }
    60. private var categories: [String] {
    61. ["Allgemein", "Benutzer:innen und Accounts", "Video und Audio", "Bildschirmschoner", "AirPlay und HomeKit", "Fernbedienungen und Geräte", "Apps", "Netzwerk", "System", "Entwickler"]
    62. }
    63. }
    65. struct SettingsCategoryView: View {
    66. let title: String
    67. let isSelected: Bool
    69. var body: some View {
    70. HStack {
    71. Text(title)
    72. .foregroundColor(.white)
    73. .font(.system(size: 22, weight: .medium))
    74. .padding(.leading, 20)
    76. Spacer()
    78. Image(systemName: "chevron.right")
    79. .foregroundColor(.gray)
    80. .padding(.trailing, 20)
    81. }
    82. .frame(height: 50) // Einheitliche Höhe für die Kategorien
    83. .background(isSelected ? Color.gray.opacity(0.3) : Color.clear) // Hervorhebung des ausgewählten Elements
    84. .cornerRadius(8) // Abgerundete Ecken
    85. .scaleEffect(isSelected ? 1.05 : 1.0) // Fokus-Animation
    86. .animation(.easeInOut, value: isSelected)
    87. }
    88. }
    90. struct SettingsView_Previews: PreviewProvider {
    91. static var previews: some View {
    92. SettingsView()
    93. }
    94. }
    Alles anzeigen
    Edit:
    Ich bekomme es einfach nicht hin. Jetzt habe ich zwar den nicht ausgewählten Bereich sichtbar, aber der doofe große graue Balken ist wieder da :(
    Bildschirmfoto 2025-01-22 um 21.48.26.png

    Hier der Code:

    Quellcode

    1. import SwiftUI
    3. struct SettingsView: View {
    4. @State private var selectedCategory: String?
    6. var body: some View {
    7. NavigationStack {
    8. ZStack {
    9. Color.black
    10. .edgesIgnoringSafeArea(.all)
    12. VStack(spacing: 0) {
    13. // Überschrift oben in der Mitte
    14. Text("Einstellungen")
    15. .font(.system(size: 40, weight: .semibold))
    16. .foregroundColor(.white)
    17. .padding(.top, 30)
    19. HStack {
    20. // Linke Seite mit Logo
    21. VStack {
    22. Spacer()
    23. Image(systemName: "applelogo")
    24. .resizable()
    25. .scaledToFit()
    26. .frame(width: 120, height: 120)
    27. .foregroundColor(.white)
    28. Spacer()
    29. }
    30. .frame(width: UIScreen.main.bounds.width * 0.4)
    32. // Rechte Seite mit Kategorien
    33. VStack(spacing: 15) {
    34. ForEach(categories, id: \.self) { category in
    35. NavigationLink(
    36. value: category,
    37. label: {
    38. SettingsCategoryView(
    39. title: category,
    40. isSelected: selectedCategory == category
    41. )
    42. }
    43. )
    44. .buttonStyle(PlainButtonStyle())
    45. }
    46. }
    47. .frame(width: UIScreen.main.bounds.width * 0.5)
    48. }
    49. }
    50. }
    51. .navigationDestination(for: String.self) { value in
    52. Text("\(value)-Ansicht")
    53. .font(.title)
    54. .foregroundColor(.white)
    55. .navigationTitle(value)
    56. }
    57. }
    58. }
    60. private var categories: [String] {
    61. ["Allgemein", "Benutzer:innen und Accounts", "Video und Audio", "Bildschirmschoner", "AirPlay und HomeKit", "Fernbedienungen und Geräte", "Apps", "Netzwerk", "System", "Entwickler"]
    62. }
    63. }
    65. struct SettingsCategoryView: View {
    66. let title: String
    67. let isSelected: Bool
    69. var body: some View {
    70. HStack {
    71. Text(title)
    72. .foregroundColor(.white)
    73. .font(.system(size: 22, weight: .medium))
    74. .padding(.leading, 20)
    76. Spacer()
    78. Image(systemName: "chevron.right")
    79. .foregroundColor(.gray)
    80. .padding(.trailing, 20)
    81. }
    82. .frame(height: 50) // Einheitliche Höhe für die Kategorien
    83. .background(isSelected ? Color.gray.opacity(0.3) : Color.gray.opacity(0.15)) // Hintergrundfarbe für ausgewählte und nicht ausgewählte Kategorien
    84. .cornerRadius(8) // Abgerundete Ecken
    85. .scaleEffect(isSelected ? 1.05 : 1.0) // Fokus-Animation
    86. .animation(.easeInOut, value: isSelected)
    87. }
    88. }
    90. struct SettingsView_Previews: PreviewProvider {
    91. static var previews: some View {
    92. SettingsView()
    93. }
    94. }
    Alles anzeigen

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von iBoard ()

  • iBoard schrieb:

    Über 400 Ansichten und keine Antwort? Schade!
    Naja, ich bezweifle einmal, dass die 400 Views alle von Menschen kamen - dann ziehe noch die ab, die (1.) bei tvOS abschalten, (2.) kein SwiftUI machen oder (3.) keine Lust haben, im Code nach Fehlen zu suchen - da wird die Luft schon dünn...

    Ich kenne mich leider in SwiftUI zu wenig aus, um bewerten zu können, ob die Textfarbe eines (selektierten) Eintrags manuell gesetzt werden muss - ich vermute aber nicht. Würde es nicht mehr Sinn machen, die Farben nicht explizit zu setzen, sondern eine deklarative wie labelColor oder secondaryLabelColor zu verwenden? Das kann aber auch der berühmte rote Hering sein...

    Mich würde einmal interessieren, für welche App-Idee Du die Oberfläche der Apple-TV nachbilden willst?
    Diese Seite bleibt aus technischen Gründen unbedruckt.