android基本布局之LinearLayout
2015-04-09 18:23
288 查看
LinearLayou称为线性布局,是android中很常用的布局,在UI设计中会经常遇到它,这里根据网上查的资料以及自己的体会做一个总结。
创建一个LayoutTest的project,一路finish,修改其中activity_main.xml的代码
activity_main.xml
效果如下图
图1
1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button
3" /></LinearLayout>
图2
android:layout_gravity="top" android:text="Button 1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="Button 2" /> <Button android:id="@+id/button3"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:text="Button 3" /></LinearLayout>
图3
android:layout_height="wrap_content" android:layout_gravity="top" android:text="Button 1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:text="Button
2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom" android:text="Button 3" /></LinearLayout>
图5
android:layout_height="wrap_content" android:layout_weight="1" android:hint="Please type something"/> <Button android:id="@+id/confirm" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="confirm"/> </LinearLayout>
图7
创建一个LayoutTest的project,一路finish,修改其中activity_main.xml的代码
activity_main.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 3" /> </LinearLayout>
效果如下图
图1
可以看到3个Button是垂直排列的,因为android:orientation的默认属性为vertical,想实现水平排列必须改写属性为horizontal,代码和效果如下
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button
1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button 2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button
3" /></LinearLayout>
图2
这里的3个Button为水平排列,所以宽度不能指定为match_parent,同理,垂直排列的时候高度不能指定为match_parent。
现在来看看android:layout_gravity属性,它规定了每个控件的对齐方式,代码和效果如下所示
<pre name="code" class="html"><pre name="code" class="html"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content"
android:layout_gravity="top" android:text="Button 1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:text="Button 2" /> <Button android:id="@+id/button3"
android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="right" android:text="Button 3" /></LinearLayout>
图3
</pre><pre name="code" class="html">注意这里指定了LinearLayout的排列方向为默认,即vertical垂直方向,所以3个Butoon首先是垂直紧密排列(如上图1),然后按照指定的对齐方式开始对齐,具体对齐方式下面给出一张表
<strong>图4</strong>
<strong> </strong>
那么如果排列方向改成水平想实现上图效果代码该如何修改呢
<pre name="code" class="html"><pre name="code" class="html"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <Button android:id="@+id/button1" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="top" android:text="Button 1" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:text="Button
2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom" android:text="Button 3" /></LinearLayout>
图5
注意这里后面2个的android:layout_gravity属性做了修改,因为在水平方向上只有垂直对齐的方式才会生效,如果第3个android:layout_gravity属性依旧为right,我们可以看看效果
<strong>图6</strong>
</pre><pre name="code" class="html">
接下来看看android:layout_weight属性,当设定了android:layout_weight属性后,控件的宽度将直接由它决定,与android:layout_width已经没有关系,所以通常android:layout_width会指定为0
<pre name="code" class="html"><pre name="code" class="html"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <EditText android:id="@+id/input_message" android:layout_width="0dp"
android:layout_height="wrap_content" android:layout_weight="1" android:hint="Please type something"/> <Button android:id="@+id/confirm" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:text="confirm"/> </LinearLayout>
图7
</pre><pre name="code" class="html">我们可以看到EditText和Button大小一样,这是因为android:layout_weight属性值相同,如果想设计成特定比例,比如2:1,可以把android:layout_weight属性值设定成2和1即可
<strong>图8</strong>
<strong> </strong>
如果在Button中不设定android:layout_weight属性的话,效果是怎样的呢
<pre name="code" class="html"><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <EditText android:id="@+id/input_message" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:hint="Please type something"/> <Button android:id="@+id/confirm" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="confirm"/> </LinearLayout>图9
这里只指定了EditText的android:layout_weight属性,Button仍然按照wrap_content来设定,这样剩下的空间将被EditText全部占满。
相关文章推荐
- Android 四种基本布局LinearLayout、RelativeLayout、FrameLayout、TableLayout
- Android四种基本布局(LinearLayout \ RelativeLayout \ FrameLayout \ TableLayout)
- Android布局之LinearLayout(线性布局)
- 【转】android 之LinearLayout布局
- android布局之LinearLayout
- android布局之LinearLayout, layout_weight
- 浅谈Android五大布局(一)——LinearLayout、FrameLayout和AbsoulteLayout
- ListView 自定义item布局 android.widget.LinearLayout$LayoutParams
- android开发布局一_线性布局(LinearLayout)
- Android布局(线性布局 Linear Layout )(相对布局 Relative Layout)
- Android应用开发之LinearLayout(线性布局)
- Android布局控件之LinearLayout详解
- android LinearLayout和RelativeLayout实现精确布局
- Android布局控件之LinearLayout详解
- Android布局之LinearLayout(线性布局)
- android布局之LinearLayout, layout_weight很有用
- android LinearLayout和RelativeLayout实现精确布局
- android LinearLayout和RelativeLayout实现精确布局
- Android布局之LinearLayout(线性布局)
- Android布局控件之LinearLayout详解