Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/post tab bar ui #104

Closed
wants to merge 5 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 13 additions & 2 deletions FightPandemics.xcodeproj/project.pbxproj
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,10 @@
2FB342042468FFCC007E397F /* Navigator.swift in Sources */ = {isa = PBXBuildFile; fileRef = 2FB342032468FFCC007E397F /* Navigator.swift */; };
2FB34207246901DA007E397F /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 2FB34205246901DA007E397F /* LaunchScreen.storyboard */; };
49D0B0B42467BC6E007B3762 /* FightPandemicsUITests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 49D0B0B32467BC6E007B3762 /* FightPandemicsUITests.swift */; };
C0E5EDF824705CC200F42319 /* PostVisibilitySelectionView.swift in Sources */ = {isa = PBXBuildFile; fileRef = C0E5EDF724705CC200F42319 /* PostVisibilitySelectionView.swift */; };
C0E5EDFB2470AA4E00F42319 /* Duration.swift in Sources */ = {isa = PBXBuildFile; fileRef = C0E5EDFA2470AA4E00F42319 /* Duration.swift */; };
7DEF116C7BC2A4F6BA56F4F0 /* Pods_FightPandemics.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = AC14540D23239E4E26F554CF /* Pods_FightPandemics.framework */; };
C013ACDA246FF3E200F22BE7 /* OfferRequest.swift in Sources */ = {isa = PBXBuildFile; fileRef = C013ACD9246FF3E200F22BE7 /* OfferRequest.swift */; };
C018DD782472EF2900EEB3FC /* TabBarUI.swift in Sources */ = {isa = PBXBuildFile; fileRef = C018DD772472EF2900EEB3FC /* TabBarUI.swift */; };
C0E5EDFB2470AA4E00F42319 /* Duration.swift in Sources */ = {isa = PBXBuildFile; fileRef = C0E5EDFA2470AA4E00F42319 /* Duration.swift */; };
DC807E59246FAC8B00046D67 /* CreatePostEntitySelectionModal.swift in Sources */ = {isa = PBXBuildFile; fileRef = DC807E58246FAC8B00046D67 /* CreatePostEntitySelectionModal.swift */; };
DC807E5B246FB02300046D67 /* Entity.swift in Sources */ = {isa = PBXBuildFile; fileRef = DC807E5A246FB02300046D67 /* Entity.swift */; };
DC807E5F246FB1C000046D67 /* Organization.swift in Sources */ = {isa = PBXBuildFile; fileRef = DC807E5E246FB1C000046D67 /* Organization.swift */; };
Expand Down Expand Up @@ -174,6 +174,7 @@
74D3F30914E75C1D9DB78030 /* Pods-FightPandemics.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-FightPandemics.debug.xcconfig"; path = "Target Support Files/Pods-FightPandemics/Pods-FightPandemics.debug.xcconfig"; sourceTree = "<group>"; };
AC14540D23239E4E26F554CF /* Pods_FightPandemics.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_FightPandemics.framework; sourceTree = BUILT_PRODUCTS_DIR; };
C013ACD9246FF3E200F22BE7 /* OfferRequest.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = OfferRequest.swift; sourceTree = "<group>"; };
C018DD772472EF2900EEB3FC /* TabBarUI.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TabBarUI.swift; sourceTree = "<group>"; };
C0E5EDF724705CC200F42319 /* PostVisibilitySelectionView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PostVisibilitySelectionView.swift; sourceTree = "<group>"; };
C0E5EDFA2470AA4E00F42319 /* Duration.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Duration.swift; sourceTree = "<group>"; };
DC807E58246FAC8B00046D67 /* CreatePostEntitySelectionModal.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CreatePostEntitySelectionModal.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -301,6 +302,7 @@
2F0B5162246E0DF200BE42BC /* CreatePost */ = {
isa = PBXGroup;
children = (
C018DD762472EE0800EEB3FC /* TabBarUI */,
C0E5EDF92470AA2D00F42319 /* Duration */,
2F426B3A2472C2A3007A4796 /* Visibility */,
C013ACD8246FF3C500F22BE7 /* OfferRequest */,
Expand Down Expand Up @@ -532,6 +534,14 @@
path = OfferRequest;
sourceTree = "<group>";
};
C018DD762472EE0800EEB3FC /* TabBarUI */ = {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's organize this under Features/TabBar instead of Features/Post/CreatePost

isa = PBXGroup;
children = (
C018DD772472EF2900EEB3FC /* TabBarUI.swift */,
);
path = TabBarUI;
sourceTree = "<group>";
};
C0E5EDF92470AA2D00F42319 /* Duration */ = {
isa = PBXGroup;
children = (
Expand Down Expand Up @@ -793,6 +803,7 @@
2F0B5167246E0DF200BE42BC /* CreatePostHeader.swift in Sources */,
DC807E59246FAC8B00046D67 /* CreatePostEntitySelectionModal.swift in Sources */,
2F0C3C672471DE660002B384 /* UINavigationBar+FightPandemics.swift in Sources */,
C018DD782472EF2900EEB3FC /* TabBarUI.swift in Sources */,
0322FA13246E23D0009507D7 /* TagView.swift in Sources */,
2F72CE5F2468793C00750785 /* FightPandemicsAPI.swift in Sources */,
DC807E6A247027C700046D67 /* JSONFileReader.swift in Sources */,
Expand Down
199 changes: 199 additions & 0 deletions FightPandemics/Features/Post/CreatePost/TabBarUI/TabBarUI.swift
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
//
// TabBarUI.swift
// FightPandemics
//
// Created by ehsan sat on 5/18/20.
//
// Copyright (c) 2020 FightPandemics
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import UIKit

class TabBarUI: UIView {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we call this TabBar instead of TabBarUI? no need to include UI in the name of a UI component

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ethanswift i think maybe the requirements have been lost in translation? this Issue covers replacing the tab bar of the entire app

so what i would imagine is, instead of subclassing UIView, you'd be subclassing UITabBar. and you'd have to work in RootTabBarController to customize its tabBar property

i didnt have the chance to look at your component closely - but reading it its seems as though perhaps the dotView is statically placed under the Home tab icon. the intention is for each tab to have a selected and a deselected state; in the selected state, a dot appears under the icon in place of the title

if getting the dot aspect in is a lot, i'd say its acceptable to drop the dot bit and just concern yourself with replacing the tab bar

Actually, its instance method is getting a selected enum which asks for the tab which is selected as a parameter and adds that dot and bolden that image (make it black). so in the function which is setUp(selected: .feed) you choose which tab to be loaded

private var feedBtn = UIButton()
private var searchBtn = UIButton()
private var postBtn = UIButton()
private var inboxBtn = UIButton()
private var profileBtn = UIButton()
private var feedLbl = UILabel()
private var searchLbl = UILabel()
private var inboxLbl = UILabel()
private var profileLbl = UILabel()
private var feedStack = UIStackView()
private var searchStack = UIStackView()
private var postStack = UIStackView()
private var inboxStack = UIStackView()
private var profileStack = UIStackView()
private var dotView = UIView()
private var wholeStack = UIStackView()
enum Selected: Int {
case feed = 1
case search
case post
case inbox
case profile
}
func setUp (selected: Selected) {
dotView.backgroundColor = UIColor(hexString: "#425AF2")
dotView.frame.size.height = 6
dotView.clipsToBounds = true
dotView.layer.cornerRadius = dotView.frame.size.height / 2
self.addSubview(dotView)
feedBtn.setImage(#imageLiteral(resourceName: "home (1)").withRenderingMode(.alwaysTemplate), for: .normal)
feedBtn.imageView?.contentMode = .scaleAspectFit
feedBtn.tintColor = (selected.rawValue == 1) ? .black : UIColor(hexString: "#979797")
self.addSubview(feedBtn)
searchBtn.setImage(#imageLiteral(resourceName: "Group 1087").withRenderingMode(.alwaysTemplate), for: .normal)
searchBtn.tintColor = (selected.rawValue == 2) ? .black : UIColor(hexString: "#979797")
searchBtn.imageView?.contentMode = .scaleAspectFit
self.addSubview(searchBtn)
postBtn.setImage(#imageLiteral(resourceName: "plus-circle-solid copy"), for: .normal)
postBtn.imageView?.contentMode = .scaleAspectFit
self.addSubview(postBtn)
inboxBtn.setImage(#imageLiteral(resourceName: "inbox").withRenderingMode(.alwaysTemplate), for: .normal)
inboxBtn.tintColor = (selected.rawValue == 4) ? .black : UIColor(hexString: "#979797")
inboxBtn.imageView?.contentMode = .scaleAspectFit
self.addSubview(inboxBtn)
profileBtn.setImage(#imageLiteral(resourceName: "user-circle").withRenderingMode(.alwaysTemplate), for: .normal)
profileBtn.tintColor = (selected.rawValue == 5) ? .black : UIColor(hexString: "#979797")
profileBtn.imageView?.contentMode = .scaleAspectFit
self.addSubview(profileBtn)
feedLbl.attributedText = NSAttributedString(string: "TabBarUIFeedBtn".localized, attributes: [NSAttributedString.Key.font: Fonts.poppinsRegular.customFont(size: 12), NSAttributedString.Key.foregroundColor: UIColor(hexString: "#979797")])
self.addSubview(feedLbl)
searchLbl.attributedText = NSAttributedString(string: "TabBarUISearchBtn".localized, attributes: [NSAttributedString.Key.font: Fonts.poppinsRegular.customFont(size: 12), NSAttributedString.Key.foregroundColor: UIColor(hexString: "#979797")])
self.addSubview(searchLbl)
inboxLbl.attributedText = NSAttributedString(string: "TabBarUIInboxBtn".localized, attributes: [NSAttributedString.Key.font: Fonts.poppinsRegular.customFont(size: 12), NSAttributedString.Key.foregroundColor: UIColor(hexString: "#979797")])
self.addSubview(inboxLbl)
profileLbl.attributedText = NSAttributedString(string: "TabBarUIProfileBtn".localized, attributes: [NSAttributedString.Key.font: Fonts.poppinsRegular.customFont(size: 12), NSAttributedString.Key.foregroundColor: UIColor(hexString: "#979797")])
self.addSubview(profileLbl)
setUpStacks(selected: selected)
}
func setUpStacks (selected: Selected) {
setUpLStack(selected: selected)
setUpRStack(selected: selected)
setUpConstraints(selected: selected)
}
func setUpRStack (selected: Selected) {
inboxStack.translatesAutoresizingMaskIntoConstraints = false
inboxStack.axis = .vertical
inboxStack.alignment = .center
inboxStack.distribution = .fill
inboxStack.spacing = 5
inboxStack.addArrangedSubview(inboxBtn)
if (selected.rawValue == 3) {
inboxStack.spacing = 12
inboxStack.addArrangedSubview(dotView)
} else {
inboxStack.addArrangedSubview(inboxLbl)
}
self.addSubview(inboxStack)
profileStack.translatesAutoresizingMaskIntoConstraints = false
profileStack.axis = .vertical
profileStack.alignment = .center
profileStack.distribution = .fill
profileStack.spacing = 5
profileStack.addArrangedSubview(profileBtn)
if (selected.rawValue == 4) {
profileStack.spacing = 12
profileStack.addArrangedSubview(dotView)
} else {
profileStack.addArrangedSubview(profileLbl)
}
self.addSubview(profileStack)
wholeStack.translatesAutoresizingMaskIntoConstraints = false
wholeStack.axis = .horizontal
wholeStack.alignment = .top
wholeStack.distribution = .fillEqually
wholeStack.spacing = ((UIScreen.main.bounds.width - 275) / 4)
wholeStack.addArrangedSubview(feedStack)
wholeStack.addArrangedSubview(searchStack)
wholeStack.addArrangedSubview(postStack)
wholeStack.addArrangedSubview(inboxStack)
wholeStack.addArrangedSubview(profileStack)
self.addSubview(wholeStack)
}
func setUpLStack (selected: Selected) {
feedStack.translatesAutoresizingMaskIntoConstraints = false
feedStack.axis = .vertical
feedStack.alignment = .center
feedStack.distribution = .fill
feedStack.spacing = 5
feedStack.addArrangedSubview(feedBtn)
if (selected.rawValue == 1) {
feedStack.spacing = 12
feedStack.addArrangedSubview(dotView)
} else {
feedStack.addArrangedSubview(feedLbl)
}
self.addSubview(feedStack)
searchStack.translatesAutoresizingMaskIntoConstraints = false
searchStack.axis = .vertical
searchStack.alignment = .center
searchStack.distribution = .fill
searchStack.spacing = 5
searchStack.addArrangedSubview(searchBtn)
if (selected.rawValue == 2) {
searchStack.spacing = 12
searchStack.addArrangedSubview(dotView)
} else {
searchStack.addArrangedSubview(searchLbl)
}
self.addSubview(searchStack)
postStack.translatesAutoresizingMaskIntoConstraints = false
postStack.axis = .vertical
postStack.alignment = .center
postStack.distribution = .fill
postStack.spacing = 5
postStack.addArrangedSubview(postBtn)
self.addSubview(postStack)
}
func setUpConstraints (selected: Selected) {
switch selected {
case .feed:
dotView.makeSubview(of: feedStack)
.width(6)
.height(6)
case .search:
dotView.makeSubview(of: searchStack)
.width(6)
.height(6)
case .inbox:
dotView.makeSubview(of: inboxStack)
.width(6)
.height(6)
case .profile:
dotView.makeSubview(of: profileStack)
.width(6)
.height(6)
default:
break;
}

wholeStack.makeSubview(of: self)
.width((UIScreen.main.bounds.width - 60))
.height(60)
.right(to: \.rightAnchor, constant: -30)
.left(to: \.leftAnchor, constant: 30)
.top(to: \.topAnchor, constant: 55)

}
}


Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"images" : [
{
"idiom" : "universal",
"filename" : "Group 1087.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "Group [email protected]",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "Group [email protected]",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"images" : [
{
"idiom" : "universal",
"filename" : "home (1).png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "home (1)@2x.png",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "home (1)@3x.png",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"images" : [
{
"idiom" : "universal",
"filename" : "inbox.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "[email protected]",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "[email protected]",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"images" : [
{
"idiom" : "universal",
"filename" : "plus-circle-solid copy.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "plus-circle-solid [email protected]",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "plus-circle-solid [email protected]",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"images" : [
{
"idiom" : "universal",
"filename" : "user-circle.png",
"scale" : "1x"
},
{
"idiom" : "universal",
"filename" : "[email protected]",
"scale" : "2x"
},
{
"idiom" : "universal",
"filename" : "[email protected]",
"scale" : "3x"
}
],
"info" : {
"version" : 1,
"author" : "xcode"
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions FightPandemics/Resources/en.lproj/Localizable.strings
Original file line number Diff line number Diff line change
Expand Up @@ -48,12 +48,19 @@
"OfferRequestRequestBtn" = "Requesting";
"OfferRequestCloseBtn" = "Close";
"OfferRequestConfirmBtn" = "Confirm";

"TabBarUIFeedBtn" = "Feed";
"TabBarUISearchBtn" = "Search";
"TabBarUIInboxBtn" = "Inbox";
"TabBarUIProfileBtn" = "Profile";

"Close-Button-Text" = "Close";
"Tag-Button-With-Unselected-Tag" = "Add Tag";
"Tag-Btn-With-One-Selected-Tag" = "Add 1 Tag";
"Tag-Btn-With-Many-Selected-Tags" = "Add %@ Tags";
"Choose-Tags-Title" = "Choose Tags";


// MARK: Profile

"LogOutCTA" = "Log Out";