معرفی shimmer در برنامه نویسی اندروید
سلام دوستان در این سری از آموزش های برنامه نویسی اندروید به آموزش shimmer در برنامه نویسی اندروید می پردازیم این کتاب خانه توسط facebook منتشر شده است و از سری کتاب خانه های facebook است در ادامه می توانید پیش نمایشی از آن را مشاهده کنید از این کتاب خانه برای نمایش Loading به صورت خاص استفاده می شود با ما همراه باشید.
ابتدا باید کتاب خانه های زیر را به پروژه اضافه کنید.
| 1 2 3 4 5 6 7 8 9 |     // Shimmer     implementation 'com.facebook.shimmer:shimmer:0.1.0@aar'     // RecyclerView     implementation 'com.android.support:recyclerview-v7:26.1.0'     // glide image library     implementation 'com.github.bumptech.glide:glide:3.7.0'     // volley http library     implementation 'com.android.volley:volley:1.0.0'     implementation 'com.google.code.gson:gson:2.6.2' | 
 در بالا از پنج کتاب خانه استفاده شده است shimmer برای لود کردن عکس RecyclerView برای ایجاد List سفارشی glide برای لود کردن عکس volley برای انجام httprequest یا انجام request سمت سرور gson کتاب خانه ای برای پارس راحت تر json
 پروژه را sync کنید قند شکن فراموش نشود .
 در ابتدا وارد فایل colors.xml شده و رنگ های زیر را تعریف کنید.
