1. 程式人生 > >gridview 實現橫向分頁滑動效果的兩種實現方案

gridview 實現橫向分頁滑動效果的兩種實現方案

方案一:

樓主在網上找的,能夠實現橫向滑動,但並沒有分頁的效果,樓主覺得簡單實用就一併貼出來了,下面看程式碼:

DisplayMetrics dm;

    private void setValue() {
        int count = gridAdapter.getCount();
        int numColumns = (count % 2 == 0) ? count / 2 : count / 2 + 1;
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(numColumns * dm.widthPixels / 5, LinearLayout.LayoutParams.WRAP_CONTENT);
        gridView.setLayoutParams(params);
        gridView.setColumnWidth(dm.widthPixels / 5);
        // gridView.setHorizontalSpacing(hSpacing);
        gridView.setStretchMode(GridView.NO_STRETCH);

        gridView.setNumColumns(numColumns);
    }

    private void getScreenDen() {
        dm = new DisplayMetrics();
        getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
    }

    /**
     * 初始化gridview
     */
    @SuppressLint("WrongViewCast")
    private void initGridView(final JSONArray array) {

        gridAdapter = new HomeMainGridAdapter(getActivity(), array, null);
        gridView = (GridView) findViewById(R.id.gview);
        horizontalScrollView = (HorizontalScrollView) findViewById(R.id.scrollView);

        horizontalScrollView.setHorizontalScrollBarEnabled(false);// 隱藏滾動條
        getScreenDen();
        setValue();
        gridView.setSelector(new ColorDrawable(Color.TRANSPARENT));
        gridView.setAdapter(gridAdapter);
       
    }

package com.ly.sxh.activity;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.GridView;

/**
 * Created by cruze on 2015/8/6.
 */
public class MyGridView extends GridView {
    public MyGridView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MyGridView(Context context) {
        super(context);
    }

    public MyGridView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int expandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
                MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);
    }
}


 <HorizontalScrollView
                    android:id="@+id/scrollView"
                    android:layout_marginTop="2dp"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">

                    <LinearLayout
                        android:id="@+id/linearLayout1"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent">

                        <com.ly.sxh.activity.MyGridView
                            android:id="@+id/gview"
                            android:layout_gravity="center"
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_marginLeft="2dp"
                            android:layout_marginRight="2dp"
                            android:background="@color/white"
                            android:columnWidth="55dp"
                            android:gravity="center"
                            android:numColumns="5"
                            android:stretchMode="columnWidth" />
                    </LinearLayout>
                </HorizontalScrollView>


方案二:
樓主根據專案需求自己寫了一個,實現分頁橫向滑動、主要就是將gridview的資料拆分開來,然後丟到viewpager裡面,其實也可以用fragment,效果是一樣的

  ImageView[] dots;
    int length;
    int pageSize;
    private void initViewPager(final JSONArray parkRows) {

        RelativeLayout layoutRoute = (RelativeLayout) findViewById(R.id.rl);

        android.view.ViewGroup.LayoutParams lp = layoutRoute.getLayoutParams();
        lp.height = (int)initHeght();

        pager = (ViewPager) findViewById(R.id.vpager);

        length = parkRows.length();
         pageSize = length % 10 == 0 ? length / 10 : length / 10 + 1;
        LinearLayout.LayoutParams margin = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT, 1);
        margin.setMargins(11, 0, 11, 0);
        ViewGroup group = (ViewGroup) findViewById(R.id.viewGroup);
        group.removeAllViews();
