Tinder滑动查看是许多Android应用程序中最常用的UI组件之一。此功能使我们可以轻松地以巨大的列表形式表示数据。在本文中,我们将介绍如何在我们的Android应用程序中实现此Swipe View功能。
我们将在本文中构建什么?
我们将构建一个简单的应用程序,其中将显示一堆纸牌,其中将显示Geeks for Geeks上提供的不同课程。在这些卡上,我们将添加类似于Tinder的类似滑动的功能。下面给出了一个示例GIF,以了解我们将在本文中做些什么。注意,我们将使用Java语言实现该项目。
分步实施
步骤1:创建一个新项目
要在Android Studio中创建新项目,请参阅如何在Android Studio中创建/启动新项目。请注意,选择Java作为编程语言。
步骤2:在build.gradle中添加以下依赖项
导航到应用程序> Gradle脚本> build.gradle,然后在“依赖项”部分添加以下依赖项。
implementation ‘com.daprlabs.aaron:cardstack:0.3.1-beta0’
添加以上依赖项后,现在同步您的项目,我们将朝着activity_main.xml前进。
步骤3:使用activity_main.xml文件
导航到应用程序> res>布局> activity_main.xml,然后将以下代码添加到该文件中。以下是activity_main.xml文件的代码。
XML
Java
public class CourseModal {
// variables for our coursename,
// description,tracks and duration,imageId.
private String courseName;
private String courseDuration;
private String courseTracks;
private String courseDescription;
public int getImgId() {
return imgId;
}
public void setImgId(int imgId) {
this.imgId = imgId;
}
private int imgId;
// creating getter and setter methods
public String getCourseName() {
return courseName;
}
public void setCourseName(String courseName) {
this.courseName = courseName;
}
public String getCourseDuration() {
return courseDuration;
}
public void setCourseDuration(String courseDuration) {
this.courseDuration = courseDuration;
}
public String getCourseTracks() {
return courseTracks;
}
public void setCourseTracks(String courseTracks) {
this.courseTracks = courseTracks;
}
public String getCourseDescription() {
return courseDescription;
}
public void setCourseDescription(String courseDescription) {
this.courseDescription = courseDescription;
}
// constructor.
public CourseModal(String courseName, String courseDuration, String courseTracks, String courseDescription, int imgId) {
this.courseName = courseName;
this.courseDuration = courseDuration;
this.courseTracks = courseTracks;
this.courseDescription = courseDescription;
this.imgId = imgId;
}
}
XML
Java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
public class DeckAdapter extends BaseAdapter {
// on below line we have created variables
// for our array list and context.
private ArrayList courseData;
private Context context;
// on below line we have created constructor for our variables.
public DeckAdapter(ArrayList courseData, Context context) {
this.courseData = courseData;
this.context = context;
}
@Override
public int getCount() {
// in get count method we are returning the size of our array list.
return courseData.size();
}
@Override
public Object getItem(int position) {
// in get item method we are returning the item from our array list.
return courseData.get(position);
}
@Override
public long getItemId(int position) {
// in get item id we are returning the position.
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// in get view method we are inflating our layout on below line.
View v = convertView;
if (v == null) {
// on below line we are inflating our layout.
v = LayoutInflater.from(parent.getContext()).inflate(R.layout.course_rv_item, parent, false);
}
// on below line we are initializing our variables and setting data to our variables.
((TextView) v.findViewById(R.id.idTVCourseName)).setText(courseData.get(position).getCourseName());
((TextView) v.findViewById(R.id.idTVCourseDescription)).setText(courseData.get(position).getCourseDescription());
((TextView) v.findViewById(R.id.idTVCourseDuration)).setText(courseData.get(position).getCourseDuration());
((TextView) v.findViewById(R.id.idTVCourseTracks)).setText(courseData.get(position).getCourseTracks());
((ImageView) v.findViewById(R.id.idIVCourse)).setImageResource(courseData.get(position).getImgId());
return v;
}
}
Java
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.daprlabs.cardstack.SwipeDeck;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
// on below line we are creating variable
// for our array list and swipe deck.
private SwipeDeck cardStack;
private ArrayList courseModalArrayList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// on below line we are initializing our array list and swipe deck.
courseModalArrayList = new ArrayList<>();
cardStack = (SwipeDeck) findViewById(R.id.swipe_deck);
// on below line we are adding data to our array list.
courseModalArrayList.add(new CourseModal("C++", "30 days", "20 Tracks", "C++ Self Paced Course", R.drawable.gfg));
courseModalArrayList.add(new CourseModal("Java", "30 days", "20 Tracks", "Java Self Paced Course", R.drawable.gfg));
courseModalArrayList.add(new CourseModal("Python", "30 days", "20 Tracks", "Python Self Paced Course", R.drawable.gfg));
courseModalArrayList.add(new CourseModal("DSA", "30 days", "20 Tracks", "DSA Self Paced Course", R.drawable.gfg));
courseModalArrayList.add(new CourseModal("PHP", "30 days", "20 Tracks", "PHP Self Paced Course", R.drawable.gfg));
// on below line we are creating a variable for our adapter class and passing array list to it.
final DeckAdapter adapter = new DeckAdapter(courseModalArrayList, this);
// on below line we are setting adapter to our card stack.
cardStack.setAdapter(adapter);
// on below line we are setting event callback to our card stack.
cardStack.setEventCallback(new SwipeDeck.SwipeEventCallback() {
@Override
public void cardSwipedLeft(int position) {
// on card swipe left we are displaying a toast message.
Toast.makeText(MainActivity.this, "Card Swiped Left", Toast.LENGTH_SHORT).show();
}
@Override
public void cardSwipedRight(int position) {
// on card swipped to right we are displaying a toast message.
Toast.makeText(MainActivity.this, "Card Swiped Right", Toast.LENGTH_SHORT).show();
}
@Override
public void cardsDepleted() {
// this method is called when no card is present
Toast.makeText(MainActivity.this, "No more courses present", Toast.LENGTH_SHORT).show();
}
@Override
public void cardActionDown() {
// this method is called when card is swipped down.
Log.i("TAG", "CARDS MOVED DOWN");
}
@Override
public void cardActionUp() {
// this method is called when card is moved up.
Log.i("TAG", "CARDS MOVED UP");
}
});
}
}
第4步:创建用于存储数据的模式类
导航到应用程序> Java >应用程序的程序包名称>右键单击它>新建> Java类,并将其命名为CourseModal,然后将以下代码添加到其中。在代码中添加了注释,以便更详细地了解。
Java
public class CourseModal {
// variables for our coursename,
// description,tracks and duration,imageId.
private String courseName;
private String courseDuration;
private String courseTracks;
private String courseDescription;
public int getImgId() {
return imgId;
}
public void setImgId(int imgId) {
this.imgId = imgId;
}
private int imgId;
// creating getter and setter methods
public String getCourseName() {
return courseName;
}
public void setCourseName(String courseName) {
this.courseName = courseName;
}
public String getCourseDuration() {
return courseDuration;
}
public void setCourseDuration(String courseDuration) {
this.courseDuration = courseDuration;
}
public String getCourseTracks() {
return courseTracks;
}
public void setCourseTracks(String courseTracks) {
this.courseTracks = courseTracks;
}
public String getCourseDescription() {
return courseDescription;
}
public void setCourseDescription(String courseDescription) {
this.courseDescription = courseDescription;
}
// constructor.
public CourseModal(String courseName, String courseDuration, String courseTracks, String courseDescription, int imgId) {
this.courseName = courseName;
this.courseDuration = courseDuration;
this.courseTracks = courseTracks;
this.courseDescription = courseDescription;
this.imgId = imgId;
}
}
步骤5:为每个可滑动项创建一个新的布局文件
现在要显示堆栈中要刷卡的卡片,我们必须创建一个布局文件。导航至应用程序> res>布局>新建>布局资源文件,并将其命名为course_rv_item,并向其中添加以下代码。在代码中添加了注释,以便更详细地了解。
XML格式
步骤6:创建适配器类
现在要为堆栈中存在的每个卡设置数据,我们必须创建适配器类。导航到应用程序> Java >应用程序的程序包名称>右键单击它>新建> Java类,并将其命名为DeckAdapter,然后将以下代码添加到其中。在代码中添加了注释,以便更详细地了解。
Java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
public class DeckAdapter extends BaseAdapter {
// on below line we have created variables
// for our array list and context.
private ArrayList courseData;
private Context context;
// on below line we have created constructor for our variables.
public DeckAdapter(ArrayList courseData, Context context) {
this.courseData = courseData;
this.context = context;
}
@Override
public int getCount() {
// in get count method we are returning the size of our array list.
return courseData.size();
}
@Override
public Object getItem(int position) {
// in get item method we are returning the item from our array list.
return courseData.get(position);
}
@Override
public long getItemId(int position) {
// in get item id we are returning the position.
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// in get view method we are inflating our layout on below line.
View v = convertView;
if (v == null) {
// on below line we are inflating our layout.
v = LayoutInflater.from(parent.getContext()).inflate(R.layout.course_rv_item, parent, false);
}
// on below line we are initializing our variables and setting data to our variables.
((TextView) v.findViewById(R.id.idTVCourseName)).setText(courseData.get(position).getCourseName());
((TextView) v.findViewById(R.id.idTVCourseDescription)).setText(courseData.get(position).getCourseDescription());
((TextView) v.findViewById(R.id.idTVCourseDuration)).setText(courseData.get(position).getCourseDuration());
((TextView) v.findViewById(R.id.idTVCourseTracks)).setText(courseData.get(position).getCourseTracks());
((ImageView) v.findViewById(R.id.idIVCourse)).setImageResource(courseData.get(position).getImgId());
return v;
}
}
步骤7:使用MainActivity。 Java文件
转到MainActivity。 Java文件并参考以下代码。下面是MainActivity的代码。 Java文件。在代码内部添加了注释,以更详细地了解代码。
Java
import android.os.Bundle;
import android.util.Log;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.daprlabs.cardstack.SwipeDeck;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
// on below line we are creating variable
// for our array list and swipe deck.
private SwipeDeck cardStack;
private ArrayList courseModalArrayList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// on below line we are initializing our array list and swipe deck.
courseModalArrayList = new ArrayList<>();
cardStack = (SwipeDeck) findViewById(R.id.swipe_deck);
// on below line we are adding data to our array list.
courseModalArrayList.add(new CourseModal("C++", "30 days", "20 Tracks", "C++ Self Paced Course", R.drawable.gfg));
courseModalArrayList.add(new CourseModal("Java", "30 days", "20 Tracks", "Java Self Paced Course", R.drawable.gfg));
courseModalArrayList.add(new CourseModal("Python", "30 days", "20 Tracks", "Python Self Paced Course", R.drawable.gfg));
courseModalArrayList.add(new CourseModal("DSA", "30 days", "20 Tracks", "DSA Self Paced Course", R.drawable.gfg));
courseModalArrayList.add(new CourseModal("PHP", "30 days", "20 Tracks", "PHP Self Paced Course", R.drawable.gfg));
// on below line we are creating a variable for our adapter class and passing array list to it.
final DeckAdapter adapter = new DeckAdapter(courseModalArrayList, this);
// on below line we are setting adapter to our card stack.
cardStack.setAdapter(adapter);
// on below line we are setting event callback to our card stack.
cardStack.setEventCallback(new SwipeDeck.SwipeEventCallback() {
@Override
public void cardSwipedLeft(int position) {
// on card swipe left we are displaying a toast message.
Toast.makeText(MainActivity.this, "Card Swiped Left", Toast.LENGTH_SHORT).show();
}
@Override
public void cardSwipedRight(int position) {
// on card swipped to right we are displaying a toast message.
Toast.makeText(MainActivity.this, "Card Swiped Right", Toast.LENGTH_SHORT).show();
}
@Override
public void cardsDepleted() {
// this method is called when no card is present
Toast.makeText(MainActivity.this, "No more courses present", Toast.LENGTH_SHORT).show();
}
@Override
public void cardActionDown() {
// this method is called when card is swipped down.
Log.i("TAG", "CARDS MOVED DOWN");
}
@Override
public void cardActionUp() {
// this method is called when card is moved up.
Log.i("TAG", "CARDS MOVED UP");
}
});
}
}
现在运行您的应用程序,并查看该应用程序的输出。
输出: