📜  如何在Android中创建可扩展CardView

📅  最后修改于: 2021-05-10 17:19:21             🧑  作者: Mango

可扩展Cardview可以轻松创建扩展面板,而无需编写样板代码。当在屏幕上高效而系统地显示数据或信息时,可扩展的卡片视图将变得非常有用。它可用于各种应用程序,例如“联系人”应用程序或“图库”应用程序。在这里,在本教程中,我们将使用Java在Android中创建一个简单的Expandable CardView。
展开式卡片视图

方法

步骤1:在Android Studio中创建新项目

  1. 单击文件,然后单击新建=>新建项目。
  2. 为项目模板选择“空活动”。
  3. 选择语言作为Java。
  4. 根据需要选择最小的SDK。

步骤2:添加CardView依赖关系

为了能够使用CardView元素,首先必须在项目中添加它的依赖项。在build.gradle(模块:应用程序)文件中,添加以下依赖项,然后单击立即同步以同步所做的更改。

步骤3:在Drawable文件夹中添加所有必需的Drawable资源

根据需要选择可绘制资源。在此,在CardView中,使用GeeksforGeeks图标的两个图像和其他2个图标来表示“扩大更多”或“减少更少”选项。以下是使用的geeksforgeeks图标:
icon_one
icon_two

下图显示了扩展图标的使用:
扩展图标

此处使用的扩展图标从Android Studio本身作为矢量资源导入。相同的步骤如下:

  1. 右键单击可绘制资源文件夹。
  2. 转到新的。
  3. 单击矢量资产。
  4. 弹出下面的框。单击剪贴画旁边的图标。
    矢量资产
  5. 从显示的各种图标中,选择以下两个图标:
    图标列表
    ic_baseline_expand_more_24
    ic_baseline_expand_less_24
    

    以下文件被添加到drawable文件夹中:

    ic_baseline_expand_more_24
    
    
    


    ic_baseline_expand_less_24
    
    
    


步骤4:修改XML布局

在XML文件中,创建整个布局以及在CardView展开后要显示的部分。这里的基本思想是将可扩展元素的可见性设置为“消失”“可见”

在下面的布局中,展开CardView以显示三个主题的列表。以下是activity_main.xml文件的代码。



  
    
    
  
        
        
  
            
            
  
  
                
  
                
  
                
  
                
                
  
            
  
            
            
  
                
                
  
                    
  
                    
                
  
                
                
  
                    
  
                    
                
  
                
                
  
                    
  
                    
                
            
  
        
    
  

步骤5:修改Java文件

MainActivity.java ,使用if-else语句指定条件来操纵可扩展元素的可见性。

package com.example.android.expandable_cardview;
  
import android.os.Bundle;
import android.transition.AutoTransition;
import android.transition.TransitionManager;
import android.view.View;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
import androidx.cardview.widget.CardView;
  
public class MainActivity extends AppCompatActivity {
  
    ImageButton arrow;
    LinearLayout hiddenView;
    CardView cardView;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        cardView = findViewById(R.id.base_cardview);
        arrow = findViewById(R.id.arrow_button);
        hiddenView = findViewById(R.id.hidden_view);
  
        arrow.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
  
                // If the CardView is already expanded, set its visibility
                //  to gone and change the expand less icon to expand more.
                if (hiddenView.getVisibility() == View.VISIBLE) {
  
                    // The transition of the hiddenView is carried out
                    //  by the TransitionManager class.
                    // Here we use an object of the AutoTransition 
                    // Class to create a default transition.
                    TransitionManager.beginDelayedTransition(cardView, 
                                                  new AutoTransition());
                    hiddenView.setVisibility(View.GONE);
                    arrow.setImageResource(R.drawable.ic_baseline_expand_more_24);
                }
  
                // If the CardView is not expanded, set its visibility 
                // to visible and change the expand more icon to expand less.
                else {
  
                    TransitionManager.beginDelayedTransition(cardView,
                                                new AutoTransition());
                    hiddenView.setVisibility(View.VISIBLE);
                    arrow.setImageResource(R.drawable.ic_baseline_expand_less_24);
                }
            }
        });
    }
}

输出:在模拟器上运行

想要一个节奏更快,更具竞争性的环境来学习Android的基础知识吗?
单击此处,前往由我们的专家精心策划的指南,以使您立即做好行业准备!