在本文中,我们将在Android Studio中实现StackView 。 StackView是一个小部件,可帮助您以堆叠卡的形式排列物品。每当我们翻转前面的项目时,后面的下一个项目就会到达前面。下面给出了一个示例GIF,以了解我们将在本文中做些什么。注意,我们将使用Java语言实现该项目。
分步实施
步骤1:创建一个新项目
要在Android Studio中创建新项目,请参阅如何在Android Studio中创建/启动新项目。请注意,您必须选择Java作为编程语言。
步骤2:使用activity_main.xml文件
导航到应用程序> res>布局> activity_main.xml,然后将以下代码添加到该文件中。以下是activity_main.xml文件的代码。在此文件中,已添加StackView 。
XML
XML
Java
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.StackView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
StackView stackView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
stackView=(StackView)findViewById(R.id.stack_view);
}
// the method numberWord() is used
// to add the text below corresponding images.
private List numberWord()
{
List word=new ArrayList<>();
word.add("One");
word.add("Two");
word.add("Three");
word.add("Four");
word.add("Five");
return word;
}
// the method numberWord() is used to call
// the images that are added to the stack.
private List numberImage()
{
List image=new ArrayList<>();
image.add(R.drawable.one);
image.add(R.drawable.two);
image.add(R.drawable.three);
image.add(R.drawable.four);
image.add(R.drawable.five);
return image;
}
}
Java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import java.util.List;
public class MainAdapter extends ArrayAdapter {
List numberWord;
List numberImage;
int itemLayout;
Context c;
// constructor is called to initialize the objects
public MainAdapter(List word, List image, int resource, Context context) {
super(context, resource, word);
numberWord = word;
numberImage = image;
itemLayout = resource;
c = context;
}
// getCount() is called to return
// the total number of words to be used
@Override
public int getCount() {
return numberWord.size();
}
// getView() is called to get position,
// parent and view of the images.
@NonNull
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(parent.getContext()).inflate(itemLayout, parent, false);
}
String word = numberWord.get(position);
Integer image = numberImage.get(position);
TextView textView = convertView.findViewById(R.id.text_view);
ImageView imageView = convertView.findViewById(R.id.image_view);
textView.setText(word);
imageView.setImageResource(image);
return convertView;
}
}
Java
import android.os.Bundle;
import android.widget.StackView;
import androidx.appcompat.app.AppCompatActivity;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
StackView stackView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
stackView = (StackView) findViewById(R.id.stack_view);
MainAdapter adapter = new MainAdapter(numberWord(), numberImage(), R.layout.item, MainActivity.this);
stackView.setAdapter(adapter);
}
// the method numberWord() is used to
// add the text below corresponding images.
private List numberWord() {
List word = new ArrayList<>();
word.add("One");
word.add("Two");
word.add("Three");
word.add("Four");
word.add("Five");
return word;
}
// the method numberWord() is used to call
// the images that are added to the stack.
private List numberImage() {
List image = new ArrayList<>();
image.add(R.drawable.one);
image.add(R.drawable.two);
image.add(R.drawable.three);
image.add(R.drawable.four);
image.add(R.drawable.five);
return image;
}
}
步骤3:添加图片
在res> drawable文件夹中将要添加的图像添加到堆栈中。复制图像并将其粘贴到drawable文件夹中。
步骤4:创建StackView项的布局
转到res> layout ,然后在layout文件夹中创建一个名称为item.XML的新XML文件。
使用item.xml文件:
导航到res>布局> item.xml,然后 将下面给出的代码添加到该文件中。首先,我添加了ImageView来获取必须保留在最前面的图像。另外,添加了TextView,我们将使用它在添加到堆栈的每个图像下方添加名称。为了更好的理解,我在下面的代码中添加了必要的注释。
XML格式
步骤5:使用MainActivity。 Java文件
转到MainActivity。 Java文件,并将下面给出的代码添加到该文件中。这里已经实现了两个方法numberWord()和numberImage() 。注释已添加到代码中,以使您对概念有清晰的了解。
Java
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.StackView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
StackView stackView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
stackView=(StackView)findViewById(R.id.stack_view);
}
// the method numberWord() is used
// to add the text below corresponding images.
private List numberWord()
{
List word=new ArrayList<>();
word.add("One");
word.add("Two");
word.add("Three");
word.add("Four");
word.add("Five");
return word;
}
// the method numberWord() is used to call
// the images that are added to the stack.
private List numberImage()
{
List image=new ArrayList<>();
image.add(R.drawable.one);
image.add(R.drawable.two);
image.add(R.drawable.three);
image.add(R.drawable.four);
image.add(R.drawable.five);
return image;
}
}
步骤6:为StackView创建适配器
转到我们的MainActivity所在的Java > com.example.stackview文件夹。 Java文件存在。用名称MainAdapter创建一个新的Java类。 com.example.stackview文件夹中的Java 。
使用MainAdapter。 Java文件
转到MainAdapter。 Java文件,并将下面给出的代码添加到该文件中。在这里,我们将实现getCount()和getView()方法。还调用构造函数来初始化对象。注释已添加到代码中,以更好地理解。
Java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import androidx.annotation.NonNull;
import java.util.List;
public class MainAdapter extends ArrayAdapter {
List numberWord;
List numberImage;
int itemLayout;
Context c;
// constructor is called to initialize the objects
public MainAdapter(List word, List image, int resource, Context context) {
super(context, resource, word);
numberWord = word;
numberImage = image;
itemLayout = resource;
c = context;
}
// getCount() is called to return
// the total number of words to be used
@Override
public int getCount() {
return numberWord.size();
}
// getView() is called to get position,
// parent and view of the images.
@NonNull
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = LayoutInflater.from(parent.getContext()).inflate(itemLayout, parent, false);
}
String word = numberWord.get(position);
Integer image = numberImage.get(position);
TextView textView = convertView.findViewById(R.id.text_view);
ImageView imageView = convertView.findViewById(R.id.image_view);
textView.setText(word);
imageView.setImageResource(image);
return convertView;
}
}
步骤7:将适配器类调用到MainActivity。 Java类
再次转到MainActivity。 Java文件,并将下面给出的代码添加到该文件中。
MainAdapter adapter = new MainAdapter(numberWord(), numberImage(), R.layout.item, MainActivity.this);
stackView.setAdapter(adapter);
最终的MainActivity。 Java文件如下:
Java
import android.os.Bundle;
import android.widget.StackView;
import androidx.appcompat.app.AppCompatActivity;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
StackView stackView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
stackView = (StackView) findViewById(R.id.stack_view);
MainAdapter adapter = new MainAdapter(numberWord(), numberImage(), R.layout.item, MainActivity.this);
stackView.setAdapter(adapter);
}
// the method numberWord() is used to
// add the text below corresponding images.
private List numberWord() {
List word = new ArrayList<>();
word.add("One");
word.add("Two");
word.add("Three");
word.add("Four");
word.add("Five");
return word;
}
// the method numberWord() is used to call
// the images that are added to the stack.
private List numberImage() {
List image = new ArrayList<>();
image.add(R.drawable.one);
image.add(R.drawable.two);
image.add(R.drawable.three);
image.add(R.drawable.four);
image.add(R.drawable.five);
return image;
}
}
输出: