Android 布局

最新推荐文章于 2024-06-25 10:32:20 发布
最新推荐文章于 2024-06-25 10:32:20 发布
阅读量499 收藏
点赞数
文章标签： android java ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yehenanjing/article/details/126525709
版权

Android应用的所有UI组件都继承了View类；
View类有一个重要的子类ViewGroup;

用编程的方式开发UI界面：

package com.example.ui01;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.Date;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //线性布局管理器
        LinearLayout linearLayout = new LinearLayout(this);
        //令本Activity显示本布局管理器
        super.setContentView(linearLayout);
        //竖屏显示
        linearLayout.setOrientation(LinearLayout.VERTICAL);
        //创建一个TextView
        TextView textView = new TextView(this);
        //创建按钮
        Button button = new Button(this);
        button.setText("点击");
        //布局
        button.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT));
        //添加TextView和Button
        linearLayout.addView(textView);
        linearLayout.addView(button);
        //按钮绑定事件监听器
        button.setOnClickListener((view -> {
            textView.setText("Hello,现在是"+new Date());
        }));
    }
}

运行结果如下：
在这里插入图片描述

xml布局和代码混合控制UI界面

在这里插入图片描述
activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


</LinearLayout>

MainActivity.java:

package com.example.ui02;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {

    //访问图片的数组
    private int[] images = new int []{R.drawable.ic_baseline_360_24,R.drawable.ic_baseline_ac_unit_24};
    private int currentImg = 0;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取布局容器
        LinearLayout linearLayout = findViewById(R.id.root);
        ImageView imageView = new ImageView(this);
        linearLayout.addView(imageView);
        //默认显示第一张图片
        imageView.setImageResource(images[0]);
        //切换图片
        imageView.setOnClickListener((view -> {
            imageView.setImageResource(images[++currentImg%images.length]);
        }));
    }
}

运行结果如下：
在这里插入图片描述

鼠标点击改变位置的小球

DrawView.java:

package com.example.ui03;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

import androidx.annotation.Nullable;

public class DrawView extends View {

    private float currentX = 40f;
    private float currentY = 50f;
    //创建画笔
    private Paint p = new Paint();

    public DrawView(Context context) {
        super(context);
    }

    public DrawView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }
    public void onDraw(Canvas canvas){
        super.onDraw(canvas);
        //画笔颜色
        p.setColor(Color.RED);
        //画圆
        canvas.drawCircle(currentX,currentY,15F,p);
    }
    //触碰事件

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //获取鼠标坐标
        currentX=event.getX();
        currentY=event.getY();
        //重绘
        invalidate();
        return true;
    }
}
方法一

MainActivity.java

package com.example.ui03;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //获取容器
        LinearLayout root = findViewById(R.id.root);
        //创建DrawView组件
        DrawView drawView = new DrawView(this);
        //自定义宽高
        drawView.setMinimumHeight(500);
        drawView.setMinimumWidth(300);
        root.addView(drawView);
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

</LinearLayout>
方法二

MainActivity.java

package com.example.ui03;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/root"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    
    <com.example.ui03.DrawView
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
        
</LinearLayout>

运行结果如下：
在这里插入图片描述

布局

布局方式：

  1. 线性布局
  2. 表格布局
  3. 帧布局
  4. 绝对布局
  5. 约束布局

线性布局

MainActivity.java

package com.example.ui04;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private Button button1;
    private Button button2;
    private Button button3;
    private Button button4;
    private Button button5;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button1=findViewById(R.id.bn1);
        button2=findViewById(R.id.bn2);
        button3=findViewById(R.id.bn3);
        button4=findViewById(R.id.bn4);
        button5=findViewById(R.id.bn5);
    }
}

activity_main.xml

<?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="vertical"
    android:gravity="right|center_horizontal">

    <Button
        android:id="@+id/bn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button1"/>
    <Button
        android:id="@+id/bn2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button2"/>
    <Button
        android:id="@+id/bn3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button3"/>
    <Button
        android:id="@+id/bn4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button4"/>
    <Button
        android:id="@+id/bn5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="button5"/>

</LinearLayout>

运行结果如下：
在这里插入图片描述

表格布局

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableLayout
        android:id="@+id/Table1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:shrinkColumns="1"
        android:stretchColumns="2">
        <Button android:id="@+id/bn1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="表1，按钮1"/>
        <TableRow>
            <Button android:id="@+id/bn2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="表1，按钮2"/>
            <Button android:id="@+id/bn3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="表1，按钮3"/>
            <Button android:id="@+id/bn4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="表1，按钮4"/>
        </TableRow>
    </TableLayout>
    <TableLayout
        android:id="@+id/Table2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:collapseColumns="1">
        <Button android:id="@+id/bn5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="表2，按钮1"/>
        <TableRow>
            <Button android:id="@+id/bn6"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="表2，按钮2"/>
            <Button android:id="@+id/bn7"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="表2，按钮3"/>
            <Button android:id="@+id/bn8"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="表2，按钮4"/>
        </TableRow>
    </TableLayout>
    <TableLayout
        android:id="@+id/Table3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:stretchColumns="1,2">
        <Button android:id="@+id/bn9"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="表3，按钮1"/>
        <TableRow>
            <Button android:id="@+id/bn10"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="表3，按钮2"/>
            <Button android:id="@+id/bn11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="表3，按钮3"/>
            <Button android:id="@+id/bn12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="表3，按钮4"/>
        </TableRow>
        <TableRow>
            <Button android:id="@+id/bn13"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="表3，按钮5"/>
            <Button android:id="@+id/bn14"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="表3，按钮6"/>
        </TableRow>
    </TableLayout>
