2.2.3 TableLayout(表格布局)

本节引言:

前面我们已经学习了平时实际开发中用得较多的线性布局(LinearLayout)与相对布局(RelativeLayout), 其实学完这两个基本就够用了,笔者在实际开发中用得比较多的也是这两个,当然作为一个好学的程序猿, 都是喜欢刨根问题的,所以虽说用得不多,但是还是有必要学习一下基本的用法的,说不定哪一天能用得上呢! 你说是吧,学多点东西没什么的,又不吃亏!好了,扯淡就扯到这里,开始这一节的学习吧,这一节我们会学习 Android中的第三个布局:TableLayout(表格布局)!

1.本节学习路线图

路线图分析: 从上面的路线图,可以看出TableLayout的用法还是很简单的,无非就是确定表格的行数,以及使用 那三个属性来设置每一行中的第某列的元素隐藏,拉伸,或者收缩即可!


2.TableLayout的介绍

相信学过HTML的朋友都知道,我们可以通过< table >< tr >< td >就可以生成一个HTML的表格, 而Android中也允许我们使用表格的方式来排列组件,就是行与列的方式,就说我们这节的TableLayout! 但却不像我们后面会讲到的Android 4.0后引入的GridLayout(网格)布局一样,直接就可以设置多少行与多少列!

3.如何确定行数与列数

  • ①如果我们直接往TableLayout中添加组件的话,那么这个组件将占满一行!!!
  • ②如果我们想一行上有多个组件的话,就要添加一个TableRow的容器,把组件都丢到里面!
  • ③tablerow中的组件个数就决定了该行有多少列,而列的宽度由该列中最宽的单元格决定
  • ④tablerow的layout_width属性,默认是fill_parent的,我们自己设置成其他的值也不会生效!!! 但是layout_height默认是wrapten——content的,我们却可以自己设置大小!
  • ⑤整个表格布局的宽度取决于父容器的宽度(占满父容器本身)
  • ⑥有多少行就要自己数啦,一个tablerow一行,一个单独的组件也一行!多少列则是看tableRow中 的组件个数,组件最多的就是TableLayout的列数

4.三个常用属性

android:collapseColumns:设置需要被隐藏的列的序号
android:shrinkColumns:设置允许被收缩的列的列序号
android:stretchColumns:设置运行被拉伸的列的列序号

以上这三个属性的列号都是从0开始算的,比如shrinkColunmns = “2”,对应的是第三列!
可以设置多个,用逗号隔开比如”0,2″,如果是所有列都生效,则用”*”号即可
除了这三个常用属性,还有两个属性,分别就是跳格子以及合并单元格,这和HTML中的Table类似:

android:layout_column=”2″:表示的就是跳过第二个,直接显示到第三个格子处,从1开始算的!
android:layout_span=”4″:表示合并4个单元格,也就说这个组件占4个单元格

属性使用示例:

①collapseColumns(隐藏列)

流程:在TableRow中定义5个按钮后,接着在最外层的TableLayout中添加以下属性: android:collapseColumns = “0,2”,就是隐藏第一与第三列,代码如下:

<TableLayout  
    android:id="@+id/TableLayout2"  
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content"  
    android:collapseColumns="0,2" >  

    <TableRow>  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="one" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="two" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="three" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="four" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="five" />  
    </TableRow>  
</TableLayout>

运行效果图:

②stretchColumns(拉伸列)

流程:在TableLayout中设置了四个按钮,接着在最外层的TableLayout中添加以下属性: android:stretchColumns = “1”

设置第二列为可拉伸列,让该列填满这一行所有的剩余空间,代码如下:

<TableLayout    
    android:id="@+id/TableLayout2"    
    android:layout_width="fill_parent"    
    android:layout_height="wrap_content"    
    android:stretchColumns="1" >    
    
    <TableRow>    
    
        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="one" />    
    
        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="two" />    
    
        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="three" />    
    
        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="four" />                 
    </TableRow>    
</TableLayout>  

运行效果图:

③shrinkColumns(收缩列)

步骤:这里为了演示出效果,设置了5个按钮和一个文本框,在最外层的TableLayout中添加以下属性: android:shrinkColumns = “1”

设置第二个列为可收缩列,代码如下:

<TableLayout  
    android:id="@+id/TableLayout2"  
    android:layout_width="fill_parent"  
    android:layout_height="wrap_content"  
    android:shrinkColumns="1" >  

    <TableRow>  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="one" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="two" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="three" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="four" />  

        <Button  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="five" />  

        <TextView  
            android:layout_width="wrap_content"  
            android:layout_height="wrap_content"  
            android:text="文本XX" />  
    </TableRow>  
</TableLayout>

运行截图:

从图中我们可以看到two这个按钮被挤压成条条状,这个就是收缩,为了保证表格能适应 父容器的宽度!至于另外两个属性就不讲解了,用法和HTML相同!有兴趣的可以研究下!


5.使用实例

使用TableLayout来完成简单的登录界面,运行效果图如下:

流程解析:

①调用gravity属性,设置为center_vertical,让布局里面的组件在竖直方向上居中

②将TableLayout中的第一和第四列设置为可拉伸

③在每个TableRow中添加两个TextView,用于拉伸填满该行,这样可以让表格水平居中

android:stretchColumns=”0,3″ 设置为0.3,是为了让两边都充满,那么中间部分就可以居中了

详细代码如下:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/TableLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    tools:context=".MainActivity"     
    android:stretchColumns="0,3"    
    android:gravity="center_vertical"    
    android:background="#66FF66"    
    >    
        
    <TableRow>    
        <TextView />    
        <TextView     
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="用户名:"/>    
        <EditText     
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:minWidth="150dp"/>    
        <TextView />    
    </TableRow>    
        
    <TableRow>    
        <TextView />    
        <TextView     
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="密  码:"        
        />    
        <EditText     
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:minWidth="150dp"        
        />    
        <TextView />    
    </TableRow>    
        
    <TableRow>    
        <TextView />    
        <Button     
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="登陆"/>    
        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="退出"/>    
        <TextView />    
    </TableRow>    
        
</TableLayout>

6.发现的问题

相信大家在使用这个这TableLayout的TableRow的时候会遇到这个警告:

当然,程序还是可以运行的,不过或许你是强迫症患者,看到黄色感叹号你就不爽的话! 而解决这个警告的方法也是很奇葩的:只要你的TableLayout里面有2个或以上的TableRow就可以了!


本节小结:

好的,关于Android的第三个布局:TableLayout就到这里~无非就是五个属性的使用而已,实际开发 表格布局我们用的不多,知道简单的用法就可以了!

2.2.2 RelativeLayout(相对布局)

本节引言


在上一节中我们对LinearLayout进行了详细的解析,LinearLayout也是我们 用的比较多的一个布局,我们更多的时候更钟情于他的weight(权重)属性,等比例划分,对屏幕适配还是 帮助蛮大的;但是使用LinearLayout的时候也有一个问题,就是当界面比较复杂的时候,需要嵌套多层的 LinearLayout,这样就会降低UI Render的效率(渲染速度),而且如果是listview或者GridView上的 item,效率会更低,另外太多层LinearLayout嵌套会占用更多的系统资源,还有可能引发stackoverflow; 但是如果我们使用RelativeLayout的话,可能仅仅需要一层就可以完成了,以父容器或者兄弟组件参考+margin +padding就可以设置组件的显示位置,是比较方便的!当然,也不是绝对的,具体问题具体分析吧! 总结就是:尽量使用RelativeLayout + LinearLayout的weight属性搭配使用吧!


1.核心属性图


2.父容器定位属性示意图


3.根据兄弟组件定位

恩,先说下什么是兄弟组件吧,所谓的兄弟组件就是处于同一层次容器的组件,如图

图中的组件1,2就是兄弟组件了,而组件3与组件1或组件2并不是兄弟组件,所以组件3不能通过 组件1或2来进行定位,比如layout_toleftof = “组件1″这样是会报错的!切记! 关于这个兄弟组件定位的最经典例子就是”梅花布局”了,下面代码实现下:

运行效果图:

实现代码:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/RelativeLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent" >    
    
    <!-- 这个是在容器中央的 -->    
        
    <ImageView    
        android:id="@+id/img1"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_centerInParent="true"    
        android:src="@drawable/pic1"/>    
        
    <!-- 在中间图片的左边 -->    
    <ImageView    
        android:id="@+id/img2"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_toLeftOf="@id/img1"    
        android:layout_centerVertical="true"    
        android:src="@drawable/pic2"/>    
        
    <!-- 在中间图片的右边 -->    
    <ImageView    
        android:id="@+id/img3"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_toRightOf="@id/img1"    
        android:layout_centerVertical="true"    
        android:src="@drawable/pic3"/>    
        
    <!-- 在中间图片的上面-->    
    <ImageView    
        android:id="@+id/img4"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_above="@id/img1"    
        android:layout_centerHorizontal="true"    
        android:src="@drawable/pic4"/>    
        
    <!-- 在中间图片的下面 -->    
    <ImageView    
        android:id="@+id/img5"     
        android:layout_width="80dp"    
        android:layout_height="80dp"    
        android:layout_below="@id/img1"    
        android:layout_centerHorizontal="true"    
        android:src="@drawable/pic5"/>    
    
</RelativeLayout>

4.margin与padding的区别

初学者对于这两个属性可能会有一点混淆,这里区分下: 首先margin代表的是偏移,比如marginleft = “5dp”表示组件离容器左边缘偏移5dp; 而padding代表的则是填充,而填充的对象针对的是组件中的元素,比如TextView中的文字 比如为TextView设置paddingleft = “5dp”,则是在组件里的元素的左边填充5dp的空间! margin针对的是容器中的组件,而padding针对的是组件中的元素,要区分开来! 下面通过简单的代码演示两者的区别:

比较示例代码如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:paddingBottom="@dimen/activity_vertical_margin"    
    android:paddingLeft="@dimen/activity_horizontal_margin"    
    android:paddingRight="@dimen/activity_horizontal_margin"    
    android:paddingTop="@dimen/activity_vertical_margin"    
    tools:context=".MainActivity" >    
    
    <Button    
        android:id="@+id/btn1"     
        android:layout_height="wrap_content"    
        android:layout_width="wrap_content"    
        android:text="Button"/>    
    <Button    
        android:paddingLeft="100dp"     
        android:layout_height="wrap_content"    
        android:layout_width="wrap_content"    
        android:text="Button"    
        android:layout_toRightOf="@id/btn1"/>    
        
    <Button    
        android:id="@+id/btn2"     
        android:layout_height="wrap_content"    
        android:layout_width="wrap_content"    
        android:text="Button"    
        android:layout_alignParentBottom="true"/>    
    <Button    
        android:layout_marginLeft="100dp"     
        android:layout_height="wrap_content"    
        android:layout_width="wrap_content"    
        android:text="Button"    
        android:layout_toRightOf="@id/btn2"     
        android:layout_alignParentBottom="true"/>    
        
</RelativeLayout> 

运行效果图比较:


5.很常用的一点:margin可以设置为负数

相信很多朋友都不知道一点吧,平时我们设置margin的时候都习惯了是正数的, 其实是可以用负数的,下面写个简单的程序演示下吧,模拟进入软件后,弹出广告 页面的,右上角的cancle按钮的margin则是使用负数的!

效果图如下:

此处输入图片的描述

贴出的广告Activity的布局代码吧,当然,如果你对这个有兴趣的话可以下下demo, 因为仅仅是实现效果,所以代码会有些粗糙!

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    tools:context="com.jay.example.relativelayoutdemo.MainActivity"   
    android:background="#00CCCCFF">  
  
    <ImageView  
        android:id="@+id/imgBack"  
        android:layout_width="200dp"  
        android:layout_height="200dp"  
        android:layout_centerInParent="true"  
        android:background="@drawable/myicon" />  
  
    <ImageView  
        android:id="@+id/imgCancle"  
        android:layout_width="28dp"  
        android:layout_height="28dp"  
        android:layout_alignRight="@id/imgBack"  
        android:layout_alignTop="@id/imgBack"  
        android:background="@drawable/cancel"  
        android:layout_marginTop="-15dp"  
        android:layout_marginRight="-10dp" />  
  
</RelativeLayout>  

本节小结:

关于RelativeLayout的详解就到这里,有什么纰漏,错误,好的建议,欢迎提出~ 最后提供下上面的demo代码供大家下载:RelativeLayoutDemo

2.2.1 LinearLayout(线性布局)

本节引言

本节开始讲Android中的布局,Android中有六大布局,分别是: LinearLayout(线性布局),RelativeLayout(相对布局),TableLayout(表格布局) FrameLayout(帧布局),AbsoluteLayout(绝对布局),GridLayout(网格布局) 而今天我们要讲解的就是第一个布局,LinearLayout(线性布局),我们屏幕适配的使用 用的比较多的就是LinearLayout的weight(权重属性),在这一节里,我们会详细地解析 LinearLayout,包括一些基本的属性,Weight属性的使用,以及比例如何计算,另外还 会说下一个用的比较少的属性:android:divider绘制下划线!


1.本节学习图


2.weight(权重)属性详解:

①最简单用法:

如图:

实现代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:orientation="horizontal">   
        
    <LinearLayout    
        android:layout_width="0dp"    
        android:layout_height="fill_parent"    
        android:background="#ADFF2F"     
        android:layout_weight="1"/>    
       
        
    <LinearLayout    
        android:layout_width="0dp"    
        android:layout_height="fill_parent"    
        android:background="#DA70D6"     
        android:layout_weight="2"/>    
        
</LinearLayout>  

要实现第一个的1:1的效果,只需要分别把两个LinearLayout的weight改成1和1就可以了 用法归纳: 按比例划分水平方向:将涉及到的View的android:width属性设置为0dp,然后设置为android weight属性设置比例即可;类推,竖直方向,只需设android:height为0dp,然后设weight属性即可! 大家可以自己写个竖直方向的等比例划分的体验下简单用法!

②weight属性详解:

当然,如果我们不适用上述那种设置为0dp的方式,直接用wrap_content和match_parent的话, 则要接着解析weight属性了,分为两种情况,wrap_content与match_parent!另外还要看 LinearLayout的orientation是水平还是竖直,这个决定哪个方向等比例划分

1)wrap_content比较简单,直接就按比例的了

实现代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"  
    android:orientation="horizontal" >    
    
    <TextView    
        android:layout_weight="1"    
        android:layout_width="wrap_content"    
        android:layout_height="fill_parent"    
        android:text="one"     
        android:background="#98FB98"    
     />    
     <TextView    
        android:layout_weight="2"    
        android:layout_width="wrap_content"    
        android:layout_height="fill_parent"    
        android:text="two"     
        android:background="#FFFF00"    
     />    
     <TextView    
        android:layout_weight="3"    
        android:layout_width="wrap_content"    
        android:layout_height="fill_parent"    
        android:text="three"     
        android:background="#FF00FF"    
     />    
    
</LinearLayout>  
 

2)match_parent(fill_parent):这个则需要计算了

我们写这段简单的代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent" >    
    
    <TextView    
        android:layout_weight="1"    
        android:layout_width="fill_parent"    
        android:layout_height="fill_parent"    
        android:text="one"     
        android:background="#98FB98"    
     />    
     <TextView    
        android:layout_weight="2"    
        android:layout_width="fill_parent"    
        android:layout_height="fill_parent"    
        android:text="two"     
        android:background="#FFFF00"    
     />    
     <TextView    
        android:layout_weight="3"    
        android:layout_width="fill_parent"    
        android:layout_height="fill_parent"    
        android:text="three"     
        android:background="#FF00FF"    
     />    
    
</LinearLayout> 
 

运行效果图:

这个时候就会有疑问了,怎么会这样,这比例是2:1吧,那么three去哪了?代码里面明明有 three的啊,还设置了3的,而1和2的比例也不对耶,1:2:3却变成了2:1:0,怎么会这样呢? 答:这里其实没那么简单的,还是需要我们计算的,网上给出的算法有几种,这里就给出笔者 觉得比较容易理解的一种: step 1:个个都是fill_parent,但是屏幕只有一个啦,那么1 – 3 = – 2 fill_parent step 2:依次比例是1/6,2/6,3/6 step 3:先到先得,先分给one,计算: 1 – 2 * (1/6) = 2/3 fill_parent 接着到two,计算: 1 – 2 * (2/6) = 1/3 fill_parent 最后到three,计算 1 – 2 * (3/6) = 0 fill_parent step 4:所以最后的结果是:one占了两份,two占了一份,three什么都木有 以上就是为什么three没有出现的原因了,或许大家看完还是有点蒙,没事,我们举多几个例子试试就知道了!

比例为:1:1:1

按照上面的计算方法算一次,结果是:1/3 1/3 1/3,没错

接着我们再试下:2:3:4

计算结果:5/9 3/9 1/9,对比效果图,5:3:1,也没错,所以这个计算方法你可得mark下了!

③Java代码中设置weight属性:

setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,     
        LayoutParams.WRAP_CONTENT, 1)); 

3.为LinearLayout设置分割线

很多界面开发中都会设置一些下划线,或者分割线,从而使得界面更加整洁美观,比如下面的酷狗 音乐的注册页面:

对于这种线,我们通常的做法有两种 ①直接在布局中添加一个view,这个view的作用仅仅是显示出一条线,代码也很简单:

<View  
    android:layout_width="match_parent"  
    android:layout_height="1px"  
    android:background="#000000" />  

这个是水平方向上的黑线,当然你也可以改成其他颜色,或者使用图片

②第二种则是使用LinearLayout的一个divider属性,直接为LinearLayout设置分割线 这里就需要你自己准备一张线的图片了 1)android:divider设置作为分割线的图片 2)android:showDividers设置分割线的位置,none(无),beginning(开始),end(结束),middle(每两个组件间) 3)dividerPadding设置分割线的Padding

使用示例:

实现代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:id="@+id/LinearLayout1"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:divider="@drawable/ktv_line_div"  
    android:orientation="vertical"  
    android:showDividers="middle"  
    android:dividerPadding="10dp"  
    tools:context="com.jay.example.linearlayoutdemo.MainActivity" >  
  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="按钮1" />  
  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="按钮2" />  
  
    <Button  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:text="按钮3" />  
  
