【Android】安卓开发中的布局与事件

移动开发 2022-01-15 07:15:51 阅读次数: 0

【Android】安卓开发中的布局与事件

1、Android Studio下载配置

非常简单的百度然后点击下载安装就好了。注意的是，本来我是打算使用评价还不错的Genymotion这个软件来充当虚拟机的，捆版下载VirtualBox先不说，安装了之后还报错无法启动，找了一下午也未解决，最后导致VirtualBox还卸载不了，搞得人头大，所以最终使用了AS自带的虚拟机。

如何配置虚拟机呢，为了不让他下载到C盘，需要改一个环境变量

ANDROID_SDK_HOME
D:\Environment\Android\avd

image-20220113203706486

之后重启AS发现下载的虚拟机文件都在这里面了就说明成功了。

值得注意的是，AS刚开始创建项目的时候gradle构建的非常慢，需要等噢。

配置好了就可以运行Hello world了。

image-20220113203945164

至于如何设置成中文，需要到idea的插件市场下载中文插件，在AS中使用本地安装，虽然部分无法翻译，但是绝大部分都翻译成中文了，还是非常爽滴！

image-20220113204201947

2、布局

1.xml页面

在AS中可以通过GUI来设置APP，在layout中每一个xml对应一个页面

image-20220113204405340

可以在Design中手动拖拽组件，也可以通过code的方式来写代码构建界面

image-20220113204635188

布局中常用的单位有

  • px（绝对像素，不建议使用）
  • dp（适配单位，建议使用）
  • sp（字体单位）

2.线性布局

2.1 线性布局的使用

其实在Java Swing中也学过，就是一行流下来的那种，在xml中使用LinearLayout标签就可以使用流式布局

下面代码中的match_parent字面意思就是匹配父类的大小

看看加了3个button后的效果

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        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" />

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

</LinearLayout>

image-20220113210459916

2.2 线性布局摆放的方向

在LinearLayout标签中，使用android:orientation=""可以改变布局的摆放方向，有两种——水平和垂直，分别是horizontal和horizontal

可以在design页面的这个按钮中设置

image-20220113212346308

其实改变的就是代码的这一行

image-20220113212410052

2.3 线性布局的权重

权重就是这个元素在一行内容占比，使用layout_weight来表示，每一个元素都可以设置一个权重，我如上的代码就是权重都为1

image-20220113212515874

权重使用的是屏幕的宽度和高度，是成比例的！

假设，现在有3个button，每个权重分别是1，1，2，那么第一个和第二个button占了1/4，第三个占用了2/4也就是1/2。

image-20220113213114568

3.相对布局

3.1 相对于父级控件

使用标签RelativeLayout就可以使用相对布局了。

默认是相对于控件的左边

我们这里使用的是相对于父控件，使用属性layout_centerInParent，这个是在父控件的中间，true和false两个值可以选择

同理，有layout_alignParentRight，相对于父控件的右边，layout_alignParentLeft，相对于父控件的左边，还有一个相对于父控件的下面layout_alignParentBottom

一个简单的例子

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


    <Button
        android:layout_centerInParent="true"
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="相对于父控件的中间" />

    <Button
        android:layout_alignParentRight="true"
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="相对于父控件的右上角" />

    <Button
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:id="@+id/button6"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="相对于父控件的右下角" />

    <Button
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="相对于父控件的左下角" />

    <Button
        android:layout_alignParentLeft="true"
        android:id="@+id/button8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="相对于父控件的左上角" />

</RelativeLayout>

效果如下：

image-20220113214314070

3.2 相对于同级控件

看代码！

使用layout_toLeftOf和layout_toRightOf和layout_above和layout_below来相对于某个控件来布局

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


    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="中间"
        android:id="@+id/center" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我在中间的左边"
        android:layout_toLeftOf="@+id/center"
        android:layout_centerInParent="true" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我在中间的顶部"
        android:layout_centerInParent="true"
        android:layout_above="@+id/center" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我在中间的右边"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@+id/center"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我在中间的底部"
        android:layout_below="@+id/center"
        android:layout_centerInParent="true"/>
    
</RelativeLayout>

效果如下：

image-20220113215437077

4.绝对布局

已经过时的布局方法，使用AbsoluteLayout标签

layout_x和layout_y设置位置

<?xml version="1.0" encoding="utf-8"?>
<AbsoluteLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_x="100dp"
        android:layout_y="100dp"
        android:text="绝对位置" />

</AbsoluteLayout>

5.表格布局

就是表格的样式，使用TableLayout标签

使用TableRow标签来显示一行

例如

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

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3"/>

    </TableRow>

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="4"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="5"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="6"/>

    </TableRow>

    <TableRow>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="7"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="8"/>
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="9"/>

    </TableRow>


</TableLayout>

效果如下：

image-20220113220427638

6.帧布局

使用FrameLayout标签

例如

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="按钮"/>

</FrameLayout>

3、设计一个计算器布局

1.由线性布局开始

使用线性布局

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="C"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="+/-"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="%"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:background="@color/cardview_shadow_start_color"
            android:text="/"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="1"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="2"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="3"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="X"
            android:background="@color/cardview_shadow_start_color"
            android:textSize="20sp" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="4"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="5"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="6"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="-"
            android:background="@color/cardview_shadow_start_color"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:orientation="horizontal">

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="7"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="8"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="9"
            android:textSize="20sp" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="+"
            android:background="@color/cardview_shadow_start_color"
            android:textSize="20sp" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp">
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2"
            android:gravity="center"
            android:text="0"
            android:textSize="20sp" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="1"
            android:textSize="20sp" />
        <TextView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="="
            android:background="@color/cardview_shadow_start_color"
            android:textSize="20sp" />
    </LinearLayout>


