ViewPager+GridView實現橫向滑動 仿大衆點評

直接上圖：

就是實現這樣的效果，可以左右滑動
首先，看到這張圖，我們首先會想到怎麼做，很顯然中間是GridView,Viewpager+ImageView下面的就行，好，大概就是這些東西了：
先看界面的佈局文件：

<android.support.v4.view.ViewPager
        android:id="@+id/vp_menu"
        android:layout_width="match_parent"
        android:layout_height="180dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/iv_one"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/vipager_doc_select" />

        <ImageView
            android:id="@+id/iv_two"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/vipager_doc_select" />
    </LinearLayout>

代碼如下：

private String Tag = "HomeFragment";
    private List<TwoLevelMenu> strs = new ArrayList<TwoLevelMenu>();//vipager第一頁
    private List<TwoLevelMenu> strs2 = new ArrayList<TwoLevelMenu>();//vipager第二頁
    private MygridviewAdapter mgAdapter1;//vipager第一頁適配器
    private MygridviewAdapter mgAdapter2;//vipager第二頁適配器
    private GridView gv_one;//vipager第一頁gridview
    private GridView gv_two;//vipager第二頁gridview

    private ViewPager vp_menu;
    private List<View> pagerView;
    private MyViewPagerAdapter pagerAdapter;//vipager適配器
    private ImageView iv_one;
    private ImageView iv_two;



    @Override
    public void onAttach(Activity activity) {
        super.onAttach(activity);
        Log.e(Tag, "onAttach");
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        Log.e(Tag, "onCreateView");
        View v = inflater.inflate(R.layout.fragment_home, container, false);
        InitDate();
        InitView(v,inflater);
        return v;
    }

    private void InitDate() {//初始化數據
        strs.add(new TwoLevelMenu("美食", R.drawable.ic_category_0));
        strs.add(new TwoLevelMenu("電影", R.drawable.ic_category_1));
        strs.add(new TwoLevelMenu("酒店", R.drawable.ic_category_2));
        strs.add(new TwoLevelMenu("KTV", R.drawable.ic_category_3));
        strs.add(new TwoLevelMenu("外賣", R.drawable.travel__icon_hotel_reserve));
        strs.add(new TwoLevelMenu("優惠買單", R.drawable.travel__icon_hotel_reserve));
        strs.add(new TwoLevelMenu("周邊遊", R.drawable.ic_category_6));
        strs.add(new TwoLevelMenu("火車票機票", R.drawable.ic_category_6));
        strs.add(new TwoLevelMenu("麗人", R.drawable.ic_category_11));
        strs.add(new TwoLevelMenu("休閒娛樂", R.drawable.ic_category_10));
        strs2.add(new TwoLevelMenu("今日新單", R.drawable.ic_category_4));
        strs2.add(new TwoLevelMenu("購物", R.drawable.ic_category_14));
        strs2.add(new TwoLevelMenu("旅遊", R.drawable.ic_category_13));
        strs2.add(new TwoLevelMenu("生活服務", R.drawable.ic_category_9));
        strs2.add(new TwoLevelMenu("足療按摩", R.drawable.ic_category_12));
        strs2.add(new TwoLevelMenu("自助餐", R.drawable.ic_category_10));
        strs2.add(new TwoLevelMenu("甜點飲品", R.drawable.ic_category_8));
        strs2.add(new TwoLevelMenu("小喫快餐", R.drawable.ic_category_7));
        strs2.add(new TwoLevelMenu("景點門票", R.drawable.ic_category_16));
        strs2.add(new TwoLevelMenu("全部分類", R.drawable.ic_category_15));
    }

    private void InitView(View v,LayoutInflater inflater) {
        iv_one=(ImageView) v.findViewById(R.id.iv_one);
        iv_two=(ImageView) v.findViewById(R.id.iv_two);

        mgAdapter1=new MygridviewAdapter(getActivity(), strs);
        pagerView=new ArrayList<View>();
        View view1=inflater.inflate(R.layout.viewpager_one, null);
        gv_one=(GridView) view1.findViewById(R.id.gv_one);
        gv_one.setAdapter(mgAdapter1);
        pagerView.add(view1);

        mgAdapter2=new MygridviewAdapter(getActivity(), strs2);
        View view2=inflater.inflate(R.layout.viewpager_two, null);
        gv_two=(GridView) view2.findViewById(R.id.gv_two);
        gv_two.setAdapter(mgAdapter2);
        pagerView.add(view2);



        vp_menu=(ViewPager)v.findViewById(R.id.vp_menu);
        pagerAdapter=new MyViewPagerAdapter(getActivity(), pagerView);
        vp_menu.setAdapter(pagerAdapter);
        iv_one.setSelected(true);
        vp_menu.setOnPageChangeListener(new OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                if(arg0==0){
                    iv_one.setSelected(true);
                    iv_two.setSelected(false);
                }else{
                    iv_one.setSelected(false);
                    iv_two.setSelected(true);
                }

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });


    }



    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Log.e(Tag, "onCreate");
    }

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        Log.e(Tag, "onActivityCreated");

    }

    @Override
    public void onResume() {
        super.onResume();
        Log.e(Tag, "onResume");
    }

MygridviewAdapter適配器：

public class MygridviewAdapter extends BaseAdapter{

    public List<TwoLevelMenu> data;
    private LayoutInflater _inflater;
    private Context context;

    public MygridviewAdapter(Context context, List<TwoLevelMenu> data) {
        this.data = data;
        this.context = context;
        _inflater = LayoutInflater.from(context);
    }

    public void updateList(List<TwoLevelMenu> data) {
        this.data = data;
        notifyDataSetChanged();
    }

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
        ViewHolder holder;
        if (convertView == null) {
            convertView = _inflater.inflate(R.layout.grildview_adapter_item, null);
            holder = new ViewHolder();
            holder.tv_menu = (TextView) convertView.findViewById(R.id.tv_menu);
            holder.iv_menu = (ImageView) convertView.findViewById(R.id.iv_menu);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        holder.tv_menu.setText(data.get(position).getName());
        holder.iv_menu.setImageResource(data.get(position).getId());
        return convertView;
    }

    private class ViewHolder {
        private TextView tv_menu;// 菜單文字
        private ImageView iv_menu;//菜單圖標

    }
}

MyViewPagerAdapter適配器：

package com.fangming.meituan.adapter;

import java.util.List;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.widget.GridView;

public class MyViewPagerAdapter extends PagerAdapter{  

    private List<View> mLists;  
    public MyViewPagerAdapter(Context context, List<View> array) {  
        this.mLists=array;  
    }  
    @Override  
    public int getCount() {  
        return mLists.size();  
    }  

    @Override  
    public boolean isViewFromObject(View arg0, Object arg1) {  

        return arg0 == arg1;  
    }  
    @Override  
    public Object instantiateItem(View arg0, int arg1)  
    {  
        ((ViewPager) arg0).addView(mLists.get(arg1));  
        return mLists.get(arg1);  
    }  

    @Override  
    public void destroyItem(View arg0, int arg1, Object arg2)  
    {  
        ((ViewPager) arg0).removeView((View) arg2);  
    }
}

好了，主要的代碼就是上面的這些了~有問題的朋友可以留言~