[iOS] Segmenedcontrol in combinatie met navigation bar, hoe?

[alienfruit]

Ik probeer een gebruikersinterface te maken waarbij een UISegmentedControl onder een UINavigationBar binnen een UITableViewController zit. Het idee is dat segmentedcontrol van het scherm kan worden geduwd onder door de UINavigationBar wanneer de UITableView schoolt. Een vergelijkbare animatie of effect zit ok in de applicatie YPlan. Alleen ik zie niet hoe ik dit kan herproduceren.

Ik heb geprobeerd om een segmented control als tableViewHeader toe te voegen aan een tableView alleen dit werkt. Omdat als je nu naar beneden scrollt dan beweegt UISegmentedControl mee. Maar heb dat juist niet.

Iemand enig idee hoe ik hetzelfde effect kan krijgen als in onderstaand filmpje:
https://www.dropbox.com/s/58xno5a03szcuxc/YPlanAnimation.mov

Het filmpje komt van de Plan applicatie.

Ik heb het volgende geprobeerd:

code:

let headerView: UIView = UIView(frame: CGRectMake(10, 0, self.view.bounds.size.width - 10, 44))
headerView.backgroundColor = UIColor(red: 231.0/255.0, green: 95.0/255.0, blue: 53.0/255.0, alpha: 1)

let segmentedControl: UISegmentedControl = UISegmentedControl(items: ["Solo", "Group"])
segmentedControl.tintColor = UIColor.whiteColor()
segmentedControl.autoresizingMask = UIViewAutoresizing.FlexibleWidth
segmentedControl.frame = CGRectMake(
    (self.tableView.frame.size.width - segmentedControl.frame.size.width)/2,
    8,
    segmentedControl.frame.size.width,
    segmentedControl.frame.size.height
)
headerView.addSubview(segmentedControl)
self.tableView.tableHeaderView = headerView

[ZpAz]

De segmented control moet niet een onderdeel zijn van de tableview, maar van de view waarin ook de navigationcontroller getoond wordt. Daarna ga je luisten naar de scroll events van de tableview en op basis daarvan bepaal je de hoogte en grootte van je segemented control.

[alienfruit]

Hmm, dan kan je vast niet de UITableVieController meer gebruiken maar een losse UITableView in UIViewController?

[ZpAz]

Je kan ook meerdere controllers nesten, dus dat is geen probleem.

[alienfruit]

Het lukt mij nog niet! Ik hoop er deze week naar kunnen kijken.

[BikkelZ]

Nesten werkt probleemloos, je kunt als je wil Tab Bar controllers in navigation controllers nesten. Meestal heb ik een root view controller met daarin een navigation controller en een menu. Ik weet niet of je die tab bar altijd wil zien door de hele applicatie of niet, ik ga er nu van uit van niet, dus je kunt dat hele scherm nog weg pushen:

code:

-- UIViewController (root controller)
  |-- UIViewController (je hamburger menu, mensen willen altijd hamburgers, nom nom nom)
  |-- UINavigationController (verberg de navigatiebalk desnoods, deze controller doet al je navigatie)
     |-- UIViewController (je main interface)
        |-- UISegmentedControl
        |-- UITabBarController
            |-- (de rest)

Dit doe je dus gewoon in Interface Builder in je Main.storyboard. Ik zou alle subviews van je tab bar netjes wegmoffelen onder een Storyboard reference zodat je Storyboard niet te zwaar wordt.

Wat ik altijd doe is belangrijke controllers zoals de tab bar controller en de navigation controller en de root controller zich laten registreren via static properties, zodat je gewoon kunt zeggen MainNavigationController.pushNewController(controller), MainNavigationController.popToRoot() en dat soort dingen. Zelfde voor menu, tabs changen.

(ik moet ff de jongste oppikken van school, brb)

[ Voor 27% gewijzigd door BikkelZ op 15-10-2015 17:10 ]

[alienfruit]

Hmm, ik heb nu het probleem. Dat ik een UITableViewController in de story board heb met daarin een prototype cell. Deze view controller is vervolgens middels Embed In-functie van Interface Builder embedded in een UINavigationController. Dus ik kan lastig switchen naar een gewoon UIViewController zonder weer uren bezig te zijn met de prototype cell.

Nu heb ik het volgende bedacht qua code. Alleen het werk nog niet helemaal lekker. Redelijk 'jerky' als je niet heel langzaam scrollt.

Swift:

/**
 *
 */
class MyTipsViewController: UITableViewController {
    
