首页 > 代码库 > 详解Android基本基本布局

详解Android基本基本布局

一、线性布局

LinearLayout又称为线性布局,是一种非常常用的布局。这个布局会将它包含的控件在线性方向上依次排列。我们可以通过指定它的orientation属性来决定它是垂直方向排列还是水平方向上排列。

举例1:垂直方向排列

技术分享
当排列方向是vertical,内部控件就不能将高度指定为match_parent
## 举例2:水平方向排列
技术分享

如果LinearLayout的排列方向是horizontal,内部控件就绝对不能将宽度指定为match_parent。

举例3:layout_gravity属性

技术分享
这个属性指定控件在布局中的对齐方式。跟gravity属性用法相似,但是需要注意的是当排列方向是水平的时候,只有垂直方向上的对齐方式才会生效,因为此时水平方向上的长度是不固定

举例4:layout_weight属性

技术分享
这个属性可以让控件按比例分配屏幕。我们将EditText和Button的宽度都指定为0dp,不用担心显示问题。现在控件的宽度由android:layout_weight属性决定,我们将2个控件的值都设置为1就表示这两个控件平分屏幕

相对布局

RelativeLayout又称为相对布局。它可以通过相对定位的方式让控件出现在布局任何位置。也正因为如此,这个布局的属性非常多。

举例1:基于控件布局

技术分享

  1. //按键在左上角
  2. <Button
  3. android:id="@+id/button1"
  4. android:layout_width="wrap_content"
  5. android:layout_height="wrap_content"
  6. android:layout_alignParentLeft="true"
  7. android:layout_alignParentTop="true"
  8. android:text="Button1"
  9. />
  10. //按键在右上角
  11. <Button
  12. android:id="@+id/button2"
  13. android:layout_width="wrap_content"
  14. android:layout_height="wrap_content"
  15. android:layout_alignParentRight="true"
  16. android:layout_alignParentTop="true"
  17. android:text="Button2"
  18. />
  19. //按键在中间
  20. <Button
  21. android:id="@+id/button3"
  22. android:layout_width="wrap_content"
  23. android:layout_height="wrap_content"
  24. android:layout_centerInParent="true"
  25. android:text="Button3"
  26. />
  27. //按键在左下角
  28. <Button
  29. android:id="@+id/button4"
  30. android:layout_width="wrap_content"
  31. android:layout_height="wrap_content"
  32. android:layout_alignParentLeft="true"
  33. android:layout_alignParentBottom="true"
  34. android:text="Button4"
  35. />
  36. //按键在右下角
  37. <Button
  38. android:id="@+id/button5"
  39. android:layout_width="wrap_content"
  40. android:layout_height="wrap_content"
  41. android:layout_alignParentRight="true"
  42. android:layout_alignParentBottom="true"
  43. android:text="Button5"
  44. />

举例2:基于控件布局

技术分享

  1. //Button3处于布局中央
  2. <Button
  3. android:layout_width="wrap_content"
  4. android:layout_height="wrap_content"
  5. android:layout_centerInParent="true"
  6. android:id="@+id/button3"
  7. android:text="Button3"/>
  8. //Button3右上角
  9. <Button
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:id="@+id/button1"
  13. android:text="Button1"
  14. android:layout_above="@id/button3"
  15. android:layout_toRightOf="@id/button3"/>
  16. //Button3左上角
  17. <Button
  18. android:layout_width="wrap_content"
  19. android:layout_height="wrap_content"
  20. android:id="@+id/button2"
  21. android:text="Button2"
  22. android:layout_above="@id/button3"
  23. android:layout_toLeftOf="@id/button3"/>
  24. //Button3右下角
  25. <Button
  26. android:layout_width="wrap_content"
  27. android:layout_height="wrap_content"
  28. android:id="@+id/button4"
  29. android:text="Button4"
  30. android:layout_below="@id/button3"
  31. android:layout_toRightOf="@id/button3"/>
  32. //Button3左下角
  33. <Button
  34. android:layout_width="wrap_content"
  35. android:layout_height="wrap_content"
  36. android:id="@+id/button5"
  37. android:text="Button5"
  38. android:layout_below="@id/button3"
  39. android:layout_toLeftOf="@id/button3"/>

三、帧布局

FrameLayout又称为帧布局。这种布局没有方便的定位方式,所有的控件都会默认摆放在布局的左上角

四、百分比布局

这种布局允许直接指定控件在布局中所占的百分比,这样可以轻松实现按任意比例分割布局的效果
这种布局被Android团队定义在support库当中,我们需要在项目的build.gradle中添加百分比布局库的依赖,保证百分比布局在所有Android版本上的兼容性
技术分享
输入完之后会跳出一个提示框
技术分享
这个提示告诉我们,gradle文件自上次同步之后发生了变化,需要再次同步才能是项目正常工作。这里只需要点击Sync Now就可以了。

举例1:4个按键平分界面

技术分享

  1. <android.support.percent.PercentFrameLayout
  2. xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:app="http://schemas.android.com/apk/res-auto"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. >
  7. <Button
  8. android:id="@+id/button1"
  9. android:text="Button1"
  10. android:layout_gravity="left|top"
  11. app:layout_widthPercent="50%"
  12. app:layout_heightPercent="50%"
  13. />
  14. <Button
  15. android:id="@+id/button2"
  16. android:text="Button2"
  17. android:layout_gravity="right|top"
  18. app:layout_widthPercent="50%"
  19. app:layout_heightPercent="50%"
  20. />
  21. <Button
  22. android:id="@+id/button3"
  23. android:text="Button3"
  24. android:layout_gravity="left|bottom"
  25. app:layout_widthPercent="50%"
  26. app:layout_heightPercent="50%"
  27. />
  28. <Button
  29. android:id="@+id/button4"
  30. android:text="Button4"
  31. android:layout_gravity="right|bottom"
  32. app:layout_widthPercent="50%"
  33. app:layout_heightPercent="50%"
  34. />
  35. </android.support.percent.PercentFrameLayout>

附件列表

     

    详解Android基本基本布局