آشنایی با نحوه جستجو و های لایت متن در اندروید
بسیاری از اپلیکیشن ها فیلدی را در اختیار کاربر قرار می دهند که از طریق آن می تواند کلیدواژه ای را در بخش های خاصی از اپلیکیشن جستجو کند، برای اینکه یافتن بخش موردنظر آسان تر شود، نتایج پیدا شده به صورت های لایت شده به کاربر نمایش داده می شوند و در این مطلب قصد داریم به نحوه های لایت کردن متن بر اساس کلیدواژه جستجو شده کاربر بپردازیم، با ما همراه باشید.
برای این کار از SnappableString استفاده شده است.
اول از همه باید یک لی اوت ساده با یک EditText و TextView بسازید. در زیر کد XML موردنظر برای این کار را مشاهده می کنید.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical"
tools:context="app.com.thetechnocafe.tutorials.HighlightTextActivity">
<EditText
android:id="@+id/search_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:hint="Search" />
<TextView
android:id="@+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:text="@string/long_text" />
</LinearLayout>
با اجرای اپلیکیشن باید چیزی مشابه تصویر زیر را مشاهده کنید
حال در اکتیویتی به این ویوها رفرنس بدهید
mSearchEditText = (EditText) findViewById(R.id.search_edit_text);
mTextView = (TextView) findViewById(R.id.text_view);
یک TextWatcher به EditText اضافه کنید که بر اساس ایونت تغییر متن فراخوانی می شود. تابعی به نام (highlightString(String s را در onTextChange مربوط به TextWatcher فراخوانی کنید، این تابع کد موردنظر برای های لایت کردن متن را در خود جای داده است.
//Add a TextWatcher to EditText to listen to text change event
mSearchEditText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
highlightString(s.toString());
}
@Override
public void afterTextChanged(Editable s) {
}
});
حال باید به پیاده سازی بخش هیجان انگیز یعنی های لایت کردن متن بپردازیم!
تابع زیر را به اکتیویتی خود اضافه کنید.
private void highlightString(String input) {
//Get the text from text view and create a spannable string
SpannableString spannableString = new SpannableString(mTextView.getText());
//Get the previous spans and remove them
BackgroundColorSpan[] backgroundSpans = spannableString.getSpans(0, spannableString.length(), BackgroundColorSpan.class);
for (BackgroundColorSpan span: backgroundSpans) {
spannableString.removeSpan(span);
}
//Search for all occurrences of the keyword in the string
int indexOfKeyword = spannableString.toString().indexOf(input);
while (indexOfKeyword > 0) {
//Create a background color span on the keyword
spannableString.setSpan(new BackgroundColorSpan(Color.YELLOW), indexOfKeyword, indexOfKeyword + input.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
//Get the next index of the keyword
indexOfKeyword = spannableString.toString().indexOf(input, indexOfKeyword + input.length());
}
//Set the final text on TextView
mTextView.setText(spannableString);
}
حال می خواهیم به جزئیات این کد نگاهی بیندازیم:
- اول از همه ورودی را که در اینجا همان کلیدواژه موردنظر برای های لایت شدن است دریافت می کنیم که در نقش پارامتر تابع ظاهر می شود.
- پس از آن با دریافت متن از TextView یک SnappableString می سازیم.
- در این مرحله لازم است تمامی بخشهای های لایت شده از جستجوی قبلی کاربر را پاک کنید، در غیر این صورت با حجمی از متون های لایت شده مواجه می شوید که شاید کاربر به جستجوی آنها نپرداخته باشد و این شرایط موجب سردرگم شدن او می گردد. برای این کار باید همه اسپن ها از نوع BackgroundColorSpan را گرفته و یک حلقه بر روی آرایه تشکیل دهیم و با فراخوانی تابع removeSpan. از snappableString یکی یکی آنها پاک کنیم.
- در این مرحله با استفاده از (snappableString.toString().indexOf(input اولین ایندکس از کلیدواژه را پیدا می کنیم.
- سپس در داخل حلقه یک اسپن جدید از snappableString از نوع (BackgroundColorSpan(Color.Yellow تعیین می کنیم، آرگیومنت های دوم و سوم مشخص می سازند که این اسپن بر روی چه بخشی از متن باید اعمال شود. آرگیومنت چهارم یک فلگ برای اسپن است.
- حال باید دومین وقوع کلیدواژه را با استفاده از متد indexOf. پیدا کنیم، اما این بار باید پارامتر دو را هم ارسال کنیم تا مشخص شود که جستجو برای کلیدواژه از کجا آغاز شود.
- در آخر باید مقدار spannableString را در TextView قرار دهیم.
- حال با اجرای اپلیکیشن و جستجو برای یک عبارت، تمامی نتایج آن به صورت های لایت شده (رنگ زرد) به نمایش درخواهد آمد.
به این نظر پاسخ دهید
به این نظر پاسخ دهید