Android Material Design之在RecyclerView中嵌套CardView实现

前言:

第一眼就爱上了Android的Material Design风格。以前倒对Android的界面风格不那么喜欢,扁平化的界面设计真是好看。

其实,这个嵌套操作在实现上并没有什么难点。可是,我还在Eclipse上没有试验成功。后来换到Android Studio上就OK了。以下是实现过程。

笔者开发环境:

系统:Windows 7 旗舰版

IDE:Android Studio v1.0

工具包:cardview-v7-21.0.0.aar

recyclerview-v7-21.0.0.aar

效果图展示:

关键代码:

主界面展示的MainActivity:

public class MainActivity extends FragmentActivity {

    private int getLayoutResID() {
        return R.layout.activity_main;
    }

    private RecyclerView mRecyclerView = null;

    private String[] dataset = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(getLayoutResID());

        initEvent();
    }

    private void initEvent() {
        initViews();

        initData();

        setViews();
    }

    private void initViews() {
        mRecyclerView = (RecyclerView) findViewById(R.id.activity_main_recyclerView);
    }

    private void initData() {
        // 创建数据集
        dataset = new String[100];
        for (int i = 0; i < dataset.length; i++) {
            dataset[i] = "item " + (i + 1);
        }
    }

    private void setViews() {
        LinearLayoutManager layoutManager = new LinearLayoutManager(this);
        layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
        mRecyclerView.setLayoutManager(layoutManager);

        RecyclerViewAdapter adapter = new RecyclerViewAdapter(dataset);
        mRecyclerView.setAdapter(adapter);
    }
}

List的配置器RecyclerViewAdapter:

public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {

	// 数据集
	private String[] mDataset;

	public RecyclerViewAdapter(String[] dataset) {
		super();
		mDataset = dataset;
	}

	@Override
	public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
		View view = View.inflate(viewGroup.getContext(), R.layout.recyclerview_item, null);

		// 创建一个ViewHolder
		ViewHolder holder = new ViewHolder(view);

        holder.mTextView = (TextView) view.findViewById(R.id.activity_card_view_label_textview);

		return holder;
	}

	@Override
	public void onBindViewHolder(ViewHolder viewHolder, int i) {
		// 绑定数据到ViewHolder上
		viewHolder.mTextView.setText(mDataset[i]);
	}

	@Override
	public int getItemCount() {
		return mDataset.length;
	}

	public static class ViewHolder extends RecyclerView.ViewHolder {

		public TextView mTextView;

		public ViewHolder(View itemView) {
			super(itemView);
			// mTextView = (TextView) itemView;
		}
	}
}

主界面布局文件activity_main.xml:

<?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.support.v7.widget.RecyclerView
        android:id="@+id/activity_main_recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

RecyclerView的单元item布局recyclerview_item.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:orientation="horizontal"
        card_view:cardBackgroundColor="#ffFF8C00"
        card_view:cardCornerRadius="4dp" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="100dp" >

            <ImageView
                android:id="@+id/activity_card_view_imageview"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_centerInParent="true"
                android:scaleType="centerCrop"
                android:adjustViewBounds="true"
                android:src="@drawable/notre_dame_de_paris" />

            <TextView
                android:id="@+id/activity_card_view_label_textview"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="10dip"
                android:layout_alignParentBottom="true"
                android:layout_centerInParent="true"
                android:textColor="@android:color/white"
                android:textSize="24sp"
                android:text="@string/show_label" />
        </RelativeLayout>

    </android.support.v7.widget.CardView>

</RelativeLayout>

注意事项:

1.如果可以请使用Android Studio来开发它,我也不知道为什么我的Eclipse在不报错的情况下,为什么运行不了。我也要再摸索一下,后期再补到文章中来。

2.在看到代码和程序运行的效果图来看,可能你会觉得这个跟一个普通的RelativeLayout有什么区别?不过,的确CardView是继承自FrameLayout,它们都是ViewGroup,即其他控件的容器。所以这一点也就不足为奇了。

3.虽然CardView与RelativeLayout都是ViewGroup,有很多类似的东西,也可以把CardView替换成RelativeLayout。不过,CardView还有一些比较优越的属性。elevation(CardView的Z轴阴影),cardBackgroundColor(CardView的卡片颜色)和cardConerRadius(CardView卡片的四角圆角矩形程度)。

4.elevation:在API21(Android L)等级以上才拥有此属性。只能通过xml中的elevation属性指定;

cardBackgroundColor:Android2.0以上有效,只能通过xml的cardBackgroundColor属性进行指定;

cardConerRadius:Android2.0以上有效,单位dimen(dp,px,sp),可以通过xml指定,也可以通过Java代码的setRadius指定。

