Android 基础课堂 - Lesson.3-阿里云开发者社区

开发者社区> 开发与运维> 正文

Android 基础课堂 - Lesson.3

简介: #### Android 基础课堂 经过上一周的小课堂,我们已经成功创建一个Android工程啦,也知道了四大组件中使用最多的Activity,本周呢,按正常情况来看,我们是应该开始那个我们一直说的APP的开发了,好,那么就让我们正式进入开发吧。 既然要进入开发了,那么就让我

Android 基础课堂

经过上一周的小课堂,我们已经成功创建一个Android工程啦,也知道了四大组件中使用最多的Activity,本周呢,按正常情况来看,我们是应该开始那个我们一直说的APP的开发了,好,那么就让我们正式进入开发吧。
既然要进入开发了,那么就让我们一步步来,首先先从搭建一个布局开始,于是乎,我们本周的小课堂,就得讲一讲Android里的五大布局了,这个嘛基础知识点,可能会比较乏味,不过还是很有必要理解的,把这些搞懂是今后做布局的第一步嘛,好了,让我们进入今天的Android基础课堂吧

第三课、五大布局

  • 一、LinearLayout (线性布局)

  • 什么叫做线性布局呢,其实理解起来也很简单,就是它里面的东西,都按照一定的顺序一个接着一个排放,那么一定的顺序指什么呢,在线性布局里,提供了两种布局排序方式,一种是水平的即horizontal,一种是垂直的即vertical,让我们来看看这两种布局方式吧
  • 水平 horizontal:在水平布局的LinearLayout 里,内部控件是从左到右一个个排序的,最前面的在左边,最后面的在右边,具体是什么样的呢,让我们来实践一下,先看下面的这个效果图
  • TB1n87kMVXXXXcfXXXXXXXXXXXX-554-913.png
  • 聚划算三个字分别是三个控件,我们可以看到,这三个控件是从左到右进行排列的,这就是水平布局的LinearLayout ,代码如下:
  • TB1rsAbMVXXXXbOXpXXXXXXXXXX-554-512.png
  • 接下来我们来看看垂直布局的LinearLayout
  • 垂直 vertical:上面也讲了水平布局的了,那么垂直布局也就很好理解的,只需要把从左到右的顺序改为从上到下的顺序就是了,让我们来看看布局实现效果
  • TB19Y7pMVXXXXXHXXXXXXXXXXXX-478-791.png
  • 布局代码与上面的水平的差不多:
  • TB10TjSMVXXXXb8apXXXXXXXXXX-438-646.png
  • 我们可以看到,LinearLayout 是水平布局还是垂直布局,是通过一个叫orientation的属性来控制的,关于在代码中,有很多其他属性,在文末会给一些常用的属性的解释

  • 二、RelativeLayout(相对布局)

  • 相对布局是啥意思呢,就是内部各子元素按照之间的位置关系来完成布局。在此布局中的子元素里与位置相关的属性将生效。例如android:layout_below, android:layout_above, android:layout_centerVertical等。注意在指定位置关系时,引用的ID必须在引用之前,先被定义,否则将出现异常,让我们来看看实现效果:
  • TB1n_D4MVXXXXXBXVXXXXXXXXXX-554-913.png
  • 在布局中,我们将“划”所对应的控件设置为水平居中,这就是一个相对位置的概念,位于父布局的水平中间,然后给“聚”所对应的控制设置的位置是在“划”的左边,给“算”所对应的控制设置的位置是在“划”的右边,所以都是通过相对位置关系来完成布局的,最后的显示效果如图,布局代码如下:
  • TB1LnwlMVXXXXbGXXXXXXXXXXXX-451-719.png
  • (父布局的orientation属性是没有的,截图时候忘去掉了,由于目前没有cdn权限,比较麻烦,就不换图了,在这标注一下好了)

---

  • 三、FrameLayout(帧布局)

  • FrameLayout是什么样的布局呢,这个布局翻译成中文也不是那么好翻译,不是那么好懂,但是其实它的布局方式并不难,甚至可以说,是最简单的一个布局方式了,那他具体是怎么布局的呢?在FrameLayout中,所有的子元素都不能被指定放置的位置,它们统统都被放在了该区域的左上角,从左上角开始计算宽高,并且后面的子元素直接覆盖在前面的子元素之上,将前面的子元素部分和全部遮挡(具体是遮挡部分还是全部,就得看上面的布局比起下面的布局,大小问题了)。让我们来看看实现的效果:
  • TB1cWMeMVXXXXaLXpXXXXXXXXXX-554-913.png
  • 在这里,我们写了三个控件,第一层的红色的,大小都为200dp,第二层为绿色的,大小都为100dp,第三次为蓝色的,大小都为50dp,然后我们可以看到,控件的显示,都是从左上角开始,并且是根据我们的层次一层层叠上去的,第一层在最下面,第二层其次,第三层在最上面,这就是FrameLayout,最简单的一个布局,完全不需要设置位置,只能是都从左上角开始布局,代码如下:
  • TB15hfTMVXXXXXWapXXXXXXXXXX-459-597.png