</LinearLayout>

4.LinearLayout的简单例子:

实现代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="fill_parent"    
    android:layout_height="fill_parent"    
    android:orientation="vertical"    
    tools:context=".MainActivity" >    
        
    <TextView    
        android:layout_width="wrap_content"    
        android:layout_height="wrap_content"    
        android:text="请输入要保存的电话号码"/>    
    <EditText    
        android:layout_width="fill_parent"    
        android:layout_height="wrap_content"/>    
    <LinearLayout    
        android:layout_width="fill_parent"    
        android:layout_height="wrap_content"    
        android:orientation="horizontal"    
        android:gravity="right">    
        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="保存"/>    
        <Button    
            android:layout_width="wrap_content"    
            android:layout_height="wrap_content"    
            android:text="清空"/>    
    </LinearLayout>    
</LinearLayout> 

5.注意事项:

使用Layout_gravity的一个很重要的问题!!! 问题内容: 在一个LinearLayout的水平方向中布置两个TextView,想让一个左,一个右,怎么搞? 或许你会脱口而出:”gravity设置一个left,一个right就可以啦!” 真的这么简单?你试过吗?写个简单的Layout你就会发现,事与愿违了: 代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="horizontal"  
    tools:context="com.jay.example.getscreendemo.MainActivity" >  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="200dp"  
        android:layout_gravity="left"  
        android:background="#FF7878"  
        android:gravity="center"  
        android:text="O(∩_∩)O哈哈~" />  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="200dp"  
        android:layout_gravity="right"  
        android:background="#FF7428"  
        android:gravity="center"  
        android:text="(*^__^*) 嘻嘻……" />  
  
</LinearLayout>

运行结果图:

看到这里你会说:哎呀,真的不行耶,要不在外层LinearLayout加个gravity=left的属性,然后设置第二个 TextView的layout_gravity为right,恩,好我们试一下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="match_parent"  
    android:layout_height="match_parent"  
    android:orientation="horizontal"  
    android:gravity="left"  
    tools:context="com.jay.example.getscreendemo.MainActivity" >  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="200dp"  
        android:background="#FF7878"  
        android:gravity="center"  
        android:text="O(∩_∩)O해외배당흐름~" />  
  
    <TextView  
        android:layout_width="wrap_content"  
        android:layout_height="200dp"  
        android:layout_gravity="right"  
        android:background="#FF7428"  
        android:gravity="center"  
        android:text="(*^__^*) 嘻嘻……" />  
  
</LinearLayout> 

结果还是一样:

好吧,没辙了,怎么办好?

当 android:orientation=”vertical” 时, 只有水平方向的设置才起作用,垂直方向的设置不起作用。 即:left,right,center_horizontal 是生效的。 当 android:orientation=”horizontal” 时, 只有垂直方向的设置才起作用,水平方向的设置不起作用。 即:top,bottom,center_vertical 是生效的。

然而,这方法好像并没有什么卵用。比如: 如果只能竖直方向设置左右对齐的话,就会出现下面的效果:

这显然不是我们要的结果把! 综上,要么按照上述给出的规则来布局,不过对于这种情况还是使用相对布局RelativeLayout把! 网上没给出具体的原因,都是说这样改有人说这个和orientation的优先级有关 ,暂且先mark下来吧,后续如果知道原因的话再解释!前面屏幕适配也说过了,布局还是建议使用 RelativeLayout!

← 2.1 View与ViewGroup的概念

2.2.2 RelativeLayout(相对布局) →

2.1 View与ViewGroup的概念

本节引言

告别了第一章,迎来第二章——Android中的UI(User Interface)组件的详解, 而本节我们要学习的是所有控件的父类View和ViewGroup类!突发奇想,直接翻译官方文档对 这两个东西的介绍吧,对了,天朝原因,google上不去,Android developer上不去,我们可以 改hosts或者用科学上网,当然也可以像笔者一样使用国内的API镜像,这里分享个吧: http://androiddoc.qiniudn.com/guide/topics/ui/overview.html 这个镜像是5.0的API!


UI Overview


在Android APP中,所有的用户界面元素都是由View和ViewGroup的对象构成的。View是绘制在屏幕上的用户能与之交互的一个对象。而ViewGroup则是一个用于存放其他View(和ViewGroup)对象的布局容器! Android为我们提供了一个View和ViewGroup子类的集合,集合中提供了一些常用的输入控件(比如按钮和文本域)和各种各样的布局模式(比如线性或相对布局)

User Interface Layout


你的APP的用户界面上的每一个组件都是使用View和ViewGroup对象的层次结构来构成的,比如 图 1。每个ViewGroup都是要给看不见的用于组织子View的容器,而它的子View可能是输入控件 或者在UI上绘制了某块区域的小部件。有了层次树,你就可以根据自己的需要,设计简单或者复 杂的布局了(布局越简单性能越好)

 图 1.一个UI布局的层次结构的插图

定义你的布局,你可以在代码中实例化View对象并且开始构建你的树,但最容易和最高效的方式来定义你的布局则是使用一个XML文件,用XML来构成布局更加符合人的阅读习惯,而XML类似与HTML 使用XML元素的名称代表一个View。所以< TextView >元素会在你的界面中创建一个TextView控件,而一个< LinearLayout >则会创建一个LinearLayout的容器! 举个例子,一个简单简单的垂直布局上面有一个文本视图和一个按钮,就像下面这样:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="fill_parent" 
              android:layout_height="fill_parent"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="I am a Button" />
</LinearLayout>

当你的App加载上述的布局资源的时候,Android会将布局中的每个节点进行实例化成一个个对象,然后你可以为这些定义一些额外的行为,查询对象的状态,或者修改布局。 完整创建UI布局的引导,请参考XML Layouts

User Interface Components


你无需全部用View和ViewGroup对象来创建你的UI布局。Android给我们提供了一些app控件,标准的UI布局,你只需要定义内容。这些UI组件都有其属性介绍的API文档,比如操作栏,对话框和状态通知栏等。


本节小结

好吧,翻译可能比较拗口,哎,英语盲尽力了,简单归纳下上述内容:

Android里的图形界面都是由View和ViewGroup以及他们的子类构成的: View:所有可视化控件的父类,提供组件描绘和时间处理方法 ViewGroup: View类的子类,可以拥有子控件,可以看作是容器 Android UI中的控件都是按照这种层次树的结构堆叠得,而创建UI布局的方式有两种, 自己在Java里写代码或者通过XML定义布局,后者显得更加方便和容易理解! 也是我们最常用的手段!另外我们一般很少直接用View和ViewGroup来写布局,更多的 时候使用它们的子类控件或容器来构建布局!

1.11 反编译APK获取代码&资源

本节引言

“反编译Apk”,看上去好像好像很高端的样子,其实不然,就是通过某些反编译软件,对我们的APK进行反编译,从而获取程序的源代码,图片,XML资源等文件;不知道你有没有这样做过,看到一个别人的一个APP界面做得很精美,或者你看上别人的图片素材,简单点的,我们可以下载别人的APK,然后改下后缀名,改成xxx.zip,然后解压: 笔者随便解压了一个APK:

我们可以打开res目录,获取里面的图片素材

但是,这种方法,获得的只会是一些.png,或者.jpg这样的位图文件资源,如果是xml类的资源,打开我们会发现是乱码,并且假如我们想看APK程序的Java代码,也是行不通的,因为他们都打被打包到classes.dex文件中! 但是反编译可以解决你的需要~另外,切勿拿反编译来做违法的事,比如把人家的APK重新打包后使用自己的签名然后发布到相关市场…另外,我们是参考别人的代码,而不是完全拷贝!!!切记!!

1.要准备的三个工具

  1. apktool:获取资源文件,提取图片文件,布局文件,还有一些XML的资源文件
  2. dex2jar:将APK反编译成Java源码(将classes.dex转化为jar文件)
  3. jd-gui:查看2中转换后的jar文件,即查看Java文件 为了方便各位读者,这里将三个打包到一起放到云盘中,又需要的可以进行下载: 反编译相关的三个工具.zip

2.使用apktool反编译APK获得图片与XML资源:

把下载好的apktool解压后,我们可以看到下述文件(忽略那两个csdn,一个是反编译的apk,一个是反编译后文件):

 接下来,双击cmd.exe,来到命令行,键入: apktool.bat d csdn.apk 即可,Enter回车:

然后就可以看到生成的csdn文件夹,里面就有我们想要资源  好的,就是XML资源到手了是吧!图片素材也到手了!


3.使用dex2jar将classes.dex转换成jar文件:

把下载好的dex2jar文件夹解压,apk解压后中的classes.dex复制到dex2jar.bat所在的目录下:

打开cmd,来到这个目录下:键入:d2j-dex2jar.bat classes.dex

接着我们可以看到,生成了一个jar包:

 好的,转换完成!


4.使用jd-gui查看jar包中的Java代码:

好的,打开jd-gui的文件夹

打开后,打开我们3中转换后的jar包,我们可以看见里面的代码:

 csdn的客户端竟然不混淆代码…可能是本着开源的精神吧,给我们学习代码吧!一般的话,apk发布都会 进行混淆,然后进行一些加密,或者使用第三方的加密平台,用的比较多的”爱加密”,有兴趣的也自行百度查看更加详细的介绍!


本节小结

好的,关于APK的反编译就介绍到这里,相信你已经摩拳擦掌想要试试了,那就试试吧,最后提醒一句,别做坏事!尊重别人的劳动成果!另外,关于第一大章环境搭建相关以及一些常用开发技巧就到这里,下一节开始我们就来进行本系列教程的第二章——Android中的常用UI控件的学习了!因相关的基本控件较多,估计有几十个,如果一直学控件可能没什么意思,可能并行写教程,每天学一个控件 + 一点其他的知识点这样,笔者要构思构思,敬请期待~谢谢~

1.9 Android程序签名打包

本节引言:

第一章的倒数第二节,本节给大家介绍的是如何将我们的程序打包成Apk文件,并且为我们的Apk签名! 上一节中已经说了,我们后续的教程使用的IDE是Android Studio,所以本节讲解的也是AS(后面都这样 简称吧)下对项目进行打包签名!


1.什么是签名,有什么用:

Android APP都需要我们用一个证书对应用进行数字签名,不然的话是无法安装到Android手机上的,平时我们调试运行时到手机上时,是AS会自动用默认的密钥和证书来进行签名;但是我们实际发布编译时,则不会自动签名,这个时候我们就需要进行手动签名了! 为我们的APK签名有以下好处:

  • 1.应用程序升级:如果你希望用户无缝升级到新的版本,那么你必须用同一个证书进行签名。这是由于只有以同一个证书签名,系统才会允许安装升级的应用程序。如果你采用了不同的证书,那么系统会要求你的应用程序采用不同的包名称,在这种情况下相当于安装了一个全新的应用程序。如果想升级应用程序,签名证书要相同,包名称要相同!
  • 2.应用程序模块化: Android系统可以允许同一个证书签名的多个应用程序在一个进程里运行,系统实际把他们作为一个单个的应用程序,此时就可以把我们的应用程序以模块的方式进行部署,而用户可以独立的升级其中的一个模块。
  • 3.代码或者数据共享: Android提供了基于签名的权限机制,那么一个应用程序就可以为另一个以相同证书签名的应用程序公开自己的功能。以同一个证书对多个应用程序进行签名,利用基于签名的权限检查,你就可以在应用程序间以安全的方式共享代码和数据了。 不同的应用程序之间,想共享数据,或者共享代码,那么要让他们运行在同一个进程中,而且要让他们用相同的证书签名。 ————上述内容摘自:android 为什么需要签名

2.Android Studio如何打包签名:

好的,因为学习本课程的都是初学者,多渠道打包的内容以后再进行讲解!本节只讲最简单的打包签名 对了,1中说的调试时默认生成的apk在:app/build/outputs/apk目录下! 和Eclipse并不相同,Eclipse是在bin目录下生成的!

好的,打开我们的AS上的Hello World项目,点击菜单:

