Group Group Group Group Group Group Group Group Group

Checklist App - customize the edit button

Hi All.

I’m looking to change the appearance of the Edit button (in the CheckList app) from the written word “Edit” to an SF Symbol (namely “pencil”).

I’ve searched high and low, and read dozens of Google results…all to no avail.

  1. I want to retain the functionality of the default editbutton() button

    • Ability to delete items in the list
      -Ability to move/relocate items in the list
  2. I want to replace the word “Edit” with the SF Symbol “pencil”.

Any help would be appreciated.

Thanks

1 Like

When I was reading those chapters I had that question too… it would be nice if someone with more knowledge could show it to us.

I have not yet found anything how to customise EditButton(), however you might wanna read the following:

:slight_smile:

I removed my previous reply since I must have been wearing my “stupid” hat. I was playing around with the code presented in the stackoverflow.com article (SwiftUI Button as EditButton - that you so kindly sent me) and wasn’t having any luck. My response stated that there was a problem with isEditing and that it seemed to be causing errors.

Well…THAT is the “stupid hat” I’d been wearing. Being OCD (aren’t all programmers OCD?) I went back at it again this morning. I discovered what I hadn’t noticed yesterday; isEditing was being declared as a @STATE variable. Since I wasn’t adding in the @STATE variable declaration OF COURSE the code wouldn’t work!!! Sheesh!

So…now, with the isEditing bool being properly declared as a @STATE variable…the code works.

NOW I am able to create an edit button (replacing the editButton() default) using the pencil.circle.fill SF symbol along with the add button utilizing the plus.circle.fill SF symbol. So now they are BOTH graphical buttons.

More to the point, and the reason why I had been casting about for a solution to replace editButton()…I can now toggle the add button OFF while an edit session is underway. I didn’t like that the add button was still active whilst a user was editing a checklist item. I wanted to be able to disable the add button when/if the user was editing. NOW it’s working as desired. (See images below)

Here is the pertinent code in CheckListView.swift:

struct CheckListView: View {

// Properties
// ==========

// setup connectioin to the ViewModel (Checklist.swift)
@ObservedObject var checklist = Checklist()
@State var newCheckListItemViewIsVisible    = false
@State var addButtonDisabled                = false
@State var isEditing = false

// User interface content and layout
var body: some View {
    NavigationView {
        List {
            ForEach (checklist.items) { index in
                RowView(checklistItem: self.$checklist.items[index])
            }
            .onDelete(perform: checklist.deleteListItem)
            .onMove(perform: checklist.moveListItem)
        }
        .navigationBarItems(leading:
            HStack {
                //EditButton()
                Button(action: {
                    self.isEditing.toggle()
                    self.addButtonDisabled.toggle()
                }) {
                    if self.isEditing {
                        Text("Done")
                    } else {
                        Image(systemName: "pencil.circle.fill").imageScale(.large)
                    }
                }
                Button(action: {
                    self.newCheckListItemViewIsVisible.toggle()
                    print(self.newCheckListItemViewIsVisible)
                }) {
                    //Text("Add")
                    Image(systemName: "plus.circle.fill").imageScale(.large)
                }.disabled(addButtonDisabled)
            }, trailing:
            HStack {
                Button(action: {
                    print("We are in CheckListView.swift - the VIEW file of the MVVM pattern")
                    print("Before pressing the About button the showAbout bool was \(self.checklist.showsAbout)")
                    self.checklist.showsAbout.toggle()
                    print("After pressing the About button the showAbout bool was \(self.checklist.showsAbout)")
                }) {
                    Text("About")
                }
                .alert(isPresented: self.$checklist.showsAbout) {
                    Alert(title: Text(checklist.aboutButton()))
                }

                Button(action: {
                    print("We are in CheckListView.swift - the VIEW file of the MVVM pattern")
                    print("Before pressing the Help button the showHelp bool was \(self.checklist.showsHelp)")
                    self.checklist.showsHelp.toggle()
                    print("After pressing the Help button the showHelp bool was \(self.checklist.showsHelp)")
                }) {
                    Text("Help")
                }
                .alert(isPresented: self.$checklist.showsHelp) {
                    Alert(title: Text(checklist.helpButton()))
                }
            }
        )
            .navigationBarTitle("Checklist", displayMode: .inline)
            .environment(\.editMode, .constant(self.isEditing ? EditMode.active : EditMode.inactive)).animation(Animation.spring())
        .onAppear() {
            self.checklist.printCheckListItemsContents()
            self.checklist.saveListItems()
        }
    }
    .sheet(isPresented: $newCheckListItemViewIsVisible) {
        NewChecklistItemView(checklist: self.checklist)
    }
}

}

IMAGE OF THE MAIN VIEW - showing the edit and add buttons using graphical SF symbols

THANKS SO MUCH for your reply to my post!!!

IMAGE OF THE EDIT VIEW - showing the add button currently disabled

1 Like

IMAGE OF THE MAIN VIEW - showing the add button re-enabled upon returning to the main view

1 Like

Wowww!! Great! It is even better when you go back again and discover what was wrong. You found the bug! :wink: Nice feeling … success!

:grinning:

@jrosengarden Thank you for sharing your solution - much appreciated!

@noah8610 Thank you for sharing this - much appreciated!