Android: Material Design 简单介绍(2)

翻译 2016年08月29日 04:00:01

使用 Recycler 和Card Views

为了在屏幕上显示美丽的风景,你需要一个view。你可以使用 RecyclerView作为ListView的替代者,但它比ListView更加强大,Google把它描述成一个‘非常灵活的view,可以在有限的空间里提供很大的数据来显示’。在这一张你将会证明这一点。

用xml去定义RecyclerView

在 activity_main.xml加上这一句

<android.support.v7.widget.RecyclerView
  android:id="@+id/list"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@color/light_gray"/>

现在你在页面上就有了一个RecyclerView,需要注意的是它的大小应该是match_parent的

初始化RecyclerView,指派LayoutManager

在MainActivity.java,

private RecyclerView mRecyclerView;
private StaggeredGridLayoutManager mStaggeredLayoutManager;

只是定义了两个变量,一个是RecyclerView的引用,另外一个是LayouyManager的引用

在onCreate最后加上下面的代码

mRecyclerView = (RecyclerView) findViewById(R.id.list);
mStaggeredLayoutManager = new StaggeredGridLayoutManager(1, StaggeredGridLayoutManager.VERTICAL);
mRecyclerView.setLayoutManager(mStaggeredLayoutManager);

在上面的代码里,你初始化的RecyclerView,并且指派了StaggeredGridLayout ,StaggeredGridLayout 你用它创建了竖直的挫列网格。第一个参数是列的数量,第二个是方向。1个列让它成为了一个list而不是grid,等会你将看到如何让它变成两列。

创建行,使用Card View

CardView 提供了一系列的背景,包括圆角和阴影,你将实现RecyclerView的悲歌条目,默认的CardView 继承自FrameLayout ,所以有存储其他子view 的能力

新建布局文件row_places.xml
这里写图片描述

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:card_view="http://schemas.android.com/apk/res-auto"
  android:id="@+id/placeCard"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:layout_margin="8dp"
  card_view:cardCornerRadius="@dimen/card_corner_radius"
  card_view:cardElevation="@dimen/card_elevation">

    <ImageView
      android:id="@+id/placeImage"
      android:layout_width="match_parent"
      android:layout_height="200dp"
      android:scaleType="centerCrop" />

    <!-- 响应点击事件用的-->
    <LinearLayout
      android:id="@+id/mainHolder"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="?android:selectableItemBackground"
      android:orientation="horizontal" />

    <LinearLayout
      android:id="@+id/placeNameHolder"
      android:layout_width="match_parent"
      android:layout_height="45dp"
      android:layout_gravity="bottom"
      android:orientation="horizontal">

      <TextView
        android:id="@+id/placeName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:gravity="left"
        android:paddingLeft="10dp"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textColor="@android:color/white" />

    </LinearLayout>

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

通过引入xmlns:card_view=”http://schemas.android.com/apk/res-auto”,你就可以使用类似card_view:cardCornerRadius and card_view:cardElevation 的属性,这些属性让 Material Design 使你的card-view真的像一个card

注意mainHolder,你需要?android:selectableItemBackground作为背景。这个会产生ripple 效果在用户点击的时候,很多app都这样,你等一会就会看到效果

实现Recycler VIew 的Adapter

创建新的java类,名字是TravelListAdapter

// 1
public class TravelListAdapter extends RecyclerView.Adapter<TravelListAdapter.ViewHolder> {

  Context mContext;

  // 2
  public TravelListAdapter(Context context) {
    this.mContext = context;
  }

  // 3
  public class ViewHolder extends RecyclerView.ViewHolder {
    public LinearLayout placeHolder;
    public LinearLayout placeNameHolder;
    public TextView placeName;
    public ImageView placeImage;

    public ViewHolder(View itemView) {
      super(itemView);
      placeHolder = (LinearLayout) itemView.findViewById(R.id.mainHolder);
      placeName = (TextView) itemView.findViewById(R.id.placeName);
      placeNameHolder = (LinearLayout) itemView.findViewById(R.id.placeNameHolder);
      placeImage = (ImageView) itemView.findViewById(R.id.placeImage);
    }
  }
}

注意发生了什么

  1. TravelListAdapter extend Recycler.Adapter 这样你就能重写很多方法
  2. 在构造方法里传递上下文,等会就知道用处
  3. 创建ViewHolder 类,虽然在ListView里是可选的,但是RecyclerView 强制使用,这个在滚动的时候表现更好,避免多次调用findViewById()

