学习总结--第四周(布局总结)
Android布局总结文章目录线性布局线性布局线性布局应该是最简单的一个布局了,我将之当做DIV理解,这种div有5种排列方式,水平,垂直,居中,水平居中和垂直居中(orientation)。如下图:
Android布局总结
线性布局
线性布局应该是最简单的一个布局了,所有的子元素都是按照垂直或水平的顺序排列在界面上(默认为水平排列,线性布局只适用于单行或者单列,若要写第二条需要再次声明一个)。如下图:
主要用到的属性:
orietation:方向
gravity:对齐方式
上图代码:
<?xml version="1.0" encoding="utf-8"?>
<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:padding="10dp"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:background="#ff0000"
android:gravity="center"
android:text="控件1"
/>
<TextView
android:layout_width="200dp"
android:layout_height="40dp"
android:background="#ff0000"
android:layout_marginTop="10dp"
android:gravity="center"
android:text="控件2"/>
<LinearLayout
android:layout_marginTop="50dp"
android:layout_width="300dp"
android:layout_height="100dp"
android:background="#00BFFF"
android:gravity="center_vertical"
>
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_marginLeft="15dp"
android:gravity="center"
android:text="控件3"/>
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_marginLeft="15dp"
android:gravity="center"
android:text="控件4"/>
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_marginLeft="15dp"
android:gravity="center"
android:text="控件5"/>
</LinearLayout>
<LinearLayout
android:layout_marginTop="50dp"
android:layout_width="200dp"
android:layout_height="300dp"
android:background="#00BFFF"
android:orientation="vertical"
android:gravity="center_vertical"
>
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_marginLeft="15dp"
android:gravity="center"
android:text="控件6"/>
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_marginLeft="15dp"
android:gravity="center"
android:text="控件7"/>
<Button
android:layout_width="80dp"
android:layout_height="40dp"
android:layout_marginLeft="15dp"
android:gravity="center"
android:text="控件8"/>
</LinearLayout>
</LinearLayout>
帧式布局
这就是一个层叠式布局,从最底层开始控件一层一层的往上叠加(后来居上)
上述代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tvBottom"
android:layout_width="300dp"
android:layout_height="300dp"
android:layout_gravity="center"
android:background="#ff0000"
android:text="最底层"
/>
<TextView
android:id="@+id/tvMiddle"
android:layout_width="200dp"
android:layout_height="200dp"
android:layout_gravity="center"
android:background="#0000ff"
android:text="中间层"
/>
<TextView
android:id="@+id/tvTop"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="center"
android:background="#00ff00"
android:text="顶层"
/>
</FrameLayout>
</LinearLayout>
相对布局
字面意思,拿一个控件当做参照物确定自己的位置,写了的控件越多参照物越多位置越好确定。第一个被拿来当参照物的控件需要自己设置(参照物以id属性设置自己“身份”)。
相关属性:
相对于父容器居中或对齐
layout_centerInParent 在父容器居中
layout_centerHorizontal 在父容器水平居中
layout_centerVertical 在父容器垂直居中
layout_alignParentLeft 与父容器左对齐
layout_alignParentRight 与父容器右对齐
layout_alignParentTop 与父容器顶对齐
layout_alignParentBottom 与父容器底对齐
相对于其它控件的位置
layout_toLeftOf 在……左边
layout_toRightOf 在……右边
layout_above 在……上面
layout_below 在……下面
相对于其它控件对齐
layout_alignLeft 与……左对齐
layout_alignRight 与……右对齐
layout_alignTop 与……顶对齐
layout_alignBottom 与……底对齐
layout_alignBaseLine 与……基线对齐
上述代码:
<?xml version="1.0" encoding="utf-8"?>
<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">
<Button
android:id="@+id/btnOne"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="1"/>
<Button
android:id="@+id/btnTwo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/btnOne"
android:layout_above="@id/btnOne"
android:text="2"/>
<Button
android:id="@+id/btnThree"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toLeftOf="@id/btnOne"
android:layout_below="@id/btnOne"
android:text="3"/>
<Button
android:id="@+id/btnFour"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/btnThree"
android:layout_alignLeft="@id/btnThree"
android:layout_marginTop="15dp"
android:text="4"/>
<Button
android:id="@+id/btnUpperLeftCorner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="左上角"/>
<Button
android:id="@+id/btnLowerRightCorner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:text="右下角"/>
</RelativeLayout>
网格布局
就是将布局划分为类似Excel一样有一定行数和列数并且排列整齐的单元格(单元格指代控件),然后通过跨行和跨列设置单个单元格大小
相关属性:
布局行数和列数
rowCount:行数
columnCount:列数
单元格操作
layout_row:子控件在布局的行数
layout_column:子控件在布局的列数
layout_rowSpan:跨行数
layout_columnSpan:跨列数
这个没什么说的直接上代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<GridLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:columnCount="5"
android:rowCount="7">
<Button
android:layout_width="65dp"
android:layout_row="1"
android:layout_column="0"
android:text="MC" />
<Button
android:layout_width="65dp"
android:layout_row="1"
android:layout_column="1"
android:text="MR" />
<Button
android:layout_width="65dp"
android:layout_row="1"
android:layout_column="2"
android:text="MS" />
<Button
android:layout_width="65dp"
android:layout_row="1"
android:layout_column="3"
android:text="M+" />
<Button
android:layout_width="65dp"
android:layout_row="1"
android:layout_column="4"
android:text="M-" />
<Button
android:layout_width="65dp"
android:layout_row="2"
android:layout_column="0"
android:text="←" />
<Button
android:layout_width="65dp"
android:layout_row="2"
android:layout_column="1"
android:text="CE" />
<Button
android:layout_width="65dp"
android:layout_row="2"
android:layout_column="2"
android:text="C" />
<Button
android:layout_width="65dp"
android:layout_row="2"
android:layout_column="3"
android:text="±" />
<Button
android:layout_width="65dp"
android:layout_row="2"
android:layout_column="4"
android:text="√" />
<Button
android:layout_width="65dp"
android:layout_row="3"
android:layout_column="0"
android:text="7" />
<Button
android:layout_width="65dp"
android:layout_row="3"
android:layout_column="1"
android:text="8" />
<Button
android:layout_width="65dp"
android:layout_row="3"
android:layout_column="2"
android:text="9" />
<Button
android:layout_width="65dp"
android:layout_row="3"
android:layout_column="3"
android:text="/" />
<Button
android:layout_width="65dp"
android:layout_row="3"
android:layout_column="4"
android:text="%" />
<Button
android:layout_width="65dp"
android:layout_row="4"
android:layout_column="0"
android:text="4" />
<Button
android:layout_width="65dp"
android:layout_row="4"
android:layout_column="1"
android:text="5" />
<Button
android:layout_width="65dp"
android:layout_row="4"
android:layout_column="2"
android:text="6" />
<Button
android:layout_width="65dp"
android:layout_row="4"
android:layout_column="3"
android:text="*" />
<Button
android:layout_width="65dp"
android:layout_row="4"
android:layout_column="4"
android:text="1/x" />
<Button
android:layout_width="65dp"
android:layout_row="5"
android:layout_column="0"
android:text="1" />
<Button
android:layout_width="65dp"
android:layout_row="5"
android:layout_column="1"
android:text="2" />
<Button
android:layout_width="65dp"
android:layout_row="5"
android:layout_column="2"
android:text="3" />
<Button
android:layout_width="65dp"
android:layout_row="5"
android:layout_column="3"
android:text="-" />
<Button
android:layout_width="65dp"
android:layout_height="95dp"
android:layout_row="5"
android:layout_rowSpan="2"
android:layout_column="4"
android:text="=" />
<Button
android:layout_width="130dp"
android:layout_row="6"
android:layout_column="0"
android:layout_columnSpan="2"
android:text="0" />
<Button
android:layout_width="65dp"
android:layout_row="6"
android:layout_column="2"
android:text="." />
<Button
android:layout_width="65dp"
android:layout_row="6"
android:layout_column="3"
android:text="+" />
</GridLayout>
</LinearLayout>
布局的相关知识很简单,理解起来也比较容易,麻烦一点的就是记各个布局特定的一些元素。不过呢布局这块也容易在一些细节上失误,这个或许跟人有关,浮躁的心情更容易犯错。以上的布局我并没有写绝对布局,绝对布局用在不同的设备上界面一个比一个奇葩,吃过绝对布局的亏绝对不再用它了…
更多推荐
所有评论(0)