Build -> Generate Signed APK…

②弹出窗口,如果没有key,就创建一个,有的话就选择存在的Key

③没有,我们新建一个,可根据自己需要填写相关项:

④好的,点击OK后,可以看到我们密码的信息,可能需要我们填入密码了,填写下:

⑤点击Next:

⑥点击Finish稍等一会儿会出现下述提示,说明应用已经打包签名成功了:

⑦可以看到打包后的APK已经安详地躺在我们的app目录下了:

⑧到第七步就已经打包签名完成了,如果你要验证是否签名,只需要输入下述cmd指令


本节小结

打包Android APK的方法还有很多,命令行,或者Gradle,ANT,MAVEN等等,方法有很多,本节讲解最简单的通过图形化界面打包签名的方式!好了,本节就到这里,最简单的打包签名方法get了没?

1.8 工程相关解析(各种文件,资源访问)

本节引言:

前面讲了一堆看似和我们Android开发无关的东西是吧,当然是现在看似而已,以后你回头看就知道了! 好吧,本节我们就来以前面创建的Hello World项目为入口,来了解工程结构, 以及Android中的资源访问的两种方式!后续教程使用的IDE是Android Studio,因为在前几天谷歌正式宣布,在年底前终止对其他IDE开发环境的支持!


1.工程项目结构解析:

我们开发大部分时间都花在下面这个部分上:

接下来我们对关键部分进行讲解:

  • java:我们写Java代码的地方,业务功能都在这里实现
  • res:存放我们各种资源文件的地方,有图片,字符串,动画,音频等,还有各种形式的XML文件

1.res资源文件夹介绍:

PS:说到这个res目录,另外还有提下这个assets目录,虽然这里没有,但是我们可以自己创建,两者的区别在于是否前者下所有的资源文件都会在R.java文件下生成对应的资源id,而后者并不会;前者我们可以直接通过资源id访问到对应的资源;而后者则需要我们通过AssetManager以二进制流的形式来读取!对了,这个R文件可以理解为字典,res下每个资源都都会在这里生成一个唯一的id!

接着说下res这个资源目录下的相关目录:

PS:下述mipmap的目录,在Eclipse并不存在这个,Eclipse中都是drawable开头的,其实区别不大,只是使用mipmap会在图片缩放在提供一定的性能优化,分辨率不同系统会根据屏幕分辨率来选择hdpi,mdpi,xmdpi,xxhdpi下的对应图片,所以你解压别人的apk可以看到上述目录同一名称的图片,在四个文件夹下都有,只是大小和像素不一样而已!当然,这也不是绝对的,比如我们把所有的图片都丢在了drawable-hdpi下的话,即使手机 本该加载ldpi文件夹下的图片资源,但是ldpi下没有,那么加载的还会是hdpi下的图片! 另外,还有一种情况:比如是hdpi,mdpi目录下有,ldpi下没有,那么会加载mdpi中的资源! 原则是使用最接近的密度级别!另外如果你想禁止Android不跟随屏幕密度加载不同文件夹的资源,只需在AndroidManifest.xml文件中添加android:anyDensity=”false”字段即可!

1.先说下图片资源:

  • drawable:存放各种位图文件,(.png,.jpg,.9png,.gif等)除此之外可能是一些其他的drawable类型的XML文件
  • mipmap-hdpi:高分辨率,一般我们把图片丢这里
  • mipmap-mdpi:中等分辨率,很少,除非兼容的的手机很旧
  • mipmap-xhdpi:超高分辨率,手机屏幕材质越来越好,以后估计会慢慢往这里过渡
  • mipmap-xxhdpi:超超高分辨率,这个在高端机上有所体现

2.接着说下布局资源:

  • layout:该目录下存放的就是我们的布局文件,另外在一些特定的机型上,我们做屏幕适配,比如480*320这样的手机,我们会另外创建一套布局,就行:layout-480×320这样的文件夹!

3.接下来说下菜单资源:

  • menu:在以前有物理菜单按钮,即menu键的手机上,用的较多,现在用的并不多,菜单项相关的资源xml可在这里编写,不知道谷歌会不会出新的东西来替代菜单了~

4.接下来说下values目录:

  • demens.xml:定义尺寸资源
  • string.xml:定义字符串资源
  • styles.xml:定义样式资源
  • colors.xml:定义颜色资源
  • arrays.xml:定义数组资源
  • attrs.xml:自定义控件时用的较多,自定义控件的属性!
  • theme主题文件,和styles很相似,但是会对整个应用中的Actvitiy或指定Activity起作用,一般是改变窗口外观的!可在Java代码中通过setTheme使用,或者在Androidmanifest.xml中为<application…>添加theme的属性! PS:你可能看到过这样的values目录:values-w820dp,values-v11等,前者w代表平板设备,820dp代表屏幕宽度;而v11这样代表在API(11),即android 3.0后才会用到的!

5.在接着说下这个raw目录: 用于存放各种原生资源(音频,视频,一些XML文件等),我们可以通过openRawResource(int id)来获得资源的二进制流!其实和Assets差不多,不过这里面的资源会在R文件那里生成一个资源id而已

6.最后还有个动画的,动画有两种:属性动画和补间动画:

  • animator:存放属性动画的XML文件
  • anim:存放补间动画的XML文件

2.如何去使用这些资源

嗯,知道有什么资源,接下来就来了解该怎么用了: 前面也说了,我们所有的资源文件都会在R.java文件下生成一个资源id,我们可以通过这个资源id来完成资源的访问,使用情况有两种:Java代码中使用和XML代码中使用。

Java代码中使用:

Java 文字:

txtName.setText(getResources().getText(R.string.name)); 

图片:

imgIcon.setBackgroundDrawableResource(R.drawable.icon); 

颜色:

txtName.setTextColor(getResouces().getColor(R.color.red)); 

布局:

setContentView(R.layout.main);

控件:

txtName = (TextView)findViewById(R.id.txt_name);

XML代码中使用:

通过@xxx即可得到,比如这里获取文本和图片:

<TextView android:text="@string/hello_world" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background = "@drawable/img_back"/>

2.深入了解三个文件:

