android界面设计之布局

绝地灬酷狼 2024-02-17 14:48 126阅读 0赞

一、线性布局

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical"
  6.     android:paddingBottom="@dimen/activity_vertical_margin"
  7.     android:paddingLeft="@dimen/activity_horizontal_margin"
  8.     android:paddingRight="@dimen/activity_horizontal_margin"
  9.     android:paddingTop="@dimen/activity_vertical_margin"
  10.     tools:context=".Test01Activity" >
  12.     <!-- 线性布局 -->
  14.     <LinearLayout
  15.         android:layout_width="match_parent"
  16.         android:layout_height="wrap_content"
  17.         android:orientation="horizontal" >
  19.         <Button
  20.             android:id="@+id/btn1"
  21.             android:layout_width="wrap_content"
  22.             android:layout_height="wrap_content"
  23.             android:text="1" />
  25.         <Button
  26.             android:id="@+id/btn2"
  27.             android:layout_width="wrap_content"
  28.             android:layout_height="wrap_content"
  29.             android:text="2" />
  31.         <Button
  32.             android:id="@+id/btn3"
  33.             android:layout_width="wrap_content"
  34.             android:layout_height="wrap_content"
  35.             android:text="3" />
  37.         <Button
  38.             android:id="@+id/btn4"
  39.             android:layout_width="wrap_content"
  40.             android:layout_height="wrap_content"
  41.             android:text="4" />
  42.     </LinearLayout>
  44.     <LinearLayout
  45.         android:layout_width="match_parent"
  46.          android:layout_height="wrap_content"
  47.         android:orientation="horizontal" >
  49.         <Button
  50.             android:id="@+id/btn5"
  51.             android:layout_width="wrap_content"
  52.             android:layout_height="wrap_content"
  53.             android:text="4" />
  55.         <Button
  56.             android:id="@+id/btn6"
  57.             android:layout_width="wrap_content"
  58.             android:layout_height="wrap_content"
  59.             android:text="5" />
  61.         <Button
  62.             android:id="@+id/btn7"
  63.             android:layout_width="wrap_content"
  64.             android:layout_height="wrap_content"
  65.             android:text="6" 
  66.             android:layout_weight="1"
  67.             />
  70.     </LinearLayout>
  72. </LinearLayout>

结果：

Center

二、相对布局

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:paddingBottom="@dimen/activity_vertical_margin"
  6.     android:paddingLeft="@dimen/activity_horizontal_margin"
  7.     android:paddingRight="@dimen/activity_horizontal_margin"
  8.     android:paddingTop="@dimen/activity_vertical_margin"
  9.     tools:context=".MainActivity" >
  11.      <!-- 相对布局 -->
  12.     <Button
  13.             android:id="@+id/bbtn1"
  14.             android:layout_width="wrap_content"
  15.             android:layout_height="wrap_content"
  16.             android:text="中央" 
  17.             android:layout_centerHorizontal="true"
  18.             android:layout_centerVertical="true"
  19.             />
  20.     <Button
  21.             android:id="@+id/bbtn2"
  22.             android:layout_width="wrap_content"
  23.             android:layout_height="wrap_content"
  24.             android:text="左上角"
  25.             android:layout_above="@id/bbtn1" 
  26.             android:layout_toLeftOf="@id/bbtn1" 
  27.             />
  28.     <Button
  29.             android:id="@+id/bbtn3"
  30.             android:layout_width="wrap_content"
  31.             android:layout_height="wrap_content"
  32.             android:text="左下角"
  33.             android:layout_below="@id/bbtn1"
  34.             android:layout_toLeftOf="@id/bbtn1" 
  35.             />
  36.     <Button
  37.             android:id="@+id/bbtn4"
  38.             android:layout_width="wrap_content"
  39.             android:layout_height="wrap_content"
  40.             android:text="右下" 
  41.             android:layout_below="@id/bbtn1"
  42.             android:layout_toRightOf="@id/bbtn1" 
  44.             />
  45.     <Button
  46.             android:id="@+id/bbtn5"
  47.             android:layout_width="wrap_content"
  48.             android:layout_height="wrap_content"
  49.             android:layout_toRightOf="@id/bbtn1" 
  50.             android:layout_above="@id/bbtn1" 
  51.             android:text="右上" 
  52.             />
  55. </RelativeLayout>

结果：

Center 1

三、网格布局

  1. <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="wrap_content"  
  3.     android:layout_height="wrap_content"  
  4.     android:orientation="horizontal"  
  5.     android:rowCount="5"  
  6.     android:columnCount="4" > 
  8.     <!-- 网络布局 -->
  9. 　　<Button
  10.             android:id="@+id/bbtn1"
  11.             android:layout_width="wrap_content"
  12.             android:layout_height="wrap_content"
  13.             android:text="中央" 
  14.             android:layout_centerHorizontal="true"
  15.             android:layout_centerVertical="true"
  16.             />
  17. 　　<Button
  18.             android:id="@+id/bbtn1"
  19.             android:layout_width="wrap_content"
  20.             android:layout_height="wrap_content"
  21.             android:text="中央" 
  22.             android:layout_centerHorizontal="true"
  23.             android:layout_centerVertical="true"
  24.             />
  25. 　　<Button
  26.             android:id="@+id/bbtn1"
  27.             android:layout_width="wrap_content"
  28.             android:layout_height="wrap_content"
  29.             android:text="中央" 
  30.             android:layout_centerHorizontal="true"
  31.             android:layout_centerVertical="true"
  32.             />
  33. 　　<Button
  34.             android:id="@+id/bbtn1"
  35.             android:layout_width="wrap_content"
  36.             android:layout_height="wrap_content"
  37.             android:text="中央" 
  38.             android:layout_centerHorizontal="true"
  39.             android:layout_centerVertical="true"
  40.             />
  41. 　　<Button
  42.             android:id="@+id/bbtn1"
  43.             android:layout_width="wrap_content"
  44.             android:layout_height="wrap_content"
  45.             android:text="中央" 
  46.             android:layout_centerHorizontal="true"
  47.             android:layout_centerVertical="true"
  48.             />
  49. 　　<Button
  50.             android:id="@+id/bbtn1"
  51.             android:layout_width="wrap_content"
  52.             android:layout_height="wrap_content"
  53.             android:text="中央" 
  54.             android:layout_centerHorizontal="true"
  55.             android:layout_centerVertical="true"
  56.             />
  57. 　　<Button
  58.             android:id="@+id/bbtn1"
  59.             android:layout_width="wrap_content"
  60.             android:layout_height="wrap_content"
  61.             android:text="中央" 
  62.             android:layout_centerHorizontal="true"
  63.             android:layout_centerVertical="true"
  64.             />
  65. 　　<Button
  66.             android:id="@+id/bbtn1"
  67.             android:layout_width="wrap_content"
  68.             android:layout_height="wrap_content"
  69.             android:text="中央" 
  70.             android:layout_centerHorizontal="true"
  71.             android:layout_centerVertical="true"
  72.             />
  73. 　　<Button
  74.             android:id="@+id/bbtn1"
  75.             android:layout_width="wrap_content"
  76.             android:layout_height="wrap_content"
  77.             android:text="中央" 
  78.             android:layout_centerHorizontal="true"
  79.             android:layout_centerVertical="true"
  80.             />
  81. 　　<Button
  82.             android:id="@+id/bbtn1"
  83.             android:layout_width="wrap_content"
  84.             android:layout_height="wrap_content"
  85.             android:text="中央" 
  86.             android:layout_centerHorizontal="true"
  87.             android:layout_centerVertical="true"
  88.             />
  89. 　　<Button
  90.             android:id="@+id/bbtn1"
  91.             android:layout_width="wrap_content"
  92.             android:layout_height="wrap_content"
  93.             android:text="中央" 
  94.             android:layout_centerHorizontal="true"
  95.             android:layout_centerVertical="true"
  96.             />
  97. 　　<Button
  98.             android:id="@+id/bbtn1"
  99.             android:layout_width="wrap_content"
  100.             android:layout_height="wrap_content"
  101.             android:text="中央" 
  102.             android:layout_centerHorizontal="true"
  103.             android:layout_centerVertical="true"
  104.             />
  105. 　　<Button
  106.             android:id="@+id/bbtn1"
  107.             android:layout_width="wrap_content"
  108.             android:layout_height="wrap_content"
  109.             android:text="中央" 
  110.             android:layout_centerHorizontal="true"
  111.             android:layout_centerVertical="true"
  112.             />
  113. 　　<Button
  114.             android:id="@+id/bbtn1"
  115.             android:layout_width="wrap_content"
  116.             android:layout_height="wrap_content"
  117.             android:text="中央" 
  118.             android:layout_centerHorizontal="true"
  119.             android:layout_centerVertical="true"
  120.             />
  121. 　　<Button
  122.             android:id="@+id/bbtn1"
  123.             android:layout_width="wrap_content"
  124.             android:layout_height="wrap_content"
  125.             android:text="中央" 
  126.             />
  127. 　　<Button
  128.             android:id="@+id/bbtn1"
  129.             android:layout_width="wrap_content"
  130.             android:layout_height="wrap_content"
  131.             android:layout_rowSpan="2"
  132.             android:layout_gravity="fill"
  133.             android:text="=" 
  134.             />
  135. 　　<Button
  136.             android:id="@+id/bbtn1"
  137.             android:layout_width="wrap_content"
  138.             android:layout_height="wrap_content"
  139.             android:text="+" 
  141.             android:layout_columnSpan="2"
  142.             android:layout_gravity="fill"
  143.             />
  144. 　　<Button
  145.             android:id="@+id/bbtn1"
  146.             android:layout_width="wrap_content"
  147.             android:layout_height="wrap_content"
  148.             android:text="中央" 
  149.             />
  150.   </GridLayout>

结果：

Center 2

四、表格布局

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="fill_parent"
  4.     android:layout_height="fill_parent"
  5.     android:orientation="vertical"
  6.     android:padding="3dip" >
  8.     <!-- 第1个TableLayout，用于描述表中的列属性。第0列可伸展，第1列可收缩，第2列被隐藏 -->
  9.    <TableLayout 
  10.        android:layout_width="fill_parent"
  11.        android:layout_height="wrap_content"
  12.        android:stretchColumns="1"
  13.        >
  14.        <TableRow >
  15.            <TextView   android:text="nihao"/>
  17.        </TableRow>
  18.         <TableRow >
  19.            <TextView   android:text="你好ihdsakj "/>
  20.             <Button   android:text="你好ihdsakj "/>
  21.        </TableRow>
  22.        <TableRow >
  23.            <Button   android:text="你好ihdsakj "/>
  25.        </TableRow>
  27.    </TableLayout>
  30. </LinearLayout>

结果

:Center 3

发表评论

表情：
评论列表 （有 0 条评论，126人围观）

还没有评论，来说两句吧...

相关阅读

    相关 android之merge布局

    <merge />标签闪亮登场了。当LayoutInflater遇到这个标签时，它会跳过它，并将<merge />内的元素添加到<merge />的父元素里。迷惑了吗？让我们用

    亦凉亦凉/ 0 赞/ 444 阅读