Quantcast
Channel: Telerik Blogs
Viewing all articles
Browse latest Browse all 5210

UI for iOS Officially Ships ListView and Embedded Frameworks

$
0
0
<p><em>Telerik officially ships UI for iOS ListView, now ready <g class="gr_ gr_67 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="67" data-gr-id="67">and </g><g class="gr_ gr_68 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="68" data-gr-id="68"><g class="gr_ gr_67 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="67" data-gr-id="67">out</g> of</g> Beta.</em><br /> <br /> At the <g class="gr_ gr_97 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="97" data-gr-id="97">end of</g> <g class="gr_ gr_109 gr-alert gr_gramm Punctuation only-ins replaceWithoutSep" id="109" data-gr-id="109">February</g> we released ListView for iOS. This control <g class="gr_ gr_98 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="98" data-gr-id="98">is the</g> <g class="gr_ gr_99 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="99" data-gr-id="99">one-stop shop</g> for your list-related needs <g class="gr_ gr_100 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="100" data-gr-id="100">like the</g> need for multiple columns, load <g class="gr_ gr_101 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="101" data-gr-id="101">on demand</g>, animations. It was almost <g class="gr_ gr_102 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="102" data-gr-id="102">feature complete</g>, and it still needed some polishing, so we added the Beta tag <g class="gr_ gr_103 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="103" data-gr-id="103">to it</g> <g class="gr_ gr_104 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="104" data-gr-id="104">back then</g>. This polishing is already done, and we have <g class="gr_ gr_105 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="105" data-gr-id="105">just released</g> <g class="gr_ gr_107 gr-alert gr_spell ContextualSpelling ins-del" id="107" data-gr-id="107">a </g><g class="gr_ gr_106 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="106" data-gr-id="106"><g class="gr_ gr_107 gr-alert gr_spell ContextualSpelling ins-del" id="107" data-gr-id="107">new</g> version</g> of UI for iOS which introduces the official version of ListView for iOS.</p> <p>Here <g class="gr_ gr_61 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="61" data-gr-id="61">are the</g> features <g class="gr_ gr_62 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="62" data-gr-id="62">at a</g> glance:</p> <ul> <li>Different layouts modes<ul> <li>Linear - a <g class="gr_ gr_64 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="64" data-gr-id="64">single column</g> layout:<br /> <a href="http://www.telerik.com/sfimages/default-source/blogs/listview-linear-layout-by-telerik-png" src="/sfimages/default-source/blogs/listview-linear-layout-by-telerik-png"><img width="240" class="clear-image-styles" src="http://www.telerik.com/sfimages/default-source/blogs/listview-linear-layout-by-telerik-png" alt="ListView Linear Layout by Telerik" title="ListView Linear Layout by Telerik" /></a></li> <li style="text-align: justify;">Grid - you determine <g class="gr_ gr_65 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="65" data-gr-id="65">the number</g> of columns <g class="gr_ gr_66 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="66" data-gr-id="66">and the</g> items <g class="gr_ gr_75 gr-alert gr_gramm Grammar multiReplace" id="75" data-gr-id="75">are</g> spread to fill the available size in these columns:<br /> <a href="http://www.telerik.com/sfimages/default-source/blogs/listview-grid-layout-by-telerik-png" src="/sfimages/default-source/blogs/listview-grid-layout-by-telerik-png"><img width="240" class="clear-image-styles" src="http://www.telerik.com/sfimages/default-source/blogs/listview-grid-layout-by-telerik-png" alt="ListView Grid Layout by Telerik" title="ListView Grid Layout by Telerik" style="text-align: justify;" /></a></li> <li>Staggered - <g class="gr_ gr_69 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="69" data-gr-id="69">you can</g> define different sizes to different cells. It&rsquo;s sometimes called &ldquo;Pinterest&rdquo; layout:<br /> <a href="http://www.telerik.com/sfimages/default-source/blogs/listview-staggered-layout-by-telerik-png" src="/sfimages/default-source/blogs/listview-staggered-layout-by-telerik-png"><img width="240" class="clear-image-styles" src="http://www.telerik.com/sfimages/default-source/blogs/listview-staggered-layout-by-telerik-png" alt="ListView Staggered Layout by Telerik" title="ListView Staggered Layout by Telerik" /></a></li> <li>Flow - this layout comes <g class="gr_ gr_76 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="76" data-gr-id="76">from the</g> UICollectionView and thanks <g class="gr_ gr_77 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="77" data-gr-id="77">to </g><g class="gr_ gr_78 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="78" data-gr-id="78"><g class="gr_ gr_77 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="77" data-gr-id="77">it</g> </g><g class="gr_ gr_79 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="79" data-gr-id="79"><g class="gr_ gr_78 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="78" data-gr-id="78">you</g> can</g> define the width <g class="gr_ gr_80 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="80" data-gr-id="80">of the</g> items and they <g class="gr_ gr_81 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="81" data-gr-id="81">will be</g> arranged <g class="gr_ gr_82 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="82" data-gr-id="82">in the</g> appropriate number of columns <g class="gr_ gr_83 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="83" data-gr-id="83">in the</g> ListView:<br /> <a href="http://www.telerik.com/sfimages/default-source/blogs/listview-flow-layout-by-telerik-png" src="/sfimages/default-source/blogs/listview-flow-layout-by-telerik-png"><img width="240" class="clear-image-styles" src="http://www.telerik.com/sfimages/default-source/blogs/listview-flow-layout-by-telerik-png" alt="ListView Flow Layout by Telerik" title="ListView Flow Layout by Telerik" /></a></li> </ul> </li> <li>UI virtualization</li> <li>Pull-to-refresh</li> <li>Load-on-demand</li> <li>Displaying grouped data with summaries:<br /> <a href="http://www.telerik.com/sfimages/default-source/blogs/listview-grouping-by-telerik-png" src="/sfimages/default-source/blogs/listview-grouping-by-telerik-png"><img width="240" class="clear-image-styles" src="http://www.telerik.com/sfimages/default-source/blogs/listview-grouping-by-telerik-png" alt="ListView Grouping by Telerik" title="ListView Grouping by Telerik" /></a></li> <li>Items swipe behavior:<br /> <a href="http://www.telerik.com/sfimages/default-source/blogs/listview-row-swiping-by-telerik-png" src="/sfimages/default-source/blogs/listview-row-swiping-by-telerik-png"><img width="240" class="clear-image-styles" src="http://www.telerik.com/sfimages/default-source/blogs/listview-row-swiping-by-telerik-png" alt="ListView Row Swiping by Telerik" title="ListView Row Swiping by Telerik" /></a></li> <li>Items reorder behavior</li> <li>Item animations which occur on item scrolling/adding/deleting&nbsp;<ul> <li>Scale in</li> <li><g class="gr_ gr_57 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="57" data-gr-id="57">Fade in</g></li> <li><g class="gr_ gr_58 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="58" data-gr-id="58">Slide in</g></li> </ul> <a href="http://www.telerik.com/sfimages/default-source/blogs/listvie-animations-by-telerik-gif" src="/sfimages/default-source/blogs/listvie-animations-by-telerik-gif"><img width="240" class="clear-image-styles" src="http://www.telerik.com/sfimages/default-source/blogs/listvie-animations-by-telerik-gif" alt="ListVie Animations by Telerik" title="ListVie Animations by Telerik" /></a> </li> <li>Single/multiple selection on tap/hold:<br /> <a href="http://www.telerik.com/sfimages/default-source/blogs/listview-selection-by-telerik-png" src="/sfimages/default-source/blogs/listview-selection-by-telerik-png"><img width="240" class="clear-image-styles" src="http://www.telerik.com/sfimages/default-source/blogs/listview-selection-by-telerik-png" alt="ListView Selection by Telerik" title="ListView Selection by Telerik" /></a></li> </ul> <p><strong>Taking advantage <g class="gr_ gr_59 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="59" data-gr-id="59">of the</g> Embedded Frameworks</strong></p> <p>Since iOS 8 Apple allow <g class="gr_ gr_110 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="110" data-gr-id="110">you to</g> <g class="gr_ gr_114 gr-alert gr_spell ContextualSpelling ins-del" id="114" data-gr-id="114">plug in</g> at various places <g class="gr_ gr_111 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="111" data-gr-id="111">of the</g> iOS and fill <g class="gr_ gr_112 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="112" data-gr-id="112">them with</g> <g class="gr_ gr_113 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="113" data-gr-id="113">your own</g> content. Such places <g class="gr_ gr_115 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="115" data-gr-id="115">are the</g> Today section <g class="gr_ gr_116 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="116" data-gr-id="116">of the</g> Notification Center, the <g class="gr_ gr_117 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="117" data-gr-id="117">Share widget</g>, the Keyboard. The content <g class="gr_ gr_118 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="118" data-gr-id="118">that you</g> plug should either <g class="gr_ gr_119 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="119" data-gr-id="119">be </g><g class="gr_ gr_126 gr-alert gr_spell ContextualSpelling ins-del" id="126" data-gr-id="126"><g class="gr_ gr_119 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="119" data-gr-id="119">a</g> </g><g class="gr_ gr_120 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="120" data-gr-id="120"><g class="gr_ gr_126 gr-alert gr_spell ContextualSpelling ins-del" id="126" data-gr-id="126">part</g> </g><g class="gr_ gr_121 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="121" data-gr-id="121"><g class="gr_ gr_120 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="120" data-gr-id="120">of</g> the</g> extension <g class="gr_ gr_127 gr-alert gr_gramm Punctuation only-del replaceWithoutSep" id="127" data-gr-id="127">itself,</g> or, <g class="gr_ gr_122 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="122" data-gr-id="122">if it</g> comes <g class="gr_ gr_123 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="123" data-gr-id="123">from a</g> 3rd party library, this library should <g class="gr_ gr_124 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="124" data-gr-id="124">come </g><g class="gr_ gr_125 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="125" data-gr-id="125"><g class="gr_ gr_124 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="124" data-gr-id="124">in</g> the</g> form of an embedded framework.<br /> <br /> <img width="240" class="clear-image-styles" src="http://www.telerik.com/sfimages/default-source/blogs/ui-for-ios-embedded-framework-by-telerik-png" alt="UI for iOS Embedded Framework by Telerik" title="UI for iOS Embedded Framework by Telerik" /></p> <p>With this release of UI for iOS, we start distributing embedded frameworks and <g class="gr_ gr_86 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="86" data-gr-id="86">now </g><g class="gr_ gr_88 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="88" data-gr-id="88"><g class="gr_ gr_86 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="86" data-gr-id="86">you</g> can</g> <g class="gr_ gr_91 gr-alert gr_spell ContextualSpelling ins-del" id="91" data-gr-id="91">plug </g><g class="gr_ gr_89 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="89" data-gr-id="89"><g class="gr_ gr_91 gr-alert gr_spell ContextualSpelling ins-del" id="91" data-gr-id="91">in</g> your</g> favorite Telerik iOS controls <g class="gr_ gr_90 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="90" data-gr-id="90">in the</g> aforementioned places. For example, <g class="gr_ gr_92 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="92" data-gr-id="92">at the</g> screenshot below <g class="gr_ gr_93 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="93" data-gr-id="93">you can</g> <g class="gr_ gr_96 gr-alert gr_spell ContextualSpelling ins-del" id="96" data-gr-id="96">see the</g> Telerik Chart for iOS embedded <g class="gr_ gr_94 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="94" data-gr-id="94">in the</g> Today view <g class="gr_ gr_95 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="95" data-gr-id="95">of the</g> Notification Center.</p> <p>More great stuff is about <g class="gr_ gr_70 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="70" data-gr-id="70">to </g><g class="gr_ gr_71 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="71" data-gr-id="71"><g class="gr_ gr_70 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="70" data-gr-id="70">come</g> </g><g class="gr_ gr_72 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="72" data-gr-id="72"><g class="gr_ gr_71 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="71" data-gr-id="71">in</g> the</g> <g class="gr_ gr_73 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="73" data-gr-id="73">next month</g>. You can see more details <g class="gr_ gr_74 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="74" data-gr-id="74">in the</g> UI for iOS Roadmap.</p> <p><g class="gr_ gr_56 gr-alert gr_spell ContextualSpelling ins-del multiReplace" id="56" data-gr-id="56">Stay tuned</g>!</p><img src="http://feedpress.me/10810/1235054.gif" height="1" width="1"/>

Viewing all articles
Browse latest Browse all 5210

Trending Articles