好了,接下来我们就要剖析工程里三个比较重要的文件: MainActivity.java,布局文件:activity_main和Android配置文件:AndroidManifest.xml PS:图片内容可能有点差距,没时间做图,望体谅~

MainActivity.java:

代码如下

package jay.com.example.firstapp;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

代码分析:

布局文件:activity_main.xml:

代码如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/스포츠중계" />

</RelativeLayout>

代码分析:

我们定义了一个LinearLayout线性布局,在xml命名空间中定义我们所需要使用的架构,来自于①

AndroidManifest.xml配置文件:

代码如下:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="jay.com.example.firstapp" >

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

代码分析:

除了上述内容外:

①如果app包含其他组件的话,都要使用类型说明语法在该文件中进行声明 Server:元素 BroadcastReceiver元素 ContentProvider元素 IntentFilter<intent-filter>元素

②权限的声明: 在该文件中显式地声明程序需要的权限,防止app错误地使用服务, 不恰当地访问 资源,最终提高android app的健壮性 android.permission.SEND_SMS 有这句话表示app需要使用发送信息的权限,安装的时候就会提示用户, 相关权限可以在sdk参考手册查找!


本节小结:

本节我们对我们的Hello World项目进行了详细的了解,相关目录是做什么的,res下的资源文件有哪些,有什么作用,怎么使用这些资源!同时来通过画图的方式详细地讲解了工程中三个最重要的文件!到这里相信你对Android项目已经有个大体的了解了!谢谢~

1.7 界面原型设计

本节引言:

引用锤子科技视觉设计总监——罗子雄在重庆TEDx活动上说的一小段话:

每当我们看到一些美妙的设计的时候,很多人心里面会有一种冲动,这种冲动会让你们想去创造一些 新的东西,创造一些美妙的事物。

我们常说用户体验用户体验,用户使用你的软件,第一个会接触的是什么?没错,图形化界面(GUI),简称UI,对于用户而言,最直观,给用户留下第一印像的是往往是程序的界面,而非功能!人,总喜欢美的东西,对吧? 假如一样的功能,决定用户取向的,往往是UI!精美的UI!当然还有一些贴心的人性化操作等! 下图两个计算机的App界面:

我们先不说功能,从UI上讲,你喜欢哪个? 由此,一个产品的UI是非常重要的,而产品的界面原型设计一般是由公司的产品经理+美工来完成的,需求分析 ->界面原型设计 ->我们来写代码!可能你觉得界面原型对我们而言并不没什么作用,但假如你以后想自己开发App呢?又或者你升做产品经理呢?嘿嘿!世事无绝对,以后的事,谁知道呢?公司的话,大部分使用的都是Axure Rp,但是这个东西比较难用!除了这个以外还有其他很多的原型设计工具:

  • Pencil
  • Framer
  • Shireframe
  • UIDesigner
  • Balsamiq Mockups
  • Mockup Builder
  • Mockup
  • FrameBox
  • iPhone Mockup
  • GOOFLOW
  • WireframeSketcher
  • FluidIA
  • Indigo Studio
  • Origami
  • Quartz Composer
  • Justproto
  • Avocado
  • PaintCode
  • Mockplus(摩客)
  • 墨刀等….

笔者使用过的是两个国产的界面原型设计工具,他们分别是:Mockplus(摩客)和墨刀 本文会简要的介绍下Mockplus的用法!


Mockplus原型工具的使用:

有网页版以及客户端版供你选择:Mockplus官网

Step 1:注册一个你自己的账号,然后新建文件进入编辑界面!(时间关系,这里笔者直接试用) 然后弹出一个原型风格的对话框给我们选择:素描跟线条!

笔者选择线条:

我们要做的就是从左边的组件栏中啦控件到手机界面上,当然,我们可以双击某个控件,自定义我们 的样式,比如颜色,背景图片等!

Step 2:交互实现: 界面原型除了界面外,肯定是少不了交互的,这里我们做一个简单的新闻应用的交互例子给大家体验下: 我们在其中一个新闻类别中添加跳转链接,

接着我们可以点击右上角的播放按钮:

接下来我们就可以看具体的交互了,PS:这里可能是网页版的问题,有些图片显示不出来! 

好了,大概的用法就这些,大家可以自己摸索摸索,另外,如果生成文档是要升级为付费用户的哦!一个月6元不贵,就一个早餐钱,当然如果是自己玩玩而已就没必要开了!


Android自带DroidDraw工具设计Android界面:

其实Android也给我们提供了一个”老掉牙”的界面设计工具,跟上面这些高大上的界面原型工具相比,差几十条街,可以理解成一个分离的ADT,比ADT高级一点的功能就是自动生成代码…对于很少接触原型设计的朋友来说,花1,2分钟就可以掌握这个工具,还是比较值得!

工具界面:

此处输入图片的描述

图示已经写明相关的操作了,很简单,实践是检验真理的唯一标准,自己下来试试吧!!

软件下载:droiddrawr.jar

本节小结:

本节给大家介绍了下界面原型设计的概念,轻量级Mockplus(摩客)的简单实用,以及Android自带的DroidDraw工具,内容比较简单,还需大家自行实践理解!

1.6 9(九妹)图片怎么玩

1.本节引言:

可能有的一些疑问:

1.什么是.9图片?
答:图片后缀名前有.9的图片,如pic1.9.png这样的图片

2. .9图片能干嘛? 答: 在图片拉伸的时候特定的区域不会发生图片失真,而不失真的区域可以由我们自己绘制 3. .9图片用什么做? 答:工欲善其事,必先利其器,做.9图片的工具有:

Android SDK自带:draw9patch.bat,不过这玩意出了好久,谷歌竟然没更新过…

NinePatchEditor,相比起自带的,做了一些优化,支持批量操作,而且界面看起来美观一点: 有兴趣的可以下载下,笔者平时用的这个,下载链接:NinePatchEditor.zip

 ③NinePng九图神器,手机版的.9处理工具,做得还是比较赞的,但是要连wifi互传图片,实际操作起来有点麻烦,功能还是比较强大的,有兴趣到相关应用市场搜索下载:

