معرفی Shimmer برای بارگذاری صفحه در اندروید

ما معمولا از progress barها استفاده می کنیم زمانی که برنامه می خواهد داده ها را از اینترنت بارگیری کند.

به جای استفاده از لودرهای معمول، ما می توانیم صفحه بارگذاری را با استفاده از کتابخانه Shimmer فیس بوک زیباتر کنیم.

این کتابخانه اثر Shimmer را به هر صفحه که شما درست کنید اضافه کند. شما می توانید این اثر سوسو زنی را در برنامه های تلفن همراه و دسکتاپ فیس بوک مشاهده کنید.

در این مقاله قصد داریم به معرفی Shimmer بپردازیم.

۱.معرفی Shimmer: کتابخانه Facebook’s Shimmer

برای به دست آوردن اثر shimmer بر روی هر صفحه، شما باید طرح صفحه خود را در داخل ShimmerFrameLayout قرار دهید.

برای شروع انیمیشن، شما باید startShimmerAnimation () در ShimmerFrameLayout فراخوانی کنید.

https://tik4.com/wp-content/uploads/Shimmer-Feed-Demo.webm

در زیر قطعه کد برای دریافت اثر Shimmer است. اول، طرح خود را در داخل ShimmerFrameLayout قرار دهید.

<com.facebook.shimmer.ShimmerFrameLayout
     android:id=“@+id/shimmer_view_container”
     android:layout_width=“wrap_content”
     android:layout_height="wrap_content"
     shimmer:duration="1000">
 
     <View
        android:layout_width="100dp"
        android:layout_height="8dp"
        android:background="#dddddd" />
 
</com.facebook.shimmer.ShimmerFrameLayout>

برای شروع کار، در اکتیویتی Shimmer را فراخوانی می کنیم

ShimmerFrameLayout shimmerContainer = (ShimmerFrameLayout) findViewById(R.id.shimmer_view_container);
shimmerContainer.startShimmerAnimation();

۲. فایل JSON ساده برای تمرین اثر Shimmer

فایلی برای نمایش این روش درست شده که در آدرس زیر قرار دارد.

https://api.androidhive.info/json/shimmer/menu.php

۳. ایجاد یک پروژه جدید

۱. یک پروژه جدید در Android Studio بسازید و نام دلخواهی به آن بدهید

۲. اضافه کردن کتابخانه Shimmer به build.gridle خود و بازسازی پروژه.

build.gradle
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:26.1.0'
 
    // Shimmer
    implementation 'com.facebook.shimmer:shimmer:0.1.0@aar'
}

۳. رنگ ها و اندازه های زیر را به فایل های مربوطه اضافه کنید.

colors.xml
<!--?xml version="1.0" encoding="utf-8"?-->
<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
<!--?xml version="1.0" encoding="utf-8"?-->
<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>

۴. یک فایل XML جدید layout به نام recipe_placeholder_item.xml ایجاد کنید. در این فایل ما طرحی که قرار است Shimmer روی آن اجرا شود را با استفاده از View تعریف می کنیم. کلیه ی نمایش ها شبیه به آیتم های لیست واقعی قرار می گیرند.

<?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>

۵. صفحه بالا که نمونه اجرای Shimmer است، چند تا از آن را اضافه میکنیم. در این جا ما ۳ بار آن را به لایه اصلی اضافه کرده ایم.

activity_main.xml
<?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/recipe_placeholder_item" />
 
            <include layout="@layout/recipe_placeholder_item" />
 
            <include layout="@layout/recipe_placeholder_item" />
 
        </LinearLayout>
 
    </com.facebook.shimmer.ShimmerFrameLayout>
 
</android.support.constraint.ConstraintLayout>

۶. باز کردن MainActivity.java و شروع انیمیشن Shimmer با فراخوانی با روش startShimmerAnimation () در onResume (). هنگامی که فعالیت متوقف می شود، ما انیمیشن را در onPause () نیز متوقف می کنیم.

MainActivity.java
import com.facebook.shimmer.ShimmerFrameLayout;
 
public class MainActivity extends AppCompatActivity {
 
    private ShimmerFrameLayout mShimmerViewContainer;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        mShimmerViewContainer = findViewById(R.id.shimmer_view_container);
    }
 
    @Override
    public void onResume() {
        super.onResume();
        mShimmerViewContainer.startShimmerAnimation();
    }
 
    @Override
    public void onPause() {
        mShimmerViewContainer.stopShimmerAnimation();
        super.onPause();
    }
}

حالا اگر برنامه را اجرا کنید، می توانید انیمیشن Shimmer زیر را ببینید.

https://tik4.com/wp-content/uploads/Shimmer-Feed-Demo.webm

برای دیدن بقیه مطالب آموزشی اندروید اینجا کلیک کنید

برای دیدن کلیه مقالات اینجا کلیک کنید.