# TileView **Repository Path**: kkaheng/tile-view ## Basic Information - **Project Name**: TileView - **Description**: 一个安卓高性能二维容器 - **Primary Language**: Java - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 1 - **Created**: 2026-02-05 - **Last Updated**: 2026-02-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # TileView - Android 二维瓦片布局与渲染引擎一个高效、灵活的 Android 二维瓦片布局与渲染组件，支持两种实现方式：基于 Canvas 绘制的高性能版本和基于 ViewGroup 布局的交互丰富版本。 ## 🎯 特性亮点 1. 双引擎架构 - **TileView (Canvas)**: 基于自定义绘制，适合大量瓦片场景，性能卓越 - **TileLayout (ViewGroup)**: 基于视图层级，支持完整的 View 交互和动画 2. 智能瓦片管理 - **自动回收复用**: 滚动时自动回收不可见瓦片，内存友好 - **按需加载**: 只创建和显示可见区域的瓦片 - **类型化池**: 不同类型的瓦片使用独立的回收池 3. 灵活坐标系统支持 - **负坐标**: 瓦片坐标可以从负数开始（如 -79 到 79） - **动态尺寸调整**: 运行时修改单个瓦片的宽高 - **锚点偏移**: 精确定位到任意瓦片并设置偏移量 4. 丰富交互支持 - 滚动、惯性滑动、边界回弹 - TileView 支持双指缩放 - 完整的触摸事件分发机制 - 支持请求不拦截触摸事件（瓦片独立处理） 5. 高度可定制 - 可自定义瓦片测量器（动态尺寸） - 适配器模式，数据与显示分离 - 支持多种瓦片类型和状态管理 ## 📁 项目结构 ``` tileview/ ├── src/main/java/com/kkaheng/tileview/ │ ├── canvas/ │ │ ├── TileView.java # Canvas 实现的核心类 │ │ └── BaseTileHolder.java # Canvas 瓦片基类 │ ├── layout/ │ │ └── TileLayout.java # ViewGroup 实现的核心类 │ └── TileCore.java # 核心布局算法 └── app/ # 演示应用 ├── TileViewDemoActivity.java # Canvas 版本演示 └── TileLayoutDemoActivity.java# ViewGroup 版本演示 ``` ## 🚀 快速开始我懒得搞发布 aar，麻烦死了，建议自己构建。或者从 Releases 里下载。 ### 添加依赖 ```gradle implementation files('libs/tileview-版本号.aar') ``` #### 基础用法 1. **Canvas 版本 (TileView)** ```java public class MyActivity extends AppCompatActivity { private TileView tileView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); tileView = new TileView(this); tileView.setAdapter(new MyAdapter()); // 可选配置 tileView.setZoomEnabled(true); tileView.setMinScaleFactor(0.5f); tileView.setMaxScaleFactor(3.0f); setContentView(tileView); } static class MyAdapter extends TileView.Adapter { @Override public int getBoundLeft() { return -10; } @Override public int getBoundTop() { return -10; } @Override public int getBoundRight() { return 10; } @Override public int getBoundBottom() { return 10; } @Override public MyTileHolder onCreateTileHolder(int tileType) { return new MyTileHolder(); } @Override public void onBindTileHolder(MyTileHolder holder, int column, int row) { // 绑定数据 } } } ``` 2. **ViewGroup 版本 (TileLayout)** ```java public class MyActivity extends AppCompatActivity { private TileLayout tileLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); tileLayout = new TileLayout(this); tileLayout.setAdapter(new MyAdapter()); setContentView(tileLayout); } static class MyAdapter extends TileLayout.Adapter { // ... 类似 TileView.Adapter 的实现 } } ``` ## 📖 详细教程 ### 创建自定义瓦片 1. **Canvas 版本瓦片** ```java public class MyTile extends BaseTileHolder { private Paint paint = new Paint(); @Override public void onDrawContent(Canvas canvas, float scaleFactor) { // 绘制内容 paint.setColor(Color.RED); canvas.drawCircle(getWidth()/2f, getHeight()/2f, Math.min(getWidth(), getHeight())/3f, paint); } @Override public boolean onClick() { // 处理点击 return true; } } ``` 2. **ViewGroup 版本瓦片** ```java public class MyTileHolder extends TileLayout.TileHolder { private TextView textView; public MyTileHolder(Context context) { super(new TextView(context)); this.textView = (TextView) view; textView.setGravity(Gravity.CENTER); textView.setTextSize(16); } } ``` ### 动态调整瓦片尺寸 ```java // 修改第 3 列第 5 行瓦片的尺寸 tileView.setWidth(3, dp2px(120)); tileView.setHeight(5, dp2px(80)); // 或使用 TileMeasurer 动态计算 tileView.setTileMeasurer(new TileView.TileMeasurer() { @Override public int measureTileWidth(int column, int defaultWidth) { // 如：偶数列宽一些 return column % 2 == 0 ? defaultWidth + dp2px(20) : defaultWidth; } @Override public int measureTileHeight(int row, int defaultHeight) { return defaultHeight; } }); ``` ### 事件处理 ```java // 在瓦片内部请求不拦截事件 @Override public boolean onTouchEvent(MotionEvent event, float scaleFactor) { if (event.getActionMasked() == MotionEvent.ACTION_DOWN) { // 请求 TileView 不拦截后续事件 requestDisallowInterceptTouchEvent(true); } // 自己处理所有触摸事件 return true; } // 处理点击和长按 @Override public boolean onClick() { Log.d("Tile", "被点击"); return true; // 返回 true 表示已处理 } @Override public void onLongClick() { Log.d("Tile", "被长按"); } ``` ### 导航与定位 ```java // 移动到指定坐标 tileView.moveTo(0, 0); // 移动到 (0,0) 瓦片 tileView.moveTo(5, -3, -30, -20); // 移动到 (5,-3) 并偏移 (-30,-20) // 检查边界 boolean atLeft = tileView.isAtBoundLeft(); boolean atBottom = tileView.isAtBoundBottom(); // 停止惯性滚动 tileView.stopScroller(); ``` ## 🔧 高级配置 ### 缩放控制 ```java tileView.setZoomEnabled(true); tileView.setScaleFactor(1.5f); // 设置缩放级别 tileView.setMinScaleFactor(0.3f); tileView.setMaxScaleFactor(5.0f); // 以特定点为中心缩放 tileView.setScaleFactor(2.0f, centerX, centerY); ``` ### 滚动控制 ```java // 禁用特定方向滚动 tileView.setHorizontalScrollEnabled(false); tileLayout.setVerticalScrollEnabled(false); // 设置内边距 tileView.setPadding(dp2px(16), dp2px(16), dp2px(16), dp2px(16)); ``` ### 性能优化 ```java // 清理特定类型的回收池 tileView.clearRecycledTiles(TYPE_BUTTON); // 获取特定瓦片 TileView.TileHolder holder = tileView.getTileHolder(column, row); if (holder instanceof MyTile) { ((MyTile) holder).updateContent(); } ``` ## 🎨 演示应用项目包含完整的演示应用，展示了两种实现方式： 1. TileView 演示: Canvas 绘制版本，支持缩放和自定义绘制 2. TileLayout 演示: ViewGroup 版本，包含按钮和文本视图运行演示应用可以查看： - 不同颜色的瓦片网格 - 按钮和文本瓦片 - 点击和触摸反馈 - 动态调整尺寸 - 边界检查 ## ⚡ 性能建议 1. TileView 适用场景 - 大量瓦片（数百上千） - 自定义绘制需求 - 需要缩放功能 - 对内存敏感 2. TileLayout 适用场景 - 复杂交互的瓦片 - 需要 View 动画 - 瓦片数量较少（< 100） - 需要 Android 标准视图功能 3. 通用优化 - 使用合适的瓦片尺寸 - 避免在 onBindTileHolder 中创建新对象 - 合理使用瓦片类型，减少 onCreateTileHolder 调用 ## 📄 开源协议本项目采用 MIT 许可证。详见 LICENSE 文件。 ## 📞 支持如有问题或建议，请通过以下方式联系： - 提交 GitHub Issue - 访问我的社区 [QQ频道](https://pd.qq.com/s/am5ocfggi?b=9) --- # 将世界尽收眼底！👀 > 文档编写：**DeepSeek**。