---

  • 四、AbsoluteLayout(绝对布局)

  • 绝对布局是什么意思呢,其实理解起来很简单,就是在这个布局里,给控件设置位置为多少,那么它实际显示的位置就是多少,所以在绝对布局中的子元素的android:layout_x和android:layout_y属性将生效,用于描述该子元素的坐标位置。屏幕左上角为坐标原点(0,0),第一个0代表横坐标,向右移动数值增大,第二个0代表纵坐标,向下移动,数值增大。在绝对布局中,控件可以完全重叠,因为它只根据x、y值来判断该显示控件的位置,如果子控件没有设置x、y值的话,那么默认将设置x、y值都为0。在实际开发中,通常不采用此布局格式,因为它的界面代码不能很好的适配各种终端,让我们来看一个例子
  • TB1ELDZMVXXXXc5XVXXXXXXXXXX-554-913.png
  • 在上图显示的布局中,我们没有给红色的控件设置x、y值,所以它使用了默认的x、y值即都为0,绿色的控件,我们将它的x、y值都设为了50dp,所以它会相对于左上角顶点的位置右移50dp切下移50dp,蓝色的控件,我们将其的x、y值都设置为了100dp,所以它相对于原点向右和向下各偏移了100dp,下面看看实现代码
  • TB1XtEcMVXXXXaPXpXXXXXXXXXX-484-657.png

---

  • 五、TableLayout(表格布局)

  • 表格布局,从它的名字来看,大家应该也可以大概猜到它的布局方式了,没错,正如它的名字所显示的,它就是将整个所含区域分成N行N列的布局格式,一个TableLayout由许多TableRow组成,一个TableRow就代表TableLayout中的一行,既然每一行都是由一个TableRow组成的,那么每一行里的列数是由TableRow控制的,所以我们上面说的N行N列,这两个N不一定是相等的,还有甚至每一行的列数都是可以不相等的,下面让我们来看看实现效果
  • TB1PUL1MVXXXXbnXVXXXXXXXXXX-554-913.png
  • 从上面的布局来看,我们将给第一行设置了一个控件,所以它只含有一列,第二行有两个控件,含有两列,第三行有三个控件,含有三列,下面看看代码实现:
  • TB12q_1MVXXXXcWXVXXXXXXXXXX-469-679.png
  • TB1LNcXMVXXXXcTXpXXXXXXXXXX-420-548.png


  • 这些只是五大布局的一些简单用法,还有很多东西的可以研究的可以学的,可以在后面的学习中慢慢深入,不同的布局结合着使用可以带来各种效果,当然了,一个好的程序员,会在能实现相同效果的情况下,去巧妙的使用布局,使得层级较少,本周的基础课堂就先讲讲五大布局,下周我们就会开始实际使用这些布局啦,让我们下周的基础课堂见吧(下面附上一些常用的xml属性,属性实在是太多了,还需要自己了解了解,下面这些只是平时可能用的比较多的)
  • android:layout_width 指定组件布局宽度
  • android:layout_height 指定组件布局高度
  • android:alpha 设置组件透明度
  • android:background 设置组件背景颜色
  • android:clickable 设置组件是否可以激发单击事件
  • android:foucsable 设置该组件是否可以获取焦点
  • android:foucsableInTouchMode 设置组件在触摸模式下是否可以获取焦点
  • android:id id,同于识别控件
  • android:longClickable 设置组件是否可以响应长单击事件
  • android:minHeight 设置组件的最小高度
  • android:minWidth 设置组件的最小宽度
  • android:onClick 绑定监听事件
  • android:padding 设置四周的内部距离
  • android:paddingBouttom 设置底部的内部距离
  • android:paddingLeft 设置左边的内部距离
  • android:paddingRight 设置右边的内部距离
  • android:paddingTop 设置上面的内部距离
  • android:layout_margin 设置距离四周的距离
  • android:layout_marginBouttom 设置距离底部的距离
  • android:layout_marginLeft 设置距离左边的距离
  • android:layout_marginRight 设置距离右边的距离
  • android:layout_marginTop 设置距离顶部的距离
  • android:rotation 设置组件旋转的角度
  • android:rotationX 设置组件绕x轴旋转的角度
  • android:rotationY 设置组件绕Y轴旋转的角度
  • android:scaleX 设置在水平方向上的缩放比
  • android:scaleY 设置在垂直方向上的缩放比
  • android:scrollX 设置水平滚动偏移量
  • android:scrollY 设置垂直滚动偏移量
  • android:scrollbarSize 滚动条大小
  • android:scrollbarStyle 滚动条风格
  • android:trasformPivotX 设置旋转中心的X坐标
  • android:trasformPivotY 设置旋转中心的X坐标
  • android:traslationX 设置在x方向上的位移
  • android:traslationY 设置在Y方向上的位移
  • android:visibility 是否可见

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章