    private var tips = [Tip]()
    private var firstTime = true
    private var selectedIndexPath : NSIndexPath?
    private var tipLoader = TipsLoader()
    private var headerView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Create the header view for the table view
        let navigationBarHeight = self.navigationController?.navigationBar.frame.height
        headerView = UIView(frame: CGRectMake(0, 64, self.view.bounds.size.width - 0, 44))
        headerView.backgroundColor = UIColor(red: 231.0/255.0, green: 95.0/255.0, blue: 53.0/255.0, alpha: 1)

        let segmentedControl: UISegmentedControl = UISegmentedControl(items: ["Nearby", "Everywhere"])
        segmentedControl.addTarget(self, action: "activityFilterTypeChanged:", forControlEvents: .ValueChanged);
        segmentedControl.selectedSegmentIndex = 0
        segmentedControl.tintColor = UIColor.whiteColor()
        segmentedControl.autoresizingMask = UIViewAutoresizing.FlexibleWidth
        segmentedControl.frame = CGRectMake(
            (self.tableView.frame.size.width - segmentedControl.frame.size.width)/2,
            8,
            segmentedControl.frame.size.width,
            segmentedControl.frame.size.height
        )
        headerView.addSubview(segmentedControl)
        
        // Put the headerView instance below the navigationBar of the navigationController
        self.navigationController?.view.insertSubview(headerView, belowSubview: self.navigationController!.navigationBar)
    }

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)

        // Make sure the table view cells are not below the header view when showing the view controller       
        self.tableView!.contentInset = UIEdgeInsets(top: 44, left: 0, bottom: 0, right: 0)
    }

    override func scrollViewDidScroll(scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        let absOffsetY = abs(offsetY)
        let headerOrigin = 0
       
        if offsetY < 0 && offsetY >= -43 {
            headerView.frame.origin.y = 64 - (44 - absOffsetY)
            print("Yikes")
        } else if offsetY > 44 && absOffsetY != offsetY {
            print("Put back the header view")
            if offsetY > 64 {
                if headerView.frame.origin.y < 64 {
                    headerView.frame.origin.y = 64
                }
            }
        }
        print("Scroll Offset: \(offsetY) || \(absOffsetY) \n")
    }
}

[BoringDay]

"Dus ik kan lastig switchen naar een gewoon UIViewController zonder weer uren bezig te zijn met de prototype cell."

Dan kan je beter een custom tableview cell maken (xib).
https://medium.com/@musaw...les-in-xcode-9bee5824e722

[ Voor 10% gewijzigd door BoringDay op 17-10-2015 16:19 ]

[alienfruit]

Ik heb nu geprobeerd een nieuwe UIViewController aan te maken en vervolgens de UITableView in de view gesleept en dit lijkt te werken. Nu heb ik constraints voor elke kant toegevoegd. Alleen nu hou ik nog steeds links en rechts 20px over. Als ik nu in de code self.tableView.translatesAutoresizingMaskIntoConstraints = true dan verdwijnen ze.

Ik snap alleen niet waarom ik dit moet doen? Iemand enig idee?

[BoringDay]

Dat heeft te maken met je constraints "Reset to suggested constraints" uitvoeren bij de story board.
kortom je tableview heb je niet goed geplaatst.

[ZpAz]

alienfruit schreef op zondag 18 oktober 2015 @ 13:37:
Ik heb nu geprobeerd een nieuwe UIViewController aan te maken en vervolgens de UITableView in de view gesleept en dit lijkt te werken. Nu heb ik constraints voor elke kant toegevoegd. Alleen nu hou ik nog steeds links en rechts 20px over. Als ik nu in de code self.tableView.translatesAutoresizingMaskIntoConstraints = true dan verdwijnen ze.

Ik snap alleen niet waarom ik dit moet doen? Iemand enig idee?

Dat komt door de Layout Margins functie in de interface builder.

[BikkelZ]

Stop met het codematig toevoegen van views
Doe alles met autolayouts.

Verder: wat jij wil met die header view (sticky header / footer) zit al standaard ingebouwd in een Table View en dat werkt via de delegate met view for header / footer in section. Daar moet je een view terug geven en dat is een van de weinige plaatsen waar ik je inderdaad zou aanraden gewoon handmatig een view te maken.

Maar je bent echt het paard achter de wagen aan het binden nu. Zet gewoon een UITableView en een segmented control samen in één normale view controller.

Zet eens een schetsje van de gewenste UI hier neer en dan kan ik je precies vertellen hoe je hem moet opzetten zodat je het minste gezeik hebt.

[ Voor 11% gewijzigd door BikkelZ op 19-10-2015 13:13 ]

[alienfruit]

