【Android Studio】APP练手小项目——切换图片APP

本项目效果：

前言：本项目最终实现生成一个安卓APP软件，点击按钮可实现按钮切换图片。项目包含页面布局、功能实现的逻辑代码以及设置APP图标LOGO和自定义APP名称。

关于Android Studio的下载与安装见我的博文：Android Studio 最新版本首次下载和安装以及汉化教程【+第二次安装使用教程】-CSDN博客

关于创建工程及生成APK安装包见我的博文：【Android Studio】创建第一个APP工程及生成APK安装包-CSDN博客

目录

1.页面布局

2.功能实现

3.设置APP图标LOGO及APP名称

1.页面布局

1.点击res->layout->activity _main.xml进入页面布局。点击Code为页面布局代码，点击Design为页面布局ui界面

2.点击Split，页面变为既有代码又有手机APP页面显示

 3.将红框内原先代码全部删除。在红框处开始写代码。

4.接下来开始写代码。首先输入<LinearLayout

在 <LinearLayout> 标签中，你需要指定 android:layout_width 和 android:layout_height 属性的值。这两个属性用于指定布局的宽度和高度。

对于 android:layout_width 和 android:layout_height 属性，你可以选择以下值之一：

  • match_parent：将视图的大小设置为其父视图的大小。即充满
  • wrap_content：将视图的大小设置为刚好能容纳其内容的大小。即自适应
  • 具体数值，如 100dp，表示具体的尺寸。

 将第一层的宽和高都输入为match_parent时，可以看到外面有一个蓝色的框

 //第一层
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"

将布局方向设置为垂直，android:orientation="vertical"布局方向为垂直表示子视图将按垂直方向进行排列，即大的布局里再分小的布局时候，小布局会依次垂直排列下去
然后在android:orientation="vertical"后加一个>会自动弹出代码</LinearLayout>,<LinearLayout和</LinearLayout>就成了一对

 这部分代码如下：

<LinearLayout
    android:layout_width="400dp"
    android:layout_height="200dp"
    android:orientation="vertical">
 </LinearLayout>

5.输入<TextView

下面是属性设置的解释：

  • android:layout_width="wrap_content"：将 TextView 的宽度设置为刚好能容纳其中文本内容的大小。
  • android:layout_height="wrap_content"：将 TextView 的高度设置为刚好能容纳其中文本内容的大小。
  • android:text="阿齐Archie"：TextView 中显示的文本内容为 “阿齐Archie”。
  • android:textSize="50sp"：设置文本的字体大小为 50sp。

注意，字体大小通常使用 sp (可伸缩像素) 作为单位，以便根据用户的字体大小首选项进行自动缩放。

 如下所示在第一层输入文字阿齐Archie，字体大小为50sp。

代码如下所示： 

 <TextView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="阿齐Archie"
     android:textSize="50sp"
></TextView>

 以上就是实现了一个简单的文字布局，结构如下所示。在<LinearLayout中输入文字<TextView，以及进行结构的布局（宽、高等结构进行布局）

6.上面带大家先基础了解布局，后面开始加深布局层次。大的布局里再分小的布局

如下所示，进行子视图的构建。

代码如下所示：

 //第一层
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    //第二层
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp">

    </LinearLayout>

 </LinearLayout>

7.构建多个子视图，如下所示，在第二层上构建了四个框/视图

代码如下所示： 

 //第一层
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    //第二层 第一个框
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp">
    </LinearLayout>

    //第二层 第二个框
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="300dp">
    </RelativeLayout>

    //第二层 第三个框
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp">
    </LinearLayout>

    //第二层 第四个框
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="280dp">
    </LinearLayout>

 </LinearLayout>

对于代码中的RelativeLayout，其中包含了两个属性设置。

  • android:layout_width="match_parent"：将 RelativeLayout 的宽度设置为与其父视图的宽度相匹配，填充满整个宽度。
  • android:layout_height="300dp"：将 RelativeLayout 的高度设置为固定的 300 个设备独立像素 (dp)。

RelativeLayout 是一种灵活的布局方式，通过相对定位子视图，它们可以根据其他视图的位置进行布局。可以在 RelativeLayout 中添加其他视图元素来填充布局，并使用不同的相对定位属性来控制它们的位置。

