Android卡片式布局的简单实现方法

最新推荐文章于 2024-06-25 23:14:58 发布
最新推荐文章于 2024-06-25 23:14:58 发布
阅读量4.2k 收藏 6
点赞数
文章标签： android eclipse 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czcl123/article/details/50733174
版权 
之前在网上看到一个开源项目cardslib感觉做的很漂亮，个人也喜欢这种布局。但是作者使用Androidstudio写的，试了几次没办法导入Eclipse，AndroidStudio没试过（因为没安装），于是就想自己做一个，这里用的工具是Eclipse。

1、布局设计

首先添加一个列表的项目，这里包括一个textview和六个button，button分为两组分别添加到两个里nearlayout中。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/border"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/list_item_card_text"
        style="@style/ListItemText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:text="卡片布局测试"
        />

    <View
        android:id="@+id/list_item_seperator"
        android:layout_width="match_parent"
        android:layout_height="1dip"
        android:layout_marginLeft="5dip"
        android:layout_marginRight="5dip"
         />

    <LinearLayout
        style="?android:attr/buttonBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:orientation="horizontal" 

        >

        <Button
            android:id="@+id/list_item_card_button_1"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_margin="0dip"
            android:layout_weight="1"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:paddingLeft="5dp"
            android:paddingTop="40dp"
            android:paddingRight="10dp"
            android:paddingBottom="20dp"
            android:drawableTop="@drawable/speech_balloon"
            android:text="卡片1"
            android:textSize="12sp"

            android:textStyle="normal"  />

        <Button
            android:id="@+id/list_item_card_button_2"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_margin="0dip"
            android:layout_weight="1"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:paddingLeft="5dp"
            android:paddingTop="40dp"
            android:paddingRight="5dp"
            android:paddingBottom="20dp"
            android:drawableTop="@drawable/speech_balloon"
            android:text="卡片2"
            android:textSize="12sp"
            android:textStyle="normal"  />

         <Button
            android:id="@+id/list_item_card_button_3"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_margin="0dip"
            android:layout_weight="1"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:paddingLeft="5dp"
            android:paddingTop="40dp"
            android:paddingRight="5dp"
            android:paddingBottom="20dp"
            android:drawableTop="@drawable/speech_balloon"
            android:text="卡片3"
            android:textSize="12sp"

            android:textStyle="normal"  />
    </LinearLayout>

     <LinearLayout
        style="?android:attr/buttonBarStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 

        >
        <Button
            android:id="@+id/list_item_card_button_4"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_margin="0dip"
            android:layout_weight="1"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:paddingLeft="5dp"
            android:paddingTop="40dp"
            android:paddingRight="5dp"
            android:paddingBottom="20dp"
            android:drawableTop="@drawable/speech_balloon"
            android:text="卡片4"
            android:textSize="12sp"

            android:textStyle="normal" />

        <Button
            android:id="@+id/list_item_card_button_5"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_margin="0dip"
            android:layout_weight="1"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:paddingLeft="5dp"
            android:paddingTop="40dp"
            android:paddingRight="5dp"
            android:paddingBottom="20dp"
            android:drawableTop="@drawable/speech_balloon"
            android:text="卡片5"

            android:textSize="12sp"
            android:textStyle="normal" />

         <Button
            android:id="@+id/list_item_card_button_6"
            style="?android:attr/buttonBarButtonStyle"
            android:layout_width="match_parent"
            android:layout_height="120dp"
            android:layout_margin="0dip"
            android:layout_weight="1"
            android:focusable="false"
            android:focusableInTouchMode="false"
            android:paddingLeft="5dp"
            android:paddingTop="40dp"
            android:paddingRight="5dp"
            android:paddingBottom="20dp"
            android:drawableTop="@drawable/speech_balloon"
            android:text="卡片6"
            android:textSize="12sp"

            android:textStyle="normal" />
    </LinearLayout>

</LinearLayout>

效果图入下：
这里写图片描述

这里调整图片位置语句为：
android:paddingLeft="5dp"
android:paddingTop="40dp"
android:paddingRight="5dp"
android:paddingBottom="20dp"

可以看出没有边框，这里为每个卡片添加一个边框。在文件夹drawable_hdpi下添加xml文件border:

<?xml version="1.0" encoding="UTF-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <solid android:color="#ffffff" />
    <stroke
        android:width="0.01dp"
        android:color="#003399"
        />
    <padding
     android:bottom="0dp"
     android:top="0dp"
     android:left="0dp"
     android:right="0dp"   
        />
    </shape>

效果图如下：
这里写图片描述
最后添加主activity的代码编辑如下： 