</LinearLayout>

效果如下：

image-20220113223704507

2.给按钮加上边框

接着给每个按钮加上边框

在drawable包下创建一个边框样式，使用shape标签

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#5CEAE7E7"/>
    <stroke
        android:width="1dp"
        android:color="#333333"/>

</shape>

同样的再给橙色的一个样式

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#e47f26"/>
    <stroke
        android:width="1dp"
        android:color="#333333"/>

</shape>

最终在每个textView中引入android:background="@drawable/shape_rectangle"

最终效果如下：

image-20220114120241406

3.drawable中的选择器

计算器按钮按下去的时候一般会有一个阴影，这个时候我们可以绑定一个点击事件。

在绑定点击事件之前，先建立两个选择器，用来选择点击时候的渲染和未点击时候的渲染。

selector_white_bg.xml白色按钮的选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/shape_rectangle_grey"/>
    <item android:drawable="@drawable/shape_rectangle"/>

</selector>

selector_orange_bg.xml橙色按钮的选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/shape_rectangle_orange_grey"/>
    <item android:drawable="@drawable/shape_rectangle_orange"/>

</selector>

4.绑定点击事件

现在我们给每个textView绑定上上面的两个选择器。

使用android:background="@drawable/selector_white_bg"即可

如何触发选择器的效果呢？有两种方法，个人认为两种方法是不同的风格！

第一种方法我感觉偏向JavaScript风格，第二种方法偏向Java Swing风格。

至于为啥是这两种风格，看我解释就完了~

4.1 第一种方法

我就叫他JS风格方法吧。

首先在需要绑定点击事件的组件中，添加一个android:onClick="oneOnClick"，这里的oneOnClick是随便写的，可以是任何字符，其实就是绑定了mainActivity中的一个oneOnClick()方法

MainActivity类中的oneOnClick()方法

image-20220114174925766

TextView组件中绑定的onClick方法

image-20220114175109192

如上的两个步骤就可以触发点击事件了

效果如下：

image-20220114175450449

同时我们可以看到控制台上有log输出（点击后方法被执行了）

image-20220114175531643

4.2 第二种方法

如果你熟悉Java Swing的开发，那么对于这种方法肯定不陌生！

简单来说就是在MainActivity类中，让每一个空间成为类中的属性，在初始化的时候成为成员变量，然后给每个组件按上一个点击事件的监听器，监听器中写上点击事件需要执行的代码就好啦！

package top.woodwhale.hello;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    
    
    private TextView cancel;
    private TextView plusOrMinus;
    private TextView mod;
    private TextView div;
    private TextView zero;
    private TextView one;
    private TextView two;
    private TextView three;
    private TextView four;
    private TextView five;
    private TextView six;
    private TextView seven;
    private TextView eight;
    private TextView nine;
    private TextView point;
    private TextView add;
    private TextView multi;
    private TextView sub;
    private TextView eq;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    
    
        super.onCreate(savedInstanceState);
        setContentView(R.layout.caculator);
        this.initView();
        this.initClickEvent();
    }

    // 获取TextView组件
    public void initView() {
    
    
        cancel = this.findViewById(R.id.tv_cancel);
        plusOrMinus = this.findViewById(R.id.tv_plus_or_minus);
        mod = this.findViewById(R.id.tv_mod);
        div = this.findViewById(R.id.tv_division);
        zero = this.findViewById(R.id.tv_zero);
        one = this.findViewById(R.id.tv_one);
        two = this.findViewById(R.id.tv_two);
        three = this.findViewById(R.id.tv_three);
        four = this.findViewById(R.id.tv_four);
        five = this.findViewById(R.id.tv_five);
        six = this.findViewById(R.id.tv_six);
        seven = this.findViewById(R.id.tv_seven);
        eight = this.findViewById(R.id.tv_eight);
        nine = this.findViewById(R.id.tv_nine);
        point = this.findViewById(R.id.tv_point);
        add = this.findViewById(R.id.tv_add);
        multi = this.findViewById(R.id.tv_multiplication);
        sub = this.findViewById(R.id.tv_subtraction);
        eq = this.findViewById(R.id.tv_equal);
    }

    // 给每个组件添加一个监听器
    public void initClickEvent() {
    
    
        MyListener listener = new MyListener();
        cancel.setOnClickListener(listener);
        plusOrMinus.setOnClickListener(listener);
        mod.setOnClickListener(listener);
        div.setOnClickListener(listener);
        zero.setOnClickListener(listener);
        one.setOnClickListener(listener);
        two.setOnClickListener(listener);
        three.setOnClickListener(listener);
        four.setOnClickListener(listener);
        five.setOnClickListener(listener);
        six.setOnClickListener(listener);
        seven.setOnClickListener(listener);
        eight.setOnClickListener(listener);
        nine.setOnClickListener(listener);
        point.setOnClickListener(listener);
        add.setOnClickListener(listener);
        multi.setOnClickListener(listener);
        sub.setOnClickListener(listener);
        eq.setOnClickListener(listener);
    }
}

class MyListener implements View.OnClickListener {
    
    

    @Override
    public void onClick(View view) {
    
    
        if (view instanceof TextView) {
    
    
            String s = ((TextView) view).getText().toString();
            Log.d("MainActivity","TextView中的text为:"+s);
        }
    }
}

是不是非常的熟悉？这就是Swing中的思想。这样我们不需要在xml中绑定事件，只需要在MainActivity中设置监听器就好啦！

运行效果如下：

image-20220114193622449

猜你喜欢

转载自blog.csdn.net/woodwhale/article/details/122502278
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022