Click here to Skip to main content
15,889,838 members
Articles / Mobile Apps / iPhone

Switch between views Mobile Safari-style

Rate me:
Please Sign up or sign in to vote.
4.96/5 (34 votes)
23 Jul 2010CPOL15 min read 80.7K   661   20  
A reusable library (specifically, an UIViewController subclass) to implement Mobile Safari page/tab switching interface in your own app. Now supports orientation changes!
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="48"
   height="48"
   id="svg2"
   sodipodi:version="0.32"
   inkscape:version="0.47 r22583"
   version="1.0"
   sodipodi:docname="close.svg"
   inkscape:output_extension="org.inkscape.output.svg.inkscape">
  <defs
     id="defs4">
    <linearGradient
       id="linearGradient3211">
      <stop
         id="stop3213"
         offset="0"
         style="stop-color:#ffffff;stop-opacity:1;" />
      <stop
         id="stop3215"
         offset="1"
         style="stop-color:#8c8c8c;stop-opacity:1;" />
    </linearGradient>
    <linearGradient
       id="linearGradient3157">
      <stop
         style="stop-color:#000000;stop-opacity:1;"
         offset="0"
         id="stop3159" />
      <stop
         style="stop-color:#767676;stop-opacity:1;"
         offset="1"
         id="stop3161" />
    </linearGradient>
    <inkscape:perspective
       sodipodi:type="inkscape:persp3d"
       inkscape:vp_x="0 : 526.18109 : 1"
       inkscape:vp_y="0 : 1000 : 0"
       inkscape:vp_z="744.09448 : 526.18109 : 1"
       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
       id="perspective10" />
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient3157"
       id="linearGradient3163"
       x1="-40"
       y1="-592"
       x2="-40"
       y2="-872"
       gradientUnits="userSpaceOnUse" />
    <linearGradient
       inkscape:collect="always"
       xlink:href="#linearGradient3211"
       id="linearGradient3195"
       gradientUnits="userSpaceOnUse"
       x1="-40"
       y1="-592"
       x2="-40"
       y2="-872" />
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     gridtolerance="10000"
     guidetolerance="10"
     objecttolerance="10"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="375"
     inkscape:cy="520"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="true"
     showborder="false"
     width="256px"
     inkscape:window-width="1280"
     inkscape:window-height="752"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="0">
    <inkscape:grid
       type="xygrid"
       id="grid2383"
       visible="true"
       enabled="true"
       dotted="false" />
  </sodipodi:namedview>
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       sodipodi:type="arc"
       style="opacity:1;fill:url(#linearGradient3163);fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       id="path2385"
       sodipodi:cx="-20"
       sodipodi:cy="-732"
       sodipodi:rx="140"
       sodipodi:ry="140"
       d="M 120,-732 A 140,140 0 1 1 -160,-732 A 140,140 0 1 1 120,-732 z"
       inkscape:export-filename="/Users/leson2403/Dropbox/Documents/My Xcode Projects/ViewSwitcher/Art/close-normal.png"
       inkscape:export-xdpi="7.7054796"
       inkscape:export-ydpi="7.7054796" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:24;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="M -80,-792 L 40,-672"
       id="path3165"
       inkscape:export-filename="/Users/leson2403/Dropbox/Documents/My Xcode Projects/ViewSwitcher/Art/close-normal.png"
       inkscape:export-xdpi="7.7054796"
       inkscape:export-ydpi="7.7054796" />
    <path
       id="path3167"
       d="M 40,-792 L -80,-672"
       style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:24;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       inkscape:export-filename="/Users/leson2403/Dropbox/Documents/My Xcode Projects/ViewSwitcher/Art/close-normal.png"
       inkscape:export-xdpi="7.7054796"
       inkscape:export-ydpi="7.7054796" />
    <path
       d="M 120,-732 A 140,140 0 1 1 -160,-732 A 140,140 0 1 1 120,-732 z"
       sodipodi:ry="140"
       sodipodi:rx="140"
       sodipodi:cy="-732"
       sodipodi:cx="-20"
       id="path3189"
       style="opacity:1;fill:url(#linearGradient3195);fill-opacity:1.0;fill-rule:nonzero;stroke:#000000;stroke-width:12;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       sodipodi:type="arc"
       transform="translate(440,0)"
       inkscape:export-filename="/Users/leson2403/Dropbox/Documents/My Xcode Projects/ViewSwitcher/Art/close-pressed.png"
       inkscape:export-xdpi="7.7054796"
       inkscape:export-ydpi="7.7054796" />
    <path
       id="path3191"
       d="M 360,-792 L 480,-672"
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:24;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       inkscape:export-filename="/Users/leson2403/Dropbox/Documents/My Xcode Projects/ViewSwitcher/Art/close-pressed.png"
       inkscape:export-xdpi="7.7054796"
       inkscape:export-ydpi="7.7054796" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:24;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
       d="M 480,-792 L 360,-672"
       id="path3193"
       inkscape:export-filename="/Users/leson2403/Dropbox/Documents/My Xcode Projects/ViewSwitcher/Art/close-pressed.png"
       inkscape:export-xdpi="7.7054796"
       inkscape:export-ydpi="7.7054796" />
  </g>
</svg>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Other Hanoi - Amsterdam High School
Vietnam Vietnam
I'm a 16 year old high school student. I know some about Objective-C and a bit about C#, mostly through reading stuff online.

Comments and Discussions