در مطالب قبلی در باب Recyclerview سخن کردیم و نکاتی را درباره ی ادغام آن با Cardview و افزودن Swipe برای توابع حذف و غیره اشاره کردیم. درین نوشته‌ی‌علمی قصد داریم شیوه ی افزودن قابلیت و امکان غربال کاوش به recyclerview را یادگرفتن دهیم. ایجاد کاوش در اندروید فعالیت بسیار بی آلایش ای میباشد و از ویجت نوار ابزار کاوش برای ورود متن کاوش به کار گیری می شود. برای نشان دادن این زمینه، یک نمونه با لیست تماس و کاوش بر طبق اسم و شماره تماس را ارائه خوا هیم بخشید.
دانلود پروژه
()RecyclerView Search Filter – getFilter
اندروید کلاس های قابل غربال شدن برای غربال کردن اطلاعات با استعمال از یک غربال یا این که شرط را مهیا میکند. معمولا متد getfilter() ناچار میباشد در کلاس آداپتور که شرط غربال کردن برای کاوش در آن قراردارد، اصطلاحا override شود. در قطعه کد پایین یک نمونه از متد getfilter() اکران داده گردیده که یک مخاطب را بر طبق اسم و شماره تماس از لیست مخاطبان کاوش مینماید.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
@Override
public Filter getFilter() {
return new Filter() {
@Override
protected FilterResults performFiltering(CharSequence charSequence) {
String charString = charSequence.toString();
if (charString.isEmpty()) {
contactListFiltered = contactList;
} else {
List filteredList = new ArrayList<>();
for (Contact row : contactList) {
// name match condition. this might differ depending on your requirement
// here we are looking for name or phone number match
if (row.getName().toLowerCase().contains(charString.toLowerCase()) || row.getPhone().contains(charSequence)) {
filteredList.add(row);
}
}
contactListFiltered = filteredList;
}
FilterResults filterResults = new FilterResults();
filterResults.values = contactListFiltered;
return filterResults;
}
@Override
protected void publishResults(CharSequence charSequence, FilterResults filterResults) {
contactListFiltered = (ArrayList) filterResults.values;
// refresh the list with filtered data
notifyDataSetChanged();
}
};
}
نمونه json
برای این نمونه ایجاد کاوش در اندروید ، قصد داریم تا از json که لینک و پیوند آن را قرار داده ایم، استعمال کنیم. این جیسون دربرگیرنده لیستی از مخاطبین میباشد که هر مخاطب اسم، شماره تلفن و تصویر پروفایل داراست.
https://acdev.ir/wp-content/uploads/2019/01/json/contacts.json
1
2
3
4
5
6
7
8
9
10
11
[{
"name": "Tom Hardy",
"image": "https://api.androidhive.info/json/images/tom_hardy.jpg",
"phone": "(541) 754-3010"
},
{
"name": "Johnny Depp",
"image": "https://api.androidhive.info/json/images/johnny.jpg",
"phone": "(452) 839-1210"
}
]
ساخت پروژه ی نو
برای آغاز فعالیت بایستی یک پروژه در اندروید استودیو ساخت نمایید و مشاهده کنید که از کاوش خروجی مناسب اخذ کنید.
1- یک پروژه ی نو در اندروید استودیو از مسیر file/new project تولید و basic activity را از الگوها گزینش فرمائید.
2- build.gradle را در پایین فایل app گشوده نمائید و تعلق های Recyclerview، Glide و Volley را بیشتر فرمایید.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
build.gradle
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
// ...
// recycler view
implementation 'com.android.support:recyclerview-v7:26.1.0'
// glide image library
implementation 'com.github.bumptech.glide:glide:4.3.1'
// volley http library
implementation 'com.android.volley:volley:1.0.0'
implementation 'com.google.code.gson:gson:2.6.2'
}
3- منابع تحت را به فولدر های string.xml، dimens.xml و colors.xml بیشتر فرمایید.
1
2
3
4
5
6
7
8
strings.xml
RecyclerView Search
Settings
Contacts
Search
Type name…
1
2
3
4
5
6
7
8
9
dimens.xml
16dp
16dp
40dp
10dp
15dp
12dp
1
2
3
4
5
6
7
8
9
colors.xml
#111
#FFF
#ea3732
#333333
#8c8c8c
4- فولدر res.zip را دانلود و آیکون های موردنیاز برای کاوش که درین پوشه قرار دارا‌هستند را به پروژه بیشتر کنید.
5- یک کلاس به اسم MyApplication.java را تولید و کلاس را از Application توسعه و گسترش دهید. این کلاس در volley مقداردهی نخستین میشود.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
MyApplication.java
package info.androidhive.recyclerviewsearch;
/**
* Created by ravi on 16/11/17.
*/
import android.app.Application;
import android.text.TextUtils;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.toolbox.Volley;
public class MyApplication extends Application {
public static final String TAG = MyApplication.class
.getSimpleName();
private RequestQueue mRequestQueue;
private static MyApplication mInstance;
@Override
public void onCreate() {
super.onCreate();
mInstance = this;
}
public static synchronized MyApplication getInstance() {
return mInstance;
}
public RequestQueue getRequestQueue() {
if (mRequestQueue == null) {
mRequestQueue = Volley.newRequestQueue(getApplicationContext());
}
return mRequestQueue;
}
public void addToRequestQueue(Request req, String tag) {
// set the default tag if tag is empty
req.setTag(TextUtils.isEmpty(tag) ? TAG : tag);
getRequestQueue().add(req);
}
public void addToRequestQueue(Request req) {
req.setTag(TAG);
getRequestQueue().add(req);
}
public void cancelPendingRequests(Object tag) {
if (mRequestQueue != null) {
mRequestQueue.cancelAll(tag);
}
}
}
6- AndroidManifest.xml را گشوده فرمایید و Myapplication را به تگ طولانی تر فرمائید. علاوه براین، جواز Intertnet را برای فراخوانی http بیشتر فرمائید.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
AndroidManifest.xml
7- در‌این مرحله نیاز داریم تا جیسون نظارت خوانده شود و به یک کلاس pojo برای تروتمیز کردن جیسون نیاز داریم. یک کلاس به اسم Contact.java ساخت و name، image و phone number را بیش تر نمائید.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
Contact.java
package info.androidhive.recyclerviewsearch;
/**
* Created by ravi on 16/11/17.
*/
public class Contact {
String name;
String image;
String phone;
public Contact() {
}
public String getName() {
return name;
}
public String getImage() {
return image;
}
public String getPhone() {
return phone;
}
}
8- یک کلاس به اسم MyDividerItemDecoration.java را تولید فرمایید. این قدم به طور کامل ازروی اراده بوده ولی برای افزودن کناره ی طولانی تر به RecyclerView divider میباشد. این یک کلاس تقسیم کننده ی ازروی اختیار برای افزودن لبه ی چپ به خط تقسیم است.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
package info.androidhive.recyclerviewsearch;
import android.content.Context;
import android.content.res.Resources;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.PorterDuff;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.util.TypedValue;
import android.view.View;
/**
* Created by ravi on 17/11/17.
*/
public class MyDividerItemDecoration extends RecyclerView.ItemDecoration {
private static final int[] ATTRS = new int[]{
android.R.attr.listDivider
};
public static final int HORIZONTAL_LIST = LinearLayoutManager.HORIZONTAL;
public static final int VERTICAL_LIST = LinearLayoutManager.VERTICAL;
private Drawable mDivider;
private int mOrientation;
private Context context;
private int margin;
public MyDividerItemDecoration(Context context, int orientation, int margin) {
this.context = context;
this.margin = margin;
final TypedArray a = context.obtainStyledAttributes(ATTRS);
mDivider = a.getDrawable(0);
a.recycle();
setOrientation(orientation);
}
public void setOrientation(int orientation) {
if (orientation != HORIZONTAL_LIST && orientation != VERTICAL_LIST) {
throw new IllegalArgumentException("invalid orientation");
}
mOrientation = orientation;
}
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
if (mOrientation == VERTICAL_LIST) {
drawVertical(c, parent);
} else {
drawHorizontal(c, parent);
}
}
public void drawVertical(Canvas c, RecyclerView parent) {
final int left = parent.getPaddingLeft();
final int right = parent.getWidth() - parent.getPaddingRight();
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int top = child.getBottom() + params.bottomMargin;
final int bottom = top + mDivider.getIntrinsicHeight();
mDivider.setBounds(left + dpToPx(margin), top, right, bottom);
mDivider.draw(c);
}
}
public void drawHorizontal(Canvas c, RecyclerView parent) {
final int top = parent.getPaddingTop();
final int bottom = parent.getHeight() - parent.getPaddingBottom();
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
final int left = child.getRight() + params.rightMargin;
final int right = left + mDivider.getIntrinsicHeight();
mDivider.setBounds(left, top + dpToPx(margin), right, bottom - dpToPx(margin));
mDivider.draw(c);
}
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
if (mOrientation == VERTICAL_LIST) {
outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
} else {
outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
}
}
private int dpToPx(int dp) {
Resources r = context.getResources();
return Math.round(TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, r.getDisplayMetrics()));
}
}
تایپ کردن کلاس آداپتور با غربال
تا این مرحله منابع مهیا میباشند و می بایست کلاس آداپتور را بنویسید. تایپ کردن این کلاس، بخش اصلی فعالیت در‌این نوشته‌علمی هست، در فیض می بایست تمرکز بیشتری روی آن داشته باشید.
9- یک لایه به اسم user_row_item.xml ساخت و لایه ی تحت را بیش تر نمائید. این لایه گزینه مخاطب در لیست را تحت عنوان خروجی ارائه میدهد. این لایه مشتمل بر دو textview برای ارائه ی name، phone number و یک imageview برای اکران تصویر پروفایل هست.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
user_row_item.xml
10- یک کلاس به اسم ContactsAdapter.java تولید و آن را از کلاسFilterable به طور implement پیاده سازی نمایید تا از شما منظور شود تا متد getfilter() را override نمایید.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
ContactsAdapter.java
package info.androidhive.recyclerviewsearch;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Filter;
import android.widget.Filterable;
import android.widget.ImageView;
import android.widget.TextView;
import com.bumptech.glide.Glide;
import com.bumptech.glide.request.RequestOptions;
import java.util.ArrayList;
import java.util.List;
/**
* Created by ravi on 16/11/17.
*/
public class ContactsAdapter extends RecyclerView.Adapter
implements Filterable {
private Context context;
private List contactList;
private List contactListFiltered;
private ContactsAdapterListener listener;
public class MyViewHolder extends RecyclerView.ViewHolder {
public TextView name, phone;
public ImageView thumbnail;
public MyViewHolder(View view) {
super(view);
name = view.findViewById(R.id.name);
phone = view.findViewById(R.id.phone);
thumbnail = view.findViewById(R.id.thumbnail);
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// send selected contact in callback
listener.onContactSelected(contactListFiltered.get(getAdapterPosition()));
}
});
}
}
public ContactsAdapter(Context context, List contactList, ContactsAdapterListener listener) {
this.context = context;
this.listener = listener;
this.contactList = contactList;
this.contactListFiltered = contactList;
}
@Override
public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View itemView = LayoutInflater.from(parent.getContext())
.inflate(R.layout.user_row_item, parent, false);
return new MyViewHolder(itemView);
}
@Override
public void onBindViewHolder(MyViewHolder holder, final int position) {
final Contact contact = contactListFiltered.get(position);
holder.name.setText(contact.getName());
holder.phone.setText(contact.getPhone());
Glide.with(context)
.load(contact.getImage())
.apply(RequestOptions.circleCropTransform())
.into(holder.thumbnail);
}
@Override
public int getItemCount() {
return contactListFiltered.size();
}
@Override
public Filter getFilter() {
return new Filter() {
@Override
protected FilterResults performFiltering(CharSequence charSequence) {
String charString = charSequence.toString();
if (charString.isEmpty()) {
contactListFiltered = contactList;
} else {
List filteredList = new ArrayList<>();
for (Contact row : contactList) {
// name match condition. this might differ depending on your requirement
// here we are looking for name or phone number match
if (row.getName().toLowerCase().contains(charString.toLowerCase()) || row.getPhone().contains(charSequence)) {
filteredList.add(row);
}
}
contactListFiltered = filteredList;
}
FilterResults filterResults = new FilterResults();
filterResults.values = contactListFiltered;
return filterResults;
}
@Override
protected void publishResults(CharSequence charSequence, FilterResults filterResults) {
contactListFiltered = (ArrayList) filterResults.values;
notifyDataSetChanged();
}
};
}
public interface ContactsAdapterListener {
void onContactSelected(Contact contact);
}
}
در متد getfilter()، فن ی کاوش برای متد performfiltering() ارسال میگردد. کاوش برای یک مخاطب با اسم، شماره تلفن با فن ی کاوش ارائه میشود.
شما بایستی وضعیت کاوش را متناسب با منابع برنامه تان تهیه و تنظیم فرمایید.
رابط contactsadapterlistner() متد فراخوانی oncontactselected() را هر دوره که یک مخاطب از لیست تعیین شود، مهیا خواهد کرد.
افزودن ویجت کاوش و لیست غربال کردن
درین مرحله نیاز داریم تا Searchview را در نوار ابزار فعال کنیم و از Recyclerview با یاری بررسی و قرائت جیسون و انتقال متن کاوش به آداپتور خروجی بگیریم.
11- menu_main.xml را ساخت یا این که گشوده فرمایید که ذیل res/meun قرار گرفته و ویجت searchview را بیشتر و آنرا برای مدام قابل اکران قرار دهید.
1
2
3
4
5
6
7
8
9
10
11
12
13
menu_main.xml
12- ذیل پوشه res/xml ، یک فولدر xml به اسم searchable.xml ساخت فرمائید (در حالتی‌که این فولدر از قبلی نیست آنرا تولید نمائید)
1
2
3
4
5
searchable.xml
13- AndroidManifest.xml و configure the search را مانند پایین گشوده فرمائید.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
AndroidManifest.xml
14- پوشه های لایه را از main activity گشوده فرمائید که دربرگیرنده activity_main.xml و content_main.xml هست و اجزای recyclerview را طولانی تر فرمایید.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
content_main.xml
15- در غایت mainactivity.java را گشوده و کد های نشان داده گردیده در تحت را بیش تر نمایید.
در متد fetchcontacts() یک volley برای خارج کشیدن جیسون درخواست می نماید. خارج کشیدن یا این که fetch کردن جیسون با امداد Gson به طور آراسته صورت گرفته و تمام مخاطبین به یک لیست طولانی تر می گردند. فراخونی mAdapter.notifyDataSetChanged() سبب میگردد تا از recyclerview خروجی گرفته شود.
در onCreateOptionsMenu() منو inflate گردیده و searchview نمایش داده می شود.
searchView.setOnQueryTextListener() به تغییر‌و تحول کاراکترها در طول تایپ کردن در فیلد کاوش گوش میدهد. متن وارداتی برای کاوش تجزیه و آنالیز گردیده و با یاری mAdapter.getFilter().filter(query) به کلاس آداپتور ارسال می شود و آن گاه recyclerview با داده های غربال گردیده ی تازه بروز رسانی میگردد.
onContactSelected() زمانیکه یک مخاطب از لیست گزینش شود، فراخوانی خواهد شد.
برچسب ها:
طراحي اپليكيشن فروشگاهي در مشهد ,
[ بازدید : 22 ]