详解四种基本布局

详解四种基本布局

布局是一种可用于放置很多控件的容器，他可以按照一定的规律调整内部控件的位置，从而编写出精美的页面

布局内部除了放置控件，也可以放置布局

布局与控件的关系，如图

线性布局（LinearLayout）

android:orientation （排列方向）

• horizontal：水平排列（默认）, 内部控件的宽度不能设置为match_parent，设置为match_parent，会把整个水平空间占满
• vertical ：纵向排列，内部控件的高度不能设置为match_parent，设置为match_parent，会把整个纵向空间占满

android:layout_gravity （用于指定控件在布局中的对齐方式）

• 当LinearLayout的排列方向为horizontal时，只有垂直方向上的对齐方式才会生效；当LinearLayout的排列方向为vertical时，只有水平方向上的对齐方式才会生效

实例

//布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:text="Button 1"/>

    <Button
        android:id="@+id/button_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="Button 2"/>

    <Button
        android:id="@+id/button_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:text="Button 3"/>
</LinearLayout>

---

android:layout_weight （允许我们使用比例的方式来指定控件的大小，他在实际屏幕的适配中起到非常重要的作用）

• 属性值同时指定为1，这表示 EditText和Button在水平方向平分宽度

• 实例

  //指定android:layout_weight
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:tools="http://schemas.android.com/tools"
      android:orientation="horizontal"
      android:layout_width="match_parent"
      android:layout_height="match_parent" >
  
      <EditText
          android:id="@+id/input_message"
          android:layout_width="0dp"
          android:layout_height="wrap_content"
          android:layout_weight="1"
          android:hint="Type somrthing"
          tools:ignore="Suspicious0dp" />
      <Button
          android:id="@+id/send"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Send"
          tools:ignore="Suspicious0dp"
          android:layout_weight="1"/>
  </LinearLayout>
  

//使用layout_weight实现宽度自适配效果
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <EditText
        android:id="@+id/input_message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Type somrthing"
        tools:ignore="Suspicious0dp" />
    <Button
        android:id="@+id/send"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Send"

        />
</LinearLayout>

相对布局（RelativeLayout）

• android:layout_alignParentLeft ：左对齐

• android:layout_alignParentRight：右对齐

• layout_alignParentTop：上对齐

• android:layout_alignParentBottom：下对齐

• android:layout_centerInParent：居中

• 举例

  //控件相对于父布局定位的效果
  //通过true和false控制
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent" >
  <!--左上-->
      <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentLeft="true"
          android:layout_alignParentTop="true"
          android:text="Button 1"
  
          />
  <!--右上-->
      <Button
          android:id="@+id/button2"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentRight="true"
          android:layout_alignParentTop="true"
          android:text="Button 2"
  
          />
  <!--居中-->
      <Button
          android:id="@+id/button3"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerInParent="true"
          android:text="Button 3"
  
          />
  <!--左下-->
      <Button
          android:id="@+id/button4"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentBottom="true"
          android:layout_alignParentLeft="true"
          android:text="Button4"
  
          />
  <!--右下-->
      <Button
          android:id="@+id/button5"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_alignParentBottom="true"
          android:layout_alignParentRight="true"
          android:text="Button5"
  
          />
  </RelativeLayout>
  

• android：layout_above：让一个控件位于另一个控件的上方

• android：layout_below：让一个控件位于另一个控件的下方

• android：layout_toLeftOf：让一个控件位于另一个控件的左侧

• android：layout_toRightOf：让一个控件位于另一个控件的右侧

• 举例：

  //控件相对于控件布局
  //通过引用id控制
  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent" >
  
      <Button
          android:id="@+id/button3"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_centerInParent="true"
          android:text="Button 3"
  
          />
  
      <Button
          android:id="@+id/button1"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_above="@+id/button3"
          android:layout_toLeftOf="@+id/button3"
          android:text="Button 1"
  
          />
  
      <Button
          android:id="@+id/button2"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_above="@+id/button3"
          android:layout_toRightOf="@+id/button3"
          android:text="Button 2"
  
          />
  
  
      <Button
          android:id="@+id/button4"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_below="@+id/button3"
          android:layout_toLeftOf="@+id/button3"
          android:text="Button4"
  
          />
  
      <Button
          android:id="@+id/button5"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:layout_below="@+id/button3"
          android:layout_toRightOf="@+id/button3"
          android:text="Button5"
  
          />
  </RelativeLayout>
  

  

帧布局（FrameLayout）

帧布局没有方便的定位方式，所有控件都会默认的摆在布局的左上角

实例

//帧布局的默认效果
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is TextView"/>

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher_round"/>
</FrameLayout>

使用android:layout_gravity属性来指定控件在布局中的对齐方式

实例

//使用android:layout_gravity属性来指定控件在布局中的对齐方式
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:text="This is TextView"/>

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:src="@mipmap/ic_launcher_round"/>
</FrameLayout>

百分比布局（之后探讨）