anndroid开发----布局

布局

  • 布局
  • 线性布局
    • 实例
  • 帧布局
  • 表格布局
  • 相对布局
  • 网格布局


布局

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

线性布局

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

实例


<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>

anndroid开发----布局_第1张图片
anndroid开发----布局_第2张图片

帧布局

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


<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);

    }
}

anndroid开发----布局_第3张图片

表格布局

  • 将页面划分行列构成单元格
  • 列数由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);
    }
}


<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>

相对布局

  • 采取与其他组件的相对位置的布局方式
  • anndroid开发----布局_第4张图片
    anndroid开发----布局_第5张图片
    anndroid开发----布局_第6张图片

<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>

anndroid开发----布局_第7张图片

网格布局


<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>

anndroid开发----布局_第8张图片

你可能感兴趣的:(移动开发,android,android,studio,ide)