实验目的

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.taobaoimport 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.DepartmentHomeActivityclass DepartmentStoreActivity : ActivityGroup(), View.OnClickListener {private val mBundle = Bundle() // 声明一个包裹对象private var ll_container: LinearLayout? = nullprivate var ll_first: LinearLayout? = nullprivate var ll_second: LinearLayout? = nullprivate var ll_third: LinearLayout? = nulloverride 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) {// 切换到第一个活动页面DepartmentHomeActivitytoActivity("first", DepartmentHomeActivity::class.java)} else if (v === ll_second) {// 切换到第二个活动页面DepartmentClassActivitytoActivity("second", DepartmentClassActivity::class.java)} else if (v === ll_third) {// 切换到第三个活动页面DepartmentCartActivitytoActivity("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种布局的用法等；

参考文章

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！