The list


Case study of the List element

img
RubberBand motion. 60fps. Next is including the Slider in this scheme. 60fps original video: here

img
Fadeout on inactive complete. still researching motion design.

img Missing animation on the fade out of the thumb. And no Rubber-band animation yet. Going to do some research into frame animation with CALayer now.

img
Added scrollbar. Next up is adding this to the SliderList component. Then work on the Rubber-band animation.

img
Added support for loading items from XML and also more methods for List manipulation utils

img
Fixed the stroke imperfections. Added bold support. The inner shadow is applied to the List skin it self. So the menu items will be drawn above the inset shadow, which may not be the desired “look” To mitigate this we can add a background skin and a foreground skin to the List component and then have the content between these skins.

img
The button strokes aren’t pixel perfect yet. Will be fixed in the next iteration

img

img
The above example shows how you can create your own ScrollBar component. Code for this is on github.

Example:

swift:

var listSection:Section = stage.addSubView(Section(CGFloat.NaN, CGFloat.NaN, "List: ", self, "listSection")) as! Section
let dp = DataProvider(FileParser.xml("~/Desktop/test.xml"))/*Loads xml from a xml file on the desktop*/
var list:List = listSection.addSubView(List(140, 72, CGFloat.NaN, dp,listSection)) as! List

ListModifier.selectAt(list, 1)/*Selects the second item list*/
list.dataProvider.addItemAt(["title":"brown"], 0)/*adds a new item at index 0*/
list.dataProvider.addItem(["title":"pink"])/*adds a new item to the end of the list*/
list.dataProvider.addItems([["title":"purple"], ["title":"turquoise"]])/*adds 2 items to the end of the list*/
list.dataProvider.removeItem(list.dataProvider.getItem("brown")!)/*remove the item with title brown*/
list.dataProvider.removeItemAt(0)/*remove the first item in the list*/
Swift.print("Selected: " + "\(ListParser.selected(list))")/*print the selected item*/
Swift.print("Selected index: " + "\(ListParser.selectedIndex(list))")/*print the index of the selected item*/
Swift.print("Selected title: " + "\(ListParser.selectedTitle(list))")/*print the title of the selected item*/
list.dataProvider.removeAll()/*removes all the items in the list*/        

Alternate way of adding data to the dataProvider:

let orange:Dictionary<String,String> = ["title":"orange", "property":"fruit"]
let blue = ["title":"blue", "property":"0x00FF00"]
let red = ["title":"white", "property":"0xFFFFFF"]
let dp:DataProvider = DataProvider([orange,blue,red])

XML Structure for adding data to the dataProvider:

<items>
	<item title="orange" property="harry"/>
	<item title="blue" property="na"/>
	<item title="white" property="spring"/>
	<item title="purple" property="dark"/>
	<item title="turquoise" property="1"/>
</items>

CSS:

List{
	float:left;
	clear:left;
	fill:white;
	line:white9;
	line-alpha:1;
	line-offset-type:outside;
	line-thickness:1px;
	drop-shadow:<InsetShadow>;
}
List Container{
	float:left;
	width:100%;
}
List Container SelectTextButton{
	float:left;
	clear:left;
	width:100%;
	height:24px;
	fill:white;
	fill-alpha:0;
	line:white9;
	line-alpha:1;
	line-thickness:1px;
	line-offset-type:outside;
	padding-bottom:-1px;
	padding-left,padding-right:-1px;
	margin-bottom:-1px;
	drop-shadow:none;
}
List Container SelectTextButton:selected{
	fill:#B9B9B9;
}
List Container SelectTextButton Text{
	margin-left:12px;
	margin-top:2;
	width:100%;
	height:24px;
	autoSize:left;
	color:grey5;
	bold:false;
	selectable,mouseEnabled:false;
}
List Container SelectTextButton:selected Text{
	bold:true;
}

Notes:

Tasks:

  • [x] Start testing
  • [x] implement the event system to the list component
  • [x] ==Implement an extension that has fileURL init methods and other useful inits for the DataProvider==
  • [ ] Use a foreground background skin scheme to get the right look when using the inset shadow
  • [x] complete the list utility methods, add test for these
  • [ ] when you click outside an item the item should be deselected? This functionality can be added through subclassing
  • [ ] Select the first item on init? This functionality can be added through subclassing
  • [ ] ==implement the sorting algorithm for views==
  • [x] Add the slider component to the SliderList class
  • [x] do research into the scroll wheel gesture (delta etc)
  • [x] recap how the legacy code did the scroll stuff.
  • [x] get the scrollbar working
  • [x] get a fake view being scrolled working
  • [x] get SliderList working
  • [x] Look into rubber-band animation for the scrollbar
  • [ ] implement sortOn

Related Posts

Startup Oslo

“Kulturhuset” is a new place in the startup scene in Oslo. It’s “free” and can be used by anyone to collaborate or work on different projects.

Infinite Tree List

My notes on Infinite tree list

Protocol Inheritance

My notes on Protocol Inheritance

Protocol Ambiguity

How to differentiate protocol ambiguity

The Ultimate Xcode Workflow

Spend zero time managing dependencies

Faster Xcode With Spm

How you can speed up compile times in XCode with Swift Package Manager

Spm And Ci Travis

My notes on Swift PM + CI Travis

Spm And Nested Frameworks

My notes on Swift package manager + XCode + Nested frameworks

Xcode And Spm

Here is how you use Swift package manager in your XCode app projects

Carthage And Nested Frameworks

A few workflows concerning Carthage and nested framework