在Android中使用Shimmer进行内容占位符动画

我们已经看到了一个独特的加载屏幕设计，该屏幕在Facebook中可以看到，用于加载目的，它也可以用于显示内容占位符，以用于加载目的。 GitHub提供了这种类型的加载占位符，它看起来比正常的进度条漂亮。在本文中，我们将介绍在Android中使用Shimmer动画实现Content Placeholder的方法。

我们将在本文中构建什么?

我们将构建一个简单的应用程序，在该应用程序中，我们将从JSON格式的URL中加载数据，并且在加载过程中，我们将显示闪烁的布局以供加载。下面提供了一个示例视频，以使您对本文中的工作有个大概的了解。注意，我们将使用Java语言实现该项目。

分步实施

步骤1：创建一个新项目

要在Android Studio中创建新项目，请参阅如何在Android Studio中创建/启动新项目。请注意，选择Java作为编程语言。

步骤2：添加使用Facebook Shimmer布局的依赖项

导航到应用程序> Gradle脚本> build.gradle文件，并将以下依赖项添加到该文件中。

// below line is used for volley library

implementation ‘com.android.volley:volley:1.1.1’

// below line is used for image loading library

implementation ‘com.squareup.picasso:picasso:2.71828’  

// depenancy for using facebook shimmer layout.

implementation ‘com.facebook.shimmer:shimmer:0.5.0’

现在，同步您的项目并移至XML文件。

步骤3：在Android中为互联网添加权限

导航到应用程序> AndroidManifest.xml，并在我们从Internet加载数据时为其添加权限以访问Internet。

步骤4：使用activity_main.xml文件

导航到应用程序> res>布局> activity_main.xml，然后将以下代码添加到该文件中。以下是activity_main.xml文件的代码。

步骤5：使用MainActivity。 Java文件

转到MainActivity。 Java文件并参考以下代码。下面是MainActivity的代码。 Java文件。在代码内部添加了注释，以更详细地了解代码。

Java

import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;
  
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.JsonObjectRequest;
import com.android.volley.toolbox.Volley;
import com.facebook.shimmer.ShimmerFrameLayout;
import com.squareup.picasso.Picasso;
  
import org.json.JSONException;
import org.json.JSONObject;
  
public class MainActivity extends AppCompatActivity {
  
    // creating variables for our textview,
    // imageview, cardview and progressbar.
    private TextView courseNameTV, courseTracksTV, courseBatchTV;
    private ImageView courseIV;
    private CardView courseCV;
      
    // variable for our shimmer frame layout
    private ShimmerFrameLayout shimmerFrameLayout;
      
    // below line is the variable for url from
    // where we will be querying our data.
    String url = "https://jsonkeeper.com/b/63OH";
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing our shimmer layout.
        shimmerFrameLayout = findViewById(R.id.shimmerLayout);
          
        // on below line we are 
        // starting our shimmer layout.
        shimmerFrameLayout.startShimmer();
          
        // in below line we are 
        // initializing our all views.
        courseCV = findViewById(R.id.idCVCourse);
        courseNameTV = findViewById(R.id.idTVCourseName);
        courseTracksTV = findViewById(R.id.idTVTracks);
        courseBatchTV = findViewById(R.id.idTVBatch);
        courseIV = findViewById(R.id.idIVCourse);
         
        // creating a new variable for our request queue
        RequestQueue queue = Volley.newRequestQueue(MainActivity.this);
        JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, url, null, new Response.Listener() {
            @Override
            public void onResponse(JSONObject response) {
                // inside the on response method.
                // in below line we are making our card
                // view visible after we get all the data.
                // on below line we are making our shimmer
                // layout visibility to gone.
                // on below line we are stopping our shimmer.
                shimmerFrameLayout.stopShimmer();
                courseCV.setVisibility(View.VISIBLE);
                try {
                    // now we get our response from API in json object format.
                    // in below line we are extracting a string with its key
                    // value from our json object.
                    // similarly we are extracting all the strings from our json object.
                    String courseName = response.getString("courseName");
                    String courseTracks = response.getString("courseTracks");
                    String courseMode = response.getString("courseMode");
                    String courseImageURL = response.getString("courseimg");
  
                    // after extracting all the data we are
                    // setting that data to all our views.
                    courseNameTV.setText(courseName);
                    courseTracksTV.setText(courseTracks);
                    courseBatchTV.setText(courseMode);
  
                    // we are using picasso to load the image from url.
                    Picasso.get().load(courseImageURL).into(courseIV);
                } catch (JSONException e) {
                    // if we do not extract data from json object properly.
                    // below line of code is use to handle json exception
                    e.printStackTrace();
                }
            }
        }, new Response.ErrorListener() {
            // this is the error listener method which
            // we will call if we get any error from API.
            @Override
            public void onErrorResponse(VolleyError error) {
                // below line is use to display a toast message along with our error.
                Toast.makeText(MainActivity.this, "Fail to get data..", Toast.LENGTH_SHORT).show();
            }
        });
        // at last we are adding our json
        // object request to our request
        // queue to fetch all the json data.
        queue.add(jsonObjectRequest);
    }
}

现在运行您的应用程序，并查看该应用程序的输出。

输出：

想要一个节奏更快，更具竞争性的环境来学习Android的基础知识吗?

单击此处，前往由我们的专家精心策划的指南，以使您立即做好行业准备！