当前位置：网站首页>“山东大学移动互联网开发技术教学网站建设”项目实训日志二
“山东大学移动互联网开发技术教学网站建设”项目实训日志二
2022-07-29 05:19:00 【BEER_7】
时间：
21春季学期第四、五周
个人工作内容：
完成Hello World案例app
详细记录：
- Hello World案例app设计说明
- 目标用户：有一定java基础的初次接触android开发的学生。
- 需求说明：简述项目开发流程，工程相关解析，介绍android开发基础内容。
- 设计说明：android中常用的LinearLayout(线性布局)和RelativeLayout(相对布局)，android中常用的UI控件，其中穿插Toast（提示信息的一个控件）、基于监听的事件处理机制等内容。后续内容在其它专题案例app中借实例讲解。
app页面展示：
- 多个按钮可以用switch来设置监听事件
private void setListeners(){
OnClick toclick = new OnClick();
mButtonLlay.setOnClickListener(toclick);
private class OnClick implements View.OnClickListener{
@Override
public void onClick(View v) {
Intent intent = null;
switch (v.getId()){
case R.id.btn_llay:
intent = new Intent(MainActivity.this, LinearLayoutActivity.class);
break;
- 线性布局：
需要设置orientation（线性方向，水平or垂直）；
线性布局可以嵌套，从而设计出美观的布局；
weight设置View比重；
在线性布局中layout_gravity可以让组件设置靠左右/上下（垂直布局/水平布局）。
<?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="horizontal">
<TextView
android:layout_width="130dp"
android:layout_height="fill_parent"
android:background="#84a9ac">
</TextView>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#a3d2ca"
android:orientation="vertical"
android:paddingTop="80dp"
android:paddingLeft="20dp"
android:paddingRight="20dp"
android:paddingBottom="30dp">
<TextView
android:layout_width="match_parent"
android:layout_height="40dp"
android:background="#eeeeee"/>
<TextView
android:layout_width="100dp"
android:layout_height="40dp"
android:background="#eeeeee"
android:layout_gravity="right"
android:layout_marginTop="20dp"
android:layout_marginBottom="40dp"/>
<TextView
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#fde2e2"/>
<TextView
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:background="#ffb6b6"/>
</LinearLayout>
</LinearLayout>
- 相对布局
相对布局即相对概念，在一个View的基础上，可以将其它View放在其周围或者其内部的上下左右等地方。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/RelativeLayout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="30dp">
<TextView
android:id="@+id/img0"
android:layout_width="120dp"
android:layout_height="120dp"
android:background="@color/orange" />
<TextView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignLeft="@id/img0"
android:background="@color/teal_200"/>
<TextView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignRight="@id/img0"
android:background="@color/teal_200"/>
<TextView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignLeft="@id/img0"
android:background="@color/teal_200"/>
<TextView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignBottom="@id/img0"
android:background="@color/teal_200"/>
<TextView
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_alignBottom="@id/img0"
android:layout_alignRight="@id/img0"
android:background="@color/teal_200"/>
<TextView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:background="@color/orange" />
<TextView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerHorizontal="true"
android:background="@color/orange"
android:layout_alignParentBottom="true"/>
<TextView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerVertical="true"
android:background="@color/orange" />
<TextView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerVertical="true"
android:background="@color/orange" />
<TextView
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:background="@color/orange" />
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:background="@color/orange" />
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:background="@color/orange" />
<TextView
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:background="@color/orange" />
<!-- 这个是在容器中央的 -->
<TextView
android:id="@+id/img1"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_centerInParent="true"
android:background="@color/blue1"/>
<!-- 在中间图片的左边 -->
<TextView
android:id="@+id/img2"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_toLeftOf="@id/img1"
android:layout_centerVertical="true"
android:background="@color/blue"/>
<!-- 在中间图片的右边 -->
<TextView
android:id="@+id/img3"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_toRightOf="@id/img1"
android:layout_centerVertical="true"
android:background="@color/gray"/>
<!-- 在中间图片的上面-->
<TextView
android:id="@+id/img4"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_above="@id/img1"
android:layout_centerHorizontal="true"
android:background="@color/red"/>
<!-- 在中间图片的下面 -->
<ImageView
android:id="@+id/img5"
android:layout_width="80dp"
android:layout_height="80dp"
android:layout_below="@id/img1"
android:layout_centerHorizontal="true"
android:src="@color/yellow"/>
</RelativeLayout>
- TextView
TextView可以说时最最最基础的组件，需要掌握其常用属性。
//设置背景，drawable中shape可以设置边框，填充，圆角等,文本的下划线需要在activity中设置
<TextView
android:id="@+id/tv_1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/ttv_bg"
android:text="@string/tvs_1"
android:textColor="@color/red"
android:textSize="32sp"
android:textStyle="bold|italic"
android:gravity="center"/>
//长文本的单行显示效果，android:maxLines="1"是设置为单行，android:ellipsize="end"文本超出时显示省略号
<TextView
android:id="@+id/tv_2"
android:layout_width="300dp"
android:layout_height="wrap_content"
android:text="@string/tvs_2"
android:maxLines="1"
android:ellipsize="end"
android:layout_marginTop="30dp"/>
//icon+文字
<TextView
android:id="@+id/tv_3"
android:layout_width="wrap_content"
android:layout_height="60dp"
android:text="@string/tvs_3"
android:drawableLeft="@mipmap/icon_user"
android:drawablePadding="10dp"
android:gravity="center"
android:textSize="24sp"
android:layout_marginTop="30dp"/>
//阴影效果
<TextView
android:id="@+id/tv_4"
android:layout_width="352dp"
android:layout_height="wrap_content"
android:layout_marginTop="30dp"
android:textStyle="bold"
android:textColor="@color/blue"
android:text="@string/tvs_4"
android:layout_centerInParent="true"
android:shadowColor="#F9F900"
android:shadowDx="10.0"
android:shadowDy="10.0"
android:shadowRadius="3.0"
android:textSize="30sp"
android:gravity="center"/>
//链接，可以从网页直接返回
<TextView
android:id="@+id/tv_5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/tvs_5"
android:textSize="24sp"
android:autoLink="web"
android:layout_marginTop="30dp"/>
//跑马灯效果，常用于提示
<TextView
android:id="@+id/tv_6"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/tvs_6"
android:singleLine="true"
android:scrollHorizontally="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:focusable="true"
android:focusableInTouchMode="true"
android:layout_marginTop="30dp">
<requestFocus/>
</TextView>
- Button
Button的背景设置为drawable中的xml，用法同前面TextView的背景；
Button可以设置监听事件，如点击提交，登录等。
<Button
android:id="@+id/btn1"
android:layout_width="match_parent"
android:layout_height="64dp"
android:text="@string/btn_1"
android:textColor="@color/gray"
android:textStyle="bold"
android:textSize="20sp"
android:background="@drawable/btn1_bg"/>
<Button
android:id="@+id/btn2"
android:layout_width="match_parent"
android:layout_height="64dp"
android:textSize="20sp"
android:text="@string/btn_2"
android:layout_below="@+id/btn1"
android:textColor="@color/blue"
android:background="@drawable/btn2_bg"
android:layout_marginTop="20dp"/>
<Button
android:id="@+id/btn3"
android:layout_width="match_parent"
android:layout_height="64dp"
android:layout_below="@+id/btn2"
android:layout_marginTop="20dp"
android:background="@drawable/btn3_bg"
android:onClick="showToast"
android:text="@string/btn_3"
android:textColor="@color/white"
android:textSize="20sp" />
- EditText
EditText是用户编辑区，除了像TextView控制字体等属性外，还可以控制用户输入格式，控制输入框大小，监听输入信息等，是与用户交互的重要组件。
<EditText
android:id="@+id/edt1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="@color/gray"
android:hint="用户名"
android:drawableLeft="@mipmap/icon_user"
android:drawablePadding="10dp"
android:textColorHint="@color/teal_700"
android:singleLine="true" />
<EditText
android:id="@+id/edt2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="@color/gray"
android:layout_below="@id/edt1"
android:hint="电话，获取焦点即可全选"
android:inputType="number"
android:selectAllOnFocus="true"/>
<EditText
android:id="@+id/edt3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="@color/gray"
android:layout_below="@id/edt2"
android:hint="密码"
android:inputType="textPassword"/>
<EditText
android:id="@+id/edt4"
android:layout_width="match_parent"
android:layout_height="120dp"
android:textSize="16sp"
android:textColor="@color/gray"
android:layout_below="@id/edt3"
android:background="@drawable/btn2_bg"
android:hint="自我介绍"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:layout_marginTop="40dp"
android:maxLines="4"/>
<EditText
android:id="@+id/edt5"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="@color/gray"
android:layout_below="@id/edt4"
android:hint="输入监听"
android:layout_marginTop="20dp"/>
- RadioButton
单选按钮需要在一个RadioGroup中才能实现单选效果；
可以改变样式或设置监听事件；
常用于表单设计中。
<RadioGroup
android:id="@+id/radioGroup1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<RadioButton
android:id="@+id/radiobtn1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="男"/>
<RadioButton
android:id="@+id/radiobtn2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="女"/>
</RadioGroup>
<TextView
android:id="@+id/rbcb_tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="还未选择"
android:layout_marginTop="10dp"/>
<RadioGroup
android:id="@+id/radioGroup2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="40dp">
<RadioButton
android:id="@+id/radiobtn3"
android:layout_width="60dp"
android:layout_height="40dp"
android:text="男"
android:textColor="@color/white"
android:textSize="24sp"
android:button="@null"
android:gravity="center"
android:background="@drawable/rb_bg"/>
<RadioButton
android:id="@+id/radiobtn4"
android:layout_width="60dp"
android:layout_height="40dp"
android:text="女"
android:textColor="@color/white"
android:textSize="24sp"
android:button="@null"
android:layout_marginLeft="20dp"
android:gravity="center"
android:background="@drawable/rb_bg"/>
</RadioGroup>
<Button
android:id="@+id/rdidbtn1"
android:layout_width="150dp"
android:layout_height="wrap_content"
android:text="提交"
android:layout_marginTop="10dp"/>
- CheckBox
复选框可以多选，常用于表单设计中。
<CheckBox
android:id="@+id/cb1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="西瓜"
android:textSize="28sp"
android:button="@drawable/cb_bg"
android:paddingLeft="20dp"/>
<CheckBox
android:id="@+id/cb2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="梨"
android:textSize="28sp"
android:layout_marginTop="15dp"
android:button="@drawable/cb_bg"
android:paddingLeft="20dp"/>
<CheckBox
android:id="@+id/cb3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="苹果"
android:textSize="28sp"
android:layout_marginTop="15dp"
android:button="@drawable/cb_bg"
android:paddingLeft="20dp"/>
<CheckBox
android:id="@+id/cb4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="物理"
android:layout_marginTop="30dp"/>
<CheckBox
android:id="@+id/cb5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="化学"
android:layout_marginTop="5dp"/>
<CheckBox
android:id="@+id/cb6"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="生物"
android:layout_marginTop="5dp"/>
<CheckBox
android:id="@+id/cb7"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="全选"
android:layout_marginTop="5dp"/>
<Button
android:id="@+id/rdidbtn2"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:text="确认"/>
在activity中监听到“全选”选中后改变同组CheckBox选中状态实现全选效果
@Override
public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
if(b){
if(compoundButton.getId() == R.id.cb7){
cbx4.setChecked(true);
cbx5.setChecked(true);
cbx6.setChecked(true);
}
else
Toast.makeText(this,compoundButton.getText().toString(),Toast.LENGTH_SHORT).show();
}
else {
if(compoundButton.getId() == R.id.cb7){
cbx4.setChecked(false);
cbx5.setChecked(false);
cbx6.setChecked(false);
}
}
}
- ImageView
ImageView是插入图片的组件，可以设置图片大小和布局，常用属性如下：
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
android:gravity="center">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="fitCenter(fitStart,fitEnd):保持图片的横纵比缩放,直到该图片能够显示在ImageView组件上,并将缩放好的图片显示在imageView的中间(左上，右下)"/>
<ImageView
android:layout_width="200dp"
android:layout_height="100dp"
android:scaleType="fitCenter"
android:background="@color/teal_200"
android:src="@drawable/picture1"
android:layout_marginTop="5dp"/>
<ImageView
android:layout_width="200dp"
android:layout_height="100dp"
android:layout_marginTop="10dp"
android:background="@color/teal_200"
android:scaleType="fitStart"
android:src="@drawable/picture1" />
<ImageView
android:layout_width="200dp"
android:layout_height="100dp"
android:background="@color/teal_200"
android:scaleType="fitEnd"
android:src="@drawable/picture1"
android:layout_marginTop="10dp"/>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#000000"
android:layout_marginTop="15dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="matrix(center):默认值，不改变原图的大小，从ImageView的左上角（中间）开始绘制原图，原图超过ImageView的部分作裁剪处理"/>
<ImageView
android:layout_width="40dp"
android:layout_height="40dp"
android:background="@color/teal_200"
android:scaleType="matrix"
android:src="@drawable/picture1"
android:layout_marginTop="5dp"/>
<ImageView
android:layout_width="200dp"
android:layout_height="100dp"
android:background="@color/teal_200"
android:scaleType="center"
android:src="@drawable/amy"
android:layout_marginTop="10dp"/>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#000000"
android:layout_marginTop="15dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="fitXY:对图像的横向与纵向进行独立缩放,使得该图片完全适应ImageView,但是图片的横纵比可能会发生改变" />
<ImageView
android:layout_width="200dp"
android:layout_height="100dp"
android:background="@color/teal_200"
android:scaleType="fitXY"
android:src="@drawable/amy"
android:layout_marginTop="5dp"/>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#000000"
android:layout_marginTop="15dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="centerCrop:保持横纵比缩放图片,直到完全覆盖ImageView,可能会出现图片的显示不完全"/>
<ImageView
android:layout_width="200dp"
android:layout_height="100dp"
android:background="@color/teal_200"
android:src="@drawable/amy"
android:scaleType="centerCrop"
android:layout_marginTop="5dp"/>
<View
android:layout_width="match_parent"
android:layout_height="1px"
android:background="#000000"
android:layout_marginTop="15dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="centerInside:保持横纵比缩放图片,直到ImageView能够完全地显示图片"/>
<ImageView
android:layout_width="200dp"
android:layout_height="100dp"
android:background="@color/teal_200"
android:src="@drawable/amy"
android:scaleType="centerInside"
android:layout_marginTop="5dp"/>
</LinearLayout>
- ScrollView
ScrollView可以是垂直滚动条或水平滚动条；
重写onClick方法实现滚动条滚动效果；
常用于信息浏览时返回顶部刷新。
xml：
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/scroll">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp">
<Button
android:id="@+id/btn_down"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="最下方"
android:textSize="20dp"
android:textAllCaps="false"
android:layout_marginTop="20dp"/>
<Button
android:id="@+id/btn_up"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="最上方"
android:textSize="20dp"
android:textAllCaps="false"
android:layout_marginTop="400dp"/>
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<TextView
android:layout_width="200dp"
android:layout_height="300dp"
android:text="内容1"
android:padding="10dp"/>
<View
android:layout_width="1dp"
android:layout_height="300dp"
android:background="@color/black"/>
<TextView
android:layout_width="200dp"
android:layout_height="300dp"
android:text="内容2"
android:padding="10dp"/>
<View
android:layout_width="1dp"
android:layout_height="300dp"
android:background="@color/black"/>
<TextView
android:layout_width="200dp"
android:layout_height="300dp"
android:text="内容3"
android:padding="10dp"/>
</LinearLayout>
</HorizontalScrollView>
</LinearLayout>
</ScrollView>
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_down:
scrollView.fullScroll(ScrollView.FOCUS_DOWN);
break;
case R.id.btn_up:
scrollView.fullScroll(ScrollView.FOCUS_UP);
break;
}
}
后期工作规划：
- 下周完成指南针案例App的开发和教学设计
边栏推荐
- Solve the problem that the prompt information of form verification does not disappear and the assignment does not take effect
- Related knowledge of elastic box
- WIN10 编译ffmpeg（包含ffplay）
- [C language series] - constants and variables that confuse students
- Hcia-r & s self use notes (26) PPP
- [C language series] - a recursive topic
- Cmu15-213 shell lab experiment record
- The bear market is slow, and bit.store provides stable stacking products to help you get through the bull and bear market
- 山寨币SHIB 在 ETH 鲸鱼的投资组合中拥有 5.486 亿美元的股份——交易者应提防……
- 麦当娜“Hellbent”购买130万美元的nft无聊猿，现在被认为太贵了
猜你喜欢
完全去中心化的编程模式，不需要服务器，也不需要ip，就像一张漫无目的的网络、四处延伸
Use QSS to style the form
DeFi 2.0的LaaS协议，重振DeFi赛道发展的关键
Dao race track is booming. What are the advantages of m-dao?
![[typescript] in depth study of typescript functions](/img/0c/e838960c8efd6e87046d35f8942a07.png)
[typescript] in depth study of typescript functions
The bear market is slow, and bit.store provides stable stacking products to help you get through the bull and bear market
Wechat applet - screen height
![[C language series] - storage of deep anatomical data in memory (II) - floating point type](/img/a4/126d9f8e812d8f69b4249eac837bf6.png)
[C language series] - storage of deep anatomical data in memory (II) - floating point type
大部分PHP程序员，都搞不懂如何安全代码部署
Seay source code audit system
随机推荐
Detailed installation and use tutorial of MySQL (nanny installation with pictures and texts)
[sword finger offer] - explain the library function ATOI and simulate the realization of ATOI function
Read and understand move2earn project - move
Windows下cmd窗口连接mysql并操作表
What is nmap and how to use it
Starfish OS: create a new paradigm of the meta universe with reality as the link
Fantom (FTM) 在 FOMC会议之前飙升 45%
【TypeScript】深入学习TypeScript对象类型
How to survive in the bear market of encryption market?
H5 semantic label
Character type conversion
WIN10 编译ffmpeg（包含ffplay）
超简单集成HMS ML Kit 实现parental control
【电子电路】ADC芯片如何选型
MySQL decompressed version windows installation
Hcia-r & s self use notes (25) NAT technical background, NAT type and configuration
Masscan使用教程.
php写一个购买全网最低价的纸尿裤
QT layout management -- Part stretch principle and sizepolicy
我的理想工作，码农的绝对自由支配才是最重要的——未来创业的追求