TIL) 0919

Hanseul Lee·2022년 9월 20일
0

TIL

목록 보기
12/23
post-custom-banner

SearchView 대신 EditTextView 활용하기

기존 SearchView

binding.searchOnlyRelatedSearchView.setOnQueryTextListener(object : SearchView.OnQueryTextListener, android.widget.SearchView.OnQueryTextListener {
            override fun onQueryTextSubmit(query: String?): Boolean {
                return false
            }

            @SuppressLint("NotifyDataSetChanged")
            override fun onQueryTextChange(newText: String?): Boolean {
                val searchWord = newText!!

                if (searchWord.isNotEmpty()) {
                    relatedWordList.clear()
                    dummyWordList.forEach {
                        if (it.contains(searchWord)) {
                            relatedWordList.add(it)
                        }
                    }

                    binding.searchOnlyRelatedRecyclerView.adapter!!.notifyDataSetChanged()
                } else {
                    relatedWordList.clear()
                    relatedWordList.addAll(dummyWordList)
                    binding.searchOnlyRelatedRecyclerView.adapter!!.notifyDataSetChanged()
                }

                return true
            }

        })

EditTextView

binding.searchOnlySearchBar.addTextChangedListener(object : TextWatcher {
            override fun beforeTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {

            }

            override fun onTextChanged(p0: CharSequence?, p1: Int, p2: Int, p3: Int) {
            }

            override fun afterTextChanged(p0: Editable?) {
                filter(p0.toString())
            }

        })
fun filter(text: String) {
        relatedWordList.clear()
        for (item in dummyWordList) {
            if (item.contains(text)) {
                relatedWordList.add(item)
            }
        }

        // 연관 검색어
        binding.searchOnlyRelatedRecyclerView.layoutManager = LinearLayoutManager(activity, LinearLayoutManager.VERTICAL, true)
        binding.searchOnlyRelatedRecyclerView.setHasFixedSize(true)

        binding.searchOnlyRelatedRecyclerView.adapter = SearchRelatedWordAdapter(relatedWordList)
    }

RecyclerView EditText Search

BottomSheetDailog - material design 활용

Layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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="match_parent"
    android:padding="@dimen/main_padding"
    app:behavior_draggable="true"
    app:behavior_hideable="true"
    app:layout_behavior="com.google.android.material.bottomsheet.BottomSheetBehavior">

   ...

</androidx.constraintlayout.widget.ConstraintLayout>

백그라운드

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <corners
        android:topLeftRadius="20dp"
        android:topRightRadius="20dp" />
</shape>

style

<style name="BottomSheetDialogTheme" parent="Theme.Design.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/AppModalStyle</item>
    </style>

    <style name="AppModalStyle" parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@drawable/custom_product_detail_bottom_sheet</item>
    </style>

theme

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.Coupang" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
				...
        <!-- Customize your theme here. -->
        <item name="bottomSheetDialogTheme">@style/BottomSheetDialogTheme</item>
    </style>

</resources>

fragment

val bottomSheetView = layoutInflater.inflate(R.layout.layout_product_detail_bottom_sheet, null)
        val bottomSheetDialog = BottomSheetDialog(this.requireContext())
        bottomSheetDialog.setContentView(bottomSheetView)

        binding.productDetailFooterBuyingBtn.setOnClickListener {
            bottomSheetDialog.show()
        }

BottomSheetDailog - CoordinatorLayout 활용

fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".src.main.productDetail.ProductDetailFragment">

    ...

    <!-- 바텀 시트 -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/product_detail_buying_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@drawable/custom_product_detail_bottom_sheet"
        android:elevation="20dp"
        android:padding="@dimen/main_padding"
        app:behavior_draggable="true"
        app:behavior_hideable="true"
        app:behavior_peekHeight="0dp"
        app:layout_behavior="@string/bottom_sheet_behavior">

        ...

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

fragment.kt

val bottomSheetBehavior = BottomSheetBehavior.from(binding.productDetailBuyingContainer)

        binding.productDetailFooterBuyingBtn.setOnClickListener {
            bottomSheetBehavior.state = BottomSheetBehavior.STATE_EXPANDED
        }
post-custom-banner

0개의 댓글