Android 之路40---CardView控件

导读

1. RecylerView的简介及JAR包的导入
2. CardView属性
3. CardView线性效果实现
4. CardView瀑布流效果实现

RecylerView的简介及JAR包的导入

⚠️这也是导入其他jar包的方法

CardView属性

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent">

    <!--xmlns:app="http://schemas.android.com/apk/res-auto" 这个设置是设置cardView属性必要的-->

    <!--cardBackgroundColor 卡片布局的背景颜色
    cardCornerRadius 卡片布局的圆角大小
    contentPadding 卡片布局与内容之间的距离
    cardElevation 设置卡片阴影大小
    cardUseCompatPadding 是否设置内边距(CardView显示部分相对于整个CardView所占部分而言)
    -->
    <android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="300dp"
        app:cardBackgroundColor="#00ff00"
        app:cardCornerRadius="10dp"
        app:contentPadding="10dp"
        app:cardElevation="20dp"
        app:cardUseCompatPadding="true"
        >
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/conan"/>
    </android.support.v7.widget.CardView>

</RelativeLayout>

CardView线性效果实现

主页面布局文件 activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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/rv"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>





</RelativeLayout>

卡片布局文件 layout.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="wrap_content"
    android:layout_height="300dp"
    android:layout_gravity="center"
    android:background="#00ff00"
    app:cardCornerRadius="15dp"
    app:contentPadding="15dp"
    app:cardElevation="10dp"
    app:cardUseCompatPadding="true">


    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:src="@drawable/conan"
        android:layout_gravity="center" />


    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="柯南VS基德"
        android:textSize="30sp"
        android:textColor="#ff0000"
        android:gravity="center"
        android:layout_gravity="center_horizontal"/>

<!--在下边的会被放在上边-->

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

主页面java文件 MainActivity.java

package com.hala.view01;

import android.app.Activity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
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 java.util.List;


public class MainActivity extends Activity {


    private RecyclerView recyclerView;
    private List<Image> images;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recyclerView = (RecyclerView)findViewById(R.id.rv);
        images=DataUtil.getData();

        //设置布局
        // LinearLayoutManager:线性布局
        //GridLayoutManager:网格布局
        //StaggeredGridLayoutManager:瀑布流布局
        recyclerView.setLayoutManager(new LinearLayoutManager(MainActivity.this));

        //将适配器设置给控件
        recyclerView.setAdapter(new ImageAdapter());
    }


    class ImageAdapter extends RecyclerView.Adapter<ImageViewHolder>{

        @Override
        public ImageViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View itemView=LayoutInflater.from(MainActivity.this).inflate(R.layout.layout,null);
            return new ImageViewHolder(itemView);
        }

        @Override
        public void onBindViewHolder(ImageViewHolder holder, int position) {

            Image image=images.get(position);
            holder.imageView.setImageResource(image.getIconId());
            holder.textView.setText(image.getName());

        }

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


    class ImageViewHolder extends RecyclerView.ViewHolder{

        ImageView imageView;
        TextView textView;

        public ImageViewHolder(View itemView) {
            super(itemView);
            imageView=(ImageView)itemView.findViewById(R.id.iv);
            textView=(TextView)itemView.findViewById(R.id.tv);

        }
    }
}   

图像java文件 Image.java

package com.hala.view01;

/**
 * Created by air on 2018/2/10.
 */

public class Image {

    private int iconId;
    private String name;


    public Image(int iconId, String name) {
        this.iconId = iconId;
        this.name = name;
    }

    public int getIconId() {
        return iconId;
    }

    public void setIconId(int iconId) {
        this.iconId = iconId;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

容器java文件 DataUtil.java

package com.hala.view01;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by air on 2018/2/10.
 */

public class DataUtil {

    public static List<Image> getData(){
        List<Image> images=new ArrayList<>();

        for(int i=0;i<3;i++) {

            Image image = new Image(R.drawable.conan, "柯南");
            images.add(image);
            Image image1 = new Image(R.drawable.conan, "柯南1");
            images.add(image1);
            Image image2 = new Image(R.drawable.conan, "柯南2");
            images.add(image2);
            Image image3 = new Image(R.drawable.conan, "柯南3");
            images.add(image3);

        }
        return images;
    }
}

CardView瀑布流效果实现

其他文件相同

MainActivity.java

package com.hala.view01;

import android.app.Activity;
import android.graphics.Rect;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.StaggeredGridLayoutManager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;


public class MainActivity extends Activity {


    private RecyclerView recyclerView;
    private List<Image> images;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recyclerView = (RecyclerView)findViewById(R.id.rv);
        images=DataUtil.getData();

        //设置布局
        // LinearLayoutManager:线性布局
        //GridLayoutManager:网格布局
        //StaggeredGridLayoutManager:瀑布流布局
        //第一个参数：列数或者行数
        //第二个参数：垂直摆放，或者水平摆放
        recyclerView.setLayoutManager(new StaggeredGridLayoutManager(3,StaggeredGridLayoutManager.VERTICAL));
        recyclerView.addItemDecoration(new ImageItemDecoration(20));
        //将适配器设置给控件
        recyclerView.setAdapter(new ImageAdapter());
    }


    class ImageItemDecoration extends RecyclerView.ItemDecoration{
        int space;
        //设置一个自定义距离
        public ImageItemDecoration(int space){
            this.space=space;
        }

        /**
         *
         * @param outRect 表示卡片的外部距离
         * @param view 表示外部布局视图
         * @param parent 表示卡片的父容器
         * @param state
         */
        @Override
        public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
            super.getItemOffsets(outRect, view, parent, state);
            if(parent.getChildAdapterPosition(view)%2==0){
                outRect.top=50;
            }else{
                outRect.top=space;
            }
            outRect.bottom=space;
            outRect.left=space;
            outRect.right=space;

        }
    }
    class ImageAdapter extends RecyclerView.Adapter<ImageViewHolder>{

        @Override
        public ImageViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
            View itemView=LayoutInflater.from(MainActivity.this).inflate(R.layout.layout,null);
            return new ImageViewHolder(itemView);
        }

        @Override
        public void onBindViewHolder(ImageViewHolder holder, int position) {

            Image image=images.get(position);
            holder.imageView.setImageResource(image.getIconId());
            holder.textView.setText(image.getName());

        }

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


    class ImageViewHolder extends RecyclerView.ViewHolder{

        ImageView imageView;
        TextView textView;

        public ImageViewHolder(View itemView) {
            super(itemView);
            imageView=(ImageView)itemView.findViewById(R.id.iv);
            textView=(TextView)itemView.findViewById(R.id.tv);

        }
    }
}

显示结果