JustUiKit:使用 Android 风格的控件构建 iOS UI

GerMcfall 8年前
   <h2>JustUiKit</h2>    <p>JustUiKit是一套Android样式工具iOS UI套件。 JustUiKit包含JustLinearLayout,JustFrameLayout, JustRelativeLayout等。 它旨在使Android开发人员轻松构建iOS UI。 也为iOS开发人员提供了一种新的方式来构建UI。</p>    <h2>如何使用?</h2>    <ul>     <li>拷贝代码</li>    </ul>    <p>​ 拷贝Deomo中的JustUiKit代码到项目</p>    <ul>     <li> <p>使用 CocoaPods 安装</p> <p>CocoaPods是Objective-C / Swift的依赖项管理器,它自动化和简化在项目中使用第三方库(如TangramKit)的过程。 您可以使用以下命令安装它:</p> <p>$ sudo gem install cocoapods</p> <p>要使用CocoaPods将TangramKit集成到您的Xcode项目中,请在Podfile中指定:</p> <pre>  <code class="language-objectivec">platform :ios, '8.0'  pod 'JustUiKit', '~> 0.2.1'</code></pre> <p>之后运行如下命令:</p> <p>$ pod install</p> </li>    </ul>    <h2>快捷开始</h2>    <h3>JustLinearLayout</h3>    <p>将其子代排列在单列或单行中的布局。 行的方向可以通过方向设置。 您还可以指定gravity,它通过设置重力指定所有子元素的对齐方式,或通过设置LinearLayoutParams的weight成员来指定特定子项增长以填充布局中的任何剩余空间。 默认方向为水平。</p>    <p>Gravity & Margin & Orientation</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0c6451cbf24aedf8d997cab30f2fb318.png"></p>    <p>您可以设置重力以使视图布局在parentView的指定空间。 还设置Margin将在视图的四个方向保留空格。 在默认情况下,LinearLayout布局子项在水平方向,并且可以将其更改为Veritcal。</p>    <pre>  <code class="language-objectivec">let parentView = JustLinearLayout(frame: UIScreen.main.bounds, orientation: .Vertical)  let params = LinearLayoutParams(                  width: LayoutParams.WRAP_CONTENT,                  height: LayoutParams.WRAP_CONTENT)  let centerParams = LinearLayoutParams(params)  centerParams.layoutGravity = Gravity.Horizontal.getValue()    let marginParams = LinearLayoutParams(params)  marginParams.topMargin = 10    parentView.addView(createView(), centerParams)  parentView.addView(createView(), marginParams)</code></pre>    <p>Padding & weight</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1e9cb26c1071e91314c05186a6735098.png"></p>    <p>使用Padding在四个方向,您可以保留视图的内部空间。 “权重”描述了子视图的位置。 默认为Gravity.TOP | Gravity.LEFT。 如果此布局具有VERTICAL方向,则控制在存在额外垂直空间时放置所有子视图的位置。 如果此布局具有HORIZONTAL方向,则控制子项的对齐方式。</p>    <pre>  <code class="language-objectivec">let parentView = JustLinearLayout(frame: UIScreen.main.bounds, orientation: .Vertical)  let params = LinearLayoutParams(                  width: LayoutParams.WRAP_CONTENT,                  height: LayoutParams.WRAP_CONTENT)  params.weight = 1  let paddingParams = LinearLayoutParams(params)  paddingParams.paddingTop = 10  parentView.addView(createView(), params)  parentView.addView(createView(), paddingParams)</code></pre>    <h3>JustFrameLayout</h3>    <p>FrameLayout设计用于屏蔽屏幕上的一个区域以显示单个项目。</p>    <p>通常,FrameLayout应该用于保存单个子视图,因为可能难以以可扩展到不同屏幕尺寸的方式组织子视图,而不会使子节点相互重叠。</p>    <p>然而,您可以添加多个孩子到一个FrameLayout,并通过分配重力给每个孩子,使用layoutGravity控制他们在FrameLayout中的位置。</p>    <p>Overlap on left</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/307b49e996fd862ba36c15ade35302bd.png"></p>    <p>如果不使用任何边距或填充来更改视图的位置。 所有的视图将添加像堆栈和重叠在屏幕的左边|顶部。</p>    <p>Example:</p>    <pre>  <code class="language-objectivec">let parentView: JustFrameLayout = JustFrameLayout(width:MATCH_PARENT, height:MATCH_PARENT)  let params: FrameLayoutParams = JustFrameLayoutParams(width: WRAP_CONTENT, height: WRAP_CONTENT)  parentView.addView(createView(rgb:0xE4E1D8), params)  parentView.addView(createView(rgb:0x89A49D), params)  parentView.addView(createView(rgb:0x877B6B), params)</code></pre>    <p>Layout With Gravity</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3fb4334b06a9349ae0da4929c8259a92.png"></p>    <p>您可以使用水平和垂直重力。 此外,您可以使用像left | bottom,center_horizontal | center_vertical来同时使用它们。</p>    <p>Example:</p>    <pre>  <code class="language-objectivec">let parentView: FrameLayout = FrameLayout(width:MATCH_PARENT, height:MATCH_PARENT)  let params: FrameLayoutParams = FrameLayoutParams(width: WRAP_CONTENT, height: WRAP_CONTENT)    let b_l = FrameLayoutParams(params)  b_l.layoutGravity = Gravity.BOTTOM | Gravity.TOP  let c_r = FrameLayoutParams(params)  c_r.layoutGravity = Gravity.CENTER_HORIZONTAL | Gravity.RIGHT  parentView.addView(createView(rgb:0xE4E1D8), b_l)  parentView.addView(createView(rgb:0x89A49D), c_r)  parentView.addView(createView(rgb:0x877B6B), params)</code></pre>    <h3>JustRelativeLayout</h3>    <p>一个布局,其中子节点的位置可以相对于彼此或相对于父节点来描述。</p>    <p>请注意,您不能在RelativeLayout的大小和其子项的位置之间具有循环依赖关系。 例如,您不能具有高度设置为WRAP_CONTENT的RelativeLayout和设置为ALIGN_PARENT_BOTTOM的子级。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b89de78faf5a96793572bc90e323d87b.png"></p>    <p>在RelativeLayout中,您可以使用所有边距,填充和重力。 此外,您可以使用一些对齐功能。 例如,如果视图是alignLeftTo,则其左边缘将被设置为等于锚视图。 您可以使用一组函数,如leftOf,rightOf,bottomOf将当前视图设置到锚视图的左侧。</p>    <pre>  <code class="language-objectivec">// view1 view2 view3 view4 view5  let params = RelativeLayoutParams.generateDefaultParams()  let params1 = RelativeLayoutParams(params)  params1.centerInHorizontal()  let params2 = RelativeLayoutParams(params)  params2.bottomTo(view4)  params2.topMargin = xxx  let params3 = RelativeLayoutParams(params)  param3.alignRightTo(view1)  let params4 = RelativeLayoutParams(params)  params4.centerInParent()  let params5 = RelativeLayoutParams(params)  params5.alignParentBottom()  // add view to parent</code></pre>    <p>RelativeLayout中的约束</p>    <table>     <thead>      <tr>       <th>Constants</th>       <th>Description</th>      </tr>     </thead>     <tbody>      <tr>       <td>ABOVE</td>       <td>将孩子的底部边缘与另一个孩子的顶部边缘对齐的规则。</td>      </tr>      <tr>       <td>ALIGN_BASELINE</td>       <td>将子项的基准与另一个子项的基准对齐的规则。</td>      </tr>      <tr>       <td>ALIGN_BOTTOM</td>       <td>将儿童的底部边缘与另一个儿童的底部边缘对齐的规则。</td>      </tr>      <tr>       <td>ALIGN_LEFT</td>       <td>将儿童的左边缘与另一个儿童的左边缘对齐的规则。</td>      </tr>      <tr>       <td>ALIGN_PARENT_BOTTOM</td>       <td>将子元素的底边与其RelativeLayout父元素的底边对齐的规则。</td>      </tr>      <tr>       <td>ALIGN_PARENT_LEFT</td>       <td>将子对象的左边缘与其RelativeLayout父对象的左边缘对齐的规则。</td>      </tr>      <tr>       <td>ALIGN_PARENT_RIGHT</td>       <td>将子对象的右边缘与其RelativeLayout父对象的右边缘对齐的规则。</td>      </tr>      <tr>       <td>ALIGN_PARENT_TOP</td>       <td>将子对象的顶边与其RelativeLayout父对象的顶边对齐的规则。</td>      </tr>      <tr>       <td>ALIGN_RIGHT</td>       <td>将孩子的右边缘与另一个孩子的右边缘对齐的规则。</td>      </tr>      <tr>       <td>ALIGN_TOP</td>       <td>将儿童的顶部边缘与另一个儿童的顶部边缘对齐的规则。</td>      </tr>      <tr>       <td>BELOW</td>       <td>将儿童的顶部边缘与另一个儿童的底部边缘对齐的规则。</td>      </tr>      <tr>       <td>CENTER_HORIZONTAL</td>       <td>将子元素相对于其RelativeLayout父元素的边界进行水平居中的规则。</td>      </tr>      <tr>       <td>CENTER_IN_PARENT</td>       <td>使子对象相对于其RelativeLayout父对象的边界居中的规则。</td>      </tr>      <tr>       <td>CENTER_VERTICAL</td>       <td>将子元素相对于其RelativeLayout父元素的边界垂直居中的规则。</td>      </tr>      <tr>       <td>END_OF</td>       <td>将孩子的起始边缘与另一个孩子的边缘对齐的规则。</td>      </tr>      <tr>       <td>LEFT_OF</td>       <td>将儿童的右边缘与另一个儿童的左边缘对齐的规则。</td>      </tr>      <tr>       <td>RIGHT_OF</td>       <td>将儿童的左边缘与另一个儿童的右边缘对齐的规则。</td>      </tr>     </tbody>    </table>    <h2>Gravity</h2>    <p>必须是以下常量值中的一个或多个(由“|”分隔)。</p>    <table>     <thead>      <tr>       <th>Constant</th>       <th>Value</th>       <th>Description</th>      </tr>     </thead>     <tbody>      <tr>       <td>顶部</td>       <td>0x30</td>       <td>将对象推送到其容器的顶部,而不更改其大小。</td>      </tr>      <tr>       <td>底部</td>       <td>0x50</td>       <td>将对象推送到其容器的底部,而不更改其大小。</td>      </tr>      <tr>       <td>右</td>       <td>0x05</td>       <td>将对象推送到其容器的右侧,而不更改其大小。</td>      </tr>      <tr>       <td>center_vertical</td>       <td>0x10</td>       <td>将对象放置在其容器的垂直中心,而不是更改其大小。</td>      </tr>      <tr>       <td>center_horizontal</td>       <td>0x01</td>       <td>将对象放置在其容器的水平中心,而不改变其大小。</td>      </tr>      <tr>       <td>中心</td>       <td>0x11</td>       <td>将对象放置在其容器的垂直和水平轴的中心,而不改变其大小。</td>      </tr>     </tbody>    </table>    <h2>Feedback</h2>    <p>只要发生问题,请发送您的反馈。 你可以与我联系:</p>    <ul>     <li>Email: <a href="/misc/goto?guid=4959657697596982017" rel="nofollow,noindex">lfk_dsk@hotmail.com</a></li>     <li>Weibo:@亦狂亦侠_亦温文</li>     <li>Blog: <a href="/misc/goto?guid=4959736949322506949" rel="nofollow,noindex">刘丰恺</a></li>    </ul>    <h2>License</h2>    <pre>  <code class="language-objectivec">MIT License        Copyright (c) 2017 JustWe        Permission is hereby granted, free of charge, to any person obtaining a copy      of this software and associated documentation files (the "Software"), to deal      in the Software without restriction, including without limitation the rights      to use, copy, modify, merge, publish, distribute, sublicense, and/or sell      copies of the Software, and to permit persons to whom the Software is      furnished to do so, subject to the following conditions:        The above copyright notice and this permission notice shall be included in all      copies or substantial portions of the Software.        THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR      IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,      FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE      AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER      LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,      OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE      SOFTWARE.</code></pre>    <p> </p>    <p>来自:https://github.com/lfkdsk/JustUiKit/blob/master/README_ZH.md</p>    <p> </p>