| 1 2 3 4 5 6 7 8 9 10 | <resources>     <color name="colorPrimary">#d91248</color>     <color name="colorPrimaryDark">#d91248</color>     <color name="colorAccent">#3ad23e</color>     <color name="placeholder_bg">#dddddd</color>     <color name="item_name">#0c0c0c</color>     <color name="description">#1a1a1a</color>     <color name="chef">#777</color>     <color name="timestamp">#777</color> </resources> | 
یک فایل به نام dimens.xml ایجاد کرده (ممکن است از قبل وجود داشته باشد) و کدهای زیر را در آن قرار دهید.
| 1 2 3 4 5 6 7 8 9 10 11 12 | <resources>     <dimen name="activity_padding">16dp</dimen>     <dimen name="placeholder_image">50dp</dimen>     <dimen name="placeholder_text_height">8dp</dimen>     <dimen name="activity_padding_horizontal">16dp</dimen>     <dimen name="padding_10">10dp</dimen>     <dimen name="name">15dp</dimen>     <dimen name="chef">12dp</dimen>     <dimen name="timestamp">11dp</dimen>     <dimen name="description">15dp</dimen>     <dimen name="price">13dp</dimen> </resources> | 
یک فایل به نام recipe_placeholder_item در بخش layout ایجاد کنید و کدهای زیر را در آن قرار دهید
| 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 | <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:padding="@dimen/activity_padding">     <View         android:id="@+id/thumbnail"         android:layout_width="@dimen/placeholder_image"         android:layout_height="@dimen/placeholder_image"         android:layout_marginRight="@dimen/activity_padding"         android:background="@color/placeholder_bg" />     <View         android:id="@+id/name"         android:layout_width="150dp"         android:layout_height="10dp"         android:layout_marginBottom="10dp"         android:layout_toRightOf="@id/thumbnail"         android:background="@color/placeholder_bg" />     <View         android:layout_width="100dp"         android:layout_height="@dimen/placeholder_text_height"         android:layout_below="@id/name"         android:layout_toRightOf="@id/thumbnail"         android:background="@color/placeholder_bg" />     <LinearLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_below="@id/thumbnail"         android:layout_marginBottom="40dp"         android:layout_marginTop="20dp"         android:orientation="vertical">         <View             android:layout_width="match_parent"             android:layout_height="@dimen/placeholder_text_height"             android:layout_marginRight="100dp"             android:background="@color/placeholder_bg" />         <View             android:layout_width="match_parent"             android:layout_height="@dimen/placeholder_text_height"             android:layout_marginRight="50dp"             android:layout_marginTop="10dp"             android:background="@color/placeholder_bg" />         <View             android:layout_width="match_parent"             android:layout_height="@dimen/placeholder_text_height"             android:layout_marginRight="160dp"             android:layout_marginTop="10dp"             android:background="@color/placeholder_bg" />     </LinearLayout> </RelativeLayout> | 
بعد از اینکار وارد layout اصلیتون شده در اینجا نام آن برابر با activity_main.xml است و کدهای زیر را در آن قرار دهید.
| 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 | <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:app="http://schemas.android.com/apk/res-auto"     xmlns:shimmer="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:background="@android:color/white"     tools:context="info.androidhive.shimmer.MainActivity">     <com.facebook.shimmer.ShimmerFrameLayout         android:id="@+id/shimmer_view_container"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center"         android:orientation="vertical"         shimmer:duration="800">         <!-- Adding 3 rows of placeholders -->         <LinearLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:orientation="vertical">             <include layout="@layout/layout_placeholder_row" />             <include layout="@layout/layout_placeholder_row" />             <include layout="@layout/layout_placeholder_row" />         </LinearLayout>     </com.facebook.shimmer.ShimmerFrameLayout>     <android.support.v7.widget.RecyclerView         android:id="@+id/recycler_view"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:scrollbars="vertical" /> </android.support.constraint.ConstraintLayout> | 
 در بالا لایه recipe_placeholder_item را که ساختیم 3 باز import کردیم .
  
 یک کلاس به نام MyApplication.java از نوع Singelton ایجاد کرده و کدهای زیر را در آن قرار دهید (این فایل عمل ارسال درخواست توسط 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 | package ir.programchi; /**  * Created by JFP on 18/01/18.  */ 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 <T> void addToRequestQueue(Request<T> req, String tag) {         // set the default tag if tag is empty         req.setTag(TextUtils.isEmpty(tag) ? TAG : tag);         getRequestQueue().add(req);     }     public <T> void addToRequestQueue(Request<T> req) {         req.setTag(TAG);         getRequestQueue().add(req);     }     public void cancelPendingRequests(Object tag) {         if (mRequestQueue != null) {             mRequestQueue.cancelAll(tag);         }     } } | 
بعد از اینکار وارد AndroidManifest.xml شده و خط زیر را به تگ <application اضافه کنید.
| 1 |         android:name=".MyApplication" | 
 خط بالا خیلی مهم است.
 یک کلاس POJO به نام Recipe.java ایجاد کرده و کدهای زیر را در آن قرار دهید.
| 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 | package ir.programchi; /**  * Created by JFP on 18/01/18.  */ public class Recipe {     int id;     String name;     String description;     double price;     String thumbnail;     String chef;     String timestamp;     public Recipe() {     }     public int getId() {         return id;     }     public String getName() {         return name;     }     public String getDescription() {         return description;     }     public double getPrice() {         return price;     }     public String getThumbnail() {         return thumbnail;     }     public String getChef() {         return chef;     }     public String getTimestamp() {         return timestamp;     } } | 
 کلاس بالا به getter / setter معروف است.
 یک فایل به نام recipe_list_item.xml در layout درست کرده و کدهای زیر را در آن قرار دهید.
| 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 | <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="wrap_content"     android:background="@android:color/white"     android:clickable="true"     android:foreground="?attr/selectableItemBackground"     android:padding="@dimen/activity_padding_horizontal">     <ImageView         android:id="@+id/thumbnail"         android:layout_width="@dimen/placeholder_image"         android:layout_height="@dimen/placeholder_image"         android:layout_marginRight="@dimen/padding_10"         android:scaleType="centerCrop" />     <TextView         android:id="@+id/name"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_toRightOf="@id/thumbnail"         android:ellipsize="end"         android:fontFamily="sans-serif-medium"         android:maxLines="1"         android:textColor="@color/item_name"         android:textSize="@dimen/name" />     <TextView         android:id="@+id/chef"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_below="@id/name"         android:layout_toRightOf="@id/thumbnail"         android:maxLines="1"         android:textColor="@color/chef"         android:textSize="@dimen/chef" />     <TextView         android:id="@+id/timestamp"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_below="@id/chef"         android:layout_toRightOf="@id/thumbnail"         android:maxLines="1"         android:text="2 min ago"         android:textColor="@color/timestamp"         android:textSize="@dimen/timestamp" />     <TextView         android:id="@+id/description"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_below="@id/thumbnail"         android:layout_marginTop="@dimen/activity_padding_horizontal"         android:ellipsize="end"         android:maxLines="3"         android:textColor="@color/description"         android:textSize="@dimen/description" />     <TextView         android:id="@+id/price"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_below="@id/description"         android:layout_marginTop="@dimen/padding_10"         android:textColor="@color/colorPrimary"         android:textSize="@dimen/price"         android:textStyle="bold" /> </RelativeLayout> | 
یک فایل دیگه به نام RecipeListAdapter.java ایجاد کرده و کدهای زیر را در آن قرار دهید.
| 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 | package ir.programchi; /**  * Created by JFP on 18/01/18.  */ 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.ImageView; import android.widget.TextView; import com.bumptech.glide.Glide; import java.util.List; public class RecipeListAdapter extends RecyclerView.Adapter<RecipeListAdapter.MyViewHolder> {     private Context context;     private List<Recipe> cartList;     public class MyViewHolder extends RecyclerView.ViewHolder {         public TextView name, description, price, chef, timestamp;         public ImageView thumbnail;         public MyViewHolder(View view) {             super(view);             name = view.findViewById(R.id.name);             chef = view.findViewById(R.id.chef);             description = view.findViewById(R.id.description);             price = view.findViewById(R.id.price);             thumbnail = view.findViewById(R.id.thumbnail);             timestamp = view.findViewById(R.id.timestamp);         }     }     public RecipeListAdapter(Context context, List<Recipe> cartList) {         this.context = context;         this.cartList = cartList;     }     @Override     public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {         View itemView = LayoutInflater.from(parent.getContext())                 .inflate(R.layout.recipe_list_item, parent, false);         return new MyViewHolder(itemView);     }     @Override     public void onBindViewHolder(MyViewHolder holder, final int position) {         final Recipe recipe = cartList.get(position);         holder.name.setText(recipe.getName());         holder.chef.setText("By " + recipe.getChef());         holder.description.setText(recipe.getDescription());         holder.price.setText("Price: ₹" + recipe.getPrice());         holder.timestamp.setText(recipe.getTimestamp());         Glide.with(context)                 .load(recipe.getThumbnail())                 .into(holder.thumbnail);     }     // recipe     @Override     public int getItemCount() {         return cartList.size();     } } | 
 کلاس بالا همون Adapter ماست که برای Recyclerview استفاده می شود.
 وارد فایل MainActivity.java شده و کدهای زیر را در آن قرار دهید.
| 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 | package ir.programchi; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.DefaultItemAnimator; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.util.Log; import android.view.View; import android.widget.Toast; import com.android.volley.Response; import com.android.volley.VolleyError; import com.android.volley.toolbox.JsonArrayRequest; import com.facebook.shimmer.ShimmerFrameLayout; import com.google.gson.Gson; import com.google.gson.reflect.TypeToken; import org.json.JSONArray; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity {     private static final String TAG = MainActivity.class.getSimpleName();     private RecyclerView recyclerView;     private List<Recipe> cartList;     private RecipeListAdapter mAdapter;     private ShimmerFrameLayout mShimmerViewContainer;     // URL to fetch menu json     private static final String URL = "https://programchi.ir/api/menu.php";     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         mShimmerViewContainer = findViewById(R.id.shimmer_view_container);         recyclerView = findViewById(R.id.recycler_view);         cartList = new ArrayList<>();         mAdapter = new RecipeListAdapter(this, cartList);         RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext());         recyclerView.setLayoutManager(mLayoutManager);         recyclerView.setItemAnimator(new DefaultItemAnimator());         recyclerView.addItemDecoration(new MyDividerItemDecoration(this, LinearLayoutManager.VERTICAL, 16));         recyclerView.setAdapter(mAdapter);         // making http call and fetching menu json         fetchRecipes();     }     private void fetchRecipes() {         JsonArrayRequest request = new JsonArrayRequest(URL,                 new Response.Listener<JSONArray>() {                     @Override                     public void onResponse(JSONArray response) {                         if (response == null) {                             Toast.makeText(getApplicationContext(), "Couldn't fetch the menu! Pleas try again.", Toast.LENGTH_LONG).show();                             return;                         }                         List<Recipe> recipes = new Gson().fromJson(response.toString(), new TypeToken<List<Recipe>>() {                         }.getType());                         cartList.clear();                         cartList.addAll(recipes);                         mAdapter.notifyDataSetChanged();                         mShimmerViewContainer.stopShimmerAnimation();                         mShimmerViewContainer.setVisibility(View.GONE);                     }                 }, new Response.ErrorListener() {             @Override             public void onErrorResponse(VolleyError error) {                 Log.e(TAG, "Error: " + error.getMessage());                 Toast.makeText(getApplicationContext(), "Error: " + error.getMessage(), Toast.LENGTH_SHORT).show();             }         });         MyApplication.getInstance().addToRequestQueue(request);     }     @Override     public void onResume() {         super.onResume();         mShimmerViewContainer.startShimmerAnimation();     }     @Override     public void onPause() {         mShimmerViewContainer.stopShimmerAnimation();         super.onPause();     } } | 
  
 در بالا یک متود داریم که با استفاده از volley و gson جیسون ما را پارس کرده و توسط آداپتور آن را به RecyvlerView ما feed می کند .
  
 این آموزش هم به پایان رسید.
  
 موفق و پیروز باشید.
  
  
 آموزش برنامه نویسی اندروید |
  آموزش برنامه نویسی اندروید |  






