【安卓小程序】app 首页

企业开发 2023-04-08 11:04:41 阅读次数: 0
课程 中国海洋大学22夏《移动软件开发》
实验名称 实验6：仿微app首页

一、实验目标

  1. 了解安卓的历史及架构；

  2. 搭建安卓开发环境 ；

  3. 第一个 Android 应用小程序。

二、实验步骤

1. 创建项目

2. 视图

  • 顶部图片；

  • 顶部菜单栏；

  • 中部消息模块；（选做）

  • 底部Tab按钮。

4. 代码实现

4.1.创建父布局

  • 首先设计一个外部总垂直布局，包含所有的列表组；

  • 设置父布局的垂直方向；

  • 运用 ScrollView 。

<?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="vertical">
​
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
            
        
    </ScrollView>
​
</LinearLayout>

  • 创建 ScrollView 内部父布局

<?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="vertical">
​
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
                
                
                
        </LinearLayout>
​
    </ScrollView>
​
</LinearLayout>

4.2.创建顶部首页显示栏

  • 设置宽高；

  • 设置文字；

  • 设置字体样式；

  • 设置字体颜色；

  • 字体居中。

​            <TextView
                android:textSize="18dp"
                android:textColor="#333"
                android:textStyle="bold"
                android:text="首页"
                android:gravity="center"
                android:layout_width="match_parent"
                android:layout_height="50dp"/>

4.3.创建顶部图片

  1. 图标

    将图片素材拖入 mipmap 文件夹。注意文件命名须为英文小写开头。

    点击 Refactor 。图片文件被保存进项目文件夹。

    • 设置宽高；

    • src 加载图片；

    • 设置边距。

                <ImageView
                android:layout_marginRight="10dp"
                android:layout_marginLeft="10dp"
                android:src="@mipmap/test_img"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>

4.4.菜单栏模块

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

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

  • 创建上边的图片按钮，并设置其属性；

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

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:orientation="horizontal"
                android:weightSum="4">
​
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_weight="1"
                    android:orientation="vertical">
​
                    <ImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/test_icon1"/>
​
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="验房"/>
​
            </LinearLayout>

4.5.消息模块

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

  • 创建待办 Textview 。

            <LinearLayout
                android:layout_marginTop="20dp"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:text="待办(10)"
                    android:textStyle="bold"
                    android:textColor="#333"
                    android:textSize="16dp"/>
​
                <TextView
                    android:layout_marginRight="10dp"
                    android:layout_marginLeft="10dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="更多"
                    android:textColor="#666"/>
​
            </LinearLayout>

4.6.底部 Tab 模块

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

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

  • 按钮这个地方使用了 RelativeLayout 编写；

  • 补全所有布局。

    <?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="vertical">
​
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
​
            <TextView
                android:textSize="18dp"
                android:textColor="#333"
                android:textStyle="bold"
                android:text="首页"
                android:gravity="center"
                android:layout_width="match_parent"
                android:layout_height="50dp"/>
​
            <ImageView
                android:layout_marginRight="10dp"
                android:layout_marginLeft="10dp"
                android:src="@mipmap/test_img"
                android:layout_width="match_parent"
                android:layout_height="200dp"/>
​
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:orientation="horizontal"
                android:weightSum="4">
​
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_weight="1"
                    android:orientation="vertical">
​
                    <ImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/test_icon1"/>
​
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="验房"/>
​
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_weight="1"
                    android:orientation="vertical">
​
                    <ImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/test_icon2"/>
​
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="日常巡检"/>
​
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_weight="1"
                    android:orientation="vertical">
​
                    <ImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/keys"/>
​
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="钥匙管理"/>
​
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="100dp"
                    android:layout_weight="1"
                    android:orientation="vertical">
​
                    <ImageView
                        android:layout_width="50dp"
                        android:layout_height="50dp"
                        android:layout_gravity="center_horizontal"
                        android:layout_marginTop="10dp"
                        android:background="@mipmap/statistical_analysis" />
