Drop shadow UITableView zoals clock.app
 

Op de homepage van iPhoneclub staat dat er een nieuwe Nederlandse applicatie is gelanceerd genaamd Trein. Deze applicatie heeft de UI conventies van de Apple Clock.app erg mooi aangehouden.

Ik ben zelf op zoek naar de mogelijkheid om zo'n zelfde UI te creëren maar zit nog in dubio of ik dit via een UITableView of een UIScrollview moet doen. Dit gezien de drop shadows boven en onder de tabel.

Op enkele fora wordt er gesproken over het gebruik van ee Gradient image in de tableHeaderView/tableFooterView van een tabel. Maar het zou mischien op een eenvoudiger manier kunnen via Quartz.

Heeft iemand hier ervaring mee en wil zijn/haar source delen?

Alvast vriendelijk dank

Alpha blend transparante afbeelding
 

Met wat zoekwerk op internet en de hulp van een mede ontwikkelaar heb ik inmiddels de oplossing gevonden:

1) Creëer een afbeelding in de achtergrond. Hierin zijn de drop shadows verwerkt.
2) Creëer een tabel en gebruik een achtergrond patroon voor elke cell.
3) Creëer een shadow afbeelding die gebruikt wordt in de header en footer van de tabel.
4) Zorg dat de header en footer buiten het zichtbare windows vallen zodat deze alleen zichtbaar worden als de gebruiker scroll-ed.

Nu is dit vrijwel allemaal gelukt behalve punt 3. Zodra ik een afbeelding gebruikt met een alpha transparantie dan wordt deze afbeelding in de simulator getoond als een zwart vlak.

Iemand enig idee hoe dit is op te lossen?

Bij voorbaat dank.

En zowaar ook het laatste punt is opgelost.

Ik dacht slim te zijn door de schadow als [UIColor colorWithPatternImage] te gebruiken en deze kleur als achtergrond gebruiken, maar hierdoor kreeg ik een zwarte achtergrond in plaats van een schadow verloop.

Door dit te vervangen door een UIImageView met een shadow al reeds op maat gemaakt kwam het transparante verloop wel goed uit de verf. Deze UIImageView heb ik vervolgens via de [TableView setTableFooter] toegekend en voila het werkte.

Nu zie ik dat ik de gehele Thread al tegen mezelf aan het typen ben, maar misschien zijn er andere ontwikkelaars die hier ook tegenaan zijn gelopen en hiermee geholpen zijn. :D

Fijn te horen dat het je gelukt is!

waarin ontwikkel jij? Via XCODE en intel proc?

Lijkt me logisch, hij werkt op Mac OS X, kans is groot dat hij Xcode gebruikt. Werkt officieel op Intel, en met een beetje gecrack draai je hem ook op PowerPC :)

tableView style
 

Kan iemand me uitleggen hoe ik het volgende voor elkaar krijg?
http://dump.danielpunt.nl/iphone/table2.jpg

Als ik in de NIB file de style op grouped zet worden de cellen kleiner maar is wel de achtegrond blauw met strepen, tevens zorgt de code ervoor dat hij maar het aantal cellen laat zien gelijk aan de count. Dus als de count 3 is maar cellen. Als ik de style op Plain zet dan lijkt het er wel enig sinds op maar ik ben de achtergrond kwijt (te zien met scrollen) en hij vult het scherm op met lege cellen tot onderaan.

Ik snap het echt niet meer!

Ik snap het wel, je hebt gewoon niet gekeken!
Er is ene paar dagen geleden een topic geopent met dezelfde vraag. Even verder kijken dan je neus lang is..

Als je dit topic bedoelt, dat is niet wat ik bedoel ... Het gaat mij niet om de kleur, maar echt om de style (plain) en daarnaast de standaard iphone achtergrond (blauw met streepjes)

Dat word daar toch uitgelegd...

Na beter lezen heb je wel gelijk, betekend dat dat ik de standaard tableview object in mn nib file moet weggooien en echt met code een eigen tableview cell moet aanmaken omdat ik het anders niet voor elkaar krijg?

Ik denk het wel :) Ik heb er zelf niet zoveel ervaring mee, anders vraag je het even aan de topicstarter van het vorige topic, misschien kan hij je helpen :)

