Android：如何实现 Tik Tok 滑动 ViewPager2 功能？

Question

如何使用Android Studio 2020.3.1.25的ViewPager2 Java组件实现视频的抖音顶部或底部滑动功能？

Answer 1

这是使用 Android Studio 的 ViewPager2 Java 组件实现视频的 Tik Tok 滑动顶部或底部功能的方法。创建一个新项目，空activity，要创建或修改以下文件（Manifests文件夹下）AndroidManifest.xml，（Java文件夹下com.example.ultrahottvtiktokswipe2videoversion下）MainActivity.java，VideoAdapter.java，VideoObject。 java，（在 res 和 layout 文件夹下）activity_main.xml 和 video_container.xml。使用 android OS 10 和 Android Studio 2020.3.1.25 测试。

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.ultrahottvtiktokswipe2videoversion">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.UltraHotTVtiktokswipe2videoVersion">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // now we will pass video url name and description from video object to adapter

        final ViewPager2 viewPager2 = findViewById(R.id.viewPager);

        List<VideoObject> videoObjects = new ArrayList<>();

        VideoObject videoObject1 = new VideoObject("https://ultrahot.tv/videos/2020/12/15/Y64Xp6tSdDo8qmUmtwaG.mp4", "Taz the Doggy Gives Paws and Rolls Over for a Treat", "Bsenji Doggy video");
        videoObjects.add(videoObject1);

        VideoObject videoObject2 = new VideoObject("https://ultrahot.tv/videos/2020/12/16/m4PGMS6thBbirSvow6ZC.mp4", "LambChop Gets a Treat", "French Bulldog Doggy video");
        videoObjects.add(videoObject2);

        viewPager2.setAdapter(new VideoAdapter(videoObjects));
    }
}

VideoAdapter.java

import android.annotation.SuppressLint;
import android.media.MediaPlayer;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.VideoView;

import java.util.List;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

public class VideoAdapter extends RecyclerView.Adapter<VideoAdapter.VideoViewHolder> {

    private List<VideoObject> videoObjects;

    public VideoAdapter(List<VideoObject> videoObjects) {
        this.videoObjects = videoObjects;
    }

    @NonNull
    @Override
    public VideoViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        return new VideoViewHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.video_container, parent, false));
    }

@Override
public void onBindViewHolder(@NonNull VideoViewHolder holder, int position) {
    holder.setVideoObjects(videoObjects.get(position));
}

@Override
public int getItemCount() {
    return videoObjects.size();
}

static class VideoViewHolder extends RecyclerView.ViewHolder
{
    VideoView videoView;
    TextView videoTitle, videoDescription;
    ProgressBar progressBar;

    public VideoViewHolder(@NonNull View itemView){
        super(itemView);
        videoView = itemView.findViewById(R.id.videoView);
        videoTitle = itemView.findViewById(R.id.videoTitle);
        videoDescription = itemView.findViewById(R.id.videoDescription);
        progressBar = itemView.findViewById(R.id.progressBar);
    }

    @SuppressLint("ClickableViewAccessibility")
    void setVideoObjects(final VideoObject videoObjects)
    {
        videoTitle.setText(videoObjects.getVideoTitle());
        videoDescription.setText(videoObjects.getVideoDescription());
        videoView.setVideoPath(videoObjects.getVideoURL());

        videoView.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {

            @Override
            public void onPrepared(MediaPlayer mediaPlayer) {
                progressBar.setVisibility(View.GONE);
                mediaPlayer.start();
            }
        });

        // for play and pause
        videoView.setOnTouchListener(new View.OnTouchListener() {

            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
               if(videoView.isPlaying())
               {
                   videoView.pause();
                   return false;
               }
               else {
                   videoView.start();
                   return false;
               }
            }
        });

    }
}

}

VideoObject.java

public class VideoObject {

    //here we need video url, name, and description

    public String videoURL, videoTitle, videoDescription;

    public VideoObject(String videoURL, String videoTitle, String videoDescription) {
        this.videoURL = videoURL;
        this.videoTitle = videoTitle;
        this.videoDescription = videoDescription;
    }

    public String getVideoURL() {
        return videoURL;
    }

    public String getVideoTitle() {
        return videoTitle;
    }

    public String getVideoDescription() {
        return videoDescription;
    }

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

<androidx.viewpager2.widget.ViewPager2
    android:id="@+id/viewPager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
</androidx.viewpager2.widget.ViewPager2>

</androidx.constraintlayout.widget.ConstraintLayout>

video_container.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"
    android:background="@android:color/black">

    <VideoView android:layout_width="fill_parent"
        android:id="@+id/videoView"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentTop="true">
    </VideoView>

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        />

    <TextView
        android:id="@+id/videoTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingEnd="5dp"
        android:paddingStart="5dp"
        android:textColor="@android:color/white"
        android:textSize="25sp"
        android:layout_above="@+id/videoDescription"
        android:textStyle="bold"
        />

    <TextView
        android:id="@+id/videoDescription"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingEnd="5dp"
        android:paddingStart="5dp"
        android:textColor="@android:color/white"
        android:textSize="15sp"
        android:layout_alignParentBottom="true"
        android:textStyle="italic"
        />
</RelativeLayout>