//TODO。資料分頁s
        try {
            dots = new ImageView[pageSize];
            View views[] = new View[pageSize];
            Context con = getActivity().getApplicationContext();

            JSONArray ja = new JSONArray();
            List<JSONArray> list = new ArrayList<JSONArray>();
            for (int j = 0; j < length; j++) {
                ja.put(parkRows.get(j));
                if ((j) % 10 == 9) {
                    list.add(ja);
                    ja = new JSONArray();
                }
            }
            if (ja.length() > 0) {
                list.add(ja);
            }
            for (int i = 0; i < pageSize; i++) {
                ImageView imageView = new ImageView(getActivity());
                imageView.setLayoutParams(new LinearLayout.LayoutParams(10, 10));
                dots[i] = imageView;
                if (i == 0) {
                    dots[i].setImageResource(R.drawable.ic_focus);
                } else {
                    dots[i].setImageResource(R.drawable.ic_normal);
                }
                group.addView(imageView, margin);
                views[i] = LayoutInflater.from(con).inflate(R.layout.gridpager, null);
                initGridView(views[i], list.get(i));
            }
            HomeGridPageAdapter adapter = new HomeGridPageAdapter(getActivity(), views);
            pager.setAdapter(adapter);
        } catch (JSONException e) {
            e.printStackTrace();
        }
        initListener();
    }
    //TODO
    private double initHeght() {
        //獲取螢幕寬度
        DisplayMetrics dm = new DisplayMetrics();
        double densityDpi = dm.density;
        //獲取螢幕資訊
        getActivity().getWindowManager().getDefaultDisplay().getMetrics(dm);
        //螢幕寬度
        int screenWidth = dm.widthPixels;

       return  screenWidth/2.2;

    }


    /**
     * 新增事件監聽
     */
    private void initListener() {
        pager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            boolean isScrolled = false;

            @Override
            public void onPageScrollStateChanged(int status) {
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                if (pager != null)
                    pager.invalidate();
            }

            @Override
            public void onPageSelected(int index) {
                setImageBackground(index % length);
            }
        });

    }

    private void setImageBackground(int index) {
        for (int i = 0; i < pageSize; i++) {
            if (i == index) {
                dots[i].setImageResource(R.drawable.ic_focus);
            } else {
                dots[i].setImageResource(R.drawable.ic_normal);
            }
        }
    }

    private void initGridView(View view, final  JSONArray parkRows) {
        GridView gridView = (GridView) view.findViewById(R.id.gview);
        HomeMainGridAdapter adapter = new HomeMainGridAdapter(getActivity(), parkRows, null);
        gridView.setAdapter(adapter);

    }

<RelativeLayout
                    android:id="@+id/rl"
                    android:layout_marginTop="10dp"
                    android:orientation="vertical"
                    android:layout_width="match_parent"
                    android:layout_height="160dp">

                    <android.support.v4.view.ViewPager
                        android:id="@+id/vpager"
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:layout_gravity="center"
                        android:layout_marginLeft="2dp"
                        android:layout_marginRight="2dp"
                        android:background="@color/white"
                        android:columnWidth="55dp"
                        android:gravity="center"
                        android:numColumns="5"
                        android:stretchMode="columnWidth" />

                    <LinearLayout
                        android:id="@+id/viewGroup"
                        android:layout_width="wrap_content"
                        android:layout_height="10dp"
                        android:layout_alignParentBottom="true"
                        android:layout_centerHorizontal="true"
                        android:gravity="center_horizontal|bottom"
                        android:orientation="horizontal">

                    </LinearLayout>



                </RelativeLayout>

package com.ly.sxh.adapter;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by cruze on 2015/9/7.
 */
public class HomeGridPageAdapter extends PagerAdapter {

    private Context context;
    private View views[];

    public HomeGridPageAdapter(Context context, View views[]) {
        this.context = context;
        this.views = views;
    }

    @Override
    public int getCount() {
        return views.length;
    }

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


    /**
     * 載入圖片進去,用當前的position 除以 圖片陣列長度取餘數是關鍵
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        try {
            View view = views[position];
            container.addView(view);
        } catch (Exception e) {
            Log.e("e_pager", e.toString());
        }
        return views[position];
    }


    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(views[position]);
    }
}
看下效果圖:




好了,兩個方案都貼出來,樓主直接從專案中擷取的,可能有點亂,單稍微花點時間看下應該能搞定。