8.导入图片。将图片复制，粘贴到res>drawable目录下

9.对四个子视图进行布局。

第一个框写入：切换图片字样，然后代码调整颜色和布局

第二个框暂时为两个图片：并每个照片设一个id，照片1即p1的id我设为了id_p1，照片p2设为了id_p2，然后代码调整布局

第三个框为：一个按钮，并设一个id，字样为换图，然后代码调整布局

第四个框为：我的二维码图片和一个编辑框，然后代码调整布局

代码如下所示：

//开始写代码

 //第一层
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    //第二层 第一个框
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="100dp">
        //文字
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="100dp"
            android:text="切换图片"
            android:textSize="50sp"
            android:textColor="#FF0000"
        ></TextView>
    </LinearLayout>

    //第二层 第二个框
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="300dp">
       //p1图片
        <ImageView
            android:id="@+id/id_p1"
            android:layout_width="550dp"
            android:layout_height="300dp"
            android:layout_marginLeft="6dp"
            android:layout_marginTop="50dp"
            android:visibility="visible"
            android:layout_gravity="center"
            app:srcCompat="@drawable/p1"
        ></ImageView>
        //p2图片
        <ImageView
            android:id="@+id/id_p2"
            android:layout_width="550dp"
            android:layout_height="300dp"
            android:layout_marginLeft="6dp"
            android:layout_marginTop="50dp"
            android:visibility="invisible"
            android:layout_gravity="center"
            app:srcCompat="@drawable/p2"
        ></ImageView>
    </RelativeLayout>

    //第二层 第三个框
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="80dp">
        //按钮
        <Button
            android:id="@+id/key1_id"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:layout_marginStart="155dp"
            android:text="换图"></Button>
    </LinearLayout>

    //第二层 第四个框
    //我的公众号+csdn
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="280dp"
        android:orientation="vertical">
        //我的公众号二维码p3
        <ImageView
            android:layout_width="150dp"
            android:layout_height="150dp"
            android:layout_gravity="center"
            android:layout_marginLeft="1dp"
            android:layout_marginTop="50dp"
            app:srcCompat="@drawable/p3"
        ></ImageView>
        //编辑框
        <EditText
            android:layout_width="160dp"
            android:layout_height="50dp"
            android:layout_gravity="center"
            android:layout_marginLeft="4dp"
            android:text="CSDN:阿齐Archie"
        ></EditText>
    </LinearLayout>

 </LinearLayout>

代码是一个包含多层嵌套的布局结构。对于代码的详细解释如下：

这个布局结构的主要组成部分是 LinearLayout 和 RelativeLayout，以及它们内部的 TextView、ImageView、Button 和 EditText。

代码中包含了一些属性设置和位置布局：

  • `LinearLayout` 作为第一层，设置了宽度和高度为 match_parent，并且垂直地布局子视图。
  • `LinearLayout` 作为第二层，设置了宽度和高度分别为 match_parent 和 100dp，并且水平地布局子视图。其中包含了一个 `TextView`，显示了文字内容为 "切换图片"，并根据 `android:layout_gravity="center"` 属性在中心位置进行水平居中布局。
  • `RelativeLayout` 作为第二层，设置了宽度和高度为相同。其中包含了两个 `ImageView`，分别显示了两张图片 (p1 和 p2)。它们具有相同的位置布局，在布局中心附近水平居中，并通过 `android:layout_marginLeft` 和 `android:layout_marginTop` 属性进行微调。
  • `LinearLayout` 作为第二层，设置了宽度和高度分别为 match_parent 和 80dp，并且水平地布局子视图。其中包含了一个 `Button`，显示了文字内容为 "换图"，相对有一定的顶部间距并在水平居中位置布局。 
  • 第四个框再次作为第二层的 `LinearLayout`，设置了宽度和高度为 match_parent 和 280dp，并且垂直地布局子视图。其中包含了一个 `ImageView`，用于显示二维码图片 (p3)，并通过一些属性进行位置布局。还有一个 `EditText`，显示了默认文字内容为 "CSDN:阿齐Archie"，并通过属性进行位置布局。

