如何在Android中创建WhatsApp故事视图？

故事现在已成为WhatsApp，LinkedIn，Instagram等许多不同应用程序中最常见的功能之一。在本文中，我们将介绍在Android App中创建类似类型的视图的过程。

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

我们将构建一个简单的应用程序，在其中创建故事视图，我们可以在WhatsApp上看到该视图。我们将向其中添加一些固定的图像。下面提供了一个示例视频，以使您对本文中的工作有个大概的了解。注意，我们将使用Java语言实现该项目。

分步实施

步骤1：创建一个新项目

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

步骤2：添加依赖项和JitPack存储库

导航到Gradle脚本> build.gradle(Module：app)并将以下依赖项添加到“依赖项”部分。

implementation ‘com.github.shts:StoriesProgressView:3.0.0’

将JitPack存储库添加到您的构建文件中。将其添加到allprojects {}部分中存储库末尾的根build.gradle中。

allprojects {

 repositories {

   …

   maven { url “https://jitpack.io” }

     }

}

添加此依赖项后，同步您的项目，现在我们将继续执行它。

步骤3：将主题更新为themes.xml文件中的NoActionBar

导航到app> res> values> themes.xml，然后在其中将基本应用程序主题更改为NoActionBar 。您可以在下面查看themes.xml文件的代码。

XML

步骤4：使用activity_main.xml文件

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

步骤5：创建一个新活动来显示故事

导航到应用程序> Java >应用程序的程序包名称>右键单击它>新建>活动，然后将其选择为空活动，并将其命名为StoriesActivity并创建一个新活动。

第6步：使用 主要活动。 Java文件

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

Java

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
  
import androidx.appcompat.app.AppCompatActivity;
  
public class MainActivity extends AppCompatActivity {
      
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
  
    public void ShowStories(View view) {
        // on below line we are opening a new activity using intent.
        Intent i = new Intent(MainActivity.this, StoriesActivity.class);
        startActivity(i);
    }
}

步骤7：使用activity_stories.xml文件

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

步骤8：使用StoriesActivity。 Java文件

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

Note: Images are added in the drawable folder. 

Java

import android.content.Intent;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.widget.ImageView;
  
import androidx.appcompat.app.AppCompatActivity;
  
import jp.shts.android.storiesprogressview.StoriesProgressView;
  
public class StoriesActivity extends AppCompatActivity implements StoriesProgressView.StoriesListener {
  
    // on below line we are creating a int array
    // in which we are storing all our image ids.
    private final int[] resources = new int[]{
            R.drawable.logo1,
            R.drawable.logo2,
            R.drawable.logo1,
            R.drawable.logo2,
            R.drawable.logo1,
            R.drawable.logo2,
    };
  
    // on below line we are creating variable for
    // our press time and time limit to display a story.
    long pressTime = 0L;
    long limit = 500L;
  
    // on below line we are creating variables for
    // our progress bar view and image view .
    private StoriesProgressView storiesProgressView;
    private ImageView image;
  
    // on below line we are creating a counter
    // for keeping count of our stories.
    private int counter = 0;
  
    // on below line we are creating a new method for adding touch listener
    private View.OnTouchListener onTouchListener = new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            // inside on touch method we are
            // getting action on below line.
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
  
                    // on action down when we press our screen
                    // the story will pause for specific time.
                    pressTime = System.currentTimeMillis();
  
                    // on below line we are pausing our indicator.
                    storiesProgressView.pause();
                    return false;
                case MotionEvent.ACTION_UP:
  
                    // in action up case when user do not touches 
                    // screen this method will skip to next image.
                    long now = System.currentTimeMillis();
  
                    // on below line we are resuming our progress bar for status.
                    storiesProgressView.resume();
  
                    // on below line we are returning if the limit < now - presstime
                    return limit < now - pressTime;
            }
            return false;
        }
    };
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
          
        // inside in create method below line is use to make a full screen.
        getWindow().addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_stories);
          
        // on below line we are initializing our variables.
        storiesProgressView = (StoriesProgressView) findViewById(R.id.stories);
          
        // on below line we are setting the total count for our stories.
        storiesProgressView.setStoriesCount(resources.length);
          
        // on below line we are setting story duration for each story.
        storiesProgressView.setStoryDuration(3000L);
          
        // on below line we are calling a method for set 
        // on story listener and passing context to it.
        storiesProgressView.setStoriesListener(this);
          
        // below line is use to start stories progress bar.
        storiesProgressView.startStories(counter);
          
        // initializing our image view.
        image = (ImageView) findViewById(R.id.image);
          
        // on below line we are setting image to our image view.
        image.setImageResource(resources[counter]);
          
        // below is the view for going to the previous story.
        // initializing our previous view.
        View reverse = findViewById(R.id.reverse);
          
        // adding on click listener for our reverse view.
        reverse.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // inside on click we are 
                // reversing our progress view.
                storiesProgressView.reverse();
            }
        });
          
        // on below line we are calling a set on touch
        // listener method to move towards previous image.
        reverse.setOnTouchListener(onTouchListener);
  
        // on below line we are initializing 
        // view to skip a specific story.
        View skip = findViewById(R.id.skip);
        skip.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // inside on click we are 
                // skipping the story progress view.
                storiesProgressView.skip();
            }
        });
        // on below line we are calling a set on touch 
        // listener method to move to next story.
        skip.setOnTouchListener(onTouchListener);
    }
  
    @Override
    public void onNext() {
        // this method is called when we move
        // to next progress view of story.
        image.setImageResource(resources[++counter]);
    }
  
    @Override
    public void onPrev() {
          
        // this method id called when we move to previous story.
        // on below line we are decreasing our counter
        if ((counter - 1) < 0) return;
          
        // on below line we are setting image to image view
        image.setImageResource(resources[--counter]);
    }
  
    @Override
    public void onComplete() {
        // when the stories are completed this method is called.
        // in this method we are moving back to initial main activity.
        Intent i = new Intent(StoriesActivity.this, MainActivity.class);
        startActivity(i);
        finish();
    }
  
    @Override
    protected void onDestroy() {
        // in on destroy method we are destroying
        // our stories progress view.
        storiesProgressView.destroy();
        super.onDestroy();
    }
}

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

输出：