實驗目的

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種布局的用法等；

參考文章

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。