When I scroll from one page to the other the horizontal indicator bar doesn't move, what would be the appropriate way to move it (with animation if possible)?
The green area below doesn't move to the right once I switch to the analytics area.
Here's the full code:
enum PortfolioTabBarOptions: Hashable, CaseIterable {
case balance, analytics
var menuString: String { String(describing: self) }
}
struct CustomPagerTabView: View {
#Binding var selectedTab: PortfolioTabBarOptions
#State var tabOffset: CGFloat = 0
var body: some View {
VStack {
HStack(alignment: .center) {
HStack(spacing: 100) {
ForEach(Array(PortfolioTabBarOptions.allCases.enumerated()), id: \.element) { index, element in
// Current Tab
if(selectedTab.menuString == element.menuString) {
Text(element.menuString.capitalizeFirstLetter())
.font(.system(size: 15.0))
.bold()
.onTapGesture() {
selectedTab = element.self
}
.onAppear {
self.tabOffset = CGFloat(index)
}
}
// Innactive Tabs
else {
Text(element.menuString.capitalizeFirstLetter())
.foregroundColor(.gray)
.font(.system(size: 15.0))
.bold()
.onTapGesture() {
selectedTab = element.self
}
}
}
}
.padding(.horizontal)
}
// Indicator...
Capsule()
.fill(.gray)
// Width of the indicator bar
.frame(width: PortfolioTabBarOptions.allCases.count == 0 ? 0 : (getScreenBounds().width / CGFloat(PortfolioTabBarOptions.allCases.count)), height: 1.2)
.padding(.top,10)
.frame(maxWidth: .infinity,alignment: .leading)
.offset(x: tabOffset)
}
.padding(.top)
}
}
The green area below does move to the right, but only 1 pixel. Try something like this example code, choose the value (200) most suited for your purpose:
.onAppear {
self.tabOffset = CGFloat(index*200) // <-- here
}
Related
I would like to have my cards expandable and fill the while area of the screen while they are doing the change form height 50 to the whole screen (and don't display the other components)
Here is my code:
import SwiftUI
struct DisciplineView: View {
var body: some View {
ScrollView(showsIndicators: false) {
LazyVStack {
Card(cardTitle: "Notes")
Card(cardTitle: "Planner")
Card(cardTitle: "Homeworks / Exams")
}
.ignoresSafeArea()
}
}
}
struct DisciplineV_Previews: PreviewProvider {
static var previews: some View {
DisciplineView()
}
}
import SwiftUI
struct Card: View {
#State var cardTitle = ""
#State private var isTapped = false
var body: some View {
RoundedRectangle(cornerRadius: 30, style: .continuous)
.stroke(style: StrokeStyle(lineWidth: 5, lineCap: .round, lineJoin: .round))
.foregroundColor(.gray.opacity(0.2))
.frame(width: .infinity, height: isTapped ? .infinity : 50)
.background(
VStack {
cardInfo
if(isTapped) { Spacer() }
}
.padding(isTapped ? 10 : 0)
)
}
var cardInfo: some View {
HStack {
Text(cardTitle)
.font(.title).bold()
.foregroundColor(isTapped ? .white : .black)
.padding(.leading, 10)
Spacer()
Image(systemName: isTapped ? "arrowtriangle.up.square.fill" : "arrowtriangle.down.square.fill")
.padding(.trailing, 10)
.onTapGesture {
withAnimation {
isTapped.toggle()
}
}
}
}
}
struct Card_Previews: PreviewProvider {
static var previews: some View {
Card()
}
}
here is almost the same as I would like to have, but I would like the first one to be on the whole screen and stop the ScrollView while appearing.
Thank you!
Described above:
I would like to have my cards expandable and fill the while area of the screen while they are doing the change form height 50 to the whole screen (and don't display the other components)
I think this is pretty much what you are trying to achieve.
Basically, you have to scroll to the position of the recently presented view and disable the scroll. The scroll have to be disabled enough time to avoid continuing to the next item but at the same time, it have to be enabled soon enough to give the user the feeling that it is scrolling one item at once.
struct ContentView: View {
#State private var canScroll = true
#State private var itemInScreen = -1
var body: some View {
GeometryReader { geo in
ScrollViewReader { proxy in
ScrollView {
LazyVStack {
ForEach(0...10, id: \.self) { item in
Text("\(item)")
.onAppear {
withAnimation {
proxy.scrollTo(item)
canScroll = false
DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
canScroll = true
}
}
}
}
.frame(width: geo.size.width, height: geo.size.height)
.background(Color.blue)
}
}
}
.disabled(!canScroll)
}
.ignoresSafeArea()
}
}
I am having problems with making a simple systemIcon flash in SwiftUI.
I got the animation working, but it has a silly behaviour if the layout of
a LazyGridView changes or adapts. Below is a video of its erroneous behaviour.
The flashing bell stays in place but when the layout rearranges the bell
starts transitioning in from the bottom of the parent view thats not there anymore.
Has someone got a suggestion how to get around this?
Here is a working example which is similar to my problem
import SwiftUI
struct FlashingBellLazyVGrid: View {
#State var isAnimating = false
#State var showChart = true
var body: some View {
let columns = [GridItem(.adaptive(minimum: 300), spacing: 50, alignment: .center)]
VStack {
Button(action: {
showChart.toggle()
}) {
VStack {
Circle()
.fill(showChart ? Color.green : Color.red)
.shadow(color: Color.gray, radius: 5, x: 2, y: 2)
Text("Charts")
.foregroundColor(Color.primary)
}.frame(width: 150, height: 50)
}
ScrollView {
LazyVGrid (
columns: columns, spacing: 50
) {
ForEach(0 ..< 25) { item in
ZStack {
Rectangle()
.fill(Color.red)
.cornerRadius(15)
VStack {
HStack {
Text(/*#START_MENU_TOKEN#*/"Hello, World!"/*#END_MENU_TOKEN#*/)
Spacer()
Image(systemName: "bell.fill")
.foregroundColor(Color.yellow)
.opacity(self.isAnimating ? 1 : 0)
.animation(Animation.easeInOut(duration: 0.66).repeatForever(autoreverses: false))
.onAppear{ self.isAnimating = true }
}.padding(50)
if showChart {
Rectangle()
.fill(Color.green)
.frame(height: 200)
}
}
}
}
}
}
}
}
}
struct FlashingBellLazyVGrid_Previews: PreviewProvider {
static var previews: some View {
FlashingBellLazyVGrid()
}
}
how it looks like before you click the showChart button at the top
After you toggle the button it looks like the bells are erroneously moving into place from the bottom of the screen. and toggling it back to its original state doesn't resolve this bug subsequently.
[
Looks like the animation is basing itself off of the original size of the view. In order to trick it into recognizing the new view size, I used .id(UUID()) on the outside of the grid. In a real world application, you'd probably want to be careful to store this ID somewhere and only refresh it when needed -- not on every re-render like I'm doing:
struct FlashingBellLazyVGrid: View {
#State var showChart = true
let columns = [GridItem(.adaptive(minimum: 300), spacing: 50, alignment: .center)]
var body: some View {
VStack {
Button(action: {
showChart.toggle()
}) {
VStack {
Circle()
.fill(showChart ? Color.green : Color.red)
.shadow(color: Color.gray, radius: 5, x: 2, y: 2)
Text("Charts")
.foregroundColor(Color.primary)
}.frame(width: 150, height: 50)
}
ScrollView {
LazyVGrid (
columns: columns, spacing: 50
) {
ForEach(0 ..< 25) { item in
ZStack {
Rectangle()
.fill(Color.red)
.cornerRadius(15)
VStack {
SeparateComponent()
if showChart {
Rectangle()
.fill(Color.green)
.frame(height: 200)
}
}
}
}
}
.id(UUID()) //<-- Here
}
}
}
}
struct SeparateComponent : View {
#State var isAnimating : Bool = false
var body: some View {
HStack {
Text("Hello, World!")
Spacer()
Image(systemName: "bell.fill")
.foregroundColor(Color.yellow)
.opacity(self.isAnimating ? 1 : 0)
.animation(Animation.easeInOut(duration: 0.66).repeatForever(autoreverses: false))
.onAppear{
self.isAnimating = true
}
}
.padding(50)
}
}
I also separated out the blinking component into its own view, since there were already problematic things happening with the existing logic with onAppear, which wouldn't affect newly-scrolled-to items correctly. This may need refactoring for your particular case as well, but this should get you started.
I want to be able to update a view with a swipe left/right over a NavigationView that has multiple NavigationLinks in it. The NavigationLinks go to different presentation views.
When I begin the Drag gesture on the outer most view, if that gesture begins over a NavigationLink, the link changes color as though it has been pressed. Continuing the drag gesture, the main view does update as expected and the NavigationLink returns to it's normal state (color).
What I need is a way to have the NavigationLink NOT change color when it is a drag gesture that is occuring. Maybe a way to have the NavigationLink react "if" the touch is a long touch or something.
Here is some code that demonstrates what I am seeing. This is not my actual project, but a very stripped down example.
Any suggestions or solutions appreciated!
import SwiftUI
struct ContentView: View {
#State var outputText: String = ""
var body: some View {
VStack(alignment: .center, spacing: 20) {
NavigationView {
VStack {
Text("Navigation View")
NavigationLink(destination: Text("Showwing Widget")) {
HStack {
Text("Navigation Link")
}
.frame(width: 300, height: 200)
.border(Color.blue)
}
.border(Color.red)
Spacer()
}
.border(Color.yellow)
}
Text(outputText)
.font(.title)
.fontWeight(.bold)
Text("My Green Oval")
.foregroundColor(.white)
.fontWeight(.bold)
.font(.title)
.frame(width: 300, height: 200)
.background(
Ellipse()
.fill(Color.green)
)
Button(action: {
outputText = "Button tapped"
}) {
Text("Button to Tap")
}
Text("Just some words...")
Spacer()
}
.highPriorityGesture(DragGesture(minimumDistance: 25, coordinateSpace: .local)
.onEnded { value in
if abs(value.translation.height) < abs(value.translation.width) {
if abs(value.translation.width) > 50.0 {
if value.translation.width < 0 {
self.swipeRightToLeft()
} else if value.translation.width > 0 {
self.swipeLeftToRight()
}
}
}
}
)
}
func swipeRightToLeft() {
outputText = "Swiped Right to Left <--"
}
func swipeLeftToRight() {
outputText = "Swiped Left to Right -->"
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
After toying around forever I have a solution here! Hacky maybe, but it works with little effort. Configure your view with an offset that is conditional on whether your drawer row is open or not and also create a state variable to keep track on whether or not your user is dragging. You can get the screenWidth by using UIScreen.main.bounds.width.
.offset(x: self.isOpen ? -screenWidth/12 : 0, y: 0)
.simultaneousGesture(DragGesture()
.onChanged{ gesture in
self.isDragging = true
self.offset = gesture.translation.width
}
.onEnded { _ in
self.isDragging = false
if self.offset > 0 {
withAnimation {
self.isOpen = false
self.offset = 0
}
} else if self.offset < 0 {
withAnimation {
self.isOpen = true
self.offset = 0
}
}
})
Then add this disable modifier on your NavigationLink
.disabled(self.isDragging || self.isOpen)
Good luck! Hopefully this works for you as well if you haven't found a solution.
The question is as simple as in the title. I am trying to put a Picker which has the style of SegmentedPickerStyle to NavigationBar in SwiftUI. It is just like the native Phone application's history page. The image is below
I have looked for Google and Github for example projects, libraries or any tutorials and no luck. I think if nativa apps and WhatsApp for example has it, then it should be possible. Any help would be appreciated.
SwiftUI 2 + toolbar:
struct DemoView: View {
#State private var mode: Int = 0
var body: some View {
Text("Hello, World!")
.toolbar {
ToolbarItem(placement: .principal) {
Picker("Color", selection: $mode) {
Text("Light").tag(0)
Text("Dark").tag(1)
}
.pickerStyle(SegmentedPickerStyle())
}
}
}
}
You can put a Picker directly into .navigationBarItems.
The only trouble I'm having is getting the Picker to be centered. (Just to show that a Picker can indeed be in the Navigation Bar I put together a kind of hacky solution with frame and Geometry Reader. You'll need to find a proper solution to centering.)
struct ContentView: View {
#State private var choices = ["All", "Missed"]
#State private var choice = 0
#State private var contacts = [("Anna Lisa Moreno", "9:40 AM"), ("Justin Shumaker", "9:35 AM")]
var body: some View {
GeometryReader { geometry in
NavigationView {
List {
ForEach(self.contacts, id: \.self.0) { (contact, time) in
ContactView(name: contact, time: time)
}
.onDelete(perform: self.deleteItems)
}
.navigationBarTitle("Recents")
.navigationBarItems(
leading:
HStack {
Button("Clear") {
// do stuff
}
Picker(selection: self.$choice, label: Text("Pick One")) {
ForEach(0 ..< self.choices.count) {
Text(self.choices[$0])
}
}
.frame(width: 130)
.pickerStyle(SegmentedPickerStyle())
.padding(.leading, (geometry.size.width / 2.0) - 130)
},
trailing: EditButton())
}
}
}
func deleteItems(at offsets: IndexSet) {
contacts.remove(atOffsets: offsets)
}
}
struct ContactView: View {
var name: String
var time: String
var body: some View {
HStack {
VStack {
Image(systemName: "phone.fill.arrow.up.right")
.font(.headline)
.foregroundColor(.secondary)
Text("")
}
VStack(alignment: .leading) {
Text(self.name)
.font(.headline)
Text("iPhone")
.foregroundColor(.secondary)
}
Spacer()
Text(self.time)
.foregroundColor(.secondary)
}
}
}
For those who want to make it dead center, Just put two HStack to each side and made them width fixed and equal.
Add this method to View extension.
extension View {
func navigationBarItems<L, C, T>(leading: L, center: C, trailing: T) -> some View where L: View, C: View, T: View {
self.navigationBarItems(leading:
HStack{
HStack {
leading
}
.frame(width: 60, alignment: .leading)
Spacer()
HStack {
center
}
.frame(width: 300, alignment: .center)
Spacer()
HStack {
//Text("asdasd")
trailing
}
//.background(Color.blue)
.frame(width: 100, alignment: .trailing)
}
//.background(Color.yellow)
.frame(width: UIScreen.main.bounds.size.width-32)
)
}
}
Now you have a View modifier which has the same usage of navigationBatItems(:_). You can edit the code based on your needs.
Usage example:
.navigationBarItems(leading: EmptyView(), center:
Picker(selection: self.$choice, label: Text("Pick One")) {
ForEach(0 ..< self.choices.count) {
Text(self.choices[$0])
}
}
.pickerStyle(SegmentedPickerStyle())
}, trailing: EmptyView())
UPDATE
There was the issue of leading and trailing items were violating UINavigationBarContentView's safeArea. While I was searching through, I came across another solution in this answer. It is little helper library called SwiftUIX. If you do not want install whole library -like me- I created a gist just for navigationBarItems. Just add the file to your project.
But do not forget this, It was stretching the Picker to cover all the free space and forcing StatusView to be narrower. So I had to set frames like this;
.navigationBarItems(center:
Picker(...) {
...
}
.frame(width: 150)
, trailing:
StatusView()
.frame(width: 70)
)
If you need segmentcontroll to be in center you need to use GeometryReader, below code will provide picker as title, and trailing (right) button.
You set up two view on the sides left and right with the same width, and the middle view will take the rest.
5 is the magic number depends how width you need segment to be.
You can experiment and see the best fit for you.
GeometryReader {
Text("TEST")
.navigationBarItems(leading:
HStack {
Spacer().frame(width: geometry.size.width / 5)
Spacer()
picker
Spacer()
Button().frame(width: geometry.size.width / 5)
}.frame(width: geometry.size.width)
}
But better solution is if you save picker size and then calculate other frame sizes, so picker will be same on ipad & iphone
#State var segmentControllerWidth: CGFloat = 0
var body: some View {
HStack {
Spacer()
.frame(width: (geometry.size.width / 2) - (segmentControllerWidth / 2))
.background(Color.red)
segmentController
.fixedSize()
.background(PreferenceViewSetter())
profileButton
.frame(width: (geometry.size.width / 2) - (segmentControllerWidth / 2))
}
.onPreferenceChange(PreferenceViewKey.self) { preferences in
segmentControllerWidth = preferences.width
}
}
struct PreferenceViewSetter: View {
var body: some View {
GeometryReader { geometry in
Rectangle()
.fill(Color.clear)
.preference(key: PreferenceViewKey.self,
value: PreferenceViewData(width: geometry.size.width))
}
}
}
struct PreferenceViewData: Equatable {
let width: CGFloat
}
struct PreferenceViewKey: PreferenceKey {
typealias Value = PreferenceViewData
static var defaultValue = PreferenceViewData(width: 0)
static func reduce(value: inout PreferenceViewData, nextValue: () -> PreferenceViewData) {
value = nextValue()
}
}
Simple answer how to center segment controller and hide one of the buttons.
#State var showLeadingButton = true
var body: some View {
HStack {
Button(action: {}, label: {"leading"})
.opacity(showLeadingButton ? true : false)
Spacer()
Picker(selection: $selectedStatus,
label: Text("SEGMENT") {
segmentValues
}
.id(UUID())
.pickerStyle(SegmentedPickerStyle())
.fixedSize()
Spacer()
Button(action: {}, label: {"trailing"})
}
.frame(width: UIScreen.main.bounds.width)
}
The below sample code should produce a grid of RoundedRectangles inside a ScrollView. With Buttons in the NavigationBar, you can change the number of rows and columns. It works the best on the iPad, because of its bigger screen.
When you run this code, you will see (or at least, I saw) that the content of the ScrollView is not centered well. When you add some rows and columns, you can't see the topmost and leftmost ones and at the bottom and at the right there is some blank space.
Do more people experience this problem? Has anybody found a solution? Does someone know an alternative way to create a scrollable grid with flexible width and height?
import SwiftUI
struct ContentView: View {
#State var x: Int = 5
#State var y: Int = 5
var body: some View {
NavigationView {
ScrollView([.horizontal, .vertical]) {
VStack(spacing: 8) {
ForEach(0 ..< self.y, id: \.self) { yCoor in
HStack(spacing: 8) {
ForEach(0 ..< self.x, id: \.self) { xCoor in
RoundedRectangle(cornerRadius: 10)
.frame(width: 120, height: 120)
.foregroundColor(.orange)
.overlay(Text("(\(xCoor), \(yCoor))"))
}
}
}
}
.border(Color.green)
}
.border(Color.blue)
.navigationBarTitle("Contents of ScrollView misplaced", displayMode: .inline)
.navigationBarItems(
leading: HStack(spacing: 16) {
Text("x:")
.bold()
Button(action: { if self.x > 0 { self.x -= 1 } }) {
Image(systemName: "minus.circle.fill")
.imageScale(.large)
}
Button(action: { self.x += 1 }) {
Image(systemName: "plus.circle.fill")
.imageScale(.large)
}
},
trailing: HStack(spacing: 16) {
Text("y:")
.bold()
Button(action: { if self.y > 0 { self.y -= 1 } }) {
Image(systemName: "minus.circle.fill")
.imageScale(.large)
}
Button(action: { self.y += 1 }) {
Image(systemName: "plus.circle.fill")
.imageScale(.large)
}
}
)
}
.navigationViewStyle(StackNavigationViewStyle())
}
}
Some workaround is to separate scroll view for vertical and horizontal axis.
import SwiftUI
struct Row: View {
var _y: Int
var x: Range<Int>
var body: some View {
HStack {
ForEach(x) { _x in
RoundedRectangle(cornerRadius: 10).tag(_x)
.frame(width: 120, height: 120)
.foregroundColor(.orange)
.overlay(Text("(\(_x), \(self._y))"))
}
}
}
}
struct Grid: View {
var m: Int
var n: Int
var body: some View {
ScrollView(.horizontal){
ScrollView(.vertical) {
ForEach(0 ..< n) { _y in
Row(_y: _y, x: 0 ..< self.m)
}
}
}
}
}
struct ContentView: View {
var body: some View {
VStack {
Text("Grid").font(.title)
Grid(m: 5, n: 5)
}
}
}
It is still not perfect, but usable.
The best is to use only one scroll axis and fill the second direction
with the right number of cells.
I miss how to know and to be able to adjust scroll position. SwiftUI is in very early stage, Once it will be more reliable, be patient