10.第9步的布局效果如下。接下来进行功能的完善

2.功能实现

在MainActivity中写功能的逻辑代码

1.进行变量的声明、变量绑定按键id，写按键扫描函数，按键点击后执行打印操作。
使用System.out.println("key1单击");//printf打印格式。使用这个来测试在函数中是否将按钮的id与常量进行绑定了。

代码如下所示：

package com.example.stv1;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

//-----------------------------------------------------声明变量
    Button key1;//按键
    ImageView pic1;//图片p1
    ImageView pic2;//图片p2

//-----------------------------------------------------类似于单片机的main函数
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //界面打开，最先开始运行的地方
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);//界面UI


        key1 = findViewById(R.id.key1_id);//变量绑定按钮id

        key1.setOnClickListener(new View.OnClickListener() {//按键扫描,监听按键是否按下
            @Override
            public void onClick(View v) {//按钮点击后执行操作
                System.out.println("key1单击");//printf打印格式
            }
        });

    }
}

2.编译程序是点这个（保护新手一下）

3.然后变量绑定图片2的id，编写剩余的逻辑代码，实现图片的切换，具体代码如下所示，附代码解释。

package com.example.stv1;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {

//-----------------------------------------------------声明变量
    Button key1;//按键
    ImageView pic1;//图片p1
    ImageView pic2;//图片p2

//-----------------------------------------------------类似于单片机的main函数
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        //界面打开，最先开始运行的地方
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);//界面UI


        key1 = findViewById(R.id.key1_id);//变量绑定按钮的id
        pic1 = findViewById(R.id.id_p1);//变量绑定图片1的id
        pic2 = findViewById(R.id.id_p2);//变量绑定图片2的id

        key1.setOnClickListener(new View.OnClickListener() {//按键扫描,监听按键是否按下
            @Override
            public void onClick(View v) {//按钮点击后执行操作
                System.out.println("key1单击");//printf打印格式

                if(pic1.getVisibility() == View.VISIBLE) {
                    pic1.setVisibility(View.INVISIBLE);
                    pic2.setVisibility(View.VISIBLE);
                } else {
                    pic1.setVisibility(View.VISIBLE);
                    pic2.setVisibility(View.INVISIBLE);
                }
            }
        });

    }
}

对于代码的详细解释如下：

这是一个名为`MainActivity`的Java类，是一个 Android 应用程序的主活动（Activity）。它继承自`AppCompatActivity`类，用于创建基于 Android 平台的应用程序。

该类中声明了几个变量：

  •  `key1`：按钮对象
  •  `|pic1`：图片对象p1
  •   `pic2`：图片对象p2
  • `onCreate()` 方法是生命周期方法，会在活动创建时被系统调用。在该方法中，首先调用了`super.onCreate(savedInstanceState)`方法初始化父类，然后调用`setContentView(R.layout.activity_main)`方法设置界面布局。
  • 通过`findViewById()`方法，将按钮和图片对象与布局文件中的相应元素关联起来。
  • 通过`setOnClickListener`方法为按钮设置点击事件监听器，当按钮被点击时，会执行其中的代码。具体来说，如果图片1（pic1）当前可见，则将其设置为不可见并将图片2（pic2）设置为可见；反之，如果图片1不可见，则将其设置为可见，图片2设置为不可见。

3.设置APP图标LOGO及APP名称

1.复制LOGO图片，在res>drawable下粘贴

2.在AndroidManifest.xml下修改android:icon和android:roundIcon，后面的logo图片路径，@drawable/（logo图片名字）

3.在strings.xml下，填入手机APP的名字

 生成效果如下：

最后生成APK安装到手机，见文章首部的链接教程生成APK进行安装或USB下载安装。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/306186.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Native Crash回溯栈

Native Crash回溯栈

获取调用栈四种方案&#xff1a;Android Native Crash 收集 1、使用系统的<unwind.h>库 可以获取到出错文件与函数名。只不过需要自己解析函数符号&#xff0c;同时经常会捕获到系统错误&#xff0c;需要手动过滤。 2、libcorkscrew 在4.1.1以上&#xff0c;5.0以下&…
阅读更多...
C# 强制类型转换和as区别和不同使用场景

