欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Android做一个能看的界面——布局管理(小白速成8)

程序员文章站 2022-07-02 23:12:10
之前讲了很多的组件,涉及到摆放问题时,一直说的比较含糊。现在专门整理一下布局设置,让小白也能有一个称心如意的布局!!如何实现布局?第一种:在xml配置文件中声明通过setContentView(R.layout.main)方法(注:这句话总是自己会生成好)将视图呈现在activity中,通过findViewById()方法获得组件实例。第二种:在程序中通过编码,动态的生成组件以设置相关布局。LinearLayout 线性布局(第一种实现)将子组件按照垂直或者水平方向进行布局。多说概...

之前讲了很多的组件,涉及到摆放问题时,一直说的比较含糊。现在专门整理一下布局设置,让小白也能有一个称心如意的布局!!

如何实现布局?

  1. 第一种:在xml配置文件中声明
    通过setContentView(R.layout.main)方法(注:这句话总是自己会生成好)将视图呈现在activity中,通过findViewById()方法获得组件实例。

  2. 第二种:在程序中通过编码,动态的生成组件以设置相关布局。

LinearLayout 线性布局(第一种实现)

将子组件按照垂直或者水平方向进行布局。
多说概念也难以理解和应用,我们直接上代码!!

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


<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="409dp"
    android:layout_height="600dp"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    app:layout_constraintStart_toStartOf="parent"
    android:id="@+id/layout01"
    app:layout_constraintTop_toTopOf="parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="100dp"
        android:layout_height="1dp"
        android:layout_weight="1"
        android:text="TextView" />

    <Button
        android:id="@+id/button"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="37dp"
        android:layout_weight="1"
        android:text="TextView" />
</LinearLayout>

将默认生成的布局删掉以后,重新拖入需要的布局和元素。
android:orientation=“vertical” 表示了布局的方向是垂直,我们也可以改为Horizontal(水平)
android:gravity=“center_horizontal” 是表示对齐方式。
android:layout_weight=“1” 表示把屏幕均等分成几份,该组件占其中的一份。
Android做一个能看的界面——布局管理(小白速成8)
layout之间也可以相互进行嵌套:
例如在布局内再拖入布局

(右边的绿色界面是透视的视图,方便我们观察组件的位置)

LinearLayout 线性布局(第二种实现)

其实就相当于xml的main文件没有作用,所有的布局都在java文件中生成。

package com.example.test_layout;

import androidx.appcompat.app.AppCompatActivity;

import android.app.ActionBar;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

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

        LinearLayout linearLayout =new LinearLayout(this);

        linearLayout.setOrientation(LinearLayout.VERTICAL);
        //对布局参数的包装
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        linearLayout.setLayoutParams(params);
        //上面的代码就相当于是生成了线性布局

        //所有的layout类都是viewGroup的子类
//        linearLayout.addView();//添加组件
        //linearLayout.removeView();删除组件
        TextView textView =new TextView(this);
        textView.setText("hello world");
        textView.setTextSize(30);
        textView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                ViewGroup parent = (ViewGroup) v.getParent();

                TextView textView =new TextView(MainActivity.this);
                textView.setText("动态生成了组件");//每点击一次,就会动态生成一个文字
                textView.setTextSize(20);

                //多增加一个小的监视器,每点击生成的组件,就把他删掉!!体会动态的过程!!
                textView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        ViewGroup parent = (ViewGroup) v.getParent();
                        parent.removeView(v);
                    }
                });

                parent.addView(textView);//把动态生成的文字加入主界面
            }
        });
        linearLayout.addView(textView);

        this.setContentView(linearLayout);

    }
}

上面的代码展示了动态的优点,我们每点击一次,都可以再生成一个小的组件,同时小的组件也可以添加监视器,每点击一次小的组件,就实现删除的功能。

但是代码比较复杂,可读性较差。我们还可以利用官方给定的内部类LayoutInflate 来实现更为简单的动态生成页面的过程!!

应用内部类LayoutInflate实现动态生成页面

首先我们需要布局作为模板,新建一个include01.xml在layout文件夹下。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
    android:text="请输入" />

    <EditText
        android:id="@+id/editText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:layout_weight="1"
    android:text="Name" />
</LinearLayout>

Android做一个能看的界面——布局管理(小白速成8)

然后我们就可以在java文件中进行编辑

package com.example.test_layout;

import androidx.appcompat.app.AppCompatActivity;

import android.app.ActionBar;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;

public class MainActivity extends AppCompatActivity {

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

        LinearLayout linearLayout =new LinearLayout(this);

        linearLayout.setOrientation(LinearLayout.VERTICAL);
        //对布局参数的包装
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ActionBar.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT);
        linearLayout.setLayoutParams(params);
        //上面的代码就相当于是生成了线性布局

        LayoutInflater inflater =getLayoutInflater();
        View view1 =inflater.inflate(R.layout.include01,null);//第二个参数表示父节点
        View view2 =inflater.inflate(R.layout.include01,null);

        linearLayout.addView(view1);
        linearLayout.addView(view2);
        
        setContentView(linearLayout);


    }
}

这就将我们定义的xml片段读取以后加入了布局文件中。而这样的代码量是很小,而且也很清晰的!!
Android做一个能看的界面——布局管理(小白速成8)
效果如图所示。

ConstraintLayout约束布局(最常用)

约束布局是比较新的布局方式了,新建一个项目,默认使用的就是约束布局。
我们每向界面中拖动一个组件,都要设置组件的位置,否则运行时都会在左上角。(这个和相对布局比较类似)
Android做一个能看的界面——布局管理(小白速成8)
对于组件的属性设置基本都可以在右边这个框里完成。当我们拖动组件到合适的位置的时候,点击正方形周围的四个圈,就会对位置进行约束,当然我们至少应该选择水平方向和竖直方向两个圈来保证我们组件位置的确定。
这些调整的过程基本都是可视化的,非常的简单方便。
而我们查看生成的代码就会发现,app:layout_constraintBottom_toTopOf="@+id/textView"
约束位置的代码,其实和相对布局是类似的。

关于约束布局的使用,基本都靠拖动来实现,而常用的还有添加辅助线来确保组件在界面中的位置
Android做一个能看的界面——布局管理(小白速成8)
如上图,辅助线在工具栏的最后一个。

FrameLayout帧布局

帧布局不允许我们自己拖动,它的主要作用就是通过多个组件的叠加来实现一种层次感。(部件之间会相互覆盖)
这个时候右边的绿色界面的优点就体现出来了。
透视可以清晰的看到组件的相对位置
Android做一个能看的界面——布局管理(小白速成8)
虽然不能拖动,但是我们依然可以通过代码来设置它的布局方式,例如居中:

<Button
            android:id="@+id/button2"
            android:layout_width="234dp"
            android:layout_height="173dp"
            android:layout_gravity="center"
            android:text="Button" />

可以看到,此时按钮跑到了中间:
Android做一个能看的界面——布局管理(小白速成8)

TableLayout表格布局

表格布局在这里面不是很方便,因为表格不会给你边框,显得不太美观,但总还是有用处的。
添加方式也很简单:
Android做一个能看的界面——布局管理(小白速成8)
拖动TableLayout到需要的位置,可以在里面再拖入很多行(TableRow)每一行里也可以拖入按钮、文字等组件。
如果我们需要每个元素之间空格,还需要对组件的属性中逐一添加android:padding="10dp"等类似的空格代码。

好啦,以上就是基本布局的使用!!
参考自:尚学堂课

本文地址:https://blog.csdn.net/Embers_Young/article/details/112547868