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

📅  最后修改于: 2021-10-28 02:24:13             🧑  作者: Mango

可扩展 Cardview提供了创建扩展面板的功能,无需太多麻烦,也无需编写样板代码。当涉及在屏幕上高效和系统地呈现数据或信息时,可扩展的卡片视图变得非常有用。它用于各种应用程序,例如,通讯录应用程序或图库应用程序。在本教程中,我们将使用Java在 Android 中创建一个简单的可扩展 CardView。
可扩展的卡片视图

方法

第 1 步:在 Android Studio 中创建一个新项目

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

第二步:添加 CardView 依赖

为了能够使用 CardView 元素,您首先必须在项目中添加它的依赖项。在build.gradle (Module: app)文件中添加以下依赖项并单击Sync now以同步所做的更改。

第 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 展开后显示的部分。这里的基本思想是将可扩展元素的可见性设置为‘gone’‘visible’

在下面的布局中,展开 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 的基础知识吗?
单击此处前往由我们的专家精心策划的指南,旨在让您立即做好行业准备!