Task: #5: Advanced Grid Showcase View Component

[abilgin88]

AdvancedGridShowcaseView Component Tasks:

• [x] Load Plant Data:

  • Load plant data from a JSON file named "plants.json".
  • Decode the JSON data into an array of Plant objects.

• [x] Implement Selected Plant State:

  • Create a @State property named selectedPlant to track the selected plant image name.
  • Initialize it with the default value "sunflower".

• [x] Define Grid Layout State:

  • Create a @State property named gridLayout to define the grid layout for the gallery.
  • Initialize it with a single flexible grid item.

• [x] Create Grid Column State:

  • Create a @State property named gridColumn to control the number of grid columns.
  • Initialize it with a value of 3.0.

• [x] Add Haptic Feedback Generator:

  • Create a UIImpactFeedbackGenerator property named haptics to provide haptic feedback for interactions.
  • Initialize it with a medium style.

• [x] Build Gallery Content:

  • Create a ScrollView to contain the gallery content with vertical scrolling.
  • Add a VStack to vertically align the components within the scroll view.
  • Set the spacing between components to 30.

• [x] Display Selected Plant Image:

  • Use the PlantImageView to display the selected plant image.
  • Pass the selectedPlant as the imageName parameter.
  • Customize the appearance with a line width of 8 and a stroke color of .white.

• [x] Add Grid Column Slider:

  • Integrate the SliderView component to adjust the number of grid columns.
  • Bind the gridColumn state to the slider's value.

• [x] Implement Grid Layout Switch:

  • Create a function named gridSwitch(gridColumn:) to adjust the grid layout based on the gridColumn state.
  • Update gridLayout with an array of grid items according to the chosen column count.

• [x] Display Plant Images in Grid:

  • Implement a LazyVGrid with columns determined by the gridLayout.
  • Loop through each Plant item in the plants array.

• [x] Display Individual Plant Images:

  • Inside the loop, use the PlantImageView to display individual plant images.
  • Set the imageName to the item.image value.
  • Customize the appearance with a line width of 1 and a stroke color of .white.

• [x] Handle Image Selection:

  • Implement an onTapGesture for each plant image in the grid.
  • Update the selectedPlant state with the tapped plant's image name.
  • Trigger haptic feedback using haptics.impactOccurred().

• [x] Randomize Initial Image:

  • In the onAppear modifier of the LazyVGrid, call the randomizeImage() function to set an initial random image.

• [x] Optimize Layout and Padding:

  • Apply padding to the VStack to add space around the gallery content.
  • Set horizontal padding to 10 and vertical padding to 50.

• [x] Ensure Full Scrollable Area:

  • Use .frame(maxWidth: .infinity, maxHeight: .infinity) on the ScrollView to ensure the entire content is scrollable.

Commit: Link to Commit

https://user-images.githubusercontent.com/96279901/261786284-725e55a4-93eb-4be8-ba66-a6e5f6292799.mov

[abilgin88]

Button(action: { isGridViewActive = false haptic.impactOccurred() **gridSwitch()** remove here }) { Image(systemName: "square.fill.text.grid.1x2") .font(.title2) .foregroundColor(isGridViewActive ? .PrimaryColor : .SecondaryColor) }