viewpager+gridview


先上效果图


再上xml布局文件

<RelativeLayout
    android:id="@+id/type_viewpager"
    android:layout_marginTop="8dp"
    android:layout_below="@+id/layout_home_viewpager"
    android:layout_width="fill_parent"
    android:background="#ffffff"
    android:layout_height="150dp"
    >
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_home_gridview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:id="@+id/layout_home_gridview_point"
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:orientation="horizontal"/>
</RelativeLayout>

接着上封装好的代码


public class ViewPagerGridView {
    private ViewPager viewpager_gridview;
    List<HomeTypeBean> list;//HomeTypeBeangen根据项目的需要可自己写
    List<HomeTypeBeanList> listbeans;//HomeTypeBeanList根据项目的需要可自己写
    private LinearLayout layout;
    private Activity context;
    private int currentitem=0;
    private int size  = 0;

    /**
     *
     * @param context
     * @param viewpager_gridview  布局文件中的viewpager
     * @param layout  小圆点所在的layout
     * @param list  所有的item集合
     * @param size  每页显示多少个(一般10个)
     */
    public ViewPagerGridView(Activity context, ViewPager viewpager_gridview, LinearLayout layout, List<HomeTypeBean> list , int size) {
       this.context = context;
        this.viewpager_gridview = viewpager_gridview;
        this.list = list;
        this.layout = layout;
        this.size = size;
        initView();
        initData();
    }
    private void initView() {
        listbeans = new ArrayList<>();

    }
    private void initData() {
        fengzhuang(list,size);
        setRoundviewColor();
        viewpager_gridview.setAdapter(new MyPagerAdpater(listbeans,context));
        viewpager_gridview.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                currentitem = position;
                setRoundviewColor();
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });
    }

    /**
     *
     * @param list 所有的item的集合
     * @param size 每页显示多少个item
     */
    public void fengzhuang(List<HomeTypeBean> list, int size){
        int n = list.size()%size;
        int num;
        if (n!=0){
            num = (int) list.size()/size+1;
        }else {
            num = (int) list.size()/size;
        }
        for (int i = 1;i<=num;i++){
            List<HomeTypeBean> stringList =new ArrayList();
            for (int j = 0;j<list.size();j++){
                if (j>=(i-1)*size&&j<i*size){
                    stringList.add(list.get(j));
                }
            }
            HomeTypeBeanList bean = new HomeTypeBeanList();
            bean.setTypeBeanList(stringList);
            listbeans.add(bean);
        }
    }



    public View roundview(int height){
        RoundImageView view = new RoundImageView(context);
        view.setImageResource(R.mipmap.ic_launcher);
//        View view = new View(context);
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(height,height);
        params.setMargins(10, 0, 0, 0);//设置左边margin为10
        view.setLayoutParams(params);
        return view;
    }
    public void setRoundviewColor(){
        layout.removeAllViews();
        for (int i = 0;i<listbeans.size();i++){
            if (i == currentitem){
                layout.addView(roundview(20));
            }else {
                layout.addView(roundview( 10));
            }
        }
    }
    class MyPagerAdpater extends PagerAdapter {
        private List<HomeTypeBeanList> listbeans;
        private Context context;


        public MyPagerAdpater(List<HomeTypeBeanList> listbeans, Context context) {
            this.context = context;
            this.listbeans = listbeans;
        }
        @Override
        public int getCount() {
            return listbeans.size();
        }

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


        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            GridView gridView = new GridView(context);
            LinearLayout.LayoutParams layoutParams =
                    new LinearLayout.LayoutParams(viewpager_gridview.getMeasuredWidth(),viewpager_gridview.getMeasuredHeight());
            gridView.setLayoutParams(layoutParams);
            gridView.setNumColumns(size/2);
            gridView.setAdapter(new MyGridViewAdapter(context, listbeans,position));
            container.addView(gridView);
            return gridView;
        }
    }
    private int ceshi = 0;
    class MyGridViewAdapter extends BaseAdapter {
        private Context context;
        private List<HomeTypeBeanList> list;
        private int flag;

        public MyGridViewAdapter(Context context, List<HomeTypeBeanList> list, int flag) {
            this.context = context;
            this.list = list;
            this.flag = flag;
            ImageLoaderConfiguration configuration = ImageLoaderConfiguration.createDefault(context);
            ImageLoader.getInstance().init(configuration);
        }

        @Override
        public int getCount() {
            return list.get(flag).getTypeBeanList().size();
        }

        @Override
        public Object getItem(int position) {
            return list.get(flag).getTypeBeanList().get(position);
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(final int position, View convertView, final ViewGroup parent) {
            ViewHolder viewHolder=null;
            if (convertView==null){
                viewHolder = new ViewHolder();
                convertView = LayoutInflater.from(context).inflate(R.layout.layout_viewpager_gridview,parent,false);
                viewHolder.roundImageView = (RoundImageView) convertView.findViewById(R.id.rv_viewpager_gridview);
                viewHolder.textView = (TextView) convertView.findViewById(R.id.tv_viewpager_gridview);
                convertView.setTag(viewHolder);
            }else {
                viewHolder = (ViewHolder) convertView.getTag();
            }

            viewHolder.textView.setText(list.get(flag).getTypeBeanList().get(position).getMtname());
            //AppConfig.DEFAULT_IMG_MERCHANT_BG 配置iamgeloader的显示参数
            ImageLoader.getInstance().displayImage(Config.web.picUrl+list.get(flag).getTypeBeanList().get(position).getLogourl(), viewHolder.roundImageView, AppConfig.DEFAULT_IMG_MERCHANT_BG);
            convertView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (clickListener!=null) {
                        clickListener.onCridViewClickListener(v, list.get(flag).getTypeBeanList().get(position).getPkmertype(), list.get(flag).getTypeBeanList().get(position).getMtname());
                    }
                }
            });
            return convertView;
        }
    }
    class ViewHolder {
        RoundImageView roundImageView;//处理圆图
        TextView textView;//显示名字
    }
    public void setOnGridViewClickListener(GridViewClickListener clickListener){//设置事件监听
        this.clickListener = clickListener;
    }
    private GridViewClickListener clickListener;//处理gridview的item点击事件的接口回调
    public interface GridViewClickListener {
        public void onCridViewClickListener(View v,String pkmertype,String name);
    }
}

