5 Replies
      Latest reply on Nov 8, 2019 3:45 AM by Claude31
      dshum17 Level 1 Level 1 (0 points)

        On the Apple Watch, if you go to Settings -> Wake Screen and then scroll down to ON SCREEN RAISE SHOW LAST APP. Underneath it is a list/table where the items are grouped, the first and last items have a rounded rectangle whereas the items in the middle are just rectangles. I would like to use this UI element as well when I present the user a list that functions like a radio button list. Do you know what this UI element is called? Is it just a List but with a specific list style? Thanks.

        • Re: How do I create this type of list?
          Claude31 Level 8 Level 8 (6,905 points)

          From what I see, I just think the list is a in a Group which radius has been set to about 12 in IB.

           

          - create a group

          - in IB, define it radius as custom, value 12 (attributes inspector)

          - insert the list inside

            • Re: How do I create this type of list?
              dshum17 Level 1 Level 1 (0 points)

              I just tried it in SwiftUI:

               

              struct CardOrder: View {
                  @State private var order = 0
                
                  var body: some View {
                    Group {
                      List {
                        HStack {
                          Text("Item 0")
                            .font(.system(size: 12))
                            .onTapGesture {
                              self.setOrder(i: 0)
                          }
                          
                          Spacer()
                          
                          if(order == 0) {
                            Image(systemName: "checkmark")
                              .foregroundColor(Color.green)
                          }
                          
                        }
                        
                        HStack {
                          Text("Item 1")
                            .font(.system(size: 12))
                            .onTapGesture {
                              self.setOrder(i: 1)
                          }
                          Spacer()
                          
                          if(order == 1) {
                            Image(systemName: "checkmark")
                              .foregroundColor(Color.green)
                          }
                        }
                        
                        HStack {
                          Text("Item 2")
                            .font(.system(size: 12))
                            .onTapGesture {
                              self.setOrder(i: 2)
                          }
                          Spacer()
                          
                          if(order == 2) {
                            Image(systemName: "checkmark")
                              .foregroundColor(Color.green)
                          }
                        }
                      }
                    }
                    .cornerRadius(12)
              

               

              But it didn't look any different to if I didn't put the List inside the Group.