معرفی
Shimmer کتابخانه ای است که با کمک کلاس ShimmerLayout افکت Shimmer را ارائه می دهد. این توسط فیس بوک توسعه یافته است. افکت درخشش را می توان به یک نما یا کل طرح اضافه کرد.
امروزه نوارهای پیشرفت در اندروید چندان جذاب نیستند و چینش برنامه را عالی نمی کنند. خب Shimmer با ارائه یک انیمیشن عالی از افکت shimmer این مشکل را حل می کند. برنامه های مدرن بیشتر از افکت درخشش برای نمایش لیست های خود استفاده می کنند.
در این مقاله، ما برنامهای توسعه میدهیم که بارگذاری لیست را با افکت shimmer نشان میدهد، نه با نوار پیشرفت.
مرحله 1
Shimmer Gradle را به build.gradle خود اضافه کنید.
- apply plugin: 'com.android.application'
- android {
- compileSdkVersion 28
- defaultConfig {
- applicationId "yourdomain.shimmereffectsample"
- minSdkVersion 21
- targetSdkVersion 28
- versionCode 1
- versionName "1.0"
- testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
- }
- buildTypes {
- release {
- minifyEnabled false
- proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
- }
- }
- }
- dependencies {
- implementation fileTree(dir: 'libs', include: ['*.jar'])
- implementation 'com.android.support:appcompat-v7:28.0.0'
- implementation 'com.android.support.constraint:constraint-layout:1.1.3'
- testImplementation 'junit:junit:4.12'
- androidTestImplementation 'com.android.support.test:runner:1.0.2'
- androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
- implementation 'com.facebook.shimmer:shimmer:0.4.0'
- implementation 'com.android.support:recyclerview-v7:28.0.0'
- }
پس از افزودن shimmer و recyclerview به build.gradle، اکنون recyclerview را به activity_main.xml اضافه کنید.
گام 2
افزودن recyclerview و ShimmerLayout به activity_main.xml -
- <?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="match_parent"
- >
- <com.facebook.shimmer.ShimmerFrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/shimmer_view_container"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"
- android:orientation="vertical"
- android:background="#ffffff">
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:orientation="vertical">
- <include layout="@layout/list_shimmer_layout" />
- <include layout="@layout/list_shimmer_layout" />
- <include layout="@layout/list_shimmer_layout" />
- <include layout="@layout/list_shimmer_layout" />
- <include layout="@layout/list_shimmer_layout" />
- <include layout="@layout/list_shimmer_layout" />
- </LinearLayout>
- </com.facebook.shimmer.ShimmerFrameLayout>
- <android.support.v7.widget.RecyclerView
- android:id="@+id/recycler_view"
- android:layout_width="match_parent"
- android:layout_height="match_parent" />
- </RelativeLayout>
اکنون می بینیم که در داخل تگ ShimmerFrameLayout، طرحی به نام list_shimmer_layout اضافه شده است. بنابراین، زمان کدنویسی این طرح است.
Views را به list_shimmer_layout.xml اضافه کنید.
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:id="@+id/main_view"
- android:layout_width="match_parent"
- android:layout_height="80dp"
- android:paddingLeft="10dp"
- android:paddingRight="10dp">
- <ImageView
- android:id="@+id/user_image_View"
- android:layout_width="45dp"
- android:layout_height="45dp"
- android:layout_centerVertical="true"
- android:background="#dddddd"
- android:scaleType="center" />
- <RelativeLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_centerVertical="true"
- android:layout_toEndOf="@id/user_image_View"
- android:padding="10dp">
- <TextView
- android:id="@+id/discount_text_view"
- android:layout_width="match_parent"
- android:layout_height="18dp"
- android:background="#dddddd" />
- <TextView
- android:id="@+id/categories_heading_text_view"
- android:layout_width="150dp"
- android:layout_height="16dp"
- android:layout_below="@id/discount_text_view"
- android:layout_marginTop="4dp"
- android:background="#dddddd"
- android:paddingRight="10dp" />
- <TextView
- android:id="@+id/categories_details_text_view"
- android:layout_width="200dp"
- android:layout_height="16dp"
- android:layout_below="@id/categories_heading_text_view"
- android:layout_marginTop="5dp"
- android:background="#dddddd"
- android:ellipsize="end"
- android:maxLines="2"
- />
- </RelativeLayout>
- </RelativeLayout>
مرحله 4
از آنجایی که ما دادهها و افکت Shimmer را روی یک لیست نشان میدهیم، بیایید یک طرحبندی آیتم فهرست ایجاد کنیم.
Views را به list_items.xml اضافه کنید.
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:id="@+id/main_view"
- android:layout_width="match_parent"
- android:layout_height="80dp"
- android:paddingLeft="10dp"
- android:paddingRight="10dp">
- <ImageView
- android:id="@+id/user_image_View"
- android:layout_width="45dp"
- android:layout_height="45dp"
- android:layout_centerVertical="true"
- android:src="@drawable/ic_user" />
- <RelativeLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_centerVertical="true"
- android:layout_toEndOf="@id/user_image_View"
- android:padding="10dp">
- <TextView
- android:id="@+id/user_name_textview"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- tools:text="Gaurav Kumar"
- android:textSize="15sp"/>
- <TextView
- android:id="@+id/user_profession"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_below="@id/user_name_textview"
- android:layout_marginTop="2dp"
- tools:text="Software Engineer"
- android:textSize="13sp"/>
- <TextView
- android:id="@+id/user_address"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_below="@id/user_profession"
- android:layout_marginTop="2dp"
- android:textSize="13sp"
- tools:text="Noida"
- />
- </RelativeLayout>
- </RelativeLayout>
مرحله 4
در اینجا به یک کلاس pojo به نام UserDataModel.java نیاز داریم .
- public class UserDataModel {
- String name;
- String profession;
- String city;
- public String getName() {
- return name;
- }
- public void setName(String name) {
- this.name = name;
- }
- public String getProfession() {
- return profession;
- }
- public void setProfession(String profession) {
- this.profession = profession;
- }
- public String getCity() {
- return city;
- }
- public void setCity(String city) {
- this.city = city;
- }
- }
مرحله 4
برای نمایش داده ها در لیست به یک آداپتور نیاز داریم. بیایید کد آداپتور ذکر شده در زیر را ببینیم. نام آن را UserAdapter.java گذاشته ایم .
- import android.support.annotation.NonNull;
- import android.support.v7.widget.RecyclerView;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.TextView;
- import java.util.ArrayList;
- public class UserAdapter extends RecyclerView.Adapter<UserAdapter.ViewHolder> {
- private ArrayList<UserDataModel> mlist;
- public UserAdapter(ArrayList<UserDataModel> list) {
- mlist = list;
- }
- @NonNull
- @Override
- public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int i) {
- View itemView = LayoutInflater.from(parent.getContext())
- .inflate(R.layout.list_items, parent, false);
- return new ViewHolder(itemView);
- }
- @Override
- public void onBindViewHolder(@NonNull ViewHolder viewHolder, int i) {
- viewHolder.nameTextView.setText(mlist.get(i).getName());
- viewHolder.professionTextView.setText(mlist.get(i).getProfession());
- viewHolder.cityTextView.setText(mlist.get(i).getCity());
- }
- @Override
- public int getItemCount() {
- return mlist.size();
- }
- public class ViewHolder extends RecyclerView.ViewHolder {
- TextView nameTextView;
- TextView professionTextView;
- TextView cityTextView;
- public ViewHolder(View itemView) {
- super(itemView);
- nameTextView = itemView.findViewById(R.id.user_name_textview);
- professionTextView = itemView.findViewById(R.id.user_profession);
- cityTextView = itemView.findViewById(R.id.user_address);
- }
- }
- }