因为你的adapter是RecyclerView.Adapter的子类,所以需要重写下面的方法

// 1
@Override
public int getItemCount() {
  return new PlaceData().placeList().size();
}

// 2
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
  View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.row_places, parent, false);
  return new ViewHolder(view);
}

// 3
@Override
public void onBindViewHolder(final ViewHolder holder, final int position) {
  final Place place = new PlaceData().placeList().get(position);
  holder.placeName.setText(place.name);
  Picasso.with(mContext).load(place.getImageResourceId(mContext)).into(holder.placeImage);
}

发生了什么?

  1. getItemCount()返回数量
  2. onCreateViewHolder(…) 返回ViewHolder ,你要先用你的xml填充
  3. onBindViewHolder(…) 把Place 对象和ViewHolder进行了绑定,你将使用Picasso 来缓存图片


MainActivity 加上

private TravelListAdapter mAdapter;
mAdapter = new TravelListAdapter(this);
mRecyclerView.setAdapter(mAdapter);

这里写图片描述

你喜欢哪个地方?我喜欢加拿大。不管你想去哪,你都要记下来你要去那里干啥,首先,你要响应用户的点击

这里写图片描述

下一章我们将会讨论点击事件的实现

Android Material Design 史上最全的材料设计控件大全

主要内容: 本文将要介绍Material design和Support library控件,主要包括TextInputLayout、SwitchCompat、SnackBar、FloatingAc...
  • tyk9999tyk
  • tyk9999tyk
  • 2017年02月14日 11:25
  • 1027

[Material Design] 打造简单朴实的CheckBox

今天打造了一款 Material Design 风格的 CheckBox 控件,该控件简单,朴实,效率不错。就系统的 CheckBox 而言稍显累赘;原因无他,很多时候我们使用 CheckBox 只是...
  • qiujuer
  • qiujuer
  • 2015年01月05日 09:15
  • 4321

MaterialDesign_简介

MaterialDesign_简介1. 什么是MaterialDesign?伯乐在线上的介绍2. 使用MaterialDesign思想创作的App更多是不是感觉非常炫酷?从此再也不用照着IOS设计图纸...
  • ZhangLiChunZuoYa
  • ZhangLiChunZuoYa
  • 2016年06月04日 14:18
  • 1176

Android最佳实践之Material Design

Material概述及主题学习地址:http://developer.android.com/training/material/get-started.html 使用material design...
  • ada_dengpan
  • ada_dengpan
  • 2016年04月09日 23:53
  • 4859

创建简单的Android Material DesignDemo

1.关于MaterialDesign 还记得刚刚开始看到Android5.0刚出来的时候,感觉Android嵌入了MaterialDesign风格。那时候就感觉这种风格很好看。 2.Android上...
  • yubaoma
  • yubaoma
  • 2015年12月04日 11:37
  • 1474

Material Design学习之 CheckBox(详细分析,富有表现力)

转载请注明出处:王亟亟的大牛之路这些天一直在讲Material Design控件的内容,今天继续,说说CheckBox(妈蛋,好冷),上一篇的传送门:http://blog.csdn.net/ddwh...
  • ddwhan0123
  • ddwhan0123
  • 2016年01月25日 11:21
  • 5504

Android Material Design(一)史上最全的材料设计控件大全

主要内容: 本文将要介绍Material design和Support library控件,主要包括TextInputLayout、SwitchCompat、SnackBar、Fl...
  • johnny901114
  • johnny901114
  • 2016年07月15日 15:47
  • 17733

Material Design介绍

Material Design介绍转载请注明出处,如果有问题的话可以在下面评论,我都会一一回复。或者直接上我的主页给我回复。http://ibat.xyz背景在Google I/O大会上Google引...
  • BeanJerry
  • BeanJerry
  • 2016年05月12日 22:58
  • 673

material design 的android开源代码整理

material design 的android开源代码整理 1 android (material design 效果的代码库) 地址请点击:MaterialDesignLibrar...
  • qq153843338
  • qq153843338
  • 2015年03月27日 11:00
  • 1781

Android开发---十款 Material Design 风格的 Android 开源项目

自Android推出Material Design以来,原生的Android系统颜值越来越高,现在可以客观的说和苹果的iOS不分伯仲。这篇文章整理了一些优秀的遵循Material Design的And...
  • Maiduoudo
  • Maiduoudo
  • 2017年01月19日 21:24
  • 7085
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android: Material Design 简单介绍(2)
举报原因:
原因补充:

(最多只允许输入30个字)