GridPagerSnapHelper 项目教程

GridPagerSnapHelper 项目教程

GridPagerSnapHelperA powerful tools to impl grid paging layout by RecyclerView项目地址:https://gitcode.com/gh_mirrors/gr/GridPagerSnapHelper

1. 项目的目录结构及介绍

GridPagerSnapHelper 项目的目录结构如下:

GridPagerSnapHelper/
├── app/
│   ├── build.gradle
│   └── src/
│       └── main/
│           ├── java/
│           └── res/
├── gradle/
│   └── wrapper/
├── gridpagersnaphelper/
│   ├── build.gradle
│   └── src/
│       └── main/
│           ├── java/
│           └── res/
├── recyclerviewindicator/
│   ├── build.gradle
│   └── src/
│       └── main/
│           ├── java/
│           └── res/
├── screenshot/
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── _config.yml
├── build.gradle
├── gradle.properties
├── gradlew
├── gradlew.bat
└── settings.gradle

目录结构介绍

  • app/: 主应用程序模块,包含应用程序的主要代码和资源。
  • gradle/: Gradle 构建系统的包装器。
  • gridpagersnaphelper/: GridPagerSnapHelper 库模块,包含实现网格分页布局的核心代码。
  • recyclerviewindicator/: RecyclerView 指示器库模块,用于显示当前页面的指示器。
  • screenshot/: 项目截图。
  • .gitignore: Git 忽略文件配置。
  • .travis.yml: Travis CI 配置文件。
  • LICENSE: 项目许可证。
  • README.md: 项目说明文档。
  • _config.yml: 项目配置文件。
  • build.gradle: 根项目的构建脚本。
  • gradle.properties: Gradle 属性配置文件。
  • gradlew: Gradle 包装器脚本(Unix)。
  • gradlew.bat: Gradle 包装器脚本(Windows)。
  • settings.gradle: 项目设置脚本。

2. 项目的启动文件介绍

项目的启动文件位于 app/src/main/java/ 目录下,通常是 MainActivity.java 或类似的文件。这个文件是应用程序的入口点,负责初始化界面和调用其他组件。

示例启动文件

package com.example.gridpagersnaphelper;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.GridLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        RecyclerView recyclerView = findViewById(R.id.recycler_view);
        recyclerView.setHasFixedSize(true);

        GridLayoutManager gridLayoutManager = new GridLayoutManager(this, 3, GridLayoutManager.HORIZONTAL, false);
        recyclerView.setLayoutManager(gridLayoutManager);

        // 设置适配器
        // recyclerView.setAdapter(new MyAdapter());
    }
}

3. 项目的配置文件介绍

项目的配置文件主要包括 build.gradle 文件和 gradle.properties 文件。

build.gradle

根目录下的 build.gradle 文件是整个项目的构建脚本,定义了项目的依赖和构建配置。

// 根目录下的 build.gradle
buildscript {
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.5.0'
    }
}

allprojects {
    repositories {
        google()
        jcenter()
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

模块目录下的 build.gradle 文件定义了该模块的构建配置和依赖。

// app 模块下的 build.gradle
apply plugin: 'com.android.application'

android {
    compileSdkVersion 29
    defaultConfig {
        applicationId "com.example.gridpagersnaphelper"
        minSdkVersion 16
        targetSdkVersion 29
        versionCode 1

GridPagerSnapHelperA powerful tools to impl grid paging layout by RecyclerView项目地址:https://gitcode.com/gh_mirrors/gr/GridPagerSnapHelper

仿zaker效果的拖拽排序。可以动态设置列数,动态增加或者减少item,当一页填满自动增加到下一页,当页数大于1,可以左右翻页。项目地址:https://github.com/zzhouj/Android-DraggableGridViewPager 效果图:  如何使用:xml中创建<com.coco.draggablegridviewpager.DraggableGridViewPager><com.coco.draggablegridviewpager.DraggableGridViewPager         android:id="@ id/draggable_grid_view_pager"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:paddingBottom="20dp"         android:paddingLeft="20dp"         android:paddingRight="60dp"         android:paddingTop="20dp" >     </com.coco.draggablegridviewpager.DraggableGridViewPager>2. 为DraggableGridViewPager设置AdaptermAdapter = new ArrayAdapter<String>(this, 0) {     @Override     public View getView(int position, View convertView, ViewGroup parent) {         final String text = getItem(position); if (convertView == null) {     convertView = (TextView) getLayoutInflater().inflate(R.layout.draggable_grid_item, null); } ((TextView) convertView).setText(text); return convertView;     } }; mDraggableGridViewPager.setAdapter(mAdapter);3. 为DraggableGridViewPager设置监听器mDraggableGridViewPager.setOnPageChangeListener(new OnPageChangeListener() {//页面滚动监听 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {//页面正在滚动时触发     //System.out.println("onPageScrolled 滚动了"); } @Override public void onPageSelected(int position) {//由于页面滚动,导致页面发生变化     //System.out.println("onPageScrolled 页面变化了 position="   position); } @Override public void onPageScrollStateChanged(int state) {//滚动时,监听滚动状态的变化     //System.out.println("onPageScrolled 滚动状态state="   state); } }); mDraggableGridViewPager.setOnItemClickListener(new OnItemClickListener() {//单击某一item时触发 @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { showToast(((TextView) view).getText().toString()); } }); mDraggableGridViewPager.setOnItemLongClickListener(new OnItemLongClickListener() {//长按某一item触发 @Override public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) { showToast(((TextView) view).getText().toString()   " long clicked!!!"); return true; } }); mDraggableGridViewPager.setOnRearrangeListener(new OnRearrangeListener() {//拖动导致重新排序触发 @Override public void onRearrange(int oldIndex, int newIndex) { System.out.println("onPageScrolled OnRearrangeListener.onRearrange from="   oldIndex   ", to="   newIndex); String item = mAdapter.getItem(oldIndex); mAdapter.setNotifyOnChange(false); mAdapter.remove(item); mAdapter.insert(item, newIndex); mAdapter.notifyDataSetChanged(); } });
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
发出的红包

打赏作者

强懿方

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值