移动软件开发实验6

最新推荐文章于 2024-10-10 10:17:26 发布

weixin_52159653

最新推荐文章于 2024-10-10 10:17:26 发布

阅读量414

点赞数

文章标签： android

本文链接：https://blog.csdn.net/weixin_52159653/article/details/126535316

版权

一、实验目标

1.ScrollView 使用

2.RelativeLayout 使用

3.插件之间的穿插使用

实验步骤

安装Android studio

（1）Java环境配置

·安装jdk

·环境变量配置

（2）下载安装Android studio

2.逻辑梳理

页面上可以分为四个部分

·顶部图片模块

·顶部菜单模块

·待办消息模块

·底部Tab按钮

3.页面设计

（1）添加图片素材

（2）首先我们创建父布局，新建ScrollView，创建ScrollView 内部父布局

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e5e5e5">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

</ScrollView>

（3）创建顶部首页显示栏

<TextView
    android:id="@+id/shouye"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@color/white"
    android:gravity="center"
    android:text="首页"
    android:textColor="#333"
    android:textSize="18dp" />

（4）创建顶部图片

<RelativeLayout
    android:id="@+id/test_img"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/shouye">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@color/white"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:src="@mipmap/test_img" />
</RelativeLayout>

菜单栏模块

·首先创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局

·再次创建一个LinearLayout作为单个按钮的父布局

·创建上边的图片按钮,并设置其属性

·设置按钮底部文字并赋予其属性

<RelativeLayout
    android:id="@+id/mulu"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/test_img"
    android:background="@color/white"
    android:orientation="horizontal"
    android:paddingLeft="10dp"
    android:paddingRight="10dp"
    android:weightSum="4">

    <RelativeLayout
        android:id="@+id/yanfang"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <ImageView
            android:id="@+id/img1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:background="@mipmap/test_icon1" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/img1"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:text="验房" />
    </RelativeLayout>

</RelativeLayout>

消息模块

·首先我们创建一个横向的LinearLayout来作为菜单栏的父布局

·创建待办Textview

·创建更多Textview

<RelativeLayout
    android:id="@+id/caidan"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/mulu"
    android:layout_marginTop="20dp"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/daiban"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_weight="1"
        android:text="待办（10）"
        android:textColor="#333"
        android:textSize="16dp"
        android:textStyle="bold" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:text="更多"
        android:textColor="#666" />
</RelativeLayout>

（7）底部Tab模块

·首先创建一个横向的LinearLayoutLinearLayout来作为菜单栏的父布局

·再次创建一个LinearLayout作为单个按钮的父布局

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/caidan"
    android:layout_alignParentBottom="true"
    android:layout_marginTop="270dp"
    android:background="@color/white"
    android:weightSum="4">

    <RelativeLayout
        android:id="@+id/shou"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:layout_weight="1">

        <ImageView
            android:id="@+id/imge1"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="15dp"
            android:background="@mipmap/ground" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/imge1"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:text="首页" />
    </RelativeLayout>
    </RelativeLayout>

代码展示

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#e5e5e5">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:id="@+id/shouye"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@color/white"
                android:gravity="center"
                android:text="首页"
                android:textColor="#333"
                android:textSize="18dp" />

            <RelativeLayout
                android:id="@+id/test_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/shouye">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:background="@color/white"
                    android:paddingLeft="10dp"
                    android:paddingRight="10dp"
                    android:src="@mipmap/test_img" />
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/mulu"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/test_img"
                android:background="@color/white"
                android:orientation="horizontal"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:weightSum="4">

                <RelativeLayout
                    android:id="@+id/yanfang"
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1">

                    <ImageView
                        android:id="@+id/img1"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/test_icon1" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/img1"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="验房" />
                </RelativeLayout>

                <RelativeLayout
                    android:id="@+id/xuncha"
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:layout_toRightOf="@id/yanfang"
                    android:layout_weight="1">

                    <ImageView
                        android:id="@+id/img2"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/test_icon2" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/img2"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="日常巡查" />
                </RelativeLayout>

                <RelativeLayout
                    android:id="@+id/yaochi"
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:layout_toRightOf="@+id/xuncha"
                    android:layout_weight="1">

                    <ImageView
                        android:id="@+id/img3"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/test_icon3" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/img3"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="钥匙管理" />
                </RelativeLayout>

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_toRightOf="@+id/yaochi"
                    android:layout_weight="1">

                    <ImageView
                        android:id="@+id/img4"
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/test_icon4" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/img4"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="统计分析" />
                </RelativeLayout>
            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/caidan"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/mulu"
                android:layout_marginTop="20dp"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/daiban"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:layout_weight="1"
                    android:text="待办（10）"
                    android:textColor="#333"
                    android:textSize="16dp"
                    android:textStyle="bold" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_marginLeft="10dp"
                    android:layout_marginRight="10dp"
                    android:text="更多"
                    android:textColor="#666" />
            </RelativeLayout>

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/caidan"
                android:layout_alignParentBottom="true"
                android:layout_marginTop="270dp"
                android:background="@color/white"
                android:weightSum="4">

                <RelativeLayout
                    android:id="@+id/shou"
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1">

                    <ImageView
                        android:id="@+id/imge1"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/ground" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/imge1"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:text="首页" />
                </RelativeLayout>

                <RelativeLayout
                    android:id="@+id/baobiao"
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:layout_toRightOf="@+id/shou"
                    android:layout_weight="1">

                    <ImageView
                        android:id="@+id/imge2"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/dai" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/imge2"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:text="验房" />
                </RelativeLayout>

                <RelativeLayout
                    android:id="@+id/tonji"
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:layout_toRightOf="@+id/baobiao"
                    android:layout_weight="1">

                    <ImageView
                        android:id="@+id/imge3"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/bao" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/imge3"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:text="统计" />
                </RelativeLayout>

                <RelativeLayout
                    android:layout_width="100dp"
                    android:layout_height="match_parent"
                    android:layout_toRightOf="@+id/tonji"
                    android:layout_weight="1">

                    <ImageView
                        android:id="@+id/imge4"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/she" />

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_below="@id/imge4"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="5dp"
                        android:gravity="center"
                        android:text="设置" />
                </RelativeLayout>
            </RelativeLayout>
        </RelativeLayout>
    </ScrollView>
</RelativeLayout>