【day12】InvitationDetailFragment
今天我们要做的是邀约详细资讯! 继昨天我们完成Recyclerview之後，我们今天要让我们使用者可以点进去，因为我们每笔邀约的资料都很多，如果要塞在RecyclerView的话，这样会太丑!
1.得到点击对应的Invitation
我们现在可以透过Adapter的onBindViewHolder来拿到我们现在点击的position，进而得到我们的Invitation，所以我们现在要做的就是直接把我们得到的Invitationt传进ViewModel!
在onBindViewHolder新增
holder.itemView.setOnClickListener{
fragment.addSelectedInvitationToViewModel(model)
}
我们用itemView的话，就是代表整个Item，如果想要item里面的某个view，则可以再点下去，如上次的垃圾桶
holder.binding.ivHomeInvitationItemListDelete.setOnClickListener{
fragment.setAndShowDeleteDialog(model.id)
}
2.传入LiveData
来到HomeFragment
fun addSelectedInvitationToViewModel(invitation: Invitation){
//传入viewModel
matchingViewModel.addSelectedInvitationToLiveData(invitation)
//导航至Detail页面
nav.navigate(R.id.action_navigation_home_to_invitationDetailFragment)
}
我们会看到一些红字，但是没关系! 我们先解决viewModel的部分!
来到viewModel，新增以下
//新增livedata，让我们在xml可以观察
private val _selectedInvitation = MutableLiveData<Invitation>()
val selectedInvitation: LiveData<Invitation>
get() = _selectedInvitation
//把从fragment来的资料传入livedata
fun addSelectedInvitationToLiveData(invitation: Invitation){
_selectedInvitation.postValue(invitation)
}
3.建立InvitationDetailFragment
好的! 我们首先就是一样需要把 databinding设定好
再过来设定观察
//再上面宣告
private val matchingViewModel: MatchingViewModel by sharedViewModel()
//onCreateView 新增观察(我们这边只观察图片，其他的资料我们在xml绑定)
matchingViewModel.selectedInvitation.observe(viewLifecycleOwner, Observer {
Constant.loadPetImage(it.pet_image,binding.ivInvitationDetailImage)
})
★ 图片绑定跟Recyclerview的绑定除了在UI写观测之外，也可以透过BindingAdapter来
实现，有兴趣的小夥伴可以去查一下关键字
来建立layou
dimen
<dimen name="detail_tv_margin_top">8dp</dimen>
string
<string name="toolbar_title_invitation_detail">邀约内容</string>
<string name="chat">聊天</string>
<string name="pet_type">宠物种类</string>
<string name="pet_type_description">宠物品种</string>
<string name="date_area">邀约地区</string>
<string name="date_place">邀约地点</string>
<string name="date_time">邀约时间</string>
<string name="date_note">注意事项</string>
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto">
//在这边设定databinding
<data>
<variable
name="viewModel"
type="com.example.petsmatchingapp.viewmodel.MatchingViewModel" />
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ui.fragment.InvitationDetailFragment">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar_invitation_detail_fragment"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/light_pewter_blue"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="@string/toolbar_title_invitation_detail"
android:textColor="@color/white"
android:textSize="@dimen/toolbar_textSize"
android:textStyle="bold">
</TextView>
</androidx.appcompat.widget.Toolbar>
<ImageView
android:id="@+id/iv_invitation_detail_image"
android:layout_width="match_parent"
android:scaleType="center"
android:layout_height="@dimen/image_height"
app:layout_constraintTop_toBottomOf="@id/toolbar_invitation_detail_fragment"
app:layout_constraintStart_toStartOf="parent">
</ImageView>
<ScrollView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
app:layout_constraintBottom_toTopOf="@id/btn_invitation_detail_submit"
app:layout_constraintTop_toBottomOf="@id/iv_invitation_detail_image"
app:layout_constraintVertical_bias="1.0"
tools:layout_editor_absoluteX="0dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/tip_margin_start_end"
android:layout_marginEnd="@dimen/tip_margin_start_end"
android:orientation="vertical">
<com.example.petsmatchingapp.utils.JFTextView
android:id="@+id/tv_invitation_detail_title_pet_type"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/pet_type"
android:textSize="@dimen/edText_textSize"
android:textStyle="bold">
</com.example.petsmatchingapp.utils.JFTextView>
<com.example.petsmatchingapp.utils.JFTextView
android:id="@+id/tv_invitation_detail_pet_type"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/item_value_text_color"
android:textSize="@dimen/edText_textSize"
android:text="@{viewModel.selectedInvitation.pet_type}"
android:textStyle="bold"
tools:text="狗">
</com.example.petsmatchingapp.utils.JFTextView>
<com.example.petsmatchingapp.utils.JFTextView
android:id="@+id/tv_invitation_detail_title_pet_type_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/detail_tv_margin_top"
android:text="@string/pet_type_description"
android:textSize="@dimen/edText_textSize"
android:textStyle="bold"
tools:text="宠物品种">
</com.example.petsmatchingapp.utils.JFTextView>
<com.example.petsmatchingapp.utils.JFTextView
android:id="@+id/tv_invitation_detail_pet_type_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/item_value_text_color"
android:textSize="@dimen/edText_textSize"
android:textStyle="bold"
android:text="@{viewModel.selectedInvitation.pet_type_description}"
tools:text="狗">
</com.example.petsmatchingapp.utils.JFTextView>
<com.example.petsmatchingapp.utils.JFTextView
android:id="@+id/tv_invitation_detail_title_area"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/detail_tv_margin_top"
android:text="@string/date_area"
android:textSize="@dimen/edText_textSize"
android:textStyle="bold"
tools:text="邀约地区">
</com.example.petsmatchingapp.utils.JFTextView>
<com.example.petsmatchingapp.utils.JFTextView
android:id="@+id/tv_invitation_detail_area"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/item_value_text_color"
android:textSize="@dimen/edText_textSize"
android:textStyle="bold"
android:text="@{viewModel.selectedInvitation.area}"
tools:text="台南" />
<com.example.petsmatchingapp.utils.JFTextView
android:id="@+id/tv_invitation_detail_title_date_place"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/detail_tv_margin_top"
android:text="@string/date_place"
android:textSize="@dimen/edText_textSize"
android:textStyle="bold"
tools:text="邀约地点">
</com.example.petsmatchingapp.utils.JFTextView>
<com.example.petsmatchingapp.utils.JFTextView
android:id="@+id/tv_invitation_detail_date_place"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/item_value_text_color"
android:textSize="@dimen/edText_textSize"
android:textStyle="bold"
android:text="@{viewModel.selectedInvitation.date_place}"
tools:text="台南国家公园" />
<com.example.petsmatchingapp.utils.JFTextView
android:id="@+id/tv_invitation_detail_title_date_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/detail_tv_margin_top"
android:text="@string/date_time"
android:textSize="@dimen/edText_textSize"
android:textStyle="bold"
tools:text="邀约时间">
</com.example.petsmatchingapp.utils.JFTextView>
<com.example.petsmatchingapp.utils.JFTextView
android:id="@+id/tv_invitation_detail_date_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/item_value_text_color"
android:textSize="@dimen/edText_textSize"
android:textStyle="bold"
android:text="@{viewModel.selectedInvitation.date_time}"
tools:text="2021/11/07" />
<com.example.petsmatchingapp.utils.JFTextView
android:id="@+id/tv_invitation_detail_title_note"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/detail_tv_margin_top"
android:text="@string/date_note"
android:textSize="@dimen/edText_textSize"
android:textStyle="bold"
tools:text="注意事项">
</com.example.petsmatchingapp.utils.JFTextView>
<com.example.petsmatchingapp.utils.JFTextView
android:id="@+id/tv_invitation_detail_note"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@color/item_value_text_color"
android:textSize="@dimen/edText_textSize"
android:textStyle="bold"
android:text="@{viewModel.selectedInvitation.note}"
tools:text="一堆" />
</LinearLayout>
</ScrollView>
<com.example.petsmatchingapp.utils.JFButton
android:id="@+id/btn_invitation_detail_submit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:layout_marginBottom="20dp"
android:layout_marginStart="@dimen/tip_margin_start_end"
android:layout_marginEnd="@dimen/tip_margin_start_end"
android:background="@drawable/button_background"
android:foreground="?attr/selectableItemBackground"
android:textColor="@color/white"
android:text="@string/chat"/>
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
设定完之後，我们也要在InvitationDetailFragment绑定viewModel喔，不然观测不到
//直接在onCreateView新增，其中 viewModel就是我们在xml，data里面的variable里面的name
binding.viewModel = matchingViewModel
也要记得在我们的mobile_navigation.xml来新增建立好的InvitationDetailFragment跟连连看喔，这样我们才可以透过navigation来进行跳转Fragment!
最後就是来删除 ActionBar跟BottomNavigation以及新增返回键
//新增并在onCreateView呼叫
private fun dismissActivityActionBarAndBottomNavigationView(){
val activityInstance = this.activity as MatchingActivity
activityInstance.supportActionBar?.hide()
activityInstance.findViewById<BottomNavigationView>(R.id.nav_view).visibility = View.GONE
}
新增返回键
binding.toolbarInvitationDetailFragment.setNavigationIcon(R.drawable.ic_baseline_arrow_back_24)
binding.toolbarInvitationDetailFragment.setNavigationOnClickListener {
requireActivity().onBackPressed()
}
大功告成啦!!
成果如下!!!
<<: [前端暴龙机，Vue2.x 进化 Vue3 ] Day18.组件练习-分页(一)
>>: [Day 12] tinyML开发框架(一)：TensorFlow Lite Micro初体验(上)
Day 15 再手动安装个 Python3 容器看看
来安装个 Python3 的容器吧~ 虽说日後要搭建一系列的服务，并让开发者可以直观理解，可以使用 ...
前端藏宝图 - 宝藏在哪儿？
前言 第一次参加铁人赛，很单纯的只是将自己学习的内容做整理记录，有很多不周全的地方，谢谢其他铁人们的...
Day08：部门与工程团队间协作的技巧(下)
一、前言 承上一篇的部门与工程团队间协作的技巧(上)已有稍微提到一些工程师间的协作软件工具，那如...
Day02网页设计的三巨头!
网页设计的三巨头 为什麽会说三巨头呢 因为要做好一个网页最重要的就是HTML, CSS, JavaS...
D19 - 如何用 Apps Script 自动化地创造与客制 Google Docs？（六）更改特定内容格式的 Attribute 操作技巧
今天的目标 要怎麽抓出文件中的特定文字或段落，直接改字体的大小、颜色、背景、粗细与字型？先来看今天的...