接着上bean类

public class HomeTypeBean {
    private String addressurl;
    private String logourl;
    private String mtlevel;
    private String parentpk;
    private String mtname;
    private String pkmertype;
    private String merchantCount;
    private String type;

    public String getMerchantCount() {
        return merchantCount;
    }

    public void setMerchantCount(String merchantCount) {
        this.merchantCount = merchantCount;
    }

    public String getParentpk() {
        return parentpk;
    }

    public void setParentpk(String parentpk) {
        this.parentpk = parentpk;
    }

    public void setAddressurl(String addressurl) {
        this.addressurl = addressurl;
    }

    public String getAddressurl() {
        return addressurl;
    }

    public void setLogourl(String logourl) {
        this.logourl = logourl;
    }

    public String getLogourl() {
        return logourl;
    }

    public void setMtlevel(String mtlevel) {
        this.mtlevel = mtlevel;
    }

    public void setMtname(String mtname) {
        this.mtname = mtname;
    }

    public void setPkmertype(String pkmertype) {
        this.pkmertype = pkmertype;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String getMtlevel() {
        return mtlevel;
    }

    public String getMtname() {
        return mtname;
    }

    public String getPkmertype() {
        return pkmertype;
    }

    public String getType() {
        return type;
    }
}

另外一个bean类

public class HomeTypeBeanList {
    private List<HomeTypeBean> typeBeanList;

    public List<HomeTypeBean> getTypeBeanList() {
        return typeBeanList;
    }

    public void setTypeBeanList(List<HomeTypeBean> typeBeanList) {
        this.typeBeanList = typeBeanList;
    }
}


最后上调用方法:

