seo的培训班,网站做优化多少钱,惠州网站建设设计,html5游戏WordPress3.3 常用布局 本节介绍常见的几种布局用法#xff0c;包括在某个方向上顺序排列的线性布局#xff0c;参照其他视图的位置相对排列的相对布局#xff0c;像表格那样分行分列显示的网格布局#xff0c;CommonLayouts以及支持通过滑动操作拉出更多内容的滚动视图。 3.3.1 线…3.3 常用布局 本节介绍常见的几种布局用法包括在某个方向上顺序排列的线性布局参照其他视图的位置相对排列的相对布局像表格那样分行分列显示的网格布局CommonLayouts以及支持通过滑动操作拉出更多内容的滚动视图。 3.3.1 线性布局LinearLayout
前几个小节的例程中XML文件用到了LinearLayout布局它的学名为线性布局。顾名思义线性布局像是用一根线把它的内部视图串起来故而内部视图之间的排列顺序是固定的要么从左到右排列要么从上到下排列。在XML文件中LinearLayout通过属性android:orientation区分两种方向其中从左到右排列叫作水平方向属性值为horizontal从上到下排列叫作垂直方向属性值为vertical。如果LinearLayout标签不指定具体方向则系统默认该布局为水平方向排列也就是默认android:orientation“horizontal”。
下面做个实验让XML文件的根节点挂着两个线性布局第一个线性布局采取horizontal水平方向第二个线性布局采取vertical垂直方向。然后每个线性布局内部各有两个文本视图通过观察这些文本视图的排列情况从而检验线性布局的显示效果。详细的XML文件内容如下所示
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticalLinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:orientationhorizontalTextViewandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text横排第一个android:textColor#000000android:textSize17sp /TextViewandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text横排第二个android:textColor#000000android:textSize17sp //LinearLayoutLinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:orientationverticalTextViewandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text竖排第一个android:textColor#000000android:textSize17sp /TextViewandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:text竖排第二个android:textColor#000000android:textSize17sp //LinearLayout/LinearLayout运行测试App进入如图3-11所示的演示页面可见horizontal为横向排列vertical为纵向排列说明android:orientation的方向属性确实奏效了. 除了方向之外线性布局还有一个权重概念所谓权重指的是线性布局的下级视图各自拥有多大比例的宽高。
比如一块蛋糕分给两个人吃可能两人平均分也可能甲分三分之一乙分三分之二。两人平均分的话先把蛋糕切两半然后甲分到一半乙分到另一半此时甲乙的权重比为1:1。甲分三分之一、乙分三分之二的话先把蛋糕平均切成三块然后甲分到一块乙分到两块此时甲乙的权重比为1:2。
就线性布局而言它自身的尺寸相当于一整块蛋糕它的下级视图们一起来分这个尺寸蛋糕有的视图分得多有的视图分得少。分多分少全凭每个视图分到了多大的权重这个权重在XML文件中通过属性android:layout_weight来表达。
把线性布局看作蛋糕的话分蛋糕的甲乙两人就相当于线性布局的下级视图。假设线性布局平均分为左右两块则甲视图和乙视图的权重比为1:1意味着两个下级视图的layout_weight属性都是1。不过视图有宽高两个方向系统怎知layout_weight表示哪个方向的权重呢所以这里有个规定一旦设置了layout_weight属性值便要求layout_width填0dp或者layout_height填0dp。
如果layout_width填0dp则layout_weight表示水平方向的权重下级视图会从左往右分割线性布局
如果layout_height填0dp则layout_weight表示垂直方向的权重下级视图会从上往下分割线性布局。
按照左右均分的话线性布局设置水平方向horizontal且甲乙两视图的layout_width都填0dplayout_weight都填1此时横排的XML片段示例如下
?xml version1.0 encodingutf-8?
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticaltools:context.LinearLayoutActivityLinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:orientationhorizontalandroid:background#ff0000TextViewandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:text横排第一个android:textColor#000000android:textSize17sp /TextViewandroid:layout_width0dpandroid:layout_heightwrap_contentandroid:layout_weight1android:text横排第二个android:textColor#000000android:textSize17sp //LinearLayoutLinearLayoutandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:orientationverticalandroid:gravitycenterandroid:background#00ffffTextViewandroid:layout_widthwrap_contentandroid:layout_height0dpandroid:layout_weight1android:text竖排第一个android:textColor#000000android:textSize17sp /TextViewandroid:layout_widthwrap_contentandroid:layout_height0dpandroid:layout_weight1android:text竖排第二个android:textColor#000000android:textSize17sp //LinearLayout/LinearLayout把上面两个片段放到新页面的XML文件其中第一个是横排区域采用红色背景色值为ff0000第二个是竖排区域采用青色背景色值为00ffff。重新运行测试App打开演示界面如图3-12所示可见横排区域平均分为左右两块竖排区域平均分为上下两块。 3.3.2 相对布局RelativeLayout
线性布局的下级视图是顺序排列着的另一种相对布局的下级视图位置则由其他视图决定。相对布局名为RelativeLayout因为下级视图的位置是相对位置所以得有具体的参照物才能确定最终位置。
如果不设定下级视图的参照物那么下级视图默认显示在RelativeLayout内部的左上角。用于确定下级视图位置的参照物分两种一种是与该视图自身平级的视图另一种是该视图的上级视图也就是它归属的RelativeLayout。
综合两种参照物相对位置在XML文件中的属性名称说明见表 为了更好地理解上述相对属性的含义接下来使用RelativeLayout及其下级视图进行布局来看看实际效果图。下面是演示相对布局的XML文件例子
?xml version1.0 encodingutf-8?
RelativeLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_height150dptools:context.RelativeLayoutActivityTextViewandroid:idid/tv_center_horizontalandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_centerHorizontaltrueandroid:background#FFFFFFandroid:text我在水平中间android:textColor#000000android:textSize11sp /TextViewandroid:idid/tv_centerandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_centerInParenttrueandroid:background#FFFFFFandroid:text我在中间android:textColor#E91E63android:textSize11sp /TextViewandroid:idid/tv_center_verticalandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_centerVerticaltrueandroid:background#FFFFFFandroid:text我在垂直中间android:textColor#000000android:textSize11sp /TextViewandroid:idid/tv_parent_leftandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_alignParentLefttrueandroid:background#FFFFFFandroid:text我跟上级左边对齐android:textColor#000000android:textSize11sp /TextViewandroid:idid/tv_parent_rightandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_alignParentRighttrueandroid:background#FFFFFFandroid:text我跟上级右边对齐android:textColor#000000android:textSize11sp /TextViewandroid:idid/tv_parent_topandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_alignParentToptrueandroid:background#FFFFFFandroid:text我跟上级顶部对齐android:textColor#000000android:textSize11sp /TextViewandroid:idid/tv_parent_bottomandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_alignParentBottomtrueandroid:background#FFFFFFandroid:text我跟上级底部对齐android:textColor#000000android:textSize11sp /TextViewandroid:idid/tv_left_centerandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_alignTopid/tv_centerandroid:layout_toLeftOfid/tv_centerandroid:background#FFFFFFandroid:text我跟中间左边对齐android:textColor#000000android:textSize11sp /TextViewandroid:idid/tv_right_centerandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_alignTopid/tv_centerandroid:layout_toRightOfid/tv_centerandroid:background#FFFFFFandroid:text我跟中间右边对齐android:textColor#000000android:textSize11sp /TextViewandroid:idid/tv_above_centerandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_aboveid/tv_centerandroid:layout_alignLeftid/tv_centerandroid:background#FFFFFFandroid:text我跟中间上面对齐android:textColor#000000android:textSize11sp /TextViewandroid:idid/tv_below_centerandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_belowid/tv_centerandroid:layout_alignRightid/tv_centerandroid:background#FFFFFFandroid:text我跟中间下面对齐android:textColor#000000android:textSize11sp /
/RelativeLayout上述XML文件的布局效果如图所示RelativeLayout的下级视图都是文本视图控件上的文字说明了所处的相对位置具体的控件显示方位正如XML属性中描述的那样 3.3.3 网格布局GridLayout
虽然线性布局既能在水平方向排列也能在垂直方向排列但它不支持多行多列的布局方式只支持单行水平排列或单列垂直排列的布局方式。若要实现类似表格那样的多行多列形式可采用网格布局GridLayout。
网格布局默认从左往右、从上到下排列它先从第一行从左往右放置下级视图塞满之后另起一行放置其余的下级视图如此循环往复直至所有下级视图都放置完毕。为了判断能够容纳几行几列网格布局新增了android:columnCount与android:rowCount两个属性其中columnCount指定了网格的列数即每行能放多少个视图rowCount指定了网格的行数即每列能放多少个视图。
下面是运用网格布局的XML布局样例它规定了一个两行两列的网格布局且内部容纳四个文本视图。XML文件内容如下所示
?xml version1.0 encodingutf-8?
GridLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:columnCount2android:rowCount2tools:context.GridLayoutActivityTextViewandroid:layout_width0dpandroid:layout_columnWeight1android:layout_height60dpandroid:background#FFCCCCandroid:gravitycenterandroid:text浅红色android:textColor#000000android:textSize17sp /TextViewandroid:layout_width0dpandroid:layout_columnWeight1android:layout_height60dpandroid:background#FFAA00android:gravitycenterandroid:text橙色android:textColor#000000android:textSize17sp /TextViewandroid:layout_width0dpandroid:layout_columnWeight1android:layout_height60dpandroid:background#660066android:gravitycenterandroid:text深紫色android:textColor#000000android:textSize17sp /TextViewandroid:layout_width0dpandroid:layout_columnWeight1android:layout_height60dpandroid:background#00FF00android:gravitycenterandroid:text绿色android:textColor#000000android:textSize17sp //GridLayout运行App观察到的界面如图所示。 由上图可见App界面的第一行分布着浅红色背景与橙色背景的文本视图第二行分布着绿色背景与深紫色背景的文本视图说明利用网格布局实现了多行多列的效果。
3.3.4 滚动视图ScrollView
手机屏幕的显示空间有限常常需要上下滑动或左右滑动才能拉出其余页面内容可惜一般的布局节点都不支持自行滚动这时就要借助滚动视图了。与线性布局类似滚动视图也分为垂直方向和水平方向两类其中垂直滚动视图名为ScrollView水平滚动视图名为HorizontalScrollView。这两个滚动视图的使用并不复杂主要注意以下3点
1垂直方向滚动时layout_width属性值设置为match_parentlayout_height属性值设置为wrap_content。
2水平方向滚动时layout_width属性值设置为wrap_contentlayout_height属性值设置为match_parent。
3滚动视图节点下面必须且只能挂着一个子布局节点否则会在运行时报错Caused byjava.lang.IllegalStateExceptionScrollView can host only one direct child。
下面是垂直滚动视图ScrollView和水平滚动视图HorizontalScrollView的XML例子
?xml version1.0 encodingutf-8?
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:toolshttp://schemas.android.com/toolsandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroid:orientationverticaltools:context.ScrollVIewActivityHorizontalScrollViewandroid:layout_widthwrap_contentandroid:layout_height200dp!--水平方向的线性布局两个子视图的颜色分别为青色和黄色--LinearLayoutandroid:layout_widthwrap_contentandroid:layout_heightmatch_parentandroid:orientationhorizontalViewandroid:layout_width300dpandroid:layout_heightmatch_parentandroid:background#AAFFFF /Viewandroid:layout_width300dpandroid:layout_heightmatch_parentandroid:background#FFFFF0//LinearLayout/HorizontalScrollViewScrollViewandroid:layout_widthmatch_parentandroid:layout_heightwrap_content!--垂直方向的线性布局两个子视图的颜色分别为青色和黄色--LinearLayoutandroid:layout_widthwrap_contentandroid:layout_heightmatch_parentandroid:orientationverticalViewandroid:layout_widthmatch_parentandroid:layout_height400dpandroid:background#00FF00 /Viewandroid:layout_widthmatch_parentandroid:layout_height400dpandroid:background#FFFFAA//LinearLayout/ScrollView/LinearLayout运行测试App可知ScrollView在纵向滚动而HorizontalScrollView在横向滚动。 有时ScrollView的实际内容不够又想让它充满屏幕怎么办呢如果把layout_height属性赋值为match_parent结果还是不会充满正确的做法是再增加一行属性android:fillViewport该属性为true表示允许填满视图窗口属性片段举例如下 android:layout_heightmatch_parentandroid:fillViewporttrue