​
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="10dp"
                        android:gravity="center"
                        android:text="统计分析" />
​
                </LinearLayout>
​
            </LinearLayout>
            <LinearLayout
                android:layout_marginTop="20dp"
                android:orientation="horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <TextView
                    android:layout_weight="1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="10dp"
                    android:text="待办(10)"
                    android:textStyle="bold"
                    android:textColor="#333"
                    android:textSize="16dp"/>
​
                <TextView
                    android:layout_marginRight="10dp"
                    android:layout_marginLeft="10dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="更多"
                    android:textColor="#666"/>
​
            </LinearLayout>
            <LinearLayout
                android:layout_marginTop="400dp"
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:weightSum="4">
​
                <RelativeLayout
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent">
​
                    <ImageView
                        android:id="@+id/img"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/test_icon3"/>
​
                    <TextView
                        android:layout_marginTop="5dp"
                        android:layout_below="@+id/img"
                        android:layout_centerHorizontal="true"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="首页"/>
​
                </RelativeLayout>
                <RelativeLayout
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent">
​
                    <ImageView
                        android:id="@id/img"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/to_do_list"/>
​
                    <TextView
                        android:layout_marginTop="5dp"
                        android:layout_below="@+id/img"
                        android:layout_centerHorizontal="true"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="首页"/>
​
                </RelativeLayout>
                <RelativeLayout
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent">
​
                    <ImageView
                        android:id="@id/img"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/report_form"/>
​
                    <TextView
                        android:layout_marginTop="5dp"
                        android:layout_below="@+id/img"
                        android:layout_centerHorizontal="true"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="首页"/>
​
                </RelativeLayout>
                <RelativeLayout
                    android:layout_weight="1"
                    android:layout_width="0dp"
                    android:layout_height="match_parent">
​
                    <ImageView
                        android:id="@id/img"
                        android:layout_width="30dp"
                        android:layout_height="30dp"
                        android:layout_centerHorizontal="true"
                        android:layout_marginTop="15dp"
                        android:background="@mipmap/management"/>
​
                    <TextView
                        android:layout_marginTop="5dp"
                        android:layout_below="@+id/img"
                        android:layout_centerHorizontal="true"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:gravity="center"
                        android:text="首页"/>
​
                </RelativeLayout>
​
            </LinearLayout>
​
        </LinearLayout>
​
    </ScrollView>
​
</LinearLayout>

总结与体会

  1. 线性布局须理解列表之间互相嵌套的关系，否则最终呈现效果出错。

  2. 学习 LinearLayout 组件、RelativeLayout 组件的使用。

  3. 插件之间的穿插使用、相对布局比线性布局更繁琐但更自由。

页面整体使用 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="vertical">
​
    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
​
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:rotationX="-2">
​
            <TextView
                android:id="@+id/a"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:gravity="center"
                android:text="首页"
                android:textColor="#333"
                android:textSize="18dp"
                android:textStyle="bold" />
​
            <ImageView
                android:id="@+id/b"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:layout_below="@id/a"
                android:layout_centerInParent="true"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:src="@mipmap/test_img" />
​
            <RelativeLayout
                android:id="@+id/c"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/b"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:orientation="horizontal">
​
                <ImageView
                    android:id="@+id/yanfang"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginLeft="40dp"
                    android:layout_marginTop="10dp"
                    android:background="@mipmap/test_icon1" />
​
                <TextView
                    android:id="@+id/text1"
                    android:layout_width="80dp"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/yanfang"
                    android:layout_marginLeft="25dp"
                    android:layout_marginTop="10dp"
                    android:gravity="center"
                    android:text="验房" />
​
​
                <ImageView
                    android:id="@+id/richangxunjian"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginLeft="70dp"
                    android:layout_marginTop="10dp"
                    android:layout_toRightOf="@id/yanfang"
                    android:background="@mipmap/test_icon2" />
