熟悉layout线性布局和IOS苹果View视图
<table cellspacing="0" cellpadding="0" style="table-layout: fixed; width: 979px;"><tbody><tr><td class="t_f" id="postmessage_357" style="font-size: 14px; line-height: 24px;"><table cellspacing="0" cellpadding="0" border="0" style="table-layout: fixed; width: 757px; font-family: "Microsoft YaHei", Tahoma, Helvetica, SimSun, sans-serif;"><tbody><tr><td background="http://www.postbbs.com/source/plugin/qzom_thread/image/thread_E.gif" style="line-height: 24px;"><div class="t_f" style="line-height: 24px;"><div class="lake-content" typography="classic"><h3 id="Z8WjJ" style="margin-top: 16px; margin-bottom: 5px; font-size: 1em; line-height: 28px;"><span class="ne-text"><div class="lake-content" typography="classic"><font size="5" face="Arial"><p id="ue1db2046" class="ne-p" style="min-height: 24px;"><span class="ne-text">线性布局是垂直或者水平布局类似网格</span></p><p id="ud362f563" class="ne-p" style="min-height: 24px;"></p><p id="udbb95671" class="ne-p" style="min-height: 24px;"><span class="ne-text">水平布局</span></p><p id="u06b51386" class="ne-p" style="min-height: 24px;"><span class="ne-text">比如就是一行可以放多个控件</span></p><table id="Hs7br" class="ne-table" style="table-layout: fixed; width: 876px; border: 1px solid rgb(217, 217, 217);"><tbody><tr style="height: 33px;"><td width="219" style="line-height: 24px; border-color: rgb(217, 217, 217);"><p id="u76c21487" class="ne-p" style="min-height: 24px;"><span class="ne-text">文本框：</span></p></td><td width="219" style="line-height: 24px; border-color: rgb(217, 217, 217);"><p id="u5bab580d" class="ne-p" style="min-height: 24px;"><span class="ne-text">按钮:</span></p></td><td width="219" style="line-height: 24px; border-color: rgb(217, 217, 217);"><p id="u224ee148" class="ne-p" style="min-height: 24px;"><span class="ne-text">单选框:</span></p></td><td width="219" style="line-height: 24px; border-color: rgb(217, 217, 217);"><p id="u9ec20122" class="ne-p" style="min-height: 24px;"><span class="ne-text">复选框</span></p></td></tr></tbody></table><p id="ud6978dd0" class="ne-p" style="min-height: 24px;"><span class="ne-text">类似上面这样一行可以放多个控件的就是水平布局</span></p><p id="u9bbd2aeb" class="ne-p" style="min-height: 24px;"><span class="ne-text"></span></p><p id="u36b13e8f" class="ne-p" style="min-height: 24px;"><span class="ne-text">垂直布局</span></p><p id="ue7dc63a3" class="ne-p" style="min-height: 24px;"><span class="ne-text">就是一行只能放一个元素</span></p><table id="Sevgf" class="ne-table" style="table-layout: fixed; width: 186px; border: 1px solid rgb(217, 217, 217);"><tbody><tr style="height: 33px;"><td width="186" style="line-height: 24px; border-color: rgb(217, 217, 217);"><p id="u9978befb" class="ne-p" style="min-height: 24px;"><span class="ne-text">文本框</span></p></td></tr><tr style="height: 33px;"><td width="186" style="line-height: 24px; border-color: rgb(217, 217, 217);"><p id="ud088502d" class="ne-p" style="min-height: 24px;"><span class="ne-text">按钮</span></p></td></tr><tr style="height: 33px;"><td width="186" style="line-height: 24px; border-color: rgb(217, 217, 217);"><p id="u10d16f98" class="ne-p" style="min-height: 24px;"><span class="ne-text">单选</span></p></td></tr><tr style="height: 33px;"><td width="186" style="line-height: 24px; border-color: rgb(217, 217, 217);"><p id="u877ac443" class="ne-p" style="min-height: 24px;"><span class="ne-text">复选</span></p></td></tr></tbody></table><p id="u18ec27f9" class="ne-p" style="min-height: 24px;"><span class="ne-text">混合布局，就是水平和垂直嵌套就可以实现复杂的界面</span></p><p id="uf8feff06" class="ne-p" style="min-height: 24px;"><span class="ne-text">例如一个登录界面，先创建一个垂直布局 ，每个垂直布局的每一行再放一个水平布局</span></p><table id="Ol4pK" class="ne-table" style="table-layout: fixed; width: 296px; border: 1px solid rgb(217, 217, 217);"><tbody><tr style="height: 33px;"><td width="149" style="line-height: 24px; border-color: rgb(217, 217, 217);"><p id="uba6458e8" class="ne-p" style="min-height: 24px;"><span class="ne-text">用户名</span></p></td><td width="147" style="line-height: 24px; border-color: rgb(217, 217, 217);"><p id="u1af301f1" class="ne-p" style="min-height: 24px;"><span class="ne-text">————————</span></p></td></tr><tr style="height: 33px;"><td width="149" style="line-height: 24px; border-color: rgb(217, 217, 217);"><p id="u2cc98694" class="ne-p" style="min-height: 24px;"><span class="ne-text">密码</span></p></td><td width="147" style="line-height: 24px; border-color: rgb(217, 217, 217);"><p id="u7424cce1" class="ne-p" style="min-height: 24px;"><span class="ne-text">————————</span></p></td></tr><tr style="height: 33px;"><td width="149" style="line-height: 24px; border-color: rgb(217, 217, 217);"><p id="u36ae7153" class="ne-p" style="min-height: 24px;"><span class="ne-text">取消</span></p></td><td width="147" style="line-height: 24px; border-color: rgb(217, 217, 217);"><p id="ua7666543" class="ne-p" style="min-height: 24px;"><span class="ne-text">登录</span></p></td></tr></tbody></table><p id="uae30ce27" class="ne-p" style="min-height: 24px;"><span class="ne-text">这样就是一个垂直布局 + 3个水平布局组成了一个符合页面</span></p><p id="ub2945df9" class="ne-p" style="min-height: 24px;"><span class="ne-text"></span></p><p id="u0ae953a4" class="ne-p" style="min-height: 24px;"><span class="ne-text"></span></p></font></div></span></h3><h3 id="Z8WjJ" style="margin-top: 16px; margin-bottom: 5px; font-size: 1em; line-height: 28px;"><span class="ne-text"><font size="5" face="Arial">IOSView 视图使用指南</font></span></h3><h4 id="TOY59" style="margin-top: 10px; margin-bottom: 5px; font-size: 16px; line-height: 24px;"><span class="ne-text"><font size="5" face="Arial">1. 创建视图</font></span></h4><p id="ub59575fc" class="ne-p" style="font-family: "Lucida Grande", Geneva, Verdana, Arial; font-size: 12px; min-height: 24px;"><span class="ne-text"><font size="5" face="Arial">用于创建一个基本的视图，该视图可以作为画板用于绘制UI。</font></span></p><pre data-language="javascript" id="H1E0M" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code><font size="5" face="Arial">var vc = new IOSView();</font></code></pre><h4 id="HUvZp" style="margin-top: 10px; margin-bottom: 5px; font-size: 16px; line-height: 24px;"><font size="5" face="Arial"><span class="ne-text">2. 显示视图 </span><code class="ne-code" style="background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">show()</span></code></font></h4><p id="u6ad5b546" class="ne-p" style="font-family: "Lucida Grande", Geneva, Verdana, Arial; font-size: 12px; min-height: 24px;"><font size="5" face="Arial"><span class="ne-text">用于显示UI界面，并在页面加载完成后执行回调函数。<br></span><span style="font-weight: 700;">方法定义:</span></font></p><pre data-language="javascript" id="L9D9x" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code><font size="5" face="Arial">function show(function fun)</font></code></pre><p id="u5383052b" class="ne-p" style="font-family: "Lucida Grande", Geneva, Verdana, Arial; font-size: 12px; min-height: 24px;"><span style="font-weight: 700;"><font size="5" face="Arial">参数:</font></span></p><ul class="ne-ul" style="margin-left: 14px; padding-left: 23px;"><li id="ub806d069" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><font size="5" face="Arial"><span style="font-weight: 700;">fun</span><span class="ne-text">: 页面加载完成后执行的回调函数<br></span><span style="font-weight: 700;">示例:</span></font></li></ul><pre data-language="javascript" id="l8tuA" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code><font size="5" face="Arial">var vc = new IOSView();vc.show(() => {
printl("UI启动了");
});</font></code></pre><h4 id="aLTfs" style="margin-top: 10px; margin-bottom: 5px; font-size: 16px; line-height: 24px;"><font size="5" face="Arial"><span class="ne-text">3. 关闭视图 </span><code class="ne-code" style="background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">dismiss()</span></code></font></h4><p id="ufded6fb9" class="ne-p" style="font-family: "Lucida Grande", Geneva, Verdana, Arial; font-size: 12px; min-height: 24px;"><font size="5" face="Arial"><span class="ne-text">用于关闭当前显示的UI视图。<br></span><span style="font-weight: 700;">方法定义:</span></font></p><pre data-language="javascript" id="c9aLS" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code><font size="5" face="Arial">function dismiss()</font></code></pre><p id="uc6a78288" class="ne-p" style="font-family: "Lucida Grande", Geneva, Verdana, Arial; font-size: 12px; min-height: 24px;"><span style="font-weight: 700;"><font size="5" face="Arial">示例:</font></span></p><pre data-language="javascript" id="HAQZh" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code><font size="5" face="Arial">var vc = new IOSView();
vc.show(() => {
var view = vc.getView();
var btn = new Button();
btn.setText("关闭");
btn.setColor(25, 10, 130);
btn.onClick(() => {
printl("按钮被点击了");
vc.dismiss();
});
view.addView(btn);
});</font></code></pre><h4 id="wcRtf" style="margin-top: 10px; margin-bottom: 5px; font-size: 16px; line-height: 24px;"><font size="5" face="Arial"><span class="ne-text">4. 添加子视图 </span><code class="ne-code" style="background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">addView()</span></code></font></h4><p id="u2063d242" class="ne-p" style="font-family: "Lucida Grande", Geneva, Verdana, Arial; font-size: 12px; min-height: 24px;"><font size="5" face="Arial"><span class="ne-text">用于将子视图添加到当前视图中。<br></span><span style="font-weight: 700;">方法定义:</span></font></p><pre data-language="javascript" id="qcK96" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code><font size="5" face="Arial">function addView(View view)</font></code></pre><p id="u46e1a3d5" class="ne-p" style="font-family: "Lucida Grande", Geneva, Verdana, Arial; font-size: 12px; min-height: 24px;"><span style="font-weight: 700;"><font size="5" face="Arial">参数:</font></span></p><ul class="ne-ul" style="margin-left: 14px; padding-left: 23px;"><li id="ub007c4d9" data-lake-index-type="0" style="list-style-position: initial; list-style-image: initial;"><font size="5" face="Arial"><span style="font-weight: 700;">view</span><span class="ne-text">: 要添加的UI控件<br></span><span style="font-weight: 700;">示例:</span></font></li></ul><pre data-language="javascript" id="AxMx0" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code><font size="5" face="Arial">var vc = new IOSView();
vc.show(() => {
var view = vc.getView();
var btn = new Button();
btn.setText("关闭");
view.addView(btn);
});</font></code></pre><h4 id="DjbPY" style="margin-top: 10px; margin-bottom: 5px; font-size: 16px; line-height: 24px;"><font size="5" face="Arial"><span class="ne-text">5. 获取当前视图 </span><code class="ne-code" style="background-color: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 2px; padding-right: 2px; padding-left: 2px;"><span class="ne-text">getView()</span></code></font></h4><p id="ufb492241" class="ne-p" style="font-family: "Lucida Grande", Geneva, Verdana, Arial; font-size: 12px; min-height: 24px;"><font size="5" face="Arial"><span class="ne-text">用于获取当前视图的实例。<br></span><span style="font-weight: 700;">方法定义:</span></font></p><pre data-language="javascript" id="KFyWA" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code><font size="5" face="Arial">function getView()</font></code></pre><p id="uf69c0730" class="ne-p" style="font-family: "Lucida Grande", Geneva, Verdana, Arial; font-size: 12px; min-height: 24px;"><span style="font-weight: 700;"><font size="5" face="Arial">示例:</font></span></p><pre data-language="javascript" id="K07MW" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code><font size="5" face="Arial">var vc = new IOSView();
vc.show(() => {
var view = vc.getView();
});</font></code></pre><h3 id="lIris" style="margin-top: 16px; margin-bottom: 5px; font-size: 1em; line-height: 28px;"><span class="ne-text"><font size="5" face="Arial">完整示例</font></span></h3><pre data-language="javascript" id="VyU14" class="ne-codeblock language-javascript" style="border: 1px solid rgb(232, 232, 232); border-radius: 2px; background: rgb(249, 249, 249); padding: 16px; font-size: 13px; color: rgb(89, 89, 89);"><code><font size="5" face="Arial">// 创建视图
var vc = new IOSView();
// 显示视图
vc.show(() => {
// 获取当前视图
var view = vc.getView();
// 创建水平容器
var h = new Horizontal();
// 创建按钮
var btn = new Button();
btn.setColor(25, 10, 130);
// 设置按钮点击事件
btn.onClick(() => {
printl("按钮被点击了");
});
// 将按钮添加到水平容器
h.addView(btn);
// 将水平容器添加到视图
view.addView(h);
});</font></code></pre><div><code><font size="5" face="Arial"><br></font></code></div></div></div></td></tr></tbody></table></td></tr></tbody></table><p></p>
页:
[1]