学习Android的新的UI控件Material Design(四)——卡片式布局GardView的使用

转载 2018年04月17日 21:13:17

功能:实现卡片式布局,主要用于加载图片并合理的显示出来,其中的优化用到了AppBarLayout控件,具体见文章

首先需要导入GardView  + RecyclerView来实现图片加载和显示的功能

1.在库中导入他们的依赖如下:

compile 'com.android.support:recyclerview-v7:26+'
compile 'com.android.support:cardview-v7:26+'
compile 'com.github.bumptech.glide:glide:3.7.0'

其中activity_main.xml的代码如下:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|enterAlways|snap"/>
 
  <android.support.v7.widget.RecyclerView
      android:id="@+id/recycler_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent" />

然后我们这里定义一个实体类用户获取图片的名称和ID的资源,Fruit代码如下:

package com.example.administrator.testtoolbar;

/**
 * Created by Administrator on 2018/4/16/016.
 */

//水果的实体类
public class Fruit {
    private String name;
    private int imageId;

    public  Fruit(String name,int imageId){
        this.name = name;
        this.imageId = imageId;
    }

    public String getName() {
        return name;
    }

    public int getImageId() {
        return imageId;
    }
}

然后需要定义一个在RecyclerView下的布局,fruit_item.xml代码如下:

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    app:cardCornerRadius="4dp">
    <LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/fruit_image"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop"/>
        <TextView
            android:id="@+id/fruit_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="16sp"/>
    </LinearLayout>
</android.support.v7.widget.CardView>

接下来为RecyclerView建立一个适配器,新建一个FruitAdapter类,代码如下:

package com.example.administrator.testtoolbar;

import android.content.Context;
import android.content.Intent;
import android.support.v7.widget.CardView;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;

import java.util.List;

/**
 * Created by Administrator on 2018/4/16/016.
 */

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

    private Context mContext;
    private List<Fruit> mFruitList;

    static class ViewHolder extends RecyclerView.ViewHolder{

        CardView cardView;
        ImageView fruitImage;
        TextView fruitName;

        public ViewHolder(View view) {
            super(view);
            cardView = (CardView) view;
            fruitImage = view.findViewById(R.id.fruit_image);
            fruitName = view.findViewById(R.id.fruit_name);
        }
    }

    public FruitAdapter(List<Fruit> fruitList){
        mFruitList = fruitList;
    }
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
       if (mContext == null){
           mContext = parent.getContext();
       }
        View view = LayoutInflater.from(mContext).inflate(R.layout.fruit_item,
                parent,false);

        return new ViewHolder(view);
    }


    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        Fruit fruit = mFruitList.get(position);
        holder.fruitName.setText(fruit.getName());
        Glide.with(mContext).load(fruit.getImageId()).into(holder.fruitImage);
    }

    @Override
    public int getItemCount() {
        return mFruitList.size();
    }

}

最后修改MainActivity中的代码如下:

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    private Fruit[] fruits = {new Fruit("Apple",R.drawable.apple),
            new Fruit("Banana", R.drawable.banana),
            new Fruit("orange",R.drawable.orange),new Fruit("watermelon",R.drawable.watermelon),
//            new Fruit("Apple",R.drawable.apple),new Fruit("Banana",R.drawable.banana),
//            new Fruit("Apple",R.drawable.apple),new Fruit("Banana",R.drawable.banana),
//            new Fruit("Apple",R.drawable.apple),new Fruit("Banana",R.drawable.banana)
    };

    private List<Fruit> fruitList = new ArrayList<>();
    private FruitAdapter adapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化水果的类
        initFruits();
    }

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
//初始化GridView控件并将数据传入适配器中
GridLayoutManager layoutManager = new GridLayoutManager(this,2);
recyclerView.setLayoutManager(layoutManager);
adapter = new FruitAdapter(fruitList);
recyclerView.setAdapter(adapter);//将类的数据添加到列表中

private void initFruits() {
    fruitList.clear();
    for(int i = 0; i < 50; i++){
        Random random = new Random();
        int index = random.nextInt(fruits.length);
        fruitList.add(fruits[index]);
    }
}

最后添加AppBarLayout实现控件布局之间的优化如下

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

  <android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

      <android.support.design.widget.AppBarLayout
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          >
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:layout_scrollFlags="scroll|enterAlways|snap"/>
      </android.support.design.widget.AppBarLayout>


      <android.support.v7.widget.RecyclerView
          android:id="@+id/recycler_view"
          android:layout_width="match_parent"
          android:layout_height="match_parent" />

Android Material Design 新控件

-
  • 1970年01月01日 08:00

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

序言上一篇中我们介绍了几个简单的新UI控件,相信很多小伙伴对Materil Design的视觉效果有了一定的了解,今天我们就继续介绍其他几个控件的玩儿法,让我们一探Materil Design的究竟,...
  • SmallCheric
  • SmallCheric
  • 2016-04-25 01:54:44
  • 7902

ANDROID L——Material Design详解(主题和布局)

Android L特性介绍——Material Design。详解Material Design中主题的使用和布局的简介...
  • a396901990
  • a396901990
  • 2014-10-15 23:55:50
  • 28878

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

序言自从谷歌在2014年的IO大会上推出了Material Design新的设计规范后,安卓应用的整体美观程度提升了很大的一个层次, 安卓再也不是又黑又丑的界面,取而代之的是拥有丰富的颜色,美观的按钮...
  • SmallCheric
  • SmallCheric
  • 2016-04-21 02:37:45
  • 3666

MaterialDesign学习篇(七),CardView卡片式布局的使用

什么是CardViewCardView顾名思义就是一个卡片型的View,它是在Android5.0引入的一个控件,作为一个容器使用,它本身继承于FrameLayout,可以说它的使用和FrameLay...
  • Chay_Chan
  • Chay_Chan
  • 2017-08-02 16:25:50
  • 663

Material Design之卡片式布局

1.CardView 是用于实现卡片式布局的重要控件,实际上为一个FrameLayout,只是提供额外的圆角和阴影效果。用法如下: android.support.v7.widget.Card...
  • u010273007
  • u010273007
  • 2017-07-16 16:11:04
  • 194

ANDROID L——Material Design详解(UI控件)

Android L(5.0)Material Desgin详解之UI控件篇,主要介绍了RecyclerView,CardView两个新增控件的使用方法。...
  • a396901990
  • a396901990
  • 2014-10-21 00:26:15
  • 23383

android6.0进入Material Design时代

Material Design 官方Material Design详细介绍文档:http://www.google.com/design/spec/material-design/introdu...
  • cao861544325
  • cao861544325
  • 2015-09-05 11:13:23
  • 13994

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

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

Material Design 最全解析_5 UI控件

概述Material Design为开发者提供了一系列的UI控件,对于开发者来说实在是福音。 今天这篇博客就记录一下UI新控件方面的知识。先看一下大纲UI控件Android5.0基于Materia...
  • u011002668
  • u011002668
  • 2016-07-22 16:51:29
  • 1243
收藏助手
不良信息举报
您举报文章:学习Android的新的UI控件Material Design(四)——卡片式布局GardView的使用
举报原因:
原因补充:

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