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

เราขอแนะนำให้ใช้ 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>

หมายเหตุ: หากมีไฟล์ XML สำหรับรายการในเมนูอยู่แล้ว คุณจะเพิ่มได้ องค์ประกอบ <item> ลงในไฟล์นั้นแทน

ถ้าคุณต้องการไอคอนค้นหา ที่เข้าถึงได้ง่ายมากขึ้น 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() วิธีการทำกิจกรรมของคุณ

Kotlin

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

    return true
}

การเรียกใช้แอปจะสร้างข้อมูลต่อไปนี้

วันที่

รูปที่ 1 ไอคอนค้นหาในแถบด้านบนของแอป

สัญลักษณ์ SearchView ปรากฏในแถบแอปของแอป แต่ไม่ปรากฏ ใช้งานได้จริง หากแตะไอคอนค้นหา คุณจะเห็นดังนี้

วันที่

รูปที่ 2 SearchView กำลังทำงาน

หากต้องการให้ SearchView ทำงานได้ คุณต้องกำหนดวิธีที่ฟังก์ชัน SearchView ทำงาน

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

การค้นหา การกำหนดค่าจะระบุลักษณะการทำงานของ SearchView กำหนดไว้ในไฟล์ res/xml/searchable.xml การกำหนดค่าการค้นหา ต้องมีแอตทริบิวต์ android:label อย่างน้อย 1 รายการที่มีแอตทริบิวต์ ค่าเดียวกับแอตทริบิวต์ android:label ของ <แอปพลิเคชัน> หรือ <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):

Kotlin

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 จากนั้นจึงต้องมีกิจกรรมที่สามารถกรองความตั้งใจนี้และจัดการ คำค้นหา

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

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

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

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

หมายเหตุ: หากกิจกรรมที่ค้นหาได้เปิดขึ้นในรายการเดี่ยว โหมดandroid:launchMode="singleTop"ยังจัดการ ACTION_SEARCH Intent ของ onNewIntent() ในโหมดตำแหน่งบนสุดแบบเดี่ยว ระบบจะสร้างกิจกรรมเพียง 1 อินสแตนซ์เท่านั้น การเรียกครั้งต่อๆ ไปเพื่อเริ่มกิจกรรมจะไม่สร้างกิจกรรมใหม่บน สแต็ก การเปิดตัวนี้ช่วยให้ผู้ใช้ค้นหาจากกิจกรรมเดียวกันได้โดยไม่ต้อง สร้างอินสแตนซ์กิจกรรมใหม่ทุกครั้ง

Kotlin

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 สามารถยอมรับข้อความค้นหาของผู้ใช้และเริ่ม กิจกรรมที่ค้นหาได้ที่มี Intent ACTION_SEARCH

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