手机商城第四天,利用GridView和viewpager实现频道按钮和热门活动图片的展示

代码已经上传码云,有兴趣的小伙伴可以下载看看:

https://git.oschina.net/joy_yuan/ShoppingMall

下面是这次的效果图:

其中哪些服饰、游戏、动漫等栏目以及下方的那个活动都是这次的内容。

一 、频道栏目的实现 ----GridView

布局文件,每行五个控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:layout_height="170dp"
              android:background="#fff"
              android:orientation="vertical">

    <GridView
        android:id="@+id/gv_channel"
        android:layout_width="wrap_content"
        android:layout_height="150dp"
        android:numColumns="5"
        ></GridView>
</LinearLayout>

每个控件的布局如下:上面是imageview,下面是textview

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:padding="10dp"
              android:gravity="center_horizontal"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <ImageView
        android:id="@+id/iv_channel"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:src="@drawable/menu_cyc"
        />

    <TextView
        android:id="@+id/tv_channel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:gravity="center_horizontal"
        android:textColor="#000"
        android:textSize="12sp"
        android:text="原立鹏"
        />
</LinearLayout>

1、创建viewholder

在recycle人view的onCreateViewHolder方法里,如果是里面有GridView,那么就返回一个GridView的viewholder,如下的 if(viewType==CHANNEL)

/**
 * 创建viewholder 相当于baseadapter里的getview,相当于viewholder部分代码
 * @param parent
 * @param viewType  当前的类型
 * @return
 */
@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

    if (viewType==BANNER){
        return new BannerViewHolder(context,layoutInflater.inflate(R.layout.banner_viewpager,null));
    }else if (viewType==CHANNEL){
        return new ChannelViewHolder(context,layoutInflater.inflate(R.layout.channel_item,null));
    }else if (viewType==ACT){
        return new ActViewHolder(context,layoutInflater.inflate(R.layout.act_item,null));
    }
    return null;
}

创建viewholder,并实例化里面的GridView控件

class ChannelViewHolder extends RecyclerView.ViewHolder{
    private GridView gv_channel;

    public ChannelViewHolder(final Context context, View itemView) {
        super(itemView);
        gv_channel= (GridView) itemView.findViewById(R.id.gv_channel);

        gv_channel.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(context,"position是"+position,Toast.LENGTH_SHORT).show();
            }
        });

    }

    public void setData(List<ResultBeanData.ResultBean.ChannelInfoBean> channel_info) {

        //这里得到数据了,然后设置GridView的适配器
        ChannelAdapter adapter=new ChannelAdapter(context,channel_info);
        gv_channel.setAdapter(adapter);

    }
}

2、根据recyclerview的方法,在绑定方法里即onBindViewHolder给每个viewholder绑定数据,其中setData()方法在上面。

/**
 * 相当于getview里的绑定数据
 * @param holder
 * @param position
 */
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

    //通过position,来获取当前是哪个类型
    if (getItemViewType(position)==BANNER){
        //是banner类型,将holder强转为bannerviewholder
        BannerViewHolder bannerViewHolder= (BannerViewHolder) holder;
        bannerViewHolder.setData(resultBean.getBanner_info());
    }else if (getItemViewType(position)==CHANNEL){
        ChannelViewHolder channelViewHolder= (ChannelViewHolder) holder;
        channelViewHolder.setData(resultBean.getChannel_info());
    }else if (getItemViewType(position)==ACT){
        ActViewHolder actviewholder= (ActViewHolder) holder;
        actviewholder.setData(resultBean.getAct_info());

    }
}

3、设置适配器。

GridView的数据显示方式类似于listview,都要设置适配器,即额外写一个适配器。这里就不赘述了,跟listview一样的方法与意义。有一点要注意,就是每个频道channel的imageview需要用到Glide插件来进行加载远程图片

package com.yuanlp.shoppingmall.home.adapter;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.bumptech.glide.Glide;
import com.yuanlp.shoppingmall.R;
import com.yuanlp.shoppingmall.home.model.ResultBeanData;
import com.yuanlp.shoppingmall.utils.Constants;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by 原立鹏 on 2017/8/18.
 *
 * 频道的适配器,类似于listview的适配器
 */

public class ChannelAdapter extends BaseAdapter {

