第Ⅱ期Android菜鸟饭团#Android学习#第五课 活动笔记

xiao_ming

第Ⅱ期Android菜鸟饭团#Android学习#第五课 活动笔记

进行UI设计的三个步骤：

1.选择布局和正确的View

LinearLayouts适用于以行或列排列View,用Layout Weights可以将View空间进行分割,根据显示的View的大小进行对View的改动

RelativeLayouts可以将元素摆放在相对与另一个元素的位置上

2.把这些View定位在屏幕上,选择正确的ViewGroup和选择正确的布局属性

3.提取View并修改颜色大小等属性

今天学习了生日贺卡的制作流程,在制作的时候,先按照上面说的三步将准备做好,然后就是开始对贺卡的布局安排

这个生日贺卡的布局需要添加三个View,这三个View分别是两个TextView和一个ImageView,然后就要开始对View的内部属性进行编写.

因为AndroidStudio默认的字体比较小,不能满足对贺卡制作的要求,因此就需要对字体的改写,textSize,textColor和textStyle刚好可以解决这个问题,将字体大小,颜色和粗细改为你想要的就可以,大小可以设定为自己想要的大小,颜色如果你觉得AndroidStudio提供的颜色不够多,那你可以用十六进制的方法使用颜色,如#3F51B5这就是一种蓝色.在AndroidStudio里testStyle只有三种粗细可供选择.在制作这个贺卡的时候是使用两个TextView,因此还需要对它们的布局进行设计.

想让一个出现在左上角,一个出现在右下角的话,就又需要使用到新的属性

layout_alignparentBottom和layout_alignparentRight将一个view放到右下角,这个属性是用来把一个View放到父视图的某一个位置,还有Top,Left这两个方位.

而另一个View因为打算将它置于左上角,则按照AndroidStudio默认放置就可以了.

在将TextView改写完毕后,你会发现看上去其实并不满意,然后你就该对ImageView进行改动,View的改动没有顺序限制.添加图片到drawable包里,然后在ImageView中进行代码编辑需要使用android:src="@drawable/图片的名字"语句.

在这里,最好将图片名设定为全英文,中文是不支持的.

然后就需要进行对图片大小的改动了,在这里,显然需要将图片适应整个屏幕,因而需要用到layout_width="match_parent"和layout_height="match_parent"来将图片放到充满整个父布局

而为了让图片的中心位于父布局的中心,就需要将scaleType="centerCrop"一起使用,在这里的centerCrop还保证了让你的图片等比例放大而不会失真,因而可以说很有必要.

当把这三个视图做到这一步的时候,你会发现现在的TextView都是紧挨着父视图的边框的,而这样看起来又不是很舒服.

这样的话就该想办法让TextView里面的文字与父视图的边框之间留有一定的空白,在这里有两种方法可供选择,一种是使用padding,另一种是layout_margin,在完成布局之后你会发现看上去两者的布局没有差别(在没有对文本背景填充颜色的时候),然而两者其实是不同的。

先说padding,它是将其内部的元素与其边框留出空白,View本身变大了,但其位置没有发生改变而layout_margin是把View的位置移动到与父视图留出空白,但并没有改变自身的大小

在不显示边框的时候,是看不出区别的.那么只使用一种就可以达到想要的效果,而如果将两者同时使用的话会造成双倍的空白产生.到这里,一张贺卡就已经制作完毕,是不是感觉还不错？

下面就是制作完成的效果图：

而代码则是如下：

在这个过程中存在着这样一些问题:

      1.padding和layout_margin的区别

      2.src和background的区别

下面将是对上述问题的回答：

      1.padding是将其内部的元素与其边框留出空白,View本身变大了,但其位置没有发生改变,而layout_margin是把View的位置移动到与父视图留出空白,但并没有改变自身的大小。

      2.background会根据ImageView组件给定的长宽进行拉伸,而src就存放的是原图的大小,不会进行拉伸.src是图片内容(前景),background是背景,可以同时使用。

View是所有UI组件的基类，而 ViewGroup是容纳这些组件的容器，其本身也是从View派生出来的。

LinearLayout：以你为它设置的垂直或水平的属性值，来排列所有的子元素。所有的子元素都被堆放在其它元素之后，因此一个垂直列表的每一行只会有 一个元素，而不管他们有多宽，而一个水平列表将会只有一个行高（高度为最高子元素的高度加上边框高度）。LinearLayout保持子元素之间的间隔以及互相对齐（相对一个元素的右对齐、中间对齐或者左对齐）

RelativeLayout ：允许子元素指定他们相对于其它元素或父元素的位置（通过ID 指定）。因此，你可以以右对齐，或上下，或置于屏幕中央的形式来 排列两个元素。元素按顺序排列，因此如果第一个元素在屏幕的中央，那么相对于这个元素的其它元素将以屏幕中央的相对位置来排列。

与RelativeLayout相关的布局属性

•android:layout_above ---将该控件置于给定ID的控件之上

•android:layout_below ---将该控件的置于给定ID控件之下

•android:layout_toLeftOf  ---将该控件置于给定ID的控件之左

•android:layout_toRightOf ---将该控件置于给定ID的控件之右

•android:layout_alignBaseline ---该控件基线对齐给定ID的基线

•android:layout_alignBottom ---该控件于给定ID的控件底部对齐

•android:layout_alignLeft ---该控件于给定ID的控件左对齐

•android:layout_alignRight ---该控件于给定ID的控件右对齐

•android:layout_alignTop ---该控件于给定ID的控件顶对齐

•android:layout_alignParentLeft ---如果为True，该控件位于父控件的左部

•android:layout_alignParentRight ---如果为True，该控件位于父控件的右部

•android:layout_alignParentTop ---如果为True，该控件位于父控件的顶部

•android:layout_alignParentBottom ---如果为True，该控件位于父控件的底部

•android:layout_centerHorizontal ---如果为True，该控件将被置于水平方向的中央

•android:layout_centerInParent  ---如为Ture，该控件将被置于父控件水平方向和垂直方向

•android:layout_centerVertical ---如果为True，该控件将被置于垂直方向的中央

小结：在进行实际的贺卡制作的时候你就会发现之前学习到的东西已经可以合理的应用了,这个感觉是很舒服的,当在一点一点修改自己的布局设置的时候就会真正的熟练并且加深对每一个使用的属性的用法.在设计里面添加越多的View你就会发现需要更多的属性来修改布局,这样慢慢添加View就会变得越来越熟练.

每一个技术小白都有一个成为大神的梦想，现在Android菜鸟饭团就给你这个成就梦想的机会。我们提供最新的Android技术教学，只要你又耐心和毅力就一定会在这里有所收获。

Android菜鸟饭团由南阳GDG组织发起，秉承着开放、分享、创新的原则，希望通过GDG社区的力量能够给更多的想要学习Android开发技术的小白们创造一个学习，交流，分享的环境。同往常的GDG活动一样，我们依然是任性的一个子都不要，并且还在周六的分享中提供盒饭和不定期的惊喜小礼物呦~所以快来加入我们吧，为你的大神梦想迈出第一步。

把你的个人信息和申请理由快快发送到android@chuang1.net，前来加入我们吧