        List<HomeTypeBean> homeTypeBeanList = new ArrayList<>();
        for (int i=0;i<10;i++){
            HomeTypeBean homeTypeBean = new HomeTypeBean();
            homeTypeBean.setAddressurl("http://a.hiphotos.baidu.com/zhidao/pic/item/f9dcd100baa1cd11aa2ca018bf12c8fcc3ce2d74.jpg");
            homeTypeBean.setLogourl("");
            homeTypeBean.setMerchantCount("");
            homeTypeBean.setMtlevel("");
            if (i==0){
                homeTypeBean.setMtname("美食");
            }else if (i==1){
                homeTypeBean.setMtname("酒店");
            }else if (i==2){
                homeTypeBean.setMtname("旅游");
            }else if (i==3){
                homeTypeBean.setMtname("购物");
            }else if (i==4){
                homeTypeBean.setMtname("爱美丽");
            }else if (i==5){
                homeTypeBean.setMtname("健康");
            }else if (i==6){
                homeTypeBean.setMtname("休闲娱乐");
            }else if (i==7){
                homeTypeBean.setMtname("智能");
            }else if (i==8){
                homeTypeBean.setMtname("生活服务");
            }else {
                homeTypeBean.setMtname("更多");
            }
            homeTypeBean.setType("");
            homeTypeBean.setPkmertype("");
            homeTypeBean.setParentpk("");
            homeTypeBeanList.add(homeTypeBean);
        }
        ViewPagerGridView viewPagerGridView =  new ViewPagerGridView(getActivity(),vp_home_gridview,layout_home_gridview_point,homeTypeBeanList,10);

RoundImageView

public class RoundImageView  extends ImageView{
    private Paint paint = new Paint();
    public RoundImageView(Context context) {
        super(context);
    }