源码下载:

http://download.csdn.net/detail/u013761665/8959985

版权声明:本文为博主原创文章,未经博主允许不得转载。http://blog.csdn.net/lemon_tree12138

时间: 2024-10-09 21:16:05

Android Material Design之在RecyclerView中嵌套CardView实现的相关文章

Android Material Design学习之RecyclerView代替 ListView

前言 # Android Material Design越来越流行,以前很常用的 ListView 现在也用RecyclerView代替了,实现原理还是相似的.笔者实现一下 RecyclerView,代码比较简单,适合初学者,如有错误,欢迎指出. 源码地址(欢迎star) https://github.com/studychen/SeeNewsV2 本文链接 http://blog.csdn.net/never_cxb/article/details/50495505,转载请注明出处. 复习 L

Android Material Design系列之RecyclerView和CardView

去年很早之前,我就讲解过RecyclerView的使用,今天我们就在讲解CardView的时候,顺便再把RecyclerView同时讲解一下.RecyclerView.CardView为用于显示复杂视图的新增Widget.接下来看看如何使用吧. RecyclerView RecyclerView介绍 RecyclerView作为替代ListView使用,它更先进,更灵活,RecyclerView标准化了ViewHolder,ListView中convertView是复用的,在RecyclerVi

Android Material Design初步认识

Android M新控件有很多,Toolbar,TabLayout,AppBarLayout,NavigationView,CoordinatorLayout,CollapsingToolbarLayout等等.写出这篇文章纯粹因为本人记忆力不行,特意来此记录,如有不对的地方,还请帮忙纠正! 如果想快速的认识怎么用以上控件,Google推出的Android Studio已经把整个Material整合成一个Model,大家直接Create New Project就能很直观的知道怎么用了~下面这张图

Android Material Design 兼容库的使用

Android Material Design 兼容库的使用 mecury 前言:近来学习了Android Material Design 兼容库,为了把这个弄懂,才有了这篇博客,这里先推荐两篇博客:1.Android Material Design 兼容库的使用详解2.Android应用Design Support Library完全使用实例第一篇博客是这个兼容库的详细解析,我参考了里面的许多内容,第二篇是兼容库的大致介绍,如果你能把这两篇全部弄懂,我这篇也没有必要看了.说了这么多,开始正文吧

android Material design是什么

Material design概述: Material design是一套UI样式标准,应该会提供一些新的API这写API包含了以下五大模块内容,分别是: Material Theme New Widgets View Shadows Animations New Capabilities for Drawables 1.material新的主题样式. 主题的颜色.动画.反馈效果都可以自定义: 2.控件阴影. 在原来的X,Y的基础之上增加了Z轴的阴影控制,Z值大的控件将显示在上面. 3.Recy

Android Material Design带来的UI变革

谷歌Matias Duarte称,"Material Design是美丽和大胆的,因为干净的排版和布局简单且容易理解.内容才是焦点. 谷歌I/O 014开发者大会上宣布全新的设计语言"Material Design",适用于旗下所有平台,包括 Android.Chrome OS 和网页. 谷歌Matias Duarte称,"Material Design是美丽和大胆的,因为干净的排版和布局简单且容易理解.内容才是焦点." Material Design 初

Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计

?? Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计 Android Ripple Effect波纹荡漾效果,是Android Material Design视觉设计引入的一种交互设计效果简言之:当点击某个view时候,view会出现像水波波纹一样的荡漾传播效果.在最新版的Android如Android 5.0或以上版本中默认具有该效果,但在低版本Android中没有,如果需要向下兼容低版本设备,则需要自己写代码实现,实现步骤: 第1步:

Android Material Design新UI控件使用大全 一

序言 自从谷歌在2014年的IO大会上推出了Material Design新的设计规范后,安卓应用的整体美观程度提升了很大的一个层次, 安卓再也不是又黑又丑的界面,取而代之的是拥有丰富的颜色,美观的按钮,好的用户体验;但是刚开始的话这种设计规范只能在Android 5.0以上的手机上运行,导致开发者也只是自己去体验,在国内并没有大范围的推广,App的质量并不能大幅度的提升,但是作为改变世界的Google公司不久就推出了兼容库Android Material Design,这绝对是业界良心了,我们

Material Design:利用RecyclerView CardView实现新闻卡片样式

Material Design:利用RecyclerView CardView实现新闻卡片样式 明桑Android 主要介绍:`RecyclerView` 和 `CardView`的用法,通过RecyclerView和CardView实现新闻卡片样式... worlduc.com/blog2012.aspx?bid=34337742 worlduc.com/blog2012.aspx?bid=34337761 worlduc.com/blog2012.aspx?bid=34337794 worl