Juist, vermoede het al. Hmmm nou eens zien hoe we dat gaan flikken dan :)
Jep heb ik gedaan.

Zal de code hier posten als het me gelukt is, mocht hier niets staan en iemand weet hoe ik zoiets voor elkaar krijg. PM me dan :)

Inderdaad. Voor al het andere ontwikkelwerk gebruik ik TextMate als editor, maar Xcode heeft voor Mac- en iPhone-development veel andere voordelen.

--draadjes samengevoegd--

[edit]: foutje

iemand een idee hoe ik de achtergrond van het disclosure icon ook grijs gekleurd krijg?
http://img232.imageshack.us/img232/6602/picture3hw9.png

zelfde geldt eigenlijk voor de edit button:
http://img232.imageshack.us/img232/2881/picture4na8.png

Goed ben een stuk verder. Dit is nu de status (Start button en timer zijn tijdelijk)

http://img221.imageshack.us/img221/7531/picture5jd3.png

Kun je ook even vertellen hoe je dit nu precies voor elkaar gekregen hebt? :)

Dit effect kun je krijgen door de backgroundView property van een UITableViewCell aan te passen met de door jouw gewenste view (in dit geval dus het plaatje). Vervolgens gebruik je de contentView om je button, progress view en label in te plaatsen.

het plaatje heeft dus het effect ?

Nee, het schaduw effect is te verkrijgen zoals in eerdere posts al aangegeven is. Een transparante png in de header en footer, en dan de tableview zo plaatsen dat de header buiten de parent view valt, zodat de schaduw (de header dus) alleen bij scrollen zichtbaar wordt.

Ik doelde in mijn bovenstande post meer op de custom UITableViewCell en het property backgroundView welk gebruikt kan worden om een achtergrond door te laten lopen onder de accessoryView

Ik heb een UIColor gedefinieerd met colorFromPatternImage. Hierdoor wordt de gehele cell gevuld met de achtergrond gradient.

Verder ben ik bezig met een korte tutorial, maar ben gister in gesprek met Pixxaa tegen issue gelopen waar ik nog geen antwoord op heb kunnen vinden.

De tableView wordt in mijn geval namelijk verplaatst zodat de header buiten beeld valt. Hierdoor wordt deze pas zichtbaar wanneer je met de table cells gaat schuiven. Deze verschuiving zat in de ViewWillAppear method. Echter, wanneer je gebruik maakt van een ViewController wordt deze tableView automatisch weer naar beneden verplaats wanneer je bijvoorbeeld terugkomt van een andere view. Wanneer je een ModalView gebruikt zoals bij de Clock.App is er overigens geen probleem.

Als iemand hier een goede suggestie voor weet?

Je moet even goed kijken welke code er voor zorgt dat de view zichtbaar wordt. Ik ben het probleem ook tegen gekomen. Soms wordt viewWillAppear niet aangeroepen. Meestal in het geval dat door Apple (of jouw) geschreven code de view dmv. van bijv. addSubview: of insertSubview:above: "handmatig" toevoegd aan de view boom structuur.

Zet dus zelf de juiste code om addSubview heen:
Het werkt wel als je bijvoorbeeld een navigation controller of tabcontroller gebruikt, omdat de API's van Apple deze code dan voor je aanroepen.

Je kunt proberen om een UIViewController te gebruiken en zelf je UITableView te maken, in plaats van een UITableViewController te gebruiken. Als je namelijk zelf je table view maakt, zal hij nooit automagisch gaan schuiven.

mijn code die daar voor zorgt:

[self.navigationController pushViewController:controller animated:YES];

Ik gebruik al een UIViewController:
@interface RootViewController : UIViewController {

webmagic,

Het probleem is dat de navigation controller zelf een backbutton creëert. Dus het aanroepen van deze functies is dan niet mogelijk. Je kunt dan zelf natuurlijk zorgen dat deze button wordt gecreeert en een selector creeren voor dit event.

Maar ik vraag me af of dit niet makkelijker kan?

Sorry... het zit hem in het feit dat ik [super loadView] aanroep (die maakt een simpele UIView) en dan de table view als subview toevoeg aan self.view. De controller gaat dan de controller view wel resizen, maar zijn subviews niet.

Ik probeer het nu anders op te lossen. In plaats van de view die ik laad er in te schuiven doormiddel van 'erfen' wil ik hem erop plakken. Dus geen pushViewController maar presentModelViewController. Dit lijkt de oplossing omdat mn tables dan niet in en uit schuiven alleen heb ik wat problemen met de backBarButton omdat die niet meer geerfd wordt van de parent. Geen idee hoe ik dat moet oplossen :)

