《移动项目实践》实验报告——Android组合控件_android图形与组件实验报告-CSDN博客

本文介绍了一款模仿淘宝主页的电商App开发过程，重点介绍了如何使用底部标签栏实现不同功能页面间的切换，并提供了关键代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实验目的

1、熟悉App开发常用的一些组合控件，主要包括底部标签栏的实现和用法、顶部导航栏的用法、横幅轮播条的实现和用法、循环视图3种布局的用法、材质设计库3种布局的用法等；

实验内容

仿淘宝主页
在这里插入图片描述

上图是淘宝App的主页截图，这也是电商App的通用模板。类似的电商App还有：（1）京东；（2）唯品会；（3）苏宁易购；（4）当当；（5）美团。本次实验也可以仿这几个电商平台中的某个实现。

实验过程(实验的设计思路、关键源代码等)

源代码：https://gitee.com/shentuzhigang/mini-project/tree/master/android-taobao

package io.shentuzhigang.demo.taobao

import android.app.ActivityGroup
import android.content.Intent
import android.os.Bundle
import android.view.View
import android.view.ViewGroup
import android.widget.LinearLayout
import io.shentuzhigang.demo.taobao.R
import io.shentuzhigang.demo.taobao.DepartmentCartActivity
import io.shentuzhigang.demo.taobao.DepartmentClassActivity
import io.shentuzhigang.demo.taobao.DepartmentHomeActivity

class DepartmentStoreActivity : ActivityGroup(), View.OnClickListener {
    private val mBundle = Bundle() // 声明一个包裹对象
    private var ll_container: LinearLayout? = null
    private var ll_first: LinearLayout? = null
    private var ll_second: LinearLayout? = null
    private var ll_third: LinearLayout? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_department_store)
        // 从布局文件中获取名叫ll_container的线性布局，用于存放内容视图
        ll_container = findViewById(R.id.ll_container)
        ll_first = findViewById(R.id.ll_first) // 获取第一个标签的线性布局
        ll_second = findViewById(R.id.ll_second) // 获取第二个标签的线性布局
        ll_third = findViewById(R.id.ll_third) // 获取第三个标签的线性布局
        ll_first?.setOnClickListener(this) // 给第一个标签注册点击监听器
        ll_second?.setOnClickListener(this) // 给第二个标签注册点击监听器
        ll_third?.setOnClickListener(this) // 给第三个标签注册点击监听器
        mBundle.putString("tag", TAG) // 往包裹中存入名叫tag的标记串
        changeContainerView(ll_first) // 默认显示第一个标签的内容视图
    }

    override fun onClick(v: View) {
        if (v.id == R.id.ll_first || v.id == R.id.ll_second || v.id == R.id.ll_third) {
            changeContainerView(v) // 点击了哪个标签，就切换到该标签对应的内容视图
        }
    }

    // 内容视图改为展示指定的视图
    private fun changeContainerView(v: View?) {
        ll_first!!.isSelected = false // 取消选中第一个标签
        ll_second!!.isSelected = false // 取消选中第二个标签
        ll_third!!.isSelected = false // 取消选中第三个标签
        v!!.isSelected = true // 选中指定标签
        if (v === ll_first) {
            // 切换到第一个活动页面DepartmentHomeActivity
            toActivity("first", DepartmentHomeActivity::class.java)
        } else if (v === ll_second) {
            // 切换到第二个活动页面DepartmentClassActivity
            toActivity("second", DepartmentClassActivity::class.java)
        } else if (v === ll_third) {
            // 切换到第三个活动页面DepartmentCartActivity
            toActivity("third", DepartmentCartActivity::class.java)
        }
    }

    // 把内容视图切换到对应的Activity活动页面
    private fun toActivity(label: String, cls: Class<*>) {
        // 创建一个意图，并存入指定包裹
        val intent = Intent(this, cls).putExtras(mBundle)
        // 移除内容框架下面的所有下级视图
        ll_container!!.removeAllViews()
        // 启动意图指向的活动，并获取该活动页面的顶层视图
        val v = localActivityManager.startActivity(label, intent).decorView
        // 设置内容视图的布局参数
        v.layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT
        )
        // 把活动页面的顶层视图（即内容视图）添加到内容框架上
        ll_container!!.addView(v)
    }

    companion object {
        private const val TAG = "DepartmentStoreActivity"
    }
}