![最后效果](https://img-blog.csdn.net/20160224200401883)

2、代码编写
------
这里代码编写比较简单。
首先构造适配器，这里继承了BaseAdapter，在getView方法里填充列表项目的图层，然后在getView方法里为各个卡片添加触发器。

public class CardsAdapter extends BaseAdapter
{

private List<String> items;
private final OnClickListener itemButtonClickListener;
private final Context context;

public CardsAdapter(Context context, List<String> items,OnClickListener itemButtonClickListener) 
{
    this.context = context;
    this.items = items;
    this.itemButtonClickListener = itemButtonClickListener;
}

@Override
public int getCount() 
{
    return items.size();
}

@Override
public String getItem(int position) 
{
    return items.get(position);
}

@Override
public long getItemId(int position) 
{
    return position;
}

@Override
public View getView(final int position, View convertView, ViewGroup parent) 
{

    ViewHolder holder;

    if (convertView == null) 
    {
        convertView = LayoutInflater.from(context).inflate( R.layout.list_item_card, null);

        holder = new ViewHolder();
        holder.itemText = (TextView) convertView.findViewById(R.id.list_item_card_text);
        holder.itemButton1 = (Button) convertView.findViewById(R.id.list_item_card_button_1);
        holder.itemButton2 = (Button) convertView.findViewById(R.id.list_item_card_button_2);
        convertView.setTag(holder);

    } 
    else 
    {
        holder = (ViewHolder) convertView.getTag();
    }

    holder.itemText.setText(items.get(position));

    holder.itemButton1.setOnClickListener(new OnClickListener() 
    {

        @Override
        public void onClick(View v) 
        {
             new AlertDialog.Builder(context)
             .setTitle("当前点击为："+position).setMessage("是否提交？")
             .setPositiveButton("是", null).setNegativeButton("否", null).show();
        }
    });
    holder.itemButton2.setOnClickListener(new OnClickListener() 
    {

        @Override
        public void onClick(View v) 
        {
             new AlertDialog.Builder(context)
             .setTitle("当前点击为："+position).setMessage("是否提交？")
             .setPositiveButton("是", null).setNegativeButton("否", null).show();
        }
    });

    return convertView;
}

private static class ViewHolder 
{
    private TextView itemText;
    private Button itemButton1;
    private Button itemButton2;
}

}

然后在图层里填充listview

public class CardLayoutFragment extends Fragment
{

private ListView cardsList;

public CardLayoutFragment() 
{

}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) 
{
    View rootView = inflater.inflate(R.layout.fragment_card_layout,container, false);

    cardsList = (ListView) rootView.findViewById(R.id.cards_list);
    setupList();
    return rootView;
}

private void setupList() 
{
    cardsList.setAdapter(createAdapter());
    cardsList.setOnItemClickListener(new ListItemClickListener());
}

private CardsAdapter createAdapter() 
{
    ArrayList<String> items = new ArrayList<String>();

    for (int i = 0; i < 2; i++) 
    {
        items.add(i, "Text for List Item " + i);
    }

    return new CardsAdapter(getActivity(), items,new ListItemButtonClickListener());
}

private final class ListItemButtonClickListener implements OnClickListener 
{
    @Override
    public void onClick(View v) 
    {

    }
}

private final class ListItemClickListener implements OnItemClickListener 
{
    @Override
    public void onItemClick(AdapterView<?> parent, View view, int position,long id) 
    {
        Toast.makeText(getActivity(), "Clicked on List Item " + position,Toast.LENGTH_SHORT).show();
    }
}

}