Sorry, ik was gisteren bij een klant zonder mijn Mac. Ik heb inmiddels alles omgezet naar UIViewController's dus daar ben ik blij mee. Ik heb ook de margins werken door "Relative to Margin" uit te zetten.

Ik zou vandaag enkele schetsen maken van welk effect ik zou willen en ik zou een filmpje proberen te maken.

Wat ik wel vreemd vind dat als ik Autolayout gebruik dat het in Interface Builder soms geen fouten geeft maar als ik mijn app start er allemaal vage meldingen in de console staan. Maar goed ik ga maar mij eerst maar eens verdiepen in de schetsen.

Dit zal waarschijnlijk vanavond worden. Er moet vandaag een klantenproject van de brug worden geduwd

[BoringDay]

@BikkelZ,

Daar ben ik het niet mee eens soms ontkom je er niet aan en het biedt een hoop voordelen als je in runtime geheel de views/controls/objecten kan bepalen.

@alienfruit

"Wat ik wel vreemd vind dat als ik Autolayout gebruik dat het in Interface Builder soms geen fouten geeft maar als ik mijn app start er allemaal vage meldingen in de console staan."

Ik denk dat je het concept van constraints beter eerst kan gaan bestuderen voordat je werkelijk een Applicatie gaat maken. Die kennis heb je namelijk nodig anders blijf je er constant tegen aanlopen. De meldingen zijn vaak omdat je views buiten hun domein raken.

[ Voor 96% gewijzigd door BoringDay op 20-10-2015 19:35 ]

[alienfruit]

Ik heb inmiddels wat afbeeldingen en filmpje gemaakt van welk effect ik zou willen nabootsen. Ik wil dus bovenaan een UIViewController graag een element of afbeeldingen hebben die langzaam uit beeld verdwijnt na mate de UIScrollView scrollt. In het beginsel is het helemaal zichtbaar maar hoe verder je komt moet het kleiner worden en uit beeld verdwijnen.

Ik ben nu een nieuw project begonnen met een UIViewController met daar in een UITableView en daar boven een UIImageView.

Onderstaand filmpje van YPlan visualiseert het effect perfect weer:

Schets: https://www.dropbox.com/s...10-21%20at%2018.15.32.png

Fimpje: https://www.dropbox.com/s...pz/YPlanMovement.mov?dl=0
(excuses voor het geluid)

[ Voor 11% gewijzigd door alienfruit op 21-10-2015 19:29 ]

[alienfruit]

Iemand?

[BoringDay]

bestudeer: https://developer.apple.com :-)

Ik vrees dat je op jezelf bent aangewezen en alle bronnen die te vinden zijn op internet.
Maar als ontwikkelaar weet je daar ook wel raad mee of verzint een creatieve oplossing! toch?

[BikkelZ]

alienfruit schreef op woensdag 21 oktober 2015 @ 19:27:
Ik heb inmiddels wat afbeeldingen en filmpje gemaakt van welk effect ik zou willen nabootsen. Ik wil dus bovenaan een UIViewController graag een element of afbeeldingen hebben die langzaam uit beeld verdwijnt na mate de UIScrollView scrollt. In het beginsel is het helemaal zichtbaar maar hoe verder je komt moet het kleiner worden en uit beeld verdwijnen.

Ik ben nu een nieuw project begonnen met een UIViewController met daar in een UITableView en daar boven een UIImageView.

Onderstaand filmpje van YPlan visualiseert het effect perfect weer:

Schets: https://www.dropbox.com/s...10-21%20at%2018.15.32.png

Fimpje: https://www.dropbox.com/s...pz/YPlanMovement.mov?dl=0
(excuses voor het geluid)

Grappig, ik heb ongeveer zoiets al een keer gebouwd. Pittig maar wel te doen. Je kunt twee dingen proberen, een tableview section header want die is standaard al sticky, of je gaat het met een UIScrollViewDelegate implementatie proberen. Zoals het in het voorbeeld gebeurt is het met een soort 50% scroll gedaan en dat betekent dat je het alleen met UIScrollViewDelegate kunt doen maar met een simpele section header kom je al een héél eind.

Navigation bar transparant maken kan prima, je kunt de verkleuring ook weer met die UIScrollViewDelegate aansturen. Wat ook handig om te weten is dat een UITableView ook een scrollview heeft en ook die scroll delegate callbacks callt, dat scheelt alvast een berg.

Het verspringen van die images kun je doen met een UIPageViewController die je via een container view er in hangt.

[alienfruit]

Heeft even geduurd. Maar ik heb er gisteren naar gekeken en het is nagenoeg gelukt! Alleen niet middels Autolayout... Maar ja, gelukt is gelukt, haha.