【安卓-自定义布局】安卓App开发思路 一步一个脚印（十一）实现自定义左右滚动的导航栏目--仿美团

实现自定义左右滚动的导航栏目-仿美团

      这种左右滚动的菜单，在很多常见的o2o 什么p2p c2c o2c c2o p2c c2p 各种软件中比较常见，譬如美团的

这种布局就是将GridView嵌套了ViewPager ， ViewPager中的数据模型适配器就是View，也就是子类 GridView,

那么问题就好办了

ViewPager的适配器 数据模型 

List mViewList;

public class MyGridViewPagerAdapter extends PagerAdapter {

    private List mViewList;
    private Context mContext;

    public MyGridViewPagerAdapter(Context mContext, List mViewList) {
        this.mViewList = mViewList;
        this.mContext = mContext;
    }

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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view==object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View mView = mViewList.get(position);
            if( mView.getParent()!=null){
                    ((ViewGroup)mView.getParent()).removeView(mView);
            }

        container.addView(mView);
        return mView;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mViewList.get(position));
    }
}

那么GridView中的适配器，当然是继承 BaseAdapter

private List mList;
private Context mContext;

public GridviewTuanNavAdapter(Context mContext, List mList) {
    this.mList = mList;
    this.mContext = mContext;
}

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

@Override
public Object getItem(int position) {
    return null;
}

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    View mView = LayoutInflater.from(mContext).inflate(R.layout.item_grid_tuan_nav,null);
    ImageView imageView = (ImageView) mView.findViewById(R.id.iv_tuan_gradview);
    TextView textView = (TextView) mView.findViewById(R.id.tv_tuan_gradview);

    imageView.setImageResource(mList.get(position).getgImg());
    textView.setText(mList.get(position).getgText());

    return mView;
}

再者是布局，由于gridview是内部的view,所以单独拿出来

接下来就是实现了

@Bind(R.id.viewpager_tuan_banner)
ViewPager mViewPagerBanner;

@Bind(R.id.viewpager_tuan_nav)
ViewPager mViewPagerNav;

LayoutInflater mlayoutInflater;

private List mViewList;
private ListmGridViewData;
private ListmGridViewData2;

//nav图片
private int navimg[]=new int[]{R.mipmap.tuangrid1,R.mipmap.tuangrid2,R.mipmap.tuangrid3,R.mipmap.tuangrid4,R.mipmap.tuangrid5,R.mipmap.tuangrid6,R.mipmap.tuangrid7,R.mipmap.tuangrid8};
//nav文字 --采用拼多多的文字
 private String navtext[]=new String[]{"限时秒杀","超值大牌","品质水果团","海淘","9块9特卖","免费试用团","特惠量贩","爱轻奢"};

private int mPageImg[]=new int[]{R.mipmap.tuanv1,R.mipmap.tuanv2,R.mipmap.tuanv3,R.mipmap.tuanv4};

@Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

    View v= inflater.inflate(R.layout.fragment_tuan, null);    

     ButterKnife.bind(this, v); 

     mViewPagerBanner.setAdapter(new MyBuyPagerAdapter(getActivity(), mPageImg));  

      initGridview();    

     ViewGroup p = (ViewGroup) v.getParent();  

     if (p != null) {    

       p.removeAllViewsInLayout();        

  } 

    return v;

}

     private void initGridview() {  

         mlayoutInflater= getActivity().getLayoutInflater();  

        View view =  mlayoutInflater.inflate(R.layout.layout_gridview_tuan_nav,null);

        View view2 =  mlayoutInflater.inflate(R.layout.layout_gridview_tuan_nav,null);
      GridView mGridView = (GridView) view.findViewById(R.id.gridview_tuan_nav);
      GridView mGridView2 = (GridView) view2.findViewById(R.id.gridview_tuan_nav);
     mGridViewData = new ArrayList<>();
     mGridViewData2 = new ArrayList<>();

for(int i = 0;i 

mGridView.setAdapter(new GridviewTuanNavAdapter(getActivity(), mGridViewData));

    mGridView2.setAdapter(new GridviewTuanNavAdapter(getActivity(),mGridViewData2));  

   mViewList=new ArrayList<>();  

   mViewList.add(mGridView);    

   mViewList.add(mGridView2); 

   mViewPagerNav.setAdapter(new MyGridViewPagerAdapter(getActivity(),mViewList));}

@Override

 public void onDestroyView() { 

   super.onDestroyView();   

   ButterKnife.unbind(this);}

思路大致如此，相对比较简单。