Viewpager and horizontal scrollView are bound ., Viewpager

Viewpager and horizontal scrollView are bound ., Viewpager

Aggregation of Viewpager + gridview + fragment Control

1. The top of the requirement corresponds to a horizontal rolling scrollview with one category in the middle.

2. The following is a viewpager

3. You need to associate viewpager with the above horizontal scrollview. When the class in the horizontal scrollview is clicked, the following viewpager will scroll accordingly.

4. When viewpager is switched, the above horizontal scrollview is automatically rolled and corresponds to the following viewpager badge. When scrollview is rolled to the right. The scrollview on viewpager will slide the distance of a category. The current category is displayed.

5. fragment is nested in viewpager. Use the fragementadapger adapter to bind to the left and right sides. (The common viewpager uses pageradapter for adaptation. The official explanation is as follows)

The width of the preceding horizontal scrollview is calculated. Show all categories:

* Initial * Classified gradview

* Set the number of categories to the gridView. Set the style in the layout file, which is the same as the width.
* @ 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;
}

The difficulty here is mainly the horizontal scrolling of the gridView. I searched the internet and did not find anything valuable.

Layout:

A gridView is nested in the horizontal scrollView.

The following section uses viewPager to save the status after loading as required. Consider ViewPager using Fragment for nesting, so that code can be separated. It is also conducive to decoupling! (Ps: Previously, different views were used for filling. After reading leadre. Let's talk about it. The code is all coupled. Poor readability, not conducive to maintenance .)

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; // a full category is added to the specified category.
}


@ Override
Public int getCount (){
Return pagerViewCount;
}


@ Override
Public Fragment getItem (int position) {// N fragment is returned here and the data passed to fragment is filled
SquareCatagoryFragment squareCatagoryFragment = new SquareCatagoryFragment ();
Bundle bundle = new Bundle ();
Bundle. putSerializable ("squareZone", simplePollses );
SquareCatagoryFragment. setArguments (bundle );


Return squareCatagoryFragment; // return pagerviewcount + 1 copy
}

1. Click the event of the gridView item, click the item background change, and the font changes.

It is not difficult to set the gridView item click listener. When you click it, the current position is passed to the getView in the gridView adapger for judgment. Set the background font for the current image. set any other style.

2. What is difficult to implement here. When viewpager is switched. The above horizontal gridView passes. The scrollBy () method is scrolled. The specific code is attached below.

It is mainly used to judge the viewpager onPagerChanged () method.

@ Override
Public void onPageSelected (int position ){

View view = gridView. getChildAt (position); // (horizontal scrollVeiw) obtain the specific View to measure the distance from the left
If (view = null)
Return;
View. getLocationOnScreen (movingTabNavLocation); // use getLocationOnScreen () to measure the distance to the left (only the X axis is considered)

Int differenceValue = screenPxWidth-movingTabNavLocation [0]-210; // and screen width. -210 is the width of a veiw. Because it starts from scratch, you need to subtract a view distance.
If (differenceValue <0) {// more than one screen
ScrollView. scrollBy (Math. abs (differenceValue), 0 );
} Else if (movingTabNavLocation [0] <0) {// check the screen and move it backwards.
ScrollView. scrollBy (movingTabNavLocation [0], 0 );
}
CatagoryProductAdapter. setCurrentItem (position );
CatagoryProductAdapter. notifyDataSetChanged ();
InitData (PRODUCT_CATEGORY_CODE );
}


@ Override
Public void onPageScrollStateChanged (int state ){
}

Slide to the left and right sides. When sliding again, this will trigger the scrollView's scroll time. Scroll the position of a veiw. Displays the next category. And so on

If reverse sliding is performed, the system uses scrollby (-xx, xx) to reverse sliding.