</LinearLayout>

运行结果如下：
在这里插入图片描述

帧布局

MainActivity.java

package com.example.ui06;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.widget.TextView;

import java.lang.ref.WeakReference;
import java.util.Timer;
import java.util.TimerTask;

public class MainActivity extends AppCompatActivity {

    int[] names=new int[]{R.id.view1,R.id.view2,R.id.view3,R.id.view4,R.id.view5,R.id.view6};
    TextView[] views=new TextView[names.length];
    class MyHandler extends Handler{
        private WeakReference<MainActivity> activity;
        public  MyHandler(WeakReference<MainActivity> activity){
            this.activity=activity;
        }
        private int currentColor=0;
        int[] colors=new int[]{R.color.black,R.color.purple_200,R.color.teal_200,R.color.purple_500,R.color.purple_700,R.color.teal_700};

        @Override
        public void handleMessage(@NonNull Message msg) {
            //消息来自本程序
            if(msg.what==0x123){
                for (int i = 0,len=activity.get().names.length; i < len; i++) {
                    activity.get().views[i].setBackgroundResource(colors[(i+currentColor)%colors.length]);
                }
                currentColor++;
            }
            super.handleMessage(msg);
        }
    }
    private MyHandler myHandler = new MyHandler(new WeakReference<>(this));
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        for (int i = 0; i < names.length; i++) {
            views[i]=findViewById(names[i]);
        }
        //线程，周期改变currentColor的值
        new Timer().schedule(new TimerTask() {
            @Override
            public void run() {
                //发送消息通知改变颜色
                myHandler.sendEmptyMessage(0x123);
            }
        },0,200);
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/view1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="320dp"
        android:height="320dp"
        android:background="#f00"/>
    <TextView
        android:id="@+id/view2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="280dp"
        android:height="280dp"
        android:background="#0f0"/>
    <TextView
        android:id="@+id/view3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="240dp"
        android:height="240dp"
        android:background="#00f"/>
    <TextView
        android:id="@+id/view4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="200dp"
        android:height="200dp"
        android:background="#ff0"/>
    <TextView
        android:id="@+id/view5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="160dp"
        android:height="160dp"
        android:background="#f0f"/>
    <TextView
        android:id="@+id/view6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:width="120dp"
        android:height="120dp"
        android:background="#0ff"/>

</FrameLayout>

运行结果如下
在这里插入图片描述

约束布局

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.088" />

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_marginEnd="10dp"
        android:text="Button"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_begin="73dp" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="left" />

