ตั้งค่าอินเทอร์เฟซการค้นหา

ลองใช้วิธีแบบ Compose

Jetpack Compose เป็นชุดเครื่องมือ UI ที่แนะนำสำหรับ Android ดูวิธีเพิ่มฟังก์ชันการค้นหาใน Compose

กรองรายการ →

เราขอแนะนำให้ใช้ SearchView วิดเจ็ตเป็นรายการในแถบแอปเพื่อมอบฟังก์ชันการค้นหาในแอปของคุณ เช่นเดียวกับ รายการทั้งหมดในแถบแอป คุณสามารถกำหนด SearchView ให้ แสดงตลอดเวลาหรือเฉพาะเมื่อมีพื้นที่ นอกจากนี้ คุณยังกำหนดให้เป็น การดำเนินการที่ยุบได้ ซึ่งจะแสดง SearchView เป็นไอคอน ในตอนแรก แล้วจึงใช้พื้นที่แถบแอปทั้งหมดเป็นช่องค้นหาเมื่อผู้ใช้ แตะไอคอน

เพิ่ม SearchView ลงในแถบแอป

หากต้องการเพิ่มวิดเจ็ต SearchView ลงในแถบแอป ให้สร้างไฟล์ในโปรเจ็กต์ชื่อ res/menu/options_menu.xml แล้วเพิ่มโค้ดต่อไปนี้ลงในไฟล์ โค้ดนี้กำหนดวิธีสร้างรายการค้นหา เช่น ไอคอน ที่จะใช้และชื่อของรายการ แอตทริบิวต์ collapseActionView ช่วยให้ SearchView ขยายเพื่อใช้พื้นที่แถบแอปทั้งหมดและ ยุบกลับลงมาเป็นรายการแถบแอปปกติเมื่อไม่ได้ใช้งาน เนื่องจากพื้นที่แถบแอปในอุปกรณ์โทรศัพท์มือถือมีจำกัด เราจึงขอแนะนำให้ใช้แอตทริบิวต์ collapsibleActionView เพื่อมอบประสบการณ์การใช้งานที่ดีขึ้นแก่ผู้ใช้

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/search"
        android:title="@string/search_title"
        android:icon="@drawable/ic_search"
        android:showAsAction="collapseActionView|ifRoom"
        android:actionViewClass="androidx.appcompat.widget.SearchView" />
</menu>

หากต้องการไอคอนค้นหาที่เข้าถึงได้ง่ายขึ้น ให้สร้างไฟล์ ic_search.xml ในโฟลเดอร์ /res/drawable แล้ว ใส่โค้ดต่อไปนี้ลงในไฟล์

<vector
    android:height="24dp"
    android:tint="#000000"
    android:viewportHeight="24"
    android:viewportWidth="24"
    android:width="24dp"
    xmlns:android="http://schemas.android.com/apk/res/android">
        <path android:fillColor="@android:color/white" android:pathData="M15.5,14h-0.79l-0.28,-0.27C15.41,12.59 16,11.11 16,9.5 16,5.91 13.09,3 9.5,3S3,5.91 3,9.5 5.91,16 9.5,16c1.61,0 3.09,-0.59 4.23,-1.57l0.27,0.28v0.79l5,4.99L20.49,19l-4.99,-5zM9.5,14C7.01,14 5,11.99 5,9.5S7.01,5 9.5,5 14,7.01 14,9.5 11.99,14 9.5,14z"/>
</vector>

หากต้องการแสดง SearchView ในแถบแอป ให้ขยายเมนู XML ทรัพยากร res/menu/options_menu.xml ในเมธอด onCreateOptionsMenu() ของกิจกรรม

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    menuInflater.inflate(R.menu.options_menu, menu)

    return true
}

การเรียกใช้แอปจะสร้างผลลัพธ์คล้ายกับตัวอย่างต่อไปนี้

SearchView ปรากฏในแถบแอปของแอป แต่ไม่ทำงาน หากแตะไอคอนค้นหา คุณจะเห็นผลการค้นหาคล้ายกับตัวอย่างต่อไปนี้

หากต้องการให้ SearchView ทำงานได้ คุณต้องกำหนดลักษณะการทำงานของ SearchView

สร้างการกำหนดค่าการค้นหา

