导读
- RecylerView的简介及JAR包的导入
- CardView属性
- CardView线性效果实现
- 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);
}
}
}
显示结果