CrdView继承自FrameLayout类，可以在一个卡片布局中一致性的显示内容，卡片可以包含圆角和阴影。CardView是一个Layout，可以布局其他View。CardView 的使用可以参考《Material Design UI Widgets》。
实现步骤：
1.在build中添加cardview，recyclorview的dependence依赖
2.编写包含cardview的布局文件
3.然后在Activity加载的布局中，加入recyclorView控件
4.在Activity中实例化recyclorView控件
5.编写adapter继承自RecycorView.Adapter，并且制定泛型为RecyclorView.HolderView,然后在adapter的类中，编写RecyclorView.holder的类
6.编写adapter的步骤：
1.编写构造函数
public HomeCategoryAdapter(List<String> list){ this.list=list; }
2.然后继承下列的方法：
//绑定item布局文件，然后在内部类ViewHolder中绑定item布局文件中的子控件 @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {3.
//绑定数据,即绑定子空间中的数据 @Override public void onBindViewHolder(ViewHolder holder, int position) {
4.
//返回数据的大小 @Override public int getItemCount() { return list.size(); }5.
// 绑定item布局文件中的子控件 class ViewHolder extends RecyclerView.ViewHolder{
7.然后在Activity中绑定adapter
8.如果在recyclorvie的item中显示cardview等复杂的UI，就要使用JAVABean,将javabean中的数据存在list<javabean>中和自定义的在item中显示的layout
注意点：在编写包含cardview的layout的时候，在textview和imageview两个控件，中间需要加上<view/>这个控件，这个控件可以是一个分割线
然后<view/>的样式要在style中编写，里面的样式就可以是一个分割线的形式
,
下面为代码：
1.在build中添加cardview，recyclorview的dependence依赖
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
testCompile 'junit:junit:4.12'
compile 'com.android.support:appcompat-v7:23.2.0'
compile 'com.android.support:recyclerview-v7:23.0.1'
compile 'com.android.support:cardview-v7:23.0.1'
}
//complie "com.android.support:cardview-v7:23.0.1"为对
//compile "com.android.support:recyclerview-v7:23.0.1"是对recyclerview的依赖
2.编写包含cardview的布局文件
布局文件：template_home_cardview：
<?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_gravity="center" android:gravity="center" android:layout_width="match_parent" android:layout_height="wrap_content" app:cardBackgroundColor="#fff" app:contentPadding="10dp" app:cardCornerRadius="4dp"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/text_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="热门活动" android:textSize="20dp" android:textColor="@color/black" android:paddingTop="10dp" /> <View style="@style/line_vertical" android:layout_marginBottom="10dp" android:layout_marginTop="10dp"></View> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:id="@+id/imgview_big" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <View android:id="@+id/line" style="@style/line_horizontal" /> <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView android:id="@+id/imgview_small_top" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <View android:id="@+id/line2" style="@style/line_vertical" ></View> <ImageView android:id="@+id/imgview_small_bottom" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </LinearLayout> </LinearLayout> </android.support.v7.widget.CardView>
布局文件：template_home_cardview2
<?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_gravity="center" android:gravity="center" android:layout_width="match_parent" android:layout_height="wrap_content" app:cardBackgroundColor="#fff" app:contentPadding="10dp" app:cardCornerRadius="4dp"> <LinearLayout android:orientation="vertical" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:id="@+id/text_title" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="热门活动" android:textSize="20dp" android:textColor="@color/black" android:paddingTop="10dp" /> <View style="@style/line_vertical" android:layout_marginBottom="10dp" android:layout_marginTop="10dp"></View> <LinearLayout android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <LinearLayout android:id="@+id/layout_left" android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <ImageView android:id="@+id/imgview_small_top" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <View android:id="@+id/line2" style="@style/line_vertical" ></View> <ImageView android:id="@+id/imgview_small_bottom" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> <View android:id="@+id/line" style="@style/line_horizontal" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" /> <ImageView android:id="@+id/imgview_big" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </LinearLayout> </android.support.v7.widget.CardView>
注意点：<view/>的样式文件style,,就是分隔符
<!--设置cardview中的分割线的类型--> <style name="line"> <item name="android:background">@color/bg_color</item> </style> <style name="line_vertical" parent="line"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">1dp</item> </style> <style name="line_horizontal" parent="line"> <item name="android:layout_width">1dp</item> <item name="android:layout_height">fill_parent</item> <item name="android:layout_gravity">center_horizontal</item> </style>
3.然后在Activity加载的布局中，加入recyclorView控件
<android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="wrap_content" ></android.support.v7.widget.RecyclerView> </LinearLayout>
4.Activity中实例化recyclorview，设置adapter的步骤，代码：
package zuo.com.ui.fragment; import android.os.Bundle; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.support.v7.widget.GridLayoutManager; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.util.Log; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Toast; import com.daimajia.slider.library.Animations.DescriptionAnimation; import com.daimajia.slider.library.Indicators.PagerIndicator; import com.daimajia.slider.library.SliderLayout; import com.daimajia.slider.library.SliderTypes.BaseSliderView; import com.daimajia.slider.library.SliderTypes.TextSliderView; import com.daimajia.slider.library.Tricks.ViewPagerEx; import java.util.ArrayList; import java.util.List; import zuo.com.ui.R; import zuo.com.ui.adapter.HomeCategoryAdapter; import zuo.com.ui.bean.HomeCagetoryBean; import zuo.com.ui.decoration.HomeItemDecoration; /** * Created by Administrator on 2016/10/6. */ public class HomeFragment extends Fragment { private SliderLayout sliderLayout; private PagerIndicator pagerIndicator; private RecyclerView recyclerView; private String TAG="SliderView"; private List<HomeCagetoryBean> list=new ArrayList<>(); private HomeCategoryAdapter homeCategoryAdapter; @Nullable @Override public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { View view=inflater.inflate(R.layout.fragment_home,container,false); sliderLayout= (SliderLayout) view.findViewById(R.id.slider); pagerIndicator= (PagerIndicator) view.findViewById(R.id.custom_indicator); //使用sliderLayolut，滚动广告信息 initSlider(); //recyclerview的使用 initRecyclerView(view); return view; } private void initRecyclerView(View view) { recyclerView= (RecyclerView) view.findViewById(R.id.recycler_view); initList(); homeCategoryAdapter=new HomeCategoryAdapter(list); //加载adapter recyclerView.setAdapter(homeCategoryAdapter); //必须写才能出现recyclorView，也可以是GirdLayoutManager，只是显示item的图形不一样 recyclerView.setLayoutManager(new LinearLayoutManager(getContext())); //设置分割线 recyclerView.addItemDecoration(new HomeItemDecoration()); homeCategoryAdapter.setOnItemClickListener(new HomeCategoryAdapter.OnItemClickListener() { @Override public void onClick(View v, int position, String city) { Toast.makeText(getContext(),"点击成功",Toast.LENGTH_SHORT).show(); } }); } private void initList(){ HomeCagetoryBean category = new HomeCagetoryBean("热门活动",R.mipmap.img_big_1,R.mipmap.img_1_small1,R.mipmap.img_1_small2); list.add(category); category = new HomeCagetoryBean("有利可图",R.mipmap.img_big_4,R.mipmap.img_4_small1,R.mipmap.img_4_small2); list.add(category); category = new HomeCagetoryBean("品牌街",R.mipmap.img_big_2,R.mipmap.img_2_small1,R.mipmap.img_2_small2); list.add(category); category = new HomeCagetoryBean("金融街 包赚翻",R.mipmap.img_big_1,R.mipmap.img_3_small1,R.mipmap.imag_3_small2); list.add(category); category = new HomeCagetoryBean("超值购",R.mipmap.img_big_0,R.mipmap.img_0_small1,R.mipmap.img_0_small2); list.add(category); } private void initSlider() { TextSliderView textSliderView = new TextSliderView(this.getActivity()); textSliderView.description("新品男装").image(R.mipmap.slider_mani); textSliderView.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() { @Override public void onSliderClick(BaseSliderView slider) { Toast.makeText(getContext(),"新品男装",Toast.LENGTH_SHORT).show(); } }); TextSliderView textSliderView1 = new TextSliderView(this.getActivity()); textSliderView1.description("潮流女装").image(R.mipmap.slider_woman); textSliderView1.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() { @Override public void onSliderClick(BaseSliderView slider) { Toast.makeText(getContext(),"潮流女装",Toast.LENGTH_SHORT).show(); } }); TextSliderView textSliderView2 = new TextSliderView(this.getActivity()); textSliderView2.description("时尚男装").image(R.mipmap.slider_man); textSliderView2.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() { @Override public void onSliderClick(BaseSliderView slider) { Toast.makeText(getContext(),"时尚男装",Toast.LENGTH_SHORT).show(); } }); TextSliderView textSliderView3 = new TextSliderView(this.getActivity()); textSliderView3.description("青春女装").image(R.mipmap.slider_yu); textSliderView3.setOnSliderClickListener(new BaseSliderView.OnSliderClickListener() { @Override public void onSliderClick(BaseSliderView slider) { Toast.makeText(getContext(),"青春女装",Toast.LENGTH_SHORT).show(); } }); sliderLayout.addSlider(textSliderView); sliderLayout.addSlider(textSliderView1); sliderLayout.addSlider(textSliderView2); sliderLayout.addSlider(textSliderView3); sliderLayout.setPresetIndicator(SliderLayout.PresetIndicators.Center_Bottom); //这个为默认的indicator // sliderLayout.setCustomIndicator(pagerIndicator); //设置下标的点，所在的位置在底部正中间 sliderLayout.setCustomAnimation(new DescriptionAnimation()); //动画效果 sliderLayout.setPresetTransformer(SliderLayout.Transformer.RotateUp); //设置转动模式，下面的文字说明自动出来 sliderLayout.setDuration(3000); //设置动画效果3秒自动转动 //sliderLayout的监听事件，这个监听事件 sliderLayout.addOnPageChangeListener(new ViewPagerEx.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { Log.d(TAG,"onPageScrolled"); } @Override public void onPageSelected(int position) { Log.d(TAG,"onPageSelected"); } @Override public void onPageScrollStateChanged(int state) { Log.d(TAG,"onPageScrollStateChanged"); } }); } }
5.adapter的代码：
package zuo.com.ui.adapter; 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; import zuo.com.ui.R; import zuo.com.ui.bean.HomeCagetoryBean; /** * Created by Administrator on 2016/10/8. */ public class HomeCategoryAdapter extends RecyclerView.Adapter<HomeCategoryAdapter.ViewHolder> { private static int VIEW_TYPE_L=0; private static int VIEW_TYPE_R=1; private List<HomeCagetoryBean> list; private LayoutInflater layoutInflater; public OnItemClickListener listener; //创建item监听器对象 private View view; public void setOnItemClickListener(OnItemClickListener listener){ //创建构造函数 this.listener=listener; } public HomeCategoryAdapter(List<HomeCagetoryBean> list){ this.list=list; } //绑定item布局文件，然后在内部类ViewHolder中绑定item布局文件中的子控件 @Override public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { layoutInflater=LayoutInflater.from(parent.getContext()); if(viewType==VIEW_TYPE_L) { view = layoutInflater.inflate(R.layout.template_home_cardview, parent, false); return new ViewHolder(view); }else{ view = layoutInflater.inflate(R.layout.template_home_cardview2, parent, false); return new ViewHolder(view); } } //绑定数据,即绑定子空间中的数据 @Override public void onBindViewHolder(ViewHolder holder, int position) { HomeCagetoryBean homeCagetoryBean=list.get(position); holder.textTitle.setText(homeCagetoryBean.getTitle()); holder.imageViewBig.setImageResource(homeCagetoryBean.getImgBig()); holder.imageViewSmallTop.setImageResource(homeCagetoryBean.getImgSmallTop()); holder.imageViewSmallBottom.setImageResource(homeCagetoryBean.getImgSmallButton()); } //编写方法针对cardview,偶数用cardview的布局一，奇数用布局二 @Override public int getItemViewType(int position) { if(position % 2==0){ return VIEW_TYPE_R; } else return VIEW_TYPE_L; } //返回数据的大小 @Override public int getItemCount() { return list.size(); } // 绑定item布局文件中的子控件 class ViewHolder extends RecyclerView.ViewHolder{ TextView textTitle; ImageView imageViewBig; ImageView imageViewSmallTop; ImageView imageViewSmallBottom; public ViewHolder(View itemView) { super(itemView); textTitle = (TextView) itemView.findViewById(R.id.text_title); imageViewBig = (ImageView) itemView.findViewById(R.id.imgview_big); imageViewSmallTop = (ImageView) itemView.findViewById(R.id.imgview_small_top); imageViewSmallBottom = (ImageView) itemView.findViewById(R.id.imgview_small_bottom); //绑定item的点击事件 itemView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if(listener!=null){ listener.onClick(v,getLayoutPosition(),list.get(getLayoutPosition()).toString()); } } }); } } //创建recyclorview的监听事件 public interface OnItemClickListener{ void onClick(View v,int position,String city); } // //下面两个方法为recyclorview中item减少增加的方法 // public void addData(int position,String city){ // list.add(position,city); // notifyItemInserted(position); // // } // // public void removeData(int position,String city){ // list.remove(position); // notifyItemChanged(position); // } }
6.存储数据的javabean
package zuo.com.ui.bean; /**这个bean英语存储显示在recyclorview中的数据 * Created by Administrator on 2016/10/9. */ public class HomeCagetoryBean { private String title; private int imgBig; private int imgSmallTop; private int imgSmallButton; public HomeCagetoryBean(String title, int imgBig, int imgSmallTop, int imgSmallButton) { this.title = title; this.imgBig = imgBig; this.imgSmallTop = imgSmallTop; this.imgSmallButton = imgSmallButton; } public String getTitle() { return title; } public int getImgBig() { return imgBig; } public int getImgSmallTop() { return imgSmallTop; } public int getImgSmallButton() { return imgSmallButton; } public void setTitle(String title) { this.title = title; } public void setImgBig(int imgBig) { this.imgBig = imgBig; } public void setImgSmallTop(int imgSmallTop) { this.imgSmallTop = imgSmallTop; } public void setImgSmallButton(int imgSmallButton) { this.imgSmallButton = imgSmallButton; } }
885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
