《移动项目实践》实验报告——Android组合控件

Posted 2022-06-14 Starzkg

实验目的

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"
    

实验结果(实验最终作品截图说明)

实验心得

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

参考文章