    Context mContext;
    ArrayList<ResultBeanData.ResultBean.ChannelInfoBean> list;
    public ChannelAdapter(Context context, List<ResultBeanData.ResultBean.ChannelInfoBean> channel_info){
        this.mContext=context;
        this.list= (ArrayList<ResultBeanData.ResultBean.ChannelInfoBean>) channel_info;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder=new ViewHolder();
        if (convertView==null){
            convertView=View.inflate(mContext, R.layout.item_channel,null);  //子布局,类似于listview的每个行的布局一样
            viewHolder.iv_channel= (ImageView) convertView.findViewById(R.id.iv_channel);
            viewHolder.tv_channel= (TextView) convertView.findViewById(R.id.tv_channel);
            convertView.setTag(viewHolder);
        }else{
            viewHolder= (ViewHolder) convertView.getTag();
        }
        ResultBeanData.ResultBean.ChannelInfoBean channelInfoBean=list.get(position);
        //利用glide加载远程图片到本地图片上
        Glide.with(mContext).load(Constants.IMG_URL+channelInfoBean.getImage()).into(viewHolder.iv_channel);
        viewHolder.tv_channel.setText(channelInfoBean.getChannel_name());
        return convertView;
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    //根据子布局,里面的控件类型,做一个内部的viewholder
    static class ViewHolder{
        ImageView iv_channel;
        TextView tv_channel;

    }

}

如此,这个channel即可实现显示。

二 、viewpager实现活动图片的展示

类似于上面的GridView,在recyclerview的oncreateviewholder方法里,返回一个actViewHolder的实例对象。

然后在recyclerview的onBindviewHolder绑定数据里面,写一个内部监听,在里面实现图片的加载以及切换效果。

class ActViewHolder extends RecyclerView.ViewHolder {
    private ViewPager act_viewpager;
   public ActViewHolder(Context context, View inflate) {
       super(inflate);
       act_viewpager= (ViewPager) inflate.findViewById(R.id.act_viewpager);

   }

    public void setData(final List<ResultBeanData.ResultBean.ActInfoBean> act_info) {
        act_viewpager.setPageMargin(30);
        act_viewpager.setOffscreenPageLimit(3);
        act_viewpager.setPageTransformer(true,new ScaleInTransformer());
        /**
         * 设置viewpage热的适配器,至少要重写下方的四个方法
         */
        act_viewpager.setAdapter(new PagerAdapter() {

            @Override
            public int getCount() {
                return act_info.size();
            }

            /**
             * 确认2者是不是相同
             * @param view 页面
             * @param object  instantiateItem方法返回的值
             * @return
             */
            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view==object;
            }

            /**
             *
             * @param container  这个其实就是viewpager自身
             * @param position    对应页面的位置
             * @return
             */
            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                ImageView imageView=new ImageView(context);
                imageView.setScaleType(ImageView.ScaleType.FIT_XY);  //设置imageview的拉伸,xy轴都拉伸
               //远程加载imageview的图片
               Glide.with(context).load(Constants.IMG_URL+act_info.get(position).getIcon_url()).into(imageView);

                //将图片添加到容器中
                container.addView(imageView);

                imageView.setOnClickListener(new View.OnClickListener() {
                    @Override
                    public void onClick(View v) {
                        Toast.makeText(context, "点击了图片", Toast.LENGTH_SHORT).show();
                    }
                });
                return imageView;
            }

            /**
             * 移除图片
             * @param container
             * @param position
             * @param object
             */
            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
               container.removeView((View) object);
            }
        });
    }
}
时间: 2024-10-14 06:15:53

手机商城第四天,利用GridView和viewpager实现频道按钮和热门活动图片的展示的相关文章

手机商城第二天,各个功能按钮的切换与显示不同界面

这几天晚上练习科目三,一般都到10点多回来,所以更新比较晚. 代码已上传到码云上,有兴趣的可以下载看看 https://git.oschina.net/joy_yuan/ShoppingMall 上个项目中,页面切换,是做了一个BasePage,然后在里面利用了构造方法,调用构造时,就初始化其中的控件,然后在切换具体的页面时,再加载其中的数据. 在本项目中,是做了一个BaseFragment extends Fragment,然后按照Fragment的生命周期: 1.onCreate() 2.o

estore商城案例(四、五)------添加购物车&amp;购物车显示/生成订单&amp;在线支付

