實驗?zāi)康?/h1>

1、熟悉App開發(fā)常用的一些組合控件，主要包括底部標(biāo)簽欄的實現(xiàn)和用法、頂部導(dǎo)航欄的用法、橫幅輪播條的實現(xiàn)和用法、循環(huán)視圖3種布局的用法、材質(zhì)設(shè)計庫3種布局的用法等；

實驗內(nèi)容

仿淘寶主頁

上圖是淘寶App的主頁截圖，這也是電商App的通用模板。類似的電商App還有：（1）京東；（2）唯品會；（3）蘇寧易購；（4）當(dāng)當(dāng)；（5）美團(tuán)。本次實驗也可以仿這幾個電商平臺中的某個實現(xiàn)。

實驗過程(實驗的設(shè)計思路、關(guān)鍵源代碼等)

源代碼：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)// 從布局文件中獲取名叫l(wèi)l_container的線性布局，用于存放內(nèi)容視圖ll_container = findViewById(R.id.ll_container)ll_first = findViewById(R.id.ll_first) // 獲取第一個標(biāo)簽的線性布局ll_second = findViewById(R.id.ll_second) // 獲取第二個標(biāo)簽的線性布局ll_third = findViewById(R.id.ll_third) // 獲取第三個標(biāo)簽的線性布局ll_first?.setOnClickListener(this) // 給第一個標(biāo)簽注冊點擊監(jiān)聽器ll_second?.setOnClickListener(this) // 給第二個標(biāo)簽注冊點擊監(jiān)聽器ll_third?.setOnClickListener(this) // 給第三個標(biāo)簽注冊點擊監(jiān)聽器mBundle.putString("tag", TAG) // 往包裹中存入名叫tag的標(biāo)記串changeContainerView(ll_first) // 默認(rèn)顯示第一個標(biāo)簽的內(nèi)容視圖}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) // 點擊了哪個標(biāo)簽，就切換到該標(biāo)簽對應(yīng)的內(nèi)容視圖}}// 內(nèi)容視圖改為展示指定的視圖private fun changeContainerView(v: View?) {ll_first!!.isSelected = false // 取消選中第一個標(biāo)簽ll_second!!.isSelected = false // 取消選中第二個標(biāo)簽ll_third!!.isSelected = false // 取消選中第三個標(biāo)簽v!!.isSelected = true // 選中指定標(biāo)簽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)}}// 把內(nèi)容視圖切換到對應(yīng)的Activity活動頁面private fun toActivity(label: String, cls: Class<*>) {// 創(chuàng)建一個意圖，并存入指定包裹val intent = Intent(this, cls).putExtras(mBundle)// 移除內(nèi)容框架下面的所有下級視圖ll_container!!.removeAllViews()// 啟動意圖指向的活動，并獲取該活動頁面的頂層視圖val v = localActivityManager.startActivity(label, intent).decorView// 設(shè)置內(nèi)容視圖的布局參數(shù)v.layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT)// 把活動頁面的頂層視圖（即內(nèi)容視圖）添加到內(nèi)容框架上ll_container!!.addView(v)}companion object {private const val TAG = "DepartmentStoreActivity"} }

實驗結(jié)果(實驗最終作品截圖說明)

實驗心得

1、熟悉App開發(fā)常用的一些組合控件，主要包括底部標(biāo)簽欄的實現(xiàn)和用法、頂部導(dǎo)航欄的用法、橫幅輪播條的實現(xiàn)和用法、循環(huán)視圖3種布局的用法、材質(zhì)設(shè)計庫3種布局的用法等；

參考文章

總結(jié)

以上是生活随笔為你收集整理的《移动项目实践》实验报告——Android组合控件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。