    <androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="top" />

</androidx.constraintlayout.widget.ConstraintLayout>

运行结果如下
在这里插入图片描述

yehenanjing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android基础：Android布局
在路上
02-03 1万+
线性布局，LinearLayout, 相对布局，RelativeLayout
Android布局之表格布局
墨漓
11-01 8827
表格布局（Tablelayout）   简介：             Tablelayout类以行和列的形式对控件进行管理，每一行为一个TableRow对象，或一个View控件。          当为TableRow对象时，可在TableRow下添加子控件，默认情况下，每个子控件占据一列。          当为View时，该View将独占一行。 表格布局是以行和列的形式来对控件...
一篇文章搞定《Android布局优化》
小孟来码的博客
01-03 6662
Android的绘制优化其实可以分为两个部分，即布局(UI)优化和卡顿优化，而布局优化的核心问题就是要解决因布局渲染性能不佳而导致应用卡顿的问题，所以它可以认为是卡顿优化的一个子集。本文主要包括以下内容： 1. 为什么要进行布局优化及android绘制，布局加载原理 2. 获取布局文件加载耗时的方法 3. 介绍一些布局优化的手段与方法
Android 的布局
LK_Gqh的博客
07-15 215
androidlayout_alignRight="@id/aaa"与指定View的右边界一致。androidlayout_alignLeft="@id/aaa"与指定View的左边界一致。androidlayout_alignTop="@id/aaa"与指定View的上边界一致。androidlayout_toRightOf="@id/aaa"在指定View的右边。androidlayout_toLeftOf="@id/aaa"在指定View的左边。...
Android下的布局
G55_AMG的专栏
01-04 524
需求：在屏幕上写一个十字型的button 代码： <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" andro
android布局_Android布局_android_
10-01
常用的几种安卓布局历程，eclipse平台，可以直接导入
android 布局属性详解
09-05
Android 布局属性详解 Android 布局属性是 Android 应用程序开发中非常重要的一部分，它们控制着布局控件的排版、对齐、边距等多个方面的样式。下面我们将详细介绍 Android 布局属性的各种类型和用法。 布局属性...
详解Android布局优化
08-27
总之，Android布局优化是一个持续的过程，需要不断学习和实践，通过减少嵌套、优化视图结构、合理使用资源等方式，提升应用的性能和用户体验。在开发过程中，应养成良好的编码习惯，时刻关注布局的复杂性和性能影响...
Android 布局优化
08-30
Android 布局优化，（含 include、Viewstub、merge的用法）
android布局属性详解分享
09-04
本文将深入解析Android布局中常见的属性及其用法。 首先，我们来看`RelativeLayout`布局中的属性。`RelativeLayout`允许元素相对彼此或父元素进行定位。例如，`android:layout_centerHorizontal`和`android:layout_...
工作实践：11种API性能优化方法
BUG指挥课堂
06-21 918
上面这个例子中，发站内通知和用户操作日志功能，对实时性要求不高，即使晚点写库，用户无非是晚点收到站内通知，或者运营晚点看到用户操作日志，对业务影响不大，所以完全可以异步处理。但是，如果一次性查询的用户数量太多，例如一次查询2000个用户的数据，传入2000个用户的ID进行远程调用时，用户查询接口经常会出现超时的情况。这种情况下，接口的一次请求会涉及到非常长的调用链路。当系统发展到一定阶段，用户并发量增加，会有大量的数据库请求，这不仅需要占用大量的数据库连接，还会带来磁盘IO的性能瓶颈问题。
android CancellationException 了解
阿饱同学
06-21 354
在Android开发中，通常是在协程或预期完成的任务被取消时遇到的异常。这种异常是Kotlin协程的一部分，也可以在各种异步任务管理库中找到。
Android SurfaceFlinger——注册监听调用流程（七）
小旭的专栏
06-21 534
这一篇我们介绍一下 IComposer 中的另一个比较重要的方法，通过注册监听 Hal 层实现监听驱动的关键动作。
[极客大挑战 2020]Roamphp4-Rceme
不会编程的崽的博客
06-20 386
右键源代码里给了提示，有备份文件index.php.swp,大伙都做到这来了，应该不用写了吧。加这个[~%FF]只是因为php7的解析方式，当然换成其他的也可以例如[~%EF] [~%CF]passthru(next(getallheaders()));然后，需要要绕过两层，多年rce经验，相信你一眼能看出。我们由内往外构造，这里需要前置知识(贴其他大佬的吧)知道原因可以在评论区踢我一脚。
Android RecyclerView原理语法和用法
micro9981的专栏
06-20 814
是 Android 中用于显示大量数据的高级视图组件。它是 的改进版，具有更高的性能和灵活性。以下是关于 的详细介绍，包括其原理、语法、优缺点和使用方法。 的核心原理是通过视图复用来提高性能。当用户滚动列表时， 只会创建和绑定当前可见的项，而不是为每个数据项都创建一个新的视图。这是通过 ViewHolder 模式和 Adapter 来实现的。使用 的基本步骤包括： 优缺点 优点 性能优越: 通过视图复用和 ViewHolder 模式， 能够有效减少内存使用和提高滚动性能。 灵活性高: 支持不
Android AlarmManager 设定过去的时间会触发事件
WillWolf_Wang的博客
06-21 206
在使用 AlarmManager 做每日定时任务时，发现如果设定的时间小于当前的系统时间，那么设定后会立刻收到一次定时任务回调。我们设想的是设定的时间应该是明日的这个时间，但是如果打印出设定的时间会发现，设定的时间是今天的。所以，为了避免时间已经过去还引发回调，可以添加一个时间判断。这样设定的触发时间就是明天的了。
Android C++系列：string最佳实践一
最新发布
轻口味的专栏
06-25 362
在Java中操作字符串比较简单，这里简单介绍下Java字符串操作相关接口。字符串拼接直接用号既可，字符串比较实用equel方法，同时还提供了StringBuilder和StringBuffer可变的字符串。。StringBuffer是线程安全，StringBuilder线程不安全。因为 StringBuffer 的所有公开方法都是 synchronized 修饰的，而 StringBuilder 并没有 synchronized修饰；
Android——ViewModel需要有参构造报错
桂的博客
06-23 172
Android——ViewModel需要有参构造报错
android adb常用命令集
hcgeng的专栏
06-21 538
adb shell monkey -p 包名 --throttle 100 --ignore-crashes --ignore-timeouts --ignore-security-exceptions --ignore-native-crashes --monitor-native-crashes -v -v -v –s 1718955812918 100 monkey测试。"-X:" 分析和打印时，打印的每个数据包的报头，打印十六进制和ASCII的数据，每一个数据包（减去其链路层报头）
android 布局
02-06
Android 的布局是指在 Android 应用中用来控制 UI 元素如何在屏幕上放置和摆放的系统。它可以让你指定 UI 元素的大小和位置，以及它们之间的相对位置关系。Android 支持多种不同的布局类型，包括线性布局、相对布局...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值