Ik heb het advies van Naquah(bedankt) gevolgt en inderdaad als je een view toevoegd en daar een tableview overheen legt. Dan kun je in de Interface Builder in dit geval je tableview naar boven uitrekken. Wanneer je nu met de een item edit en weer terug komt blijft de tableview zijn locatie behouden.

Je kunt de tableview in de XIB eenvoudig vervangen door een View de tableview te slepen in het document venster. Sleep daar vervolgens weer een tableview naartoe. (Kijk goed dat je de view niet vervangt door een tableview, maar dat je de horizontable lijn onder de view vershijnt). Nu kun je de TableView uitrekken. Misschien moet je nog even je View Mode aanpassen want deze staat standaard op scale to fit.

kan je een screenshot maken?

http://www.nextinvention.nl/TEMP/Afbeelding1.png
http://www.nextinvention.nl/TEMP/Afbeelding2.png

Je moet dus in de inspector weer de koppelingen opbouwen(zie afbeelding 2).

Duidelijk, zal vanavond nog even uit proberen. Maar dat betekend dat ik geen presentModalViewController methode hoef toe te passen?

Dat klopt.

Nou, lijkt te werken! Nu alleen nog even de achtergrondview van de nieuwe View zien te wijzigen..

In de viewDidLoad { methode heb ik nu dit staan:

CGRect screenRect = [[UIScreen mainScreen] applicationFrame];
self.mainView = [[[UIView alloc] initWithFrame:screenRect] autorelease];
mainView.backgroundColor = [UIColor groupTableViewBackgroundColor];
self.view = mainView;
//[self.view bringSubviewToFront:tableView];

Dit zorgt er perfect voor dat mn UIView groupTable style looks heeft maar nu mis ik mn tableView zelf. Het naar voren (ToFront) brengen van de tableView werkt niet en het verzenden (sendSubviewToBack) van mainView werkt ook niet.

Wat doe ik niet goed?

OPGELOST.

ipv: self.view.backgroundColor = [UIColor groupTableViewBackgroundColor];

Moest ik gewoon de juiste view het kleurtje geven..

self.tableView.backgroundColor = [UIColor groupTableViewBackgroundColor];

overige code die ik gaf is dus niet meer van toepassing

Even toevoegen, kom net tot de ontdekking dat mn tableHeaderView en tableFooterView niet worden verwijderd als ik mn table verwijder. Hoe kan dat?

De table view retained de header en footer views en released ze als hij ze niet meer nodig heeft. Het toewijzen van de header en footer views is dus 'retainCount-neutraal'.

Je moet ze zelf dus ook nog een keer releasen. Meestal doe ik dit door ze te autoreleasen op het moment dat ik ze aan de table view geef.

? Maar ik release ze toch al.

//Dropshadow cell setup (schaduw onder/boven tables)
UIImage *footerImage = [UIImage imageNamed:@"TableFooterShadow.png"];
UIImageView *fView = [[UIImageView alloc] initWithImage:footerImage];

UIImage *headerImage = [UIImage imageNamed:@"TableHeaderShadow.png"];
UIImageView *hView = [[UIImageView alloc] initWithImage:headerImage];


fView.alpha = 0.3;
hView.alpha = 0.3;

[tableView setSectionFooterHeight:TABLE_SHADOW_HEIGHT];
[tableView setSectionHeaderHeight:TABLE_SHADOW_HEIGHT];
[tableView setTableFooterView:fView];
[tableView setTableHeaderView:hView];
//self.tableView.tableFooterView = fView;
//self.tableView.tableHeaderView = hView;
[fView release];
[hView release];

He luister, ik weet niet wat jouw code is!

Maar volgens mij ziet je code er goed uit... wordt je table view wel gereleased dan? Of ik snap niet wat je bedoelt met "verwijderen" in je vraag.