【安卓-自定义布局】安卓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};[/code]

@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);[code]        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)); [/code]

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);}

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