首页 > 代码库 > viewpager 和水平scrollView 进行绑定。
viewpager 和水平scrollView 进行绑定。
Viewpager + gridview +fragment 控件的聚合
1.需求顶部对应的是一个水平滚动scrollview中间一一些类别。
2.下面是一个viewpager
3.需要将viewpager和上面的水平scrollview进行关联，当上面的水平scrollview中类别点击的时候，下面的viewpager进行相应的滚动。
4.当viewpager进行切换的时候，上面的水平scrollview进行自动的滚动，和下面的viewpager角标相互对应。当scrollview滚动到做右边的时候。再次进行操作viewpager上面的scrollview 会滑动一个类别的距离。显示出来当前类别。
5.viewpager中嵌套的是fragment。使用fragementadapger 左右适配器进行绑定。（普通的viewpager使用pageradapter进行适配，官方是这样解释的）
对上面的水平scrollview进行宽度计算。显示出所有的类别：
* 初始 * 个化 类别 gradview
* 根据类别总数数 然后设置给 gridView 就可以，在布局文件中需要设置 style ，和宽度相同
* @param view
* @return
*/
private GridView initGridView(View view) {
int count = productcategory.size() + 1;
GridView gridView = (GridView) view.findViewById(R.id.gridView);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(count * DP2Tools.dip2px(getActivity(), 70), LinearLayout.LayoutParams.WRAP_CONTENT);
gridView.setLayoutParams(params);
gridView.setNumColumns(count);
return gridView;
}
这里的难度主要是gridView的水平滚动这一块。网上搜了一圈，没有找到有价值的东西。
布局部分：
水平scrollView 中嵌套一个gridView .
下面部分使用的viewPager 由于需求要求加载过后，需要保存状态。考虑ViewPager使用Fragment进行嵌套，这样，可以将代码进行分离。而且利于解耦！（ps：之前使用不同的View进行填充，leadre看了之后。说了一通。代码全部耦合在一起。可读性太差了，不利于维护。）
public class SquareZoneFragmentPagerAdapter extendsFragmentPagerAdapter{
private ArrayList<SquareTrendPoll.SimplePolls> simplePollses;
private Context context;
private int pagerViewCount;
public SquareZoneFragmentPagerAdapter(FragmentActivity activity,
ArrayList<SquareTrendPoll.SimplePolls> simplePollses,
int count) {
super(activity.getSupportFragmentManager());
this.simplePollses = simplePollses;
this.pagerViewCount = count + 1; //比分类多了一个全部分类
}
@Override
public int getCount() {
return pagerViewCount;
}
@Override
public Fragment getItem(int position) { //在这里返回了 N 份 fragment 这里传递给fragment 填充的数据
SquareCatagoryFragment squareCatagoryFragment = new SquareCatagoryFragment();
Bundle bundle = new Bundle();
bundle.putSerializable("squareZone", simplePollses);
squareCatagoryFragment.setArguments(bundle);
return squareCatagoryFragment; //返回 pagerviewcount+1份
}
1.gridView item的点击事件，点击item 背景变化，字体变化。
这个不难，设置gridView 的 item 点击监听，点击时候，将当前position传递给gridView adapger 中的getView 里面进行判断。给当前设置 背景 字体，其他的一律设置 另外的样式即可。
2.说到这里，可能较难实现的是。viewpager进行切换的时候。上面的水平gridView 通过。scrollBy（）方法进行滚动，下面贴上具体的代码。
主要是在viewpager的 onPagerChanged（） 方法中进行判断 判断
@Override
public void onPageSelected(int position) {
View view = gridView.getChildAt(position); //（水平scrollVeiw）得到具体的View 进行 测量距离左边的距离
if (view == null)
return;
view.getLocationOnScreen(movingTabNavLocation); //使用getLocationOnScreen( ) 进行测量相对左边的距离（只考虑x轴）
int differenceValue = http://www.mamicode.com/screenPxWidth - movingTabNavLocation[0] - 210; //和屏幕宽度。-210 是一个veiw的宽度，从零开始的原因，需要多减去一个view距离
if (differenceValue < 0) { //超过一屏
scrollView.scrollBy(Math.abs(differenceValue), 0);
} else if (movingTabNavLocation[0] < 0) { //查过一屏幕，反向滑动
scrollView.scrollBy(movingTabNavLocation[0], 0);
}
catagoryProductAdapter.setCurrentItem(position);
catagoryProductAdapter.notifyDataSetChanged();
initData(PRODUCT_CATEGORY_CODE);
}
@Override
public void onPageScrollStateChanged(int state) {
}
滑动到左右边。当再次滑动时候，这时候会触发，scrollView 的滚动时间。滚动一个veiw的位置。显示下一个类别。一次类推
如果反向滑动，则通过scrollby（- xx,xx) 反向滑动
viewpager 和水平scrollView 进行绑定。