码迷,mamicode.com
首页 > 其他好文 > 详细

卡片布局CardView

时间:2017-07-23 15:25:28      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:并且   count()   protected   logs   public   bsp   tla   end   androi   

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);

}

 

卡片布局CardView

标签:并且   count()   protected   logs   public   bsp   tla   end   androi   

原文地址:http://www.cnblogs.com/zhoushenglei/p/7224633.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!