C# 强制类型转换和as区别和不同使用场景

文章目录 1.强制类型转换2. as 运算符3.实例总结&#xff1a; 在C#中&#xff0c;as 和 强制类型转换&#xff08;例如 (T)value&#xff09;的主要区别在于它们处理类型转换不成功时的行为和适用场景&#xff1a; 1.强制类型转换 使用语法&#xff1a;Type variable (Type)…
阅读更多...
设计模式之适配器模式【结构型模式】

设计模式之适配器模式【结构型模式】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档> 学习的最大理由是想摆脱平庸&#xff0c;早一天就多一份人生的精彩&#xff1b;迟一天就多一天平庸的困扰。各位小伙伴&#xff0c;如果您&#xff1a; 想系统/深入学习某…
阅读更多...
“高端”的位运算

“高端”的位运算

王有志&#xff0c;一个分享硬核Java技术的互金摸鱼侠加入Java人的提桶跑路群&#xff1a;共同富裕的Java人 原计划迭代作为预备知识的收尾&#xff0c;不过在解2的幂和4的幂时&#xff0c;想到关于数字2的问题可以通过位运算去解决&#xff0c;因此补充了关于位运算的内容。 …
阅读更多...
基于ssm的生鲜在线销售系统的设计与实现论文

基于ssm的生鲜在线销售系统的设计与实现论文

摘 要 使用旧方法对生鲜在线销售系统的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在生鲜在线销售系统的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次开发的生…
阅读更多...
Python(33):数据断言(查询数据库数据和插入数据对比)

Python(33):数据断言(查询数据库数据和插入数据对比)

Python(33):数据断言(查询数据库数据和插入数据对比) 前言&#xff1a; 需求&#xff1a;需要针对查询数据库数据和插入的数据进行对比&#xff0c;用Python语言进行编写 数据库查询的结果可参考&#xff1a;https://blog.csdn.net/fen_fen/article/details/135462484 1、查…
阅读更多...
共享文件访问权限被拒绝

共享文件访问权限被拒绝

winr 打开命令行输入gpedit.msc打开组编辑窗口 这样操作之后就远程电脑一般就可以访问共享文件夹了
阅读更多...
STM32CubeMX配置STM32G031多通道UART+DMA收发数据（HAL库开发）

STM32CubeMX配置STM32G031多通道UART+DMA收发数据（HAL库开发）

时钟配置HSI主频配置64M 配置好串口&#xff0c;选择异步模式 配置DMA TX,RX,选择循环模式。 NVIC中勾选使能中断 勾选生成独立的.c和h文件 配置好需要的开发环境并获取代码 串口重定向勾选Use Micro LIB main.c文件修改 增加头文件和串口重定向 #include <string.h&g…
阅读更多...
纯血鸿蒙「扩圈」100天，酝酿已久的突围

纯血鸿蒙「扩圈」100天，酝酿已久的突围

坦白讲&#xff0c;去年参加华为开发者大会看到HarmonyOS NEXT&#xff08;仅运行鸿蒙原生应用&#xff0c;所以也称作「纯血鸿蒙」&#xff09;的时候&#xff0c;小雷也没料想到鸿蒙原生应用生态的发展速度会如此之快。 9月25日&#xff0c;华为正式对外宣布启动HarmonyOS NE…
阅读更多...
LabVIEW在微生物检测中的应用

LabVIEW在微生物检测中的应用

随着对食品安全关注的增加&#xff0c;食品检测的准确性变得越来越重要。其中&#xff0c;微生物计数作为食品合格的关键指标&#xff0c;对其检测技术的准确性和实时性要求极高。传统的微生物检测面临着菌落识别困难、设备实时性差和自动化程度不高等问题&#xff0c;尤其在疫…
阅读更多...
深入了解鸿鹄电子招投标系统：Java版企业电子招标采购系统的核心功能

深入了解鸿鹄电子招投标系统：Java版企业电子招标采购系统的核心功能

随着市场竞争的加剧和企业规模的扩大&#xff0c;招采管理逐渐成为企业核心竞争力的重要组成部分。为了提高招采工作的效率和质量&#xff0c;我们提出了一种基于电子化平台的解决方案。该方案旨在通过电子化招投标&#xff0c;使得招标采购的质量更高、速度更快&#xff0c;同…
阅读更多...
【HarmonyOS4.0】第三篇-类web开发模式

【HarmonyOS4.0】第三篇-类web开发模式

【HarmonyOS4.0】第三篇-类web开发模式 一、鸿蒙介绍 课程核心 为什么我们需要学习鸿蒙&#xff1f; 哪些人适合直接转鸿蒙&#xff1f; 鸿蒙系统优势是什么&#xff1f; 课程内容 (1)为什么要学习鸿蒙 从行情出发&#xff1a; 美国商务部长访问中国&#xff0c;2023年…
阅读更多...
uniapp实现清除缓存

uniapp实现清除缓存

一、页面加载时计算缓存大小&#xff08;H5不支持&#xff09; data() {return {// 缓存大小展示到页面上fileSizeString: 0KB} }// 获取缓存大小formatSize() {let that this;// #ifndef H5plus.cache.calculate(function(size) {let sizeCache parseInt(size);if (sizeCac…
阅读更多...
linux 使用log4cpp记录项目日志

linux 使用log4cpp记录项目日志

为什么要用log4cpp记录项目日志 在通常情况下&#xff0c;Linux/UNIX 每个程序在开始运行的时刻&#xff0c;都会打开 3 个已经打开的 stream. 分别用来输入&#xff0c;输出&#xff0c;打印错误信息。通常他们会被连接到用户终端。这 3 个句柄的类型为指向 FILE 的指针。可以…
阅读更多...
Spring循环引用和三级缓存

Spring循环引用和三级缓存

前言 Spring 解决 Bean 之间的循环引用关系用到了三级缓存&#xff0c;那么问题来了。三级缓存是怎么用的&#xff1f;每一层的作用是什么&#xff1f;非得用三级吗&#xff1f;两级缓存行不行&#xff1f; 理解循环引用 所谓的“循环引用”是指 Bean 之间的依赖关系形成了一…
阅读更多...
【算法刷题】Day28

【算法刷题】Day28

文章目录 1. 买卖股票的最佳时机 III题干&#xff1a;算法原理&#xff1a;1. 状态表示&#xff1a;2. 状态转移方程3. 初始化4. 填表顺序5. 返回值 代码&#xff1a; 2. Z 字形变换题干&#xff1a;算法原理&#xff1a;1. 模拟2. 找规律 代码&#xff1a; 1. 买卖股票的最佳时…
阅读更多...
PostGIS学习教程二十：3-D

PostGIS学习教程二十：3-D

PostGIS学习教程二十&#xff1a;3-D 注意&#xff1a;本文介绍许多PostGIS2.0及更高版本才支持的功能。 文章目录 PostGIS学习教程二十&#xff1a;3-D一、3-D几何图形二、3-D函数三、N-D索引 一、3-D几何图形 到目前为止&#xff0c;我们一直在处理2-D几何图形&#xff08;…
阅读更多...
firewalld防火墙命令行工具

firewalld防火墙命令行工具

firewall-cmd命令 &#xff08;1&#xff09;启动、停止、查看firewalld服务 在安装CentOS 7系统时&#xff0c;会自动安装firewalld 和图形化工具firewall-config.执行以下命令可 以启动 firewalld 并设置为开机自启动状态。 [rootllcgc ~]# systemctl start firewalld.serv…
阅读更多...
【SpringCloud】之入门级及nacos的集成使用

【SpringCloud】之入门级及nacos的集成使用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是君易--鑨&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《SpringCloud开发之入门级及nacos》。&#x1f3…
阅读更多...
数据库内核那些事｜细说PolarDB优化器查询变换：IN-List变换

数据库内核那些事｜细说PolarDB优化器查询变换：IN-List变换

导读 数据库的查询优化器是整个系统的"大脑"&#xff0c;一条SQL语句执行是否高效在不同的优化决策下可能会产生几个数量级的性能差异&#xff0c;因此优化器也是数据库系统中最为核心的组件和竞争力之一。阿里云瑶池旗下的云原生数据库PolarDB MySQL版作为领先的云…
阅读更多...
最新文章

Copyright @ 2022~2023