CardView用于实现卡片式的布局效果。由appcompat-v7库提供。CardView其实也是一种FrameLayout。用CardView和RecyclerView实现图片文字和卡片布局。
用到RecyclerView和CardView控件,就要在闭包中添加一下依赖
compile 'com.android.support:recyclerview-v7:25.0.0'
compile 'com.android.support:cardview-v7:25.0.0'
compile 'com.github.bumptech.glide:glide:3.7.0'
用法:
<android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" />
定义一个实体类 Fruit,写你要显示在界面的 名字,ID,的setget方法,外加一个带参构造。
还要为RecyclerView建一个子布局,也就是卡片布局。
CardView作为最外层布局,他只是一个加强版的FrameLayout,并没有方便的定位方式,在里面在嵌套一个LinearLayout。
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical" 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_tv_image" android:layout_width="match_parent" android:layout_height="100dp" android:scaleType="centerCrop"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/fruit_tv_name" android:layout_gravity="center_horizontal" android:layout_margin="6dp" android:textSize="16sp"/> </LinearLayout> </android.support.v7.widget.CardView>
并且新建一个RecyclerView适配器FruitAdapter, 并且继承自RecyclerView.Adapter泛型指定为FruitAdapter.ViewHolder
package ca.sd.zsl.toolbartest; 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; public class FruitAdpapter extends RecyclerView.Adapter<FruitAdpapter.ViewHolder> { private Context mContext; private List<Fruit> mFruitList; static class ViewHolder extends RecyclerView.ViewHolder{ CardView cardView; ImageView fruitImage; TextView fruitName; public ViewHolder(View itemView) { super(itemView); cardView = (CardView) itemView; fruitImage = (ImageView) itemView.findViewById(R.id.fruit_tv_image); fruitName = (TextView) itemView.findViewById(R.id.fruit_tv_name); } } public FruitAdpapter(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(),传入一个Context,Activity,Fragment参数,
调用load()方法去加载图片,里面可以是URL地址,本地路径,一个资源ID,最后调用into(),方法将图片
然后设置到具体某一个ImageView中。 Glide.with(mContext).load(fruit.getImageId()).into(holder.fruitImage); } @Override public int getItemCount() { return mFruitList.size(); } }
主函数
private List<Fruit> fruitList = new ArrayList<>(); private FruitAdpapter adpapter;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//一个初始化显示数据的方法
initFruits();
找到RecyclerView布局
RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recycler_view);
获取GridLayoutManager 对象,构造函数两个参数,第一Context,第二个是屏幕显示几列
GridLayoutManager layoutManager = new GridLayoutManager(MainActivity.this, 2);
设置布局管理器,实现RecyclerView布局内容的显示,里面只包含LinearLayoutManager(线性布局管理器),
StaggeredGridLayoutManager(错列网格布局管理器),GridLayoutManager(网格布局管理器)
recyclerView.setLayoutManager(layoutManager);
获取适配器实例,并添加到RecyclerView对象中
adpapter = new FruitAdpapter(fruitList);
recyclerView.setAdapter(adpapter);
}