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

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

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

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

那么问题就好办了

ViewPager的适配器 数据模型 

List<View> mViewList;

public class MyGridViewPagerAdapter extends PagerAdapter {

    private List<View> mViewList;
    private Context mContext;

    public MyGridViewPagerAdapter(Context mContext, List<View> 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<EntityTuanNav> mList;
private Context mContext;

public GridviewTuanNavAdapter(Context mContext, List<EntityTuanNav> 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,所以单独拿出来

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <GridView
        android:id="@+id/gridview_tuan_nav"
        android:layout_width="match_parent"
        android:numColumns="4"
        android:layout_height="180dp">
    </GridView>
</LinearLayout>

接下来就是实现了

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

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

LayoutInflater mlayoutInflater;

private List<View> mViewList;
private List<EntityTuanNav>mGridViewData;
private List<EntityTuanNav>mGridViewData2;

//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 <navimg.length;i++){
    EntityTuanNav entityTuanNav = new EntityTuanNav();
    entityTuanNav.setgImg(navimg[i]);
    entityTuanNav.setgText(navtext[i]+"1");
    mGridViewData.add(entityTuanNav);
}
for(int i = 0;i <navimg.length;i++){
    EntityTuanNav entityTuanNav = new EntityTuanNav();
    entityTuanNav.setgImg(navimg[i]);
    entityTuanNav.setgText(navtext[i]+"2");
    mGridViewData2.add(entityTuanNav);
}
    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);}

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