当前位置: 代码迷 >> Android >> android界面设计之格局
  详细解决方案

android界面设计之格局

热度:80   发布时间:2016-04-28 04:58:47.0
android界面设计之布局

一、线性布局

<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:orientation="vertical"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".Test01Activity" >    <!-- 线性布局 -->    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" >        <Button            android:id="@+id/btn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="1" />        <Button            android:id="@+id/btn2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="2" />        <Button            android:id="@+id/btn3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="3" />        <Button            android:id="@+id/btn4"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="4" />    </LinearLayout>    <LinearLayout        android:layout_width="match_parent"         android:layout_height="wrap_content"        android:orientation="horizontal" >        <Button            android:id="@+id/btn5"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="4" />        <Button            android:id="@+id/btn6"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="5" />        <Button            android:id="@+id/btn7"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="6"             android:layout_weight="1"            />    </LinearLayout></LinearLayout>

结果:


二、相对布局

<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"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".MainActivity" >     <!-- 相对布局 -->    <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />    <Button            android:id="@+id/bbtn2"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="左上角"            android:layout_above="@id/bbtn1"             android:layout_toLeftOf="@id/bbtn1"             />    <Button            android:id="@+id/bbtn3"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="左下角"            android:layout_below="@id/bbtn1"            android:layout_toLeftOf="@id/bbtn1"             />    <Button            android:id="@+id/bbtn4"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="右下"             android:layout_below="@id/bbtn1"            android:layout_toRightOf="@id/bbtn1"             />    <Button            android:id="@+id/bbtn5"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_toRightOf="@id/bbtn1" 			android:layout_above="@id/bbtn1"             android:text="右上"             />   </RelativeLayout>

结果:

三、网格布局

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:orientation="horizontal"      android:rowCount="5"      android:columnCount="4" >         <!-- 网络布局 -->  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             android:layout_centerHorizontal="true"            android:layout_centerVertical="true"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_rowSpan="2"            android:layout_gravity="fill"            android:text="="             />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="+"                         android:layout_columnSpan="2"            android:layout_gravity="fill"            />  <Button            android:id="@+id/bbtn1"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="中央"             />  </GridLayout>  


结果:

四、表格布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical"    android:padding="3dip" >    <!-- 第1个TableLayout,用于描述表中的列属性。第0列可伸展,第1列可收缩,第2列被隐藏 -->   <TableLayout        android:layout_width="fill_parent"       android:layout_height="wrap_content"       android:stretchColumns="1"       >       <TableRow >           <TextView   android:text="nihao"/>                  </TableRow>        <TableRow >           <TextView   android:text="你好ihdsakj "/>            <Button   android:text="你好ihdsakj "/>       </TableRow>       <TableRow >           <Button   android:text="你好ihdsakj "/>                  </TableRow>             </TableLayout>   </LinearLayout>

结果

:

 

  相关解决方案