当前位置：网站首页>“山东大学移动互联网开发技术教学网站建设”项目实训日志二
“山东大学移动互联网开发技术教学网站建设”项目实训日志二
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的开发和教学设计
边栏推荐
- Okaleido Tiger 7.27日登录Binance NFT,首轮已获不俗成绩
- Wechat applet - component parameter transmission, state management
- What is sqlmap and how to use it
- 记xx公司SQL注入漏洞
- 熊市下PLATO如何通过Elephant Swap，获得溢价收益？
- Masscan使用教程.
- DAY6：利用 PHP 编写文件上传页面
- Under the bear market of encrypted assets, platofarm's strategy can still obtain stable income
- [electronic circuit] how to select ADC chip
- What is nmap and how to use it
猜你喜欢
7 月 28 日 ENS/USD 价值预测：ENS 吸引巨额利润
华为2020校招笔试编程题 看这篇就够了(上)
Laravel服务容器（继承与事件）
Detailed installation and use tutorial of MySQL (nanny installation with pictures and texts)
QPalette学习笔记
Wechat applet - screen height
Qt设置背景图片方法
如何在加密市场熊市中生存？
JDBC连接数据库详细步骤
How can Plato obtain premium income through elephant swap in a bear market?
随机推荐
7 月 28 日 ENS/USD 价值预测：ENS 吸引巨额利润
【电子电路】ADC芯片如何选型
Wapiti是什么以及使用教程
What is wapiti and how to use it
DAO赛道异军突起，M-DAO的优势在哪里？
table中同一列中合并相同项
js简单代码判断打开页面的设备是电脑PC端或手机H5端或微信端
PHP如何生成二维码？
Laravel服务容器（继承与事件）
Move protocol global health declaration, carry out the health campaign to the end
Sliding switch of tab of uniapp component
Qt设置背景图片方法
What is sqlmap and how to use it
Relationship between link and @import
Hcia-r & s self use notes (27) comprehensive experiment
Windows下cmd窗口连接mysql并操作表
QT layout management -- Part stretch principle and sizepolicy
学习、研究编程之道
Solve the problem that the prompt information of form verification does not disappear and the assignment does not take effect
ThinkPHP6 输出二维码图片格式 解决与 Debug 的冲突