手機商城第四天，利用GridView和viewpager實現頻道按鈕和熱門活動圖片的展示
阿新 • • 發佈：2017-08-23
手機商城第四天 利用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);
}
});
}
}本文出自 “YuanGuShi” 博客，請務必保留此出處http://cm0425.blog.51cto.com/10819451/1958504
手機商城第四天，利用GridView和viewpager實現頻道按鈕和熱門活動圖片的展示