本篇文章同步发表在 HKT 线上教室 部落格,线上影音教学课程已上架至 Udemy 和 Youtube 频道。另外,想追踪更多相关技术资讯,欢迎到 脸书粉丝专页 按赞追踪喔~
范例名称:药局详细资讯页
开发人员:HKT (侯光灿)
程序语言:Kotlin
开发环境:Android Studio 4.1.2 & Android 11 & Kotlin 1.4.21
授权范围:使用时必须注明出处且不得为商业目的之使用
范例下载点:点我下载
昨天我们建立了,点击列表中的项目事件时,会将资料传递到下一页,但当跳到下一页「药局详细资讯页」後,昨天我们只是很单纯的在输出资讯视窗,印出该笔点击项目的药局名称,今天我们将要接着继续做下去,将传递过来的资料,呈现在 UI 画面当中。
activity_pharmacy_detail.xml,沿用之前的药局卡片设计,额外再加入电话与住址栏位资料。
<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:layout_marginRight="10dp"
app:cardCornerRadius="8dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/layout_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="20dp">
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="15dp"
android:text="药局名称"
android:textColor="#424242"
android:textSize="30dp"
app:layout_constraintBottom_toTopOf="@+id/layout_adult"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/layout_adult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_amount_info"
android:padding="10dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/layout_child"
app:layout_constraintTop_toBottomOf="@+id/tv_name">
<TextView
android:id="@+id/tv_adult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="成人口罩"
android:textColor="#ffffff"
android:textSize="20dp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv_adult_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="口罩数量"
android:textColor="#ffffff"
android:textSize="16dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_adult" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/layout_child"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_amount_info"
android:padding="10dp"
app:layout_constraintLeft_toRightOf="@+id/layout_adult"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tv_name">
<TextView
android:id="@+id/tv_child"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="小孩口罩"
android:textColor="#ffffff"
android:textSize="20dp"
android:textStyle="bold"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv_child_amount"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="口罩数量"
android:textColor="#ffffff"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/tv_child" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/layout_phone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="40dp"
android:layout_marginRight="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toBottomOf="@+id/layout_adult">
<ImageView
android:id="@+id/iv_phone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_baseline_phone_24" />
<TextView
android:id="@+id/tv_phone"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="00-00000000"
android:textSize="16dp"
app:layout_constraintLeft_toRightOf="@+id/iv_phone"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/iv_phone" />
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/layout_address"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_marginRight="20dp"
app:layout_constraintLeft_toLeftOf="@+id/layout_phone"
app:layout_constraintTop_toBottomOf="@+id/layout_phone">
<ImageView
android:id="@+id/iv_address"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/ic_baseline_map_24" />
<TextView
android:id="@+id/tv_address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:text="00-00000000"
android:textSize="16dp"
app:layout_constraintLeft_toRightOf="@+id/iv_address"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="@+id/iv_address" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.cardview.widget.CardView>
File -> New -> Vector Asset
在专案的 build.gradle 需加入 vectorDrawables.useSupportLibrary = true。需向下相容,因为 Android 6(SDK 23)之前,尚未支援向量图片格式。
android {
...
defaultConfig {
...
vectorDrawables.useSupportLibrary = true
}
}
在 PharmacyDetailActivity 里,将传递过来的资料解析,指定显示到 UI 元件上。
class PharmacyDetailActivity : AppCompatActivity() {
private val data by lazy { intent.getSerializableExtra("data") as? Feature }
private val name by lazy { data?.properties?.name }
private val maskAdultAmount by lazy { data?.properties?.mask_adult }
private val maskChildAmount by lazy { data?.properties?.mask_child }
private val phone by lazy { data?.properties?.phone }
private val address by lazy { data?.properties?.address }
private lateinit var binding: ActivityPharmacyDetailBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// setContentView(R.layout.activity_pharmacy_detail)
binding = ActivityPharmacyDetailBinding.inflate(layoutInflater)
setContentView(binding.root)
initView()
}
private fun initView() {
binding.tvName.text = name ?: "资料发生错误"
binding.tvAdultAmount.text = maskAdultAmount.toString()
binding.tvChildAmount.text = maskChildAmount.toString()
binding.tvPhone.text = phone
binding.tvAddress.text = address
}
}
HKT 线上教室
https://tw-hkt.blogspot.com/
Freepik
https://www.freepik.com/
那今天【iThome 铁人赛】就介绍到这边罗~
顺带一提,KT 线上教室,脸书粉丝团,会不定期发布相关资讯,不想错过最新资讯,不要忘记来按赞,追踪喔!也欢迎大家将这篇文章分享给更多人喔。
我们明天再见罗!!!掰掰~
Keyword: Android ViewModel,Coroutine,LiveData,Recy...
wiki 说明页:回归分析 想了解详细的说明,请见wiki或者其他参考资料。 或者也可以直接看下面,...
一般来说,要使用 Tailwind,不管套件也好,Tailwind CLI 也好,除了 Tailwi...
昨天讲了安装 Cucumber 以及基本语法今天我会拿一些范例来看看是如何写的! 基本上每一句语句都...
编写自定义的平台相关程序码(插件在不同平台的功能实作) Flutter 允许调用相关平台的API,无...