PhotoShop,这就显得比较夸张了,一般用这个做.9图的都是美工,有兴趣的可搜下相关教程!


2. .9图片怎么做?

!!核心要点:左上拉伸,右下内容!!!!!! 其实核心就上面的内容!先来找个图片试试手!


1. draw9patch.bat制作.9图实例:

有这样的图片:,我们通过TextView的android:blackground可以设置为TextView的一个背景,内容少的时候还正常,一多起来就可能出现下面这种情况: 会发现图片被拉伸变形了,很明显,这不合我们的需求,于是乎我们需要对这个图片来进行一些处理,让圆角部分的不随长度拉伸,中间部分才拉伸

打开我们的draw9patch.bat,点击左上角File,来到对应目录打开我们要处理的图片素材, 接下来就可以看到我们工具的主界面了:

右面的预览区域分别是:纵向拉伸,横向拉伸,横纵都拉伸的预览

好的,接下来开始处理图片了:

Step 1.调Zoom和Patch scale:设置自己适合的缩放比例,勾选show patch 可以让Zoom足够大,因为后面我们需要处理”斑马线”

Step 2.接下来我们只需要在”斑马线”上进行操作就可以了: PS:黑色那条线是一条条点出来的,如果想消除点的话:按住shift点即可!

Step 3.保存图片,以.9.png结尾 比如这里保存的文件名是back.9.png; 嘿嘿,然后把他加入我们的工程,设置为TextView的背景:

效果杠杠滴,接下来无论我们的显示的字符多长,都是图中这个结果,新技能get~


2.看下别人如何做.9图:

根据不同的情况我们可能需要做不同的.9图,下面欣赏下几个别人弄好的稍微复杂点的.9图的例子! 例子:

1.原文链接:https://vs-tv.com/bbs/board.php?bo_table=gallery&wr_id=2367 好吧,这素材我喜欢,可以没有QAQ! 

2.原文链接:http://blog.csdn.net/lizzy115/article/details/7950959

3.原文链接:http://www.cnblogs.com/vanezkw/archive/2012/07/19/2599092.html


3.本节小结:

好的,本节关于.9制作可拉伸图片的教程就到这里,还是比较简单的,记住我们的口诀:左上拉伸,右下内容! 做几个.9图后相信你就深有体会了,再见~

1.5.2 Git之使用GitHub搭建远程仓库

本节引言:

在上一节中,我们学习了如何使用Git,构建我们的本地仓库,轻松的实现了版本控制以及代码还原,修改日志查看等;读者肯定不满足与本地是吧,假如是多个人一起来开发一个程序呢?我们需要一个作为服务器的远程仓库!当然搭建一个服务器是需要成本的,为什么不把项目托管到Github上呢?作为开源代码库以及版本控制系统,Github拥有140多万开发者用户。随着越来越多的应用程序转移到了云上,Github已经成为了管理软件开发以及发现已有代码的首选方法,不需要任何成本,为何不使用呢?是吧!本节就来学习如何把我们的代码托管到Github上!

1.账号注册&仓库创建:

打开Github官网注册:Github官网,填写注册相关信息:用户呢称,邮箱,密码

注册完,跳转到如下页面,选择仓库购买方式(私有仓库,别人不可以访问,要权限),一般我们自己玩选Free: PS:对了,这时候你邮箱可能收到一封验证邮件,点下完成验证。

接下来,创建一个我们的代码仓库: 

为自己的仓库添加点内容提示,就是项目的一些概述(可写可不写)

简单介绍下主页的一些东西:


2.Clone代码库到本地

当然,你可以直接用图形化界面克隆,不过我还是喜欢通过命令行来Clone,先复制下Clone的地址 

然后在某个地方,有键打开Git Bash:

键入:

git clone https://github.com/ZPJay/Garbage.git

然后可以看到我们的代码库就下载完成了:

打开文件夹,可以看到下述内容:


3.分支管理

对于刚接触版本控制工具的朋友来说,分支可能比较陌生,但是他会给我们带来很大的便利!限于篇幅, 笔者直接丢个链接,大家看看图就知道了:廖雪峰的官方网站:创建和合并分支!写得真心很赞~建议收藏!

了解概念后,我们来熟悉与分支相关的几个命令:

①创建分支(后者创建同时会切换分支):

git branch v1.0.3 或 git checkout -b v1.0.4

②查看版本库中所有分支:

git branch -a

③切换到某一分支:

git checkout v1.0.3

④删除某一分支:

git branch -D v1.0.4

⑤合并分支

 git merge v1.0.3

4.本地仓库与远程仓库同步问题

前面执行的这些分支操作都是在本地进行的,说了项目托管到GitHub上,我们肯定要跟远程仓库有交流是吧! 我们去年前面已经试过用clone命令把项目下载到本地,那么我们修改后如何把代码同步到Github上呢?我们先对我们的本地仓库做一点点修改,接着git add和git commit本地准备后,然后:

git push origin master 或者直接 git push

将我们本地的内容提交上去:

然后看下我们的Github,可以看到内容已经发生改变,而且提交者是我的另一个账号!

有同步到服务器,肯定有服务器同步到本地是吧,很简单,就一个

git pull

就可以


5.本节小结

好吧,本节就写那么多,相信你看到上面的Git教程还有一些冲突解决,分支管理,Bug分支等待高级的Git用法,考虑到这是入门教程,就不写那么深入了,有兴趣可以自己了解了解,说下自己公司目前的情况吧: ①使用Github作为我们的项目管理工具:我们都是把项目托管到Github上的,然后有两个分支:开发和测试两个分支,每个版本一个分支,最后发布时才把分支合并到master上!提bug也是在上面提的,还是比较便利的! ②使用Trello来做流程控制,也是比较简洁高效的!有兴趣的可以了解了解! 另外,国内访问Github可能比较缓慢,而且如果是私有仓库是要收费的,如果公司没有使用代理或者是私人开发,可能略显鸡肋,不过可以考虑下使用国产的开源仓库:[email protected],由开源中国提供的,提供了1000个私人仓库,好像,感觉还不错,有兴趣的可以考虑将代码托管到这里:비너스티비! 就到这里,如果文中有错误纰漏,欢迎指出,谢谢~