    public RoundImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @SuppressWarnings("deprecation")
    @Override
    protected void onDraw(Canvas canvas) {
        BitmapShader shader;
        if (getDrawable() instanceof BitmapDrawable) {
            BitmapDrawable bitmapDrawable = (BitmapDrawable)getDrawable();
            // clip
            shader = new BitmapShader(bitmapDrawable.getBitmap(), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            RectF rect = new RectF(0.0f, 0.0f, getWidth(), getHeight());
            int width = bitmapDrawable.getBitmap().getWidth();
            int height = bitmapDrawable.getBitmap().getHeight();
            RectF src = null;
            if (((float)width) / height > 1) {
                src = new RectF(0.0f, 0.0f, height, height);
            } else {
                src = new RectF(0.0f, 0.0f, width, width);
            }
            Matrix matrix = canvas.getMatrix();
            matrix.setRectToRect(src, rect, Matrix.ScaleToFit.CENTER);
            shader.setLocalMatrix(matrix);

            // 抗锯齿
            paint.setAntiAlias(true);
            paint.setShader(shader);
            canvas.drawRoundRect(rect, this.getWidth() / 2, this.getHeight() / 2, paint);
        }
    }
}


提示:

ViewPagerGridView类中用的是imageloader图片框架请自行下载或者改成自己用的框架




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
PageGridViewViewPager GridView组合控件实现网格布局分页效果大多数app首页界面一般貌似可以滑动切换上下页的网格布局,这种效果用得挺多,可惜Android原生是没有这样的控件的。在工作中,我也用到过几次。但每次实现都是按ctrl A C V,代码写得也不优雅,就是再次重新复制粘贴,也避免不了看上几眼,修改修改,特别不爽快。每次吐槽的同时在想,下次我要再用到这种效果,我就将这些代码关进小黑屋。拒绝再写重复代码,虽然大多数只是按ctrl A C V。这次,我终于要将自己吐槽时的想法付之行动的。再写之前,为了避免重复造轮子。在网上搜了好多次,嗯,没有意外,我还是没有发现到惊喜。那就开始行动了。这种效果用ViewPager GridView实现,那我就叫它PageGridView吧(其实名字我也想了好久)有用的话,star一下也是不错的!!!PageGridView 特点可自由定制Item布局无需写adapter适配器,直接调用setData()方法填充数据只需实体类继承ItemModel即可可显示本地图、网络图、资源ID图标,由开发者实现动态计算PageGridView高度,不需要在布局里面写固定高度可重复setData()方法刷新数据PageGridView自定义属性属性名说明默认值pageSize每页大小8numColumns列数4isShowIndicator是否显示指示器trueselectedIndicator选中指示点资源IDR.mipmap.ic_dot_selectedunSelectedIndicator未选中指示点资源IDR.mipmap.ic_dot_normalindicatorGravity指示器位置centerindicatorPaddingLeft指示器左内边距0pxindicatorPaddingRight指示器右内边距0pxindicatorPaddingTop指示器上内边距0pxindicatorPaddingBottom指示器下内边距0pxindicatorPadding指示器内边距0pxindicatorBackground指示器背景颜色Color.WHITEitemViewItem布局R.layout.item_view约定规则Item布局必须给定具体高度,默认itemView布局的高度为@dimen/item_height=80dpItem布局 TextView的id 为R.id.tv_item_nameItem布局 ImageView的id 为R.id.iv_item_iconItem默认点击效果R.drawable.selector_item_view_bgItem点击颜色值:R.color.item_view_selected_colorItem背景颜色值:R.color.item_view_normal_color一行四列效果图两行四列效果图自定义Item布局效果图PageGridView使用Gradle 依赖库implementation 'com.wihaohao:PageGridView:1.0.1'默认布局一般默认参数即可满足需求<com.wihaohao.PageGridView           android:id="@ id/vp_grid_view"           android:layout_width="match_parent"           android:layout_height="wrap_content"           />一行4列的布局  <com.wihaohao.PageGridView           android:id="@ id/vp_grid_view"           android:layout_width="match_parent"           android:layout_height="wrap_content"           app:numColumns="4"           app:pageSize="4"           app:selectedIndicator="@mipmap/ic_dot_selected"           app:unSelectedIndicator="@mipmap/ic_dot_normal"           app:isShowIndicator="true"           />两行4列的布局    <com.wihaohao.PageGridView         android:id="@ id/vp_grid_view"         android:layout_width="match_parent"         android:layout_height="wrap_content"         app:indicatorPadding="10dp"         app:isShowIndicator="true"         app:itemView="@layout/my_item_view"         app:numColumns="4"         app:pageSize="8"         app:selectedIndicator="@mipmap/ic_dot_selected"         app:unSelectedIndicator="@mipmap/ic_dot_normal" />自定义Item布局 <com.wihaohao.PageGridView                 android:id="@ id/p_grid_view2"         android:layout_width="match_parent"         android:layout_height="wrap_content"         app:indicatorGravity="right"         app:indicatorPaddingRight="@dimen/padding_10"         app:isShowIndicator="true"         app:itemView="@layout/item_custom"         app:indicatorBackground="@color/colorPrimary"         app:numColumns="5"         app:pageSize="5"/>ItemModelpublic abstract static class ItemModel {                 /**                  * 返回item名字                  *                  * @return                  */         protected abstract String getItemName();         /**                  * 设置图标                  *                  * @param imageView         */         protected abstract void setIcon(ImageView imageView);          /**                  * 特殊需求,重写该方法,设置item                  *                  * @param itemView                  */         protected void setItemView(View itemView) {         }     }Model继承VpGridView.ItemModel 为item赋值和设置图标public abstract static class ItemModel {                 /**                  * 返回item名字                  *                  * @return         */         protected abstract String getItemName();                 /**                  * 设置图标                  *                  * @param imageView                  */         protected abstract void setIcon(ImageView imageView);                 /**                  * 特殊需求,重写该方法,设置item                  *                  * @param itemView                  */         protected void setItemView(View itemView) {         }     }继承VpGridView.ItemModel 设置ItemViewpublic class MyIconModel extends PageGridView.ItemModel {     private String name;         private int iconId;         public String getName() {             return name;     }         public void setName(String name) {             this.name = name;     }         public int getIconId() {             return iconId;     }         public void setIconId(int iconId) {             this.iconId = iconId;     }         public MyIconModel(String name, int iconId) {             this.name = name;             this.iconId = iconId;     }         @Override     protected String getItemName() {             return name;     }         @Override     protected void setIcon(ImageView imageView) {         imageView.setImageResource(iconId);     } }PageGridView的使用public class MainActivity extends AppCompatActivity {     List<MyIconModel> mList;         List<CustomModel> mList2;         private PageGridView<MyIconModel> mPageGridView;         private PageGridView<CustomModel> mPageGridView2;         @Override     protected void onCreate(Bundle savedInstanceState) {                 super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         mPageGridView =findViewById(R.id.vp_grid_view);         initData();         mPageGridView.setData(mList);         mPageGridView.setOnItemClickListener(new PageGridView.OnItemClickListener() {            @Override             public void onItemClick(int position) {                Toast.makeText(MainActivity.this,position "",Toast.LENGTH_SHORT).show();             }         });        //自定义item         mPageGridView2=findViewById(R.id.p_grid_view2);         mPageGridView2.setData(mList2);     }         private void initData() {         mList=new ArrayList<>();         mList2=new ArrayList<>();                 for(int i=0;i<30;i ){             mList.add(new MyIconModel("测试" i,R.mipmap.ic_launcher));             mList2.add(new CustomModel("标题" i));         }     } }

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值