移动应用课程案例_笔记
开发环境搭建
Android Studio
创建文件
File -> new -> new project -> Empty Activity -> next
-> save location: D:\ASworkspace\My Application1
name: My Application1
Language: Java
-> Finish
看到文件
下拉菜单选择project
activity_main.xml选择code模式
activity_main.xml是设置外观的文件
app\src\main\res\activity_main.xml中标题头、命名空间不要删掉
<?xml version="1.0" encoding="utf-8"?> < xmlns:android="http://schemas.android.com/apk/res/android"
MainActivity是设置功能的文件
app\src\main\java\com\example\myapplication228
图片要放在res\drawable文件夹中
banner文件名修改在strings.xml文件中
app\src\main\res\values\strings.xml
调整字体大小
更改代码字体大小:
File -> Setting -> Editor -> Font ->Size字体大小(改成20),Line spacing行间距(这个不用更改)
更改菜单栏等外观大小:
appearance -> use custom font -> size(不用改)
Genymotion 模拟器
右上角三个点,选择start,点击continue,即可运行
运行后,按红色⬛️即停止运行,并可重新运行
案例
飞机大战三个控件
效果图
代码
密码与用户登录
效果
代码
五个按钮
效果
代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON2"
android:id="@+id/BUTTON2"
android:layout_centerInParent="true" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON1"
android:id="@+id/BUTTON1"
android:layout_centerInParent="true"
android:layout_below="@id/BUTTON2"
android:layout_marginTop="20dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON5"
android:id="@+id/BUTTON5"
android:layout_centerInParent="true"
android:layout_below="@id/BUTTON1"
android:layout_marginTop="20dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON3"
android:id="@+id/BUTTON3"
android:layout_centerInParent="true"
android:layout_toLeftOf="@id/BUTTON1"
android:layout_below="@id/BUTTON2"
android:layout_marginTop="20dp"
android:layout_marginRight="15dp"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="BUTTON4"
android:id="@+id/BUTTON"
android:layout_centerInParent="true"
android:layout_toRightOf="@id/BUTTON1"
android:layout_below="@id/BUTTON2"
android:layout_marginTop="20dp"
android:layout_marginLeft="15dp"/>
</RelativeLayout>
桌面台球-帧布局
运用 帧布局、文本域TextView,属性 **layout_gravity=“center”**水平垂直居中
效果图
代码
<?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"
android:background="@drawable/bg">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textSize="18sp"
android:textColor="#115572"
android:text="开始游戏"/>
</FrameLayout>
背景图片放置在 res\ drawable文件夹里
在 res\ values\strings.xml里 **更改banner文本 **
用户登录-表格布局
运用表格布局,控件TableRow、TextView,
修改banner,添加背景图片,
属性gravity=“center_horizontal”、gravity=“right”、hint
效果图
代码
<?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"
android:background="@drawable/biaoge"
android:stretchColumns="0,3">
<!--设置可被拉伸的列:第1列和第4列-->
<!--第一行-->
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="300dp"
>
<TextView />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="账 号:"
android:gravity="center_horizontal"
/>
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="邮箱或者手机号"
/>
<TextView />
</TableRow>
<!--第二行-->
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
>
<TextView/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="18sp"
android:text="密 码:"
android:gravity="center_horizontal"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="输入6~16位数字或字母"
/>
<TextView/>
</TableRow>
<!--第三行-->
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="5dp"
android:text="注册"
/>
<Button
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="登录"
android:background="#FF8247"
/>
</TableRow>
<!--第四行-->
<TableRow
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
>
<TextView/>
<TextView/>
<TextView
android:text="忘记密码?"
android:textColor="#FF4500"
android:gravity="right"/>
</TableRow>
</TableLayout>
图片-线性布局
线性布局(layout_weight=“1”)先设置控件排列顺序为纵向,添加顶部图片
内部嵌套相对布局(layout_weight=“2”),先后添加中间、下方、左侧、右侧图片
效果
代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_height="match_parent"
android:layout_width="match_parent">
<!--添加顶部图片-->
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:layout_weight="1"
android:src="@drawable/top"/>
<!--添加一个相对布局管理器-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="2"
android:id="@+id/relativeLayout1"
android:background="@drawable/bottom">
<!--添加中间位置的图片-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageButtom0"
android:src="@drawable/in"
android:layout_centerInParent="true"
/>
<!--添加上方显示的图片-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageButtom1"
android:src="@drawable/setting"
android:layout_above="@id/imageButtom0"
android:layout_alignRight="@id/imageButtom0"/>
<!--添加下方显示的图片-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageButtom2"
android:src="@drawable/exit"
android:layout_below="@id/imageButtom0"
android:layout_alignLeft="@id/imageButtom0"/>
<!--添加左侧显示的图片-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageButtom3"
android:src="@drawable/help"
android:layout_toLeftOf="@id/imageButtom0"
android:layout_alignTop="@id/imageButtom0"/>
<!--添加右侧显示的图片-->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageButtom4"
android:src="@drawable/board"
android:layout_toRightOf="@+id/imageButtom0"
android:layout_alignTop="@id/imageButtom0"/>
</RelativeLayout>
</LinearLayout>
图片ImageView案例
效果图
代码
<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/tableLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/background">
<!--第一行-->
<TableRow
android:id="@+id/tableRow1"
android:layout_width="match_parent"
android:layout_weight="1">
<LinearLayout
android:id="@+id/LinearLayout1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/blockbg_big">
<TextView
android:id="@+id/textView1"
android:text="2020年9月1日 11:50:00"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"/>
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout2"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/blockbg_big"
android:padding="40px">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/img01"
android:id="@+id/imageView01"
android:layout_weight="1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/img02"
android:id="@+id/imageView02"
android:layout_marginLeft="50px"
android:layout_weight="1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/img03a"
android:id="@+id/imageView03"
android:layout_marginLeft="50px"
android:layout_weight="1"/>
</LinearLayout>
</TableRow>
<!--第二行-->
<TableRow
android:id="@+id/tableRow2"
android:layout_width="match_parent"
android:layout_weight="1">
<LinearLayout
android:id="@+id/LinearLayout3"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/blockbg_big"
android:padding="40px">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/img04"
android:id="@+id/imageView04"
android:layout_weight="1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/img05"
android:id="@+id/imageView05"
android:layout_marginLeft="40px"
android:layout_weight="1"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/img06"
android:id="@+id/imageView06"
android:layout_marginLeft="40px"
android:layout_weight="1"/>
</LinearLayout>
<LinearLayout
android:id="@+id/LinearLayout4"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/blockbg_big">
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@drawable/img07"
android:id=