anndroid开发----布局

---

布局

• xmln是命名空间
• sp是设置字体的大小

线性布局

• 将组件水平或者垂直排列

实例

<?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:orientation="horizontal">

    <Button
        android:id="@+id/mButton1"
        android:layout_width="60px"
        android:layout_height="wrap_content"
        android:text="按钮1">

    </Button>
    <Button
        android:id="@+id/mButton2"
        android:layout_width="60px"
        android:layout_height="wrap_content"
        android:text="按钮2">

    </Button>

    <Button
        android:id="@+id/mButton3"
        android:layout_width="60px"
        android:layout_height="wrap_content"
        android:text="按钮3">

    </Button>
    <Button
        android:id="@+id/mButton4"
        android:layout_width="60px"
        android:layout_height="wrap_content"
        android:text="按钮4">

    </Button>

</LinearLayout>

帧布局

• 将组件放在左上角的位置，当添加多个组件后面的组件将覆盖之前的组件

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/mImageView">
    </ImageView>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
         android:text="4011花果山"
        android:textSize="18sp">
    </TextView>
</FrameLayout>

package com.example.liearlayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    ImageView imageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = (ImageView) this.findViewById(R.id.mImageView);
        imageView.setImageResource(R.drawable.img);

    }
}

表格布局

• 将页面划分行列构成单元格
• 列数由TableLayout决定
• 行数由《TableRow》

package com.example.liearlayout;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    ImageView img1,img2,img3,img4,img5;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        img1 = (ImageView) this.findViewById(R.id.mImageView1);
        img1.setImageResource(R.drawable.img1);
        img2 = (ImageView) this.findViewById(R.id.mImageView2);
        img2.setImageResource(R.drawable.img2);
        img3 = (ImageView) this.findViewById(R.id.mImageView3);
        img3.setImageResource(R.drawable.img3);
        img4 = (ImageView) this.findViewById(R.id.mImageView4);
        img4.setImageResource(R.drawable.img4);
        img5 = (ImageView) this.findViewById(R.id.mImageView5);
        img5.setImageResource(R.drawable.img5);
    }
}

<?xml version="1.0" encoding="utf-8"?>

<TableLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <TableRow>
        <ImageView
            android:id="@+id/mImageView1"
            android:layout_width="50dp"
            android:layout_height="30dp"
            android:src="@drawable/img1">
        </ImageView>
        <ImageView
            android:id="@+id/mImageView2"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:src="@drawable/img2">
        </ImageView>
    </TableRow>

    <TableRow>
        <ImageView
            android:id="@+id/textView1"
            android:layout_width="50dp"
            android:layout_height="30dp">
        </ImageView>
        <ImageView
            android:id="@+id/mImageView3"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:src="@drawable/img3">
        </ImageView>
        <ImageView
            android:id="@+id/mImageView4"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:src="@drawable/img4">
        </ImageView>
    </TableRow>
    <TableRow>
        <ImageView
            android:id="@+id/textView2"
            android:layout_width="50dp"
            android:layout_height="30dp">
        </ImageView>
        <ImageView
            android:id="@+id/textView3"
            android:layout_width="50dp"
            android:layout_height="30dp">
        </ImageView>
        <ImageView
            android:id="@+id/mImageView5"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:src="@drawable/img5">
        </ImageView>
        <ImageView
            android:id="@+id/mImageView6"
            android:layout_width="60dp"
            android:layout_height="50dp"
            android:src="@drawable/img6">
        </ImageView>
    </TableRow>
</TableLayout>

相对布局

• 采取与其他组件的相对位置的布局方式
• 
  
  

<?xml version="1.0" encoding="utf-8" ?>
<RelativeLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/label"
        android:textSize="24sp"
        android:text="相对布局">
    </TextView>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/edit"
        android:background="@color/purple_200"
        android:layout_below="@id/label">
    </EditText>
    <Button
        android:id="@+id/ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/edit"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="10dip"
        android:text="OK">
    </Button>
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/ok"
        android:layout_alignTop="@id/ok"
        android:text="Cancel"/>
</RelativeLayout>

网格布局

<?xml version="1.0" encoding="utf-8" ?>
<GridLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:rowCount="6"
    android:columnCount="4">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_columnSpan="4"
        android:layout_marginLeft="4px"
        android:gravity="left"
        android:text="0"
        android:textSize="50dip"/>
    <Button
        android:layout_width="350dp"
        android:layout_height="wrap_content"
        android:layout_columnSpan="4"
        android:text="清除"
        android:textSize="26sp"/>
    <Button android:text="1" android:textSize="26sp"/>
    <Button android:text="2" android:textSize="26sp"/>
    <Button android:text="3" android:textSize="26sp"/>
    <Button android:text="+" android:textSize="26sp"/>
    <Button android:text="4" android:textSize="26sp"/>
    <Button android:text="5" android:textSize="26sp"/>
    <Button android:text="6" android:textSize="26sp"/>
    <Button android:text="-" android:textSize="26sp"/>
    <Button android:text="7" android:textSize="26sp"/>
    <Button android:text="8" android:textSize="26sp"/>
    <Button android:text="9" android:textSize="26sp"/>
    <Button android:text="*" android:textSize="26sp"/>
    <Button android:text="." android:textSize="26sp"/>
    <Button android:text="0" android:textSize="26sp"/>
    <Button android:text="=" android:textSize="26sp"/>
    <Button android:text="/" android:textSize="26sp"/>
</GridLayout>