当前位置：网站首页>“山东大学移动互联网开发技术教学网站建设”项目实训日志二
“山东大学移动互联网开发技术教学网站建设”项目实训日志二
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的开发和教学设计
边栏推荐
- 麦当娜“Hellbent”购买130万美元的nft无聊猿，现在被认为太贵了
- What is sqlmap and how to use it
- Sliding switch of tab of uniapp component
- Set the background color of a cell in the table
- win10+opencv3.2+vs2015配置
- Relationship between link and @import
- The difference between link and @import importing external styles
- 2022 mathematical modeling competition summer training lecture - optimization method: goal planning
- Hcia-r & s self use notes (24) ACL
- Mobile terminal -flex item attribute
猜你喜欢
Fvuln automated web vulnerability detection tool
Cmu15-213 shell lab experiment record
MOVE PROTOCOL全球健康宣言，将健康运动进行到底
使用Qss设置窗体样式
Build msys2 environment with win10
DAY6：利用 PHP 编写文件上传页面
The openatom openharmony sub forum was successfully held, and ecological and industrial development entered a new journey
Fantom (FTM) 价格将在未来几天飙升 20%
ThinkPHP6 输出二维码图片格式 解决与 Debug 的冲突
The LAAS protocol of defi 2.0 is the key to revitalizing the development of defi track
随机推荐
Crypto giants all in metauniverse, and platofarm may break through
Hcia-r & s self use notes (26) PPP
加密资产熊市之下，PlatoFarm的策略玩法依旧能获得稳定收益
Under the bear market of encrypted assets, platofarm's strategy can still obtain stable income
一文读懂Move2Earn项目——MOVE
Selection options of uniapp components (such as package selection)
Fantom (FTM) 价格将在未来几天飙升 20%
新手入门：手把手从PHP环境到ThinkPHP6框架下载
365 day challenge leetcode1000 question - day 036 binary tree pruning + subarray and sorted interval sum + delete the shortest subarray to order the remaining arrays
The completely decentralized programming mode does not need servers or IP, just like a aimless network extending everywhere
The bear market is slow, and bit.store provides stable stacking products to help you get through the bull and bear market
极致通缩和永动机模型，将推动 PlatoFarm 爆发
实现table某个单元格背景色设置
js简单代码判断打开页面的设备是电脑PC端或手机H5端或微信端
“山东大学移动互联网开发技术教学网站建设”项目实训日志六
win10+opencv3.2+vs2015配置
DAY13：文件上传漏洞
Merge the same items in the same column in table
[typescript] in depth study of typescript functions
Wechat applet change attribute value -setdata- bidirectional binding -model