Android开发之路--卡片式布局CardView的使用以及轮播图代码

思路

第一步：导入依赖

在app/build.gradle中添加依赖

 	implementation 'com.youth.banner:banner:1.4.9' //轮播图
    compile 'com.android.support:recyclerview-v7:26.1.0'//比listview还好用的控件
    compile 'com.android.support:cardview-v7:26.1.0'//卡片布局
    compile 'com.github.bumptech.glide:glide:3.7.0'//图片加载框架
    implementation 'com.squareup.okhttp3:okhttp:3.4.1'//网络请求框架

第二步：添加布局

//在mainactivity.xml添加

		//卡片式布局
  
            
	
		//轮播图
	 


//fragment_home_cardview.xml



    
        
        
                
                    
                
            
                
                
            




        


    

第三步：适配器

//Food 类自己编写，这里只用了3个属性 

public class HomeAdapter extends RecyclerView.Adapter {
    private Context mcontext;
    private List mlist;

    /*
        获取焦点
     */
    static class ViewHolder extends RecyclerView.ViewHolder{
        CardView cardView;
        ImageView imageView;
        TextView textView1,textView2;

        public ViewHolder(View view){
            super(view);
            cardView =(CardView)view;
            imageView = (ImageView)view.findViewById(R.id.imageView1);
            textView1=(TextView)view.findViewById(R.id.textview1);
            textView2=(TextView)view.findViewById(R.id.textview2);
        }
    }
    /*
        类方法  传参数进来
     */
    public HomeAdapter(List list){
        mlist=list;
    }
/*
    获的 view 以及 holder  这样就就可以修改界面数据  用下一个重写的方法  点击事件
 */
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent,int viewType){
        if(mcontext==null){
            mcontext=parent.getContext();
        }
        View view= LayoutInflater.from(mcontext).inflate(R.layout.fragment_home_cardview,parent,false);

        return  new ViewHolder(view);
    }

    /*
        修改界面数据
     */
    @Override
    public void  onBindViewHolder(ViewHolder holder,int position){
        final Food food =mlist.get(position);

        holder.textView1.setText(food.getName());
        holder.textView2.setText(food.getNumber());
        Glide.with(mcontext).load("http://10.100.33.23:8080/caidao/img/"+food.getName()+".jpg").into(holder.imageView);
        final int i= position;
        holder.imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Food food=mlist.get(i);
                Intent intent = new Intent(view.getContext(), FoodActivity.class);

                intent.putExtra("foodname",food.getName());
                mcontext.startActivity(intent);
            }
        });
    }
    @Override
    public int getItemCount(){
        return mlist.size();
    }
}

第五步：java代码

	/*
	*卡片布局主要代码
	*/
	
	 private void initHome(){
        mrecyclerView=getActivity().findViewById(R.id.recyclerView);
        GridLayoutManager layoutManager = new GridLayoutManager(getActivity(),2);
        mrecyclerView.setLayoutManager(layoutManager);
        mhomeAdapter = new HomeAdapter(mfoodList);
        mrecyclerView.setAdapter(mhomeAdapter);
    }




	/*
	*轮播图主要代码
	*/

	private void initView() {
        banner = (Banner)getView().findViewById(R.id.banner);
        //放图片地址的集合
        list_path = new ArrayList<>();
        //放标题的集合
        list_title = new ArrayList<>();

        //list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic21363tj30ci08ct96.jpg");
        //list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic259ohaj30ci08c74r.jpg");
        //list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic2b16zuj30ci08cwf4.jpg");
        //list_path.add("http://ww4.sinaimg.cn/large/006uZZy8jw1faic2e7vsaj30ci08cglz.jpg");
        list_path.add(R.mipmap.goodpic1);
        list_path.add(R.mipmap.goodpic2);
        list_path.add(R.mipmap.goodpic3);
        list_path.add(R.mipmap.goodpic4);
        list_title.add("图一");
        list_title.add("图二");
        list_title.add("图三");
        list_title.add("图四");
        //设置内置样式，共有六种可以点入方法内逐一体验使用。
        banner.setBannerStyle(BannerConfig.CIRCLE_INDICATOR_TITLE_INSIDE);
        //设置图片加载器，图片加载器在下方
        banner.setImageLoader(new MyLoader());
        //设置图片网址或地址的集合
        banner.setImages(list_path);
        //设置轮播的动画效果，内含多种特效，可点入方法内查找后内逐一体验
        banner.setBannerAnimation(Transformer.DepthPage);
        //设置轮播图的标题集合
        banner.setBannerTitles(list_title);
        //设置轮播间隔时间
        banner.setDelayTime(3000);
        //设置是否为自动轮播，默认是“是”。
        banner.isAutoPlay(true);
        //设置指示器的位置，小点点，左中右。
        banner.setIndicatorGravity(BannerConfig.CENTER)
                //以上内容都可写成链式布局，这是轮播图的监听。比较重要。方法在下面。
                .setOnBannerListener(this)
                //必须最后调用的方法，启动轮播图。
                .start();


    }
    //轮播图的监听方法
    @Override
    public void OnBannerClick(int position) {
        String [] str = new String[]{"土豆","肉","饼","粥"};

    }
    //自定义的图片加载器
    private class MyLoader extends ImageLoader {
        @Override
        public void displayImage(Context context, Object path, ImageView imageView) {
            // Glide.with(context).load((String) path).into(imageView);
            imageView.setImageResource((Integer) path);
        }
    }