“山东大学移动互联网开发技术教学网站建设”项目实训日志二

时间：

​ 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的开发和教学设计