การกำหนดค่า การค้นหาจะระบุลักษณะการทำงานของ SearchView และกำหนดไว้ในไฟล์ res/xml/searchable.xml การกำหนดค่าการค้นหา ต้องมีแอตทริบิวต์ android:label อย่างน้อย 1 รายการที่มีค่า เดียวกับแอตทริบิวต์ android:label ของ <application> หรือองค์ประกอบ <activity> ในไฟล์ Manifest ของ Android อย่างไรก็ตาม เราขอแนะนำให้เพิ่มแอตทริบิวต์ android:hint เพื่อให้ผู้ใช้ทราบว่าควรป้อนอะไรลงในช่องค้นหา

<?xml version="1.0" encoding="utf-8"?>

<searchable xmlns:android="http://schemas.android.com/apk/res/android"
        android:label="@string/app_name"
        android:hint="@string/search_hint" />

ในไฟล์ Manifest ของแอป ให้ประกาศองค์ประกอบ <meta-data> ที่ชี้ไปยังไฟล์ res/xml/searchable.xml ประกาศ องค์ประกอบใน <activity> ที่คุณต้องการแสดง SearchView

<activity
android:name=".SearchResultsActivity"
android:exported="false"
android:label="@string/title_activity_search_results"
android:launchMode="singleTop"
android:theme="@style/Theme.AppCompat.Light">
    <intent-filter>
        <action android:name="android.intent.action.SEARCH" />
    </intent-filter>
    <meta-data
        android:name="android.app.searchable"
        android:resource="@xml/searchable" />
</activity>

ในonCreateOptionsMenu()วิธีที่คุณสร้าง ให้เชื่อมโยง การกำหนดค่าการค้นหากับSearchViewโดยเรียกใช้ setSearchableInfo(SearchableInfo):

override fun onCreateOptionsMenu(menu: Menu): Boolean {
    menuInflater.inflate(R.menu.options_menu, menu)

    val searchManager = getSystemService(Context.SEARCH_SERVICE) as SearchManager
    val searchView = menu.findItem(R.id.search).actionView as SearchView
    val component = ComponentName(this, SearchResultsActivity::class.java)
    val searchableInfo = searchManager.getSearchableInfo(component)
    searchView.setSearchableInfo(searchableInfo)
    return true
}

การเรียกไปยัง getSearchableInfo() จะรับออบเจ็กต์ SearchableInfo ที่สร้างจากไฟล์ XML การกำหนดค่าการค้นหา เมื่อเชื่อมโยงการกำหนดค่าการค้นหากับ SearchView อย่างถูกต้องและผู้ใช้ส่งคำค้นหา SearchView จะเริ่มกิจกรรมด้วยเจตนา ACTION_SEARCH จากนั้นคุณต้องมีกิจกรรมที่สามารถกรอง Intent นี้และจัดการคำค้นหา ได้

สร้างกิจกรรมที่ค้นหาได้

ตัวกรองกิจกรรมที่ค้นหาได้สำหรับACTION_SEARCHเจตนาและ ค้นหาคําค้นหาในชุดข้อมูล หากต้องการสร้างกิจกรรมที่ค้นหาได้ ให้ประกาศ กิจกรรมที่คุณเลือกเพื่อกรองACTION_SEARCH Intent ดังนี้

<activity android:name=".SearchResultsActivity" ... >
    ...
    <intent-filter>
        <action android:name="android.intent.action.SEARCH" />
    </intent-filter>
    ...
</activity>

ในกิจกรรมที่ค้นหาได้ ให้จัดการเจตนา ACTION_SEARCH โดย ตรวจสอบในเมธอด onCreate()

class SearchResultsActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_search_results)
        handleIntent(intent)
    }

    override fun onNewIntent(intent: Intent) {
        super.onNewIntent(intent)
        handleIntent(intent)
    }

    private fun handleIntent(intent: Intent) {
        if (Intent.ACTION_SEARCH == intent.action) {
            val query = intent.getStringExtra(SearchManager.QUERY)
            Log.d("SEARCH", "Search query was: $query")
        }
    }
}

ตอนนี้ SearchView สามารถยอมรับคำค้นหาของผู้ใช้และเริ่มกิจกรรมที่ค้นหาได้ด้วยเจตนา ACTION_SEARCH

หลังจากได้รับคำค้นหาแล้ว คุณจะส่งคำค้นหาไปยัง ViewModelได้ ซึ่งคุณจะใช้คำค้นหาในเลเยอร์อื่นๆ ของสถาปัตยกรรมเพื่อดึงผลการค้นหามาแสดงได้