Mobile Mall fourth day, using the GridView and Viewpager to achieve the channel button and popular activity pictures display

Code has been uploaded code Cloud, interested in small partners can download to see:

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

Here's what this is about:

650) this.width=650; "Src=" https://s1.51cto.com/wyfs02/M00/00/B9/wKiom1mcQOqQFI73AAK58F-fUVI597.png-wh_500x0-wm_ 3-wmp_4-s_4039475636.png "title=" qq picture 20170822223331.png "alt=" Wkiom1mcqoqqfi73aak58f-fuvi597.png-wh_50 "/>

Which costumes, games, animation and other columns and the activities below are the contents of this.

First, the implementation of channel columns----GridView

Layout files, five controls per line

<?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> 

         the layout of each control is as follows: ImageView above, 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" &NBSP;&NBSP;&NBSP;&Nbsp;    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= " Yuriping "        /></LinearLayout>

1. Create Viewholder

In the Oncreateviewholder method of recycle person view, if there is a GridView inside, then return a GridView Viewholder, if (Viewtype==channel)

/** *  create viewholder  equivalent to GetView in Baseadapter, equivalent to viewholder part code  *  @param  parent  *  @param  viewType   Current type  *  @return  */@Overridepublic   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;}

Create Viewholder, and instantiate the GridView control inside

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 is" +position,toaSt. Length_short). Show ();            }         });    }    public void  SetData (List<resultbeandata.resultbean.channelinfobean> channel_info)  {         //get the data here, then set the GridView adapter          Channeladapter adapter=new channeladapter (Context,channel_info);         gv_channel.setadapter (adapter);     }}

2, according to Recyclerview method, in the binding method is onbindviewholder to each viewholder binding data, wherein the SetData () method on the above.

/** *  equivalent to GetView binding data  *  @param  holder *  @param  position */@ Overridepublic void onbindviewholder (recyclerview.viewholder holder, int position)  {    //through position to get the current type of     if  (Getitemviewtype ( Position) (==banner) {        //is the BANNER type, holder is converted to 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, set the adapter.

The GridView data is displayed in a manner similar to the ListView, where the adapter is set to write an additional adapter. Here is not the same as the ListView method and meaning. One thing to note is that each channel's imageview needs to use the glide plugin to load the remote picture.

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  Yuriping  on 2017/8/18. * *  Channel adapter, similar to the ListView adapter  */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);   //Sub-layout, similar to the layout of each row of a 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);         //uses Glide to load remote images onto local images         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;    }    //according to the sub-layout, inside the control type, do an internal viewholder     static class ViewHolder{        ImageView  iv_channel;        textview tv_channel;    }}

This allows the channel to be displayed.

Second, the Viewpager realizes the display of the activity picture

Similar to the above GridView, in Recyclerview's Oncreateviewholder method, returns an instance object of Actviewholder.

Then in the recyclerview of the Onbindviewholder binding data inside, write an internal monitoring, in the inside to achieve the picture loading and switching effect.

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 (; )        act_viewpager.setoffscreenpagelimit (3);         act_viewpager.setpagetransformer (True,new scaleintransformer ());         /**         *  To set the ViewPage hot adapter, at least rewrite the four methods below &NBSP;&NBSp;       */        act_ Viewpager.setadapter (New pageradapter ()  {              @Override             public  int getcount ()  {                 return act_info.size ();             }            /**              *  Confirm 2 is not the same               *  @param  view  pages               *  @param The value returned by the  object  instantiateitem method              *  @return               */             @Override              public boolean isviewfromobject (View  view, object object)  {                 return view==object;             }            /**              *              *  @param  container   This is actually Viewpager itself               *  @param  position      location of the corresponding page              *  @return               */              @Override             public  Object instantiateitem (viewgroup container, int position)  {                 ImageView imageView=new  ImageView (context);                 imageview.setscaletype (ImageView.ScaleType.FIT_XY)   //set ImageView stretch, XY axis stretch                 //remote loading of ImageView pictures                 glide.with (context). Load (Constants.IMG _url+act_info.get (position). Geticon_url ()). into (ImageView);                 //add a picture to a container                  container.addview (ImageView);                 imageview.setonclicklistener (New view.onclicklistener ()  {                       @Override                      public void onclick (VIEW&NBSP;V)  {                          toast.maketext (context,  "clicked on the picture",  toast.length_short). Show ();                     }                 });                 return imageView;             }            /**              *  Remove Pictures               *  @param  container              *  @param  position              *  @param  object              */              @Override              public void destroyitem (ViewGroup  Container, int position, object object)  {                container.removeview (View)  object);             }        });     }}

This article is from the "Yuangushi" blog, make sure to keep this source http://cm0425.blog.51cto.com/10819451/1958504

Mobile Mall fourth day, using the GridView and Viewpager to achieve the channel button and popular activity pictures display