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

卡片式布局CardView的使用以及轮播图代码

思路

第一步：导入依赖

第二步：添加布局

第三步：适配器

第五步：java代码

思路

第一步：导入依赖

在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 Listmlist;

/*

获取焦点

*/

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(Listlist){

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

}

}