【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时,可以看到外面有一个蓝色的框

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

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

 这部分代码如下:

<LinearLayoutandroid: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。

代码如下所示: 

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

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

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

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

代码如下所示:

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

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

代码如下所示: 

 //第一层
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">//第二层 第一个框<LinearLayoutandroid:layout_width="match_parent"android:layout_height="100dp"></LinearLayout>//第二层 第二个框<RelativeLayoutandroid:layout_width="match_parent"android:layout_height="300dp"></RelativeLayout>//第二层 第三个框<LinearLayoutandroid:layout_width="match_parent"android:layout_height="80dp"></LinearLayout>//第二层 第四个框<LinearLayoutandroid: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,字样为换图,然后代码调整布局

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

代码如下所示:

//开始写代码//第一层
<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical">//第二层 第一个框<LinearLayoutandroid:layout_width="match_parent"android:layout_height="100dp">//文字<TextViewandroid: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>//第二层 第二个框<RelativeLayoutandroid:layout_width="match_parent"android:layout_height="300dp">//p1图片<ImageViewandroid: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图片<ImageViewandroid: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>//第二层 第三个框<LinearLayoutandroid:layout_width="match_parent"android:layout_height="80dp">//按钮<Buttonandroid: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<LinearLayoutandroid:layout_width="match_parent"android:layout_height="280dp"android:orientation="vertical">//我的公众号二维码p3<ImageViewandroid:layout_width="150dp"android:layout_height="150dp"android:layout_gravity="center"android:layout_marginLeft="1dp"android:layout_marginTop="50dp"app:srcCompat="@drawable/p3"></ImageView>//编辑框<EditTextandroid: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;//图片p1ImageView pic2;//图片p2//-----------------------------------------------------类似于单片机的main函数@Overrideprotected void onCreate(Bundle savedInstanceState) {//界面打开,最先开始运行的地方super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//界面UIkey1 = findViewById(R.id.key1_id);//变量绑定按钮idkey1.setOnClickListener(new View.OnClickListener() {//按键扫描,监听按键是否按下@Overridepublic 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;//图片p1ImageView pic2;//图片p2//-----------------------------------------------------类似于单片机的main函数@Overrideprotected void onCreate(Bundle savedInstanceState) {//界面打开,最先开始运行的地方super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//界面UIkey1 = findViewById(R.id.key1_id);//变量绑定按钮的idpic1 = findViewById(R.id.id_p1);//变量绑定图片1的idpic2 = findViewById(R.id.id_p2);//变量绑定图片2的idkey1.setOnClickListener(new View.OnClickListener() {//按键扫描,监听按键是否按下@Overridepublic 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下载安装。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

蓝牙信标定位原理

定位原理&#xff1a;蓝牙信标的定位原理是基于RSSI蓝牙信号强度来做定位的。 根据应用场景不同&#xff0c;通过RSSI定位原理可分为两种定位方式 一、存在性定位 这种方式通常要求所需定位的区域安装一个蓝牙信标即可&#xff0c;手持终端扫描蓝牙信标信号&#xff0c;扫描…

huggingface下载太慢的问题

解决问题&#xff1a;huggingface网站模型文件太大&#xff0c;下载太慢 方式&#xff1a; huggingface镜像站网址 使用方法3的python脚本文件内容 import os# 下载模型 os.system(huggingface-cli download --resume-download THUDM/chatglm2-6b --local-dir /home/bennie…

Linux【C编程】 信号以及信号的处理方式

文章目录 1.什么是信号&#xff1f;1.1信号是内容受限的一种异步通信机制1.2信号由谁发出的&#xff1f;1.3信号由谁处理&#xff0c;如何处理 2.常见的信号3.进程对信号的处理3.1用signal函数处理SIGINT信号3.2使用sigaction 函数 4.alarm 和pause函数4.1 alarm函数详解4.2 pa…

vue element plus 安装

环境支持# Element Plus 可以在支持 ES2018 和 ResizeObserver 的浏览器上运行。 如果您确实需要支持旧版本的浏览器&#xff0c;请自行添加 Babel 和相应的 Polyfill 。 由于 Vue 3 不再支持 IE11&#xff0c;Element Plus 也不再支持 IE 浏览器。 Edge ≥ 79Firefox ≥ 78C…

用通俗易懂的方式讲解:大模型 RAG 在 LangChain 中的应用实战

Retrieval-Augmented Generation&#xff08;RAG&#xff09;是一种强大的技术&#xff0c;能够提高大型语言模型&#xff08;LLM&#xff09;的性能&#xff0c;使其能够从外部知识源中检索信息以生成更准确、具有上下文的回答。 本文将详细介绍 RAG 在 LangChain 中的应用&a…

愤怒的小红帽

欢迎来到程序小院 愤怒的小红帽 玩法&#xff1a;帮助小红帽安全送达老奶奶家&#xff0c;当狼进入靶子以后鼠标对准靶子&#xff0c; 点击鼠标左键&#x1f3f9;&#xff0c;对应的狼就会被射死&#xff0c;然后继续往前冲&#xff0c;快去&#x1f3f9;吧^^。开始游戏https:…

Jmeter压缩包安装