​
​
                <TextView
                    android:id="@+id/text2"
                    android:layout_width="80dp"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/richangxunjian"
                    android:layout_marginLeft="40dp"
                    android:layout_marginTop="10dp"
                    android:layout_toRightOf="@id/text1"
                    android:gravity="center"
                    android:text="日常巡检" />
​
​
                <ImageView
​
                    android:id="@+id/yaoshiguanli"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginLeft="70dp"
                    android:layout_marginTop="10dp"
                    android:layout_toRightOf="@id/richangxunjian"
                    android:background="@mipmap/keys" />
​
                <TextView
                    android:id="@+id/text3"
                    android:layout_width="80dp"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/yaoshiguanli"
                    android:layout_marginLeft="40dp"
                    android:layout_marginTop="10dp"
                    android:layout_toRightOf="@id/text2"
                    android:gravity="center"
                    android:text="钥匙管理" />
​
​
                <ImageView
                    android:id="@+id/tongjifenxi"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginLeft="70dp"
                    android:layout_marginTop="10dp"
                    android:layout_toRightOf="@id/yaoshiguanli"
                    android:background="@mipmap/statistical_analysis" />
​
                <TextView
                    android:id="@+id/text4"
                    android:layout_width="80dp"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/tongjifenxi"
                    android:layout_marginLeft="42dp"
                    android:layout_marginTop="10dp"
                    android:layout_toRightOf="@id/text3"
                    android:gravity="center"
                    android:text="统计分析" />
            </RelativeLayout>
​
            <RelativeLayout
                android:id="@+id/d"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/c"
                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:text="待办(10)"
                    android:textColor="#333"
                    android:textSize="16dp"
                    android:textStyle="bold" />
​
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="400dp"
                    android:layout_marginRight="10dp"
                    android:layout_toRightOf="@id/daiban"
                    android:text="更多"
                    android:textColor="#666" />
            </RelativeLayout>
​
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:layout_marginTop="750dp"
                android:orientation="horizontal">
​
                <ImageView
                    android:id='@+id/shouye'
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginLeft="55dp"
                    android:layout_marginTop="15dp"
                    android:background="@mipmap/test_icon3" />
​
                <TextView
                    android:id="@+id/text5"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/shouye"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="5dp"
                    android:gravity="center"
                    android:text="首页" />
​
​
                <ImageView
                    android:id='@+id/yanfang2'
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginLeft="90dp"
                    android:layout_marginTop="15dp"
                    android:layout_toRightOf="@id/shouye"
                    android:background="@mipmap/to_do_list" />
​
                <TextView
                    android:id="@+id/text6"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/yanfang2"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="5dp"
                    android:layout_toRightOf="@id/text5"
                    android:gravity="center"
                    android:text="验房" />
​
                <ImageView
                    android:id='@+id/tongji'
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginLeft="90dp"
                    android:layout_marginTop="15dp"
                    android:layout_toRightOf="@id/yanfang2"
                    android:background="@mipmap/report_form" />
​
                <TextView
                    android:id="@+id/text7"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/tongji"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="5dp"
                    android:layout_toRightOf="@id/text6"
                    android:gravity="center"
                    android:text="统计" />
​
                <ImageView
                    android:id='@+id/shezhi'
                    android:layout_width="30dp"
                    android:layout_height="30dp"
                    android:layout_marginLeft="90dp"
                    android:layout_marginTop="15dp"
                    android:layout_toRightOf="@id/tongji"
                    android:background="@mipmap/management" />
​
                <TextView
                    android:id="@+id/text8"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/shezhi"
                    android:layout_marginLeft="22dp"
                    android:layout_marginTop="5dp"
                    android:layout_toRightOf="@id/text7"
                    android:gravity="center"
                    android:text="设置" />
​
            </RelativeLayout>
​
        </RelativeLayout>
​
    </ScrollView>
​
​
</RelativeLayout>

猜你喜欢

转载自blog.csdn.net/weixin_51079437/article/details/126544651
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022