一.添加购物车 1.获得商品id提交到servlet程序 2.根据id获取product对象 3.判断seesion中是否有存在购物车session.没有的话表示  添加的第一件商品  需要先创建session:有的话直接在session里添加获得的produce(添加product 要先判断session中是否存在对应的商品,存在话直接修改商品数量,没有的话新添加这个商品). servlet程序代码: 1 public void doGet(HttpServletRequest request

MVC4商城项目四:应用Bundle捆绑压缩技术

从MVC4开始,我们就发现,项目中对Global.asax进行了优化,将原来在MVC3中使用的代码移到了[App_Start]文件夹下,而Global.asax只负责初始化.其中的BundleConfig类就有个很牛X的功能:合并与压缩.想到以前做ASP.NET的时候要通过工具压缩,手动合并,很麻烦.通过BundleConfig可以大大的提高工作效率和项目性能. 一.基本的使用 1.1.Global.asax文件的初始化 protected void Application_Start() {

Spring Cloud实战之初级入门(四)— 利用Hystrix实现服务熔断与服务监控

目录 1.环境介绍 2.服务监控 2.1 加入依赖 2.2 修改配置文件 2.3 修改启动文件 2.4 监控服务 2.5 小结 3. 利用hystrix实现消费服务熔断 3.1 加入服务熔断 3.2 测试服务熔断 4. 利用turbine监控所有应用 4.1 创建工程 4.2 修改配置文件 4.3 修改启动文件 4.4 启动 5.一点点重要的事情 1.环境介绍 本篇文章涉及到前面文章的工程,mirco-service-provider.mirco-service-consumer以及需要另外新建

【COCOS2DX-LUA 脚本开发之十二】Hybrid模式-利用AssetsManager实现在线更新脚本文件lua、js、图片等资源(免去平台审核周期)

转载自:http://www.himigame.com/iphone-cocos2dx/1354.html 首先说明一个问题: 为什么要在线更新资源和脚本文件!? 对于此问题,那要说的太多了,简单概括,如果你的项目已经在google play 或Apple Store 等平台上架了,那么当你项目需要做一些活动或者修改前端的一些代码等那么你需要重新提交一个新版本给平台,这时候你的上架时候是个不确定的时候,具体什么时候能上架,主要跟平台有关,你再着急,也没有用的. 那么如果你的项目是使用脚本语言进行

Android高级控件——GridView ScrollView ViewPager (上)

Android高级控件--GridView ScrollView ViewPager (上) GridView 网格视图,网格视图组件,九宫图显示数据表格(一种控件) ScrollView滚动视图 是一个单一容器,只能包含一个组件. ViewPager左右滑动 SlideMenu侧边栏 PullToRefreshListView下拉刷新 ListView新闻 原声列表视图 <?xml version="1.0" encoding="utf-8"?> &l

利用Python网络爬虫抓取微信好友的签名及其可视化展示

前几天给大家分享了如何利用Python词云和wordart可视化工具对朋友圈数据进行可视化,利用Python网络爬虫抓取微信好友数量以及微信好友的男女比例,以及利用Python网络爬虫抓取微信好友的所在省位和城市分布及其可视化,感兴趣的小伙伴可以点击进去看看详情,内容方面不是很难,即使你是小白,也可以通过代码进行实现抓取.今天,小编继续给大家分享如何利用Python网络爬虫抓取微信好友的签名及其可视化展示,具体的教程如下所示. 1.代码实现还是基于itchat库,关于这个神奇的库,在之前的文章中

手机商城第六天,利用GridView实现推荐区域以及火爆区域

代码已提交码云,有兴趣的可以下载看看 https://git.oschina.net/joy_yuan/ShoppingMall 本次代码效果截图: 效果如上图所示,2个区域,一个是分三列显示,一个是分2列显示,代码类似,就拿一个区域做例子好了 一.推荐区域 布局文件: 整体是个线性布局,里面有2个子布局,一个线性布局,一个gridview. 重点是gridview里,设置numCloumns=3,表示分三列显示数据 <?xml version="1.0" encoding=&q

手机商城第一天 loading界面,主界面与baseFragment的创建,Bufferknife的使用

之前的手机影音经过这2天的总结,又从新掌握了不少之前忘记的知识,加深了对于知识的印象,下面的这个是一个新的项目,商城APP,有用到很多旧的知识,当然又有很多新的知识等着我去挑战.学习. 代码托管到码云上,有兴趣的可以去下载看看 https://git.oschina.net/joy_yuan/ShoppingMall 1.创建loading界面 loading界面说白了就是一个简单布局的activity,在这个activity的oncreate方法里,利用handler发送一个延迟2秒的inte