“`
最后也行效果如下：
这里写图片描述
这里写图片描述

附上demo
http://download.csdn.net/detail/czcl123/9442391

czcl123
关注
Android实现简单卡片布局
08-26
主要为大家详细介绍了Android实现卡片布局的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android卡片布局实现
02-24
这里测试已经通过，卡片用的是button，线性布局，也有其它实现方法大家一起交流。
Android开发系列（十）Jetpack Compose之Card
最新发布
06-25 549
从这里可以看到，Card其实就是一个容器，只不过这个容器可以设置特定的外观，主要是上面提到的elevation、shape、color、padding。Card是一种常用的UI组件，用于显示一个具有卡片样式的容器。使用Jetpack Compose的Card组件可以让您轻松地创建具有卡片样式的UI元素，并为其添加交互性和样式。使用Card组件，您可以轻松地创建带有卡片效果的UI元素。shape（形状）：Card组件支持自定义形状，您可以通过指定一个Shape对象来改变卡片的形状。
android卡片布局
qq_45926015的博客
03-12 840
android添加阴影 <?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="rectangle"> <solid android:color="#CABBBBBB"/>
android 卡片式布局<CardView>
仰望星空的博客
03-28 2137
https://www.cnblogs.com/laoyimou/p/6639685.html
android——卡片式布局
weixin_30500105的博客
09-05 318
一、CardView <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width=...
android卡片式布局效果
11-10
在Android开发中，卡片式布局（CardView）已经成为设计用户界面的一种流行趋势，它能够以清晰、美观的方式展示信息。本教程将引导你如何利用ListView和自定义适配器实现卡片式UI效果。 首先，我们需要了解`CardView...
Android 卡片层叠式可动态切换布局-IT计算机-毕业设计.zip
04-05
在卡片层叠式布局中，Adapter通常会将数据集转换为View对象，这些View对象会显示在卡片上。开发者需要自定义Adapter，以便处理卡片的创建、更新和复用，同时确保数据与视图的正确绑定。 再者，自定义View是实现独特...
android卡片式风格布局
12-21
下面，我们将深入探讨卡片式布局的设计原理、实现方法以及在实际应用中的注意事项。 首先，卡片式布局的核心在于其简洁明了的视觉效果。卡片通常由背景色、边框、阴影等元素构成，通过这些元素可以创建出一个独立且...
Android控件CardView实现卡片布局
08-26
* 实现卡片布局的效果，提供了一个卡片式的视图容器 * 提供了阴影、圆角、elevation 等效果 * 可以容纳其他视图控件，例如 ImageView、TextView 等 * 提供了灵活的布局方式，开发者可以根据需要自定义 CardView 的...
Android开发学习之卡片式布局的简单实现
热门推荐
素履独行 | 元培的个人博客
01-01 1万+
GoogleNow是Android4.1全新推出的一款应用他，它可以全面了解你的使用习惯，并为你提供现在或者未来可能用到的各种信息，GoogleNow提供的信息关联度较高，几乎是瞬间返回答案，总而言之，GoogleNow是Google提出的全新搜索概念。当然，GoogleNow最为引人注目的当属它的卡片式设计。我们首先来看几张GoogleNow的图片：
安卓Android Studio 控件之 卡片式ListView效果
09-10
在安卓APP开发过程中，ListView是常用的数据展示控件，不过系统自带的样式过于单调，而且显示数据单一。下面介绍一个卡片式的ListView控件。同样是经过测试，拿来主义，根据步骤一步步就能实现。 首先总体介绍一下思路：还是使用ListView控件，但是样式需要自己定义一个xml文件，在ListView控件引用样式时调用自己定义的xml文件即可。 主要功能：以卡片样式显示数据，卡片内数据可以实现点击事件的操作。以便于下一步操作选中的数据。 ———————————————— 版权声明：本文为CSDN博主「jackiesky1206」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/jackiesky1206/article/details/120214118
android横向卡片式布局,创建卡片式布局  |  Android 开发者  |  Android Developers
weixin_30237677的博客
05-26 399
应用通常需要在样式相似的容器中显示数据。这些容器通常在列表中用于保存每项的信息。借助系统提供的图 1. 卡片示例添加依赖项CardView 微件是 AndroidX 的一部分。如需在项目中使用该微件，请将以下依赖项添加到应用模块的 build.gradle 文件中：dependencies {implementation "androidx.cardview:cardview:1.0.0"}创建卡...
Android Material Design 之 CardView卡片式布局
weixin_37077736的博客
09-13 1193
CardView卡片式布局
Android卡片式列表布局
bilue的博客
01-10 3518
只做个人记录 整理 方便下次使用 网上文章很多，写过来也是抄别人的，所以直接贴链接。RecyclerView配合CardView使用两篇文章【android】使用RecyclerView和CardView,实现知乎日报精致布局Material Design UI WidgetsRecyclerView 详细讲解原文Android RecyclerView 使用完全解析 体验艺术般的控件注意点an
Android 实现卡片堆叠,卡片管理效果（带动画）
Sand哥的博客
03-10 5271
Android 实现卡片管理效果，会员卡管理效果，卡片堆叠效果
Android卡片布局的两种实现方式
Microstrong
01-17 1万+
卡片布局可以单独使用，也可以放到ListView和RecyclerView中当做列表项里的内容来使用。本文都是放到ListView中使用。 一、使用ShapeDrawable资源实现卡片布局 实现效果图： （1）list_item.xml这个文件是用来设置ListView中每一项的卡片内容 <LinearLayout xmlns:android="http://schemas.a
android精美卡片式布局Cardview_RecyclerView
X_tuan_tuan的博客
06-13 2639
一、activity_main.xml要这么写，其中主要是包含一个RecyclerView. <?xml version="1.0" encoding="utf-8"?> <androidx.drawerlayout.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"
自定义布局：Android FlowLayout 实现卡片式显示
"Android编程重写ViewGroup实现卡片布局的方法" 在Android开发中，自定义布局是实现复杂界面设计...这个自定义布局可以方便地在Android应用中展示数据集，例如卡片式列表或网格视图，且易于定制以满足特定的设计要求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值