📜  Android中的StackView

📅  最后修改于: 2021-05-08 20:30:25             🧑  作者: Mango

在本文中,我们将在Android Studio中实现StackViewStackView是一个小部件,可帮助您以堆叠卡的形式排列物品。每当我们翻转前面的项目时,后面的下一个项目就会到达前面。下面给出了一个示例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文件,并将下面给出的代码添加到该文件中。

最终的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;
    }
  
}

输出: