ios - How to create a centered UICollectionView like in Spotify's Player -


i have lot of difficulty trying create uicollectionview in spotify's player acts this:

a busy cat

the problem me 2 fold.

1) how center cells can see middle cell 1 of left , right.

  • if create cells square , add spacing between each cell, cells correctly displayed not centered.

2) pagingenabled = yes, collectionview correctly swipes 1 page another. however, without cells being centered, moves collection view on page width of screen. question how make pages move effect above.

3) how animate size of cells move

  • i don't want worry much. if can work great, harder problems 1 , 2.

the code have simple uicollectionview normal delegate setup , custom uicollectionview cells squares. maybe neeed subclass uicollectionviewflowlayout? or maybe need turn pagingenabled no , use custom swipe events? love help!

as have said in comment want in objective-c code, there famous library called icarousel can helpful in completing requirement.link: https://github.com/nicklockwood/icarousel

you may use 'rotary' or 'linear' or other style little or no modification implement custom view

to implement have implement delegate methods of , it's working ex:

//specify type want use in viewdidload _carousel.type = icarouseltyperotary;  //set following delegate methods - (nsinteger)numberofitemsincarousel:(icarousel *)carousel {     //return total number of items in carousel     return [_items count]; }  - (uiview *)carousel:(icarousel *)carousel viewforitematindex:(nsinteger)index reusingview:(uiview *)view {     uilabel *label = nil;      //create new view if no view available recycling     if (view == nil)     {         //don't specific index within         //this `if (view == nil) {...}` statement because view         //recycled , used other index values later         view = [[uiimageview alloc] initwithframe:cgrectmake(0, 0, 200.0f, 200.0f)];         ((uiimageview *)view).image = [uiimage imagenamed:@"page.png"];         view.contentmode = uiviewcontentmodecenter;          label = [[uilabel alloc] initwithframe:view.bounds];         label.backgroundcolor = [uicolor clearcolor];         label.textalignment = nstextalignmentcenter;         label.font = [label.font fontwithsize:50];         label.tag = 1;         [view addsubview:label];     }     else     {         //get reference label in recycled view         label = (uilabel *)[view viewwithtag:1];     }      //set item label     label.text = [_items[index] stringvalue];      return view; }  - (cgfloat)carousel:(icarousel *)carousel valueforoption:(icarouseloption)option withdefault:(cgfloat)value {     if (option == icarouseloptionspacing)     {         return value * 1.1;     }     return value; } 

you can check full working demo 'examples/basic ios example' included github repository link

as old , popular can find related tutorials , stable custom code implementation


Comments

Popular posts from this blog

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

javascript - Get parameter of GET request -

javascript - Twitter Bootstrap - how to add some more margin between tooltip popup and element -