JMeter安装及配置-Mac 本章要点 前置条件命令行安装压缩包安装 在Mac上安装对应的JMeter工具有两种方式&#xff1a;一种直接借助终端命令行brew进行安装&#xff1b;另外一种和Window电脑一样去JMeter官网下载压缩包安装。 JMeter不需要安装&#xff0c;但是JMeter作为java应用…

伺服电机:伺服电机的控制方式(脉冲控制)

脉冲控制是伺服系统最常见的一种控制方式&#xff0c;基本上每家的伺服驱动器都支持脉冲模式。脉冲模式一般用于轴比较少的场合&#xff08;4轴及以下&#xff09;&#xff0c;轴数比较多的话就需要用总线来控制&#xff0c;毕竟伺服控制器的脉冲输入输出口的数量是有限的。 一…

Hive分区表实战 - 单分区字段

文章目录 一、实战概述二、实战步骤&#xff08;一&#xff09;创建图书数据库&#xff08;二&#xff09;创建国别分区的图书表&#xff08;三&#xff09;在本地创建数据文件&#xff08;四&#xff09;按分区加载数据1、加载中文书籍数据到countrycn分区2、加载英文书籍数据…

安全技能讲座 - 便携式灭火器 (Portable Fire Extinguishers )

【Transcript 】 火灾随时随地都可能发生&#xff0c;而且毫无征兆。如果您在家中或工作中遇到火灾&#xff0c;便携式灭火器可以帮助您保护自己&#xff0c;并有可能将火灾扼杀在摇篮中。本课程将向您介绍便携式灭火器、其工作原理和使用方法。成功完成本课程后&#xff0c;您…

字节跳动今年的校招薪资。。。

字节跳动校招情况分析 在写完了绝对顶流 华为 和近两年炙手可热的 比亚迪 的校招薪资之后&#xff0c;不少同学点名要看「字节跳动」。 确实&#xff0c;玩归玩&#xff0c;闹归闹&#xff0c;别拿字节开玩笑。 先来看看和公众号读者相关性较高的岗位校待遇&#xff1a; 研发算…

three.js实现电子围栏效果(纹理贴图)

three.js实现电子围栏效果&#xff08;纹理贴图&#xff09; 实现步骤 围栏的坐标坐标转换为几何体顶点&#xff0c;uv顶点坐标加载贴图&#xff0c;移动 图例 代码 <template><div class"app"><div ref"canvesRef" class"canvas-…

Linux的网络配置命令和网络设置实操

目录 一、网路命令 1.ifconfig 2.hostname 3.route 4.netstat 5.ss&#xff08;socket statistics&#xff09; 6.ping 7.nslookup 8.tcpdump 二、实操 1.单个网卡修改 2.双网卡配置 3.bond网卡绑定 一、网路命令 查看Linux基础的网络设置 网关route -nIP地址ifc…

算法与数据结构--最小生成树算法

一.应用的场景 类似于这种最小成本问题&#xff0c;实际上就是计算加权图把所有点连起来权重之和最小值的时候是怎么连接的。类似的问题还有最短耗时之类的问题。 二.最小生成树的定义 生成树&#xff1a; 图的生成树是它的一颗含有其所有顶点的无环连通子图。 【简单说就是所…

Java中的IO流

在Java中&#xff0c;I/O&#xff08;输入/输出&#xff09;流用于处理与输入和输出相关的操作。Java的I/O流按照数据处理的不同方式分为两大类&#xff1a;字节流和字符流。每个类别又分为输入流和输出流。以下是Java中常用的I/O流及其继承关系&#xff1a; 字节流&#xff0…

BERT Intro

继续NLP的学习&#xff0c;看完理论之后再看看实践&#xff0c;然后就可以上手去kaggle做那个入门的project了orz。 参考&#xff1a; 1810.04805.pdf (arxiv.org) BERT 论文逐段精读【论文精读】_哔哩哔哩_bilibili (强推!)2023李宏毅讲解大模型鼻祖BERT&#xff0c;一小时…

竞赛保研 基于深度学习的动物识别 - 卷积神经网络 机器视觉 图像识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

探索芊芊简历:一个革新的简历创建工具

在寻找理想工作的道路上&#xff0c;一份出色的简历是打开机遇之门的关键。今天&#xff0c;我想向大家介绍一款名为“芊芊简历”的免费简历编辑器&#xff0c;它以其独特的功能和先进的技术&#xff0c;为求职者提供了一个简单而高效的简历制作解决方案。 丰富多样的模板&…

虚拟局域网的基本概念与基本原理

虚拟局域网&#xff08;Virtual Local Area Network&#xff0c;VLAN&#xff09;是一种在物理局域网内部划分逻辑上独立的虚拟网络的方法。它通过在网络交换机上配置&#xff0c;将不同的设备分组到不同的虚拟网络中&#xff0c;实现了逻辑上分隔的网络通信。本文将介绍虚拟局…

北京大学漏洞报送证书

获取来源&#xff1a;edusrc&#xff08;教育漏洞报告平台&#xff09; url&#xff1a;教育漏洞报告平台(EDUSRC) 兑换价格&#xff1a;30金币 获取条件&#xff1a;北京大学任意中危或以上级别漏洞