Convert Figma logo to code with AI

xiaojinzi123 logoComponent

A powerful componentized framework.一个强大、100% 兼容、支持 AndroidX、支持 Kotlin并且灵活的组件化框架. 大家尽量用 纯 Kotlin 的 KComponent 呀!!!

2,870
207
2,870
9

Top Related Projects

14,439

💪 A framework for assisting in the renovation of Android componentization (帮助 Android App 进行组件化改造的路由框架)

Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.

47,869

RxJava – Reactive Extensions for the JVM – a library for composing asynchronous and event-based programs using observable sequences for the Java VM.

17,430

A fast dependency injector for Android and Java.

提高 Android UI 开发效率的 UI 库

Quick Overview

Component is an Android component-based routing framework that simplifies navigation between different parts of an Android application. It provides a modular approach to app architecture, allowing developers to easily manage and navigate between different components or modules within their Android projects.

Pros

  • Simplifies navigation and routing in complex Android applications
  • Supports modular app architecture, improving code organization and maintainability
  • Provides type-safe navigation with compile-time checks
  • Offers flexible configuration options and supports custom interceptors

Cons

  • Requires initial setup and configuration, which may add complexity for smaller projects
  • Learning curve for developers unfamiliar with component-based architecture
  • Limited documentation in English, as most resources are in Chinese

Code Examples

  1. Basic navigation:
Router.with(context)
    .hostAndPath("component1/test")
    .forward()
  1. Passing parameters:
Router.with(context)
    .hostAndPath("component2/user")
    .putString("userId", "123")
    .putInt("age", 25)
    .forward()
  1. Handling navigation results:
Router.with(context)
    .hostAndPath("component3/profile")
    .requestCode(100)
    .navigateForResult { resultCode, data ->
        // Handle the result
    }

Getting Started

  1. Add the Component dependency to your app's build.gradle:
dependencies {
    implementation 'com.github.xiaojinzi123.Component:component-impl:1.9.2'
    kapt 'com.github.xiaojinzi123.Component:component-compiler:1.9.2'
}
  1. Initialize Component in your Application class:
class MyApplication : Application() {
    override fun onCreate() {
        super.onCreate()
        Component.init(
            BuildConfig.DEBUG,
            ComponentConfig.Builder()
                .build()
        )
    }
}
  1. Define a route in your component:
@RouterAnno(
    hostAndPath = "main/home"
)
class HomeActivity : AppCompatActivity() {
    // Activity implementation
}
  1. Use the router to navigate:
Router.with(context)
    .hostAndPath("main/home")
    .forward()

Competitor Comparisons

14,439

💪 A framework for assisting in the renovation of Android componentization (帮助 Android App 进行组件化改造的路由框架)

Pros of ARouter

  • More widely adopted and battle-tested in large-scale applications
  • Extensive documentation and community support
  • Advanced features like interceptors and dependency injection

Cons of ARouter

  • Steeper learning curve due to more complex API
  • Heavier runtime overhead, especially for smaller projects
  • Requires annotation processing, which can slow down build times

Code Comparison

ARouter:

@Route(path = "/test/activity")
public class TestActivity extends Activity {
    @Autowired
    String key1;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ARouter.getInstance().inject(this);
    }
}

Component:

@RouterAnno(hostAndPath = "test/activity")
public class TestActivity extends Activity {
    @ParameterAnno("key1")
    String key1;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Router.INSTANCE.inject(this);
    }
}

Both libraries use annotations for routing, but ARouter's syntax is slightly more concise. Component offers a similar feature set with a potentially simpler API, making it easier to adopt for smaller projects. However, ARouter's maturity and extensive features make it more suitable for complex, large-scale applications. The choice between the two depends on project requirements, team expertise, and application complexity.

Compose Multiplatform, a modern UI framework for Kotlin that makes building performant and beautiful user interfaces easy and enjoyable.

Pros of Compose Multiplatform

  • Cross-platform development for Android, iOS, desktop, and web
  • Declarative UI framework with a modern, reactive approach
  • Backed by JetBrains, ensuring long-term support and updates

Cons of Compose Multiplatform

  • Steeper learning curve for developers new to declarative UI
  • Limited ecosystem compared to more established frameworks
  • Performance overhead due to cross-platform nature

Code Comparison

Component:

@Router(path = "/main")
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

Compose Multiplatform:

@Composable
fun MainScreen() {
    Column {
        Text("Hello, Compose Multiplatform!")
        Button(onClick = { /* Action */ }) {
            Text("Click me")
        }
    }
}

Summary

Component focuses on Android development with a traditional imperative approach, while Compose Multiplatform offers a modern, declarative UI framework for multiple platforms. Component may be easier for Android developers to adopt, but Compose Multiplatform provides greater flexibility and potential for cross-platform development.

47,869

RxJava – Reactive Extensions for the JVM – a library for composing asynchronous and event-based programs using observable sequences for the Java VM.

Pros of RxJava

  • Mature and widely adopted reactive programming library
  • Extensive set of operators for complex data transformations
  • Strong community support and extensive documentation

Cons of RxJava

  • Steeper learning curve for developers new to reactive programming
  • Can lead to complex and hard-to-debug code if not used carefully
  • Potential performance overhead for simple use cases

Code Comparison

RxJava:

Observable.just(1, 2, 3, 4, 5)
    .filter(n -> n % 2 == 0)
    .map(n -> n * 2)
    .subscribe(System.out::println);

Component:

Router.with(context)
    .hostAndPath("component1/test")
    .putString("key1", "value1")
    .forward();

Key Differences

  • RxJava focuses on reactive programming and data streams
  • Component is primarily for Android component-based architecture and navigation
  • RxJava offers more flexibility for general-purpose reactive programming
  • Component provides a simpler API for Android-specific use cases

Use Cases

  • RxJava: Ideal for complex asynchronous operations and event-driven programming
  • Component: Better suited for Android app navigation and modular architecture

Community and Ecosystem

  • RxJava: Large, active community with extensive third-party library support
  • Component: Smaller, more focused community centered around Android development
17,430

A fast dependency injector for Android and Java.

Pros of Dagger

  • More mature and widely adopted in the industry
  • Extensive documentation and community support
  • Supports both Java and Android development

Cons of Dagger

  • Steeper learning curve due to complexity
  • Requires more boilerplate code
  • Can increase compile times for large projects

Code Comparison

Component

@Component
interface AppComponent {
    fun inject(activity: MainActivity)
}

Dagger

@Component(modules = {AppModule.class})
public interface AppComponent {
    void inject(MainActivity activity);
}

Key Differences

  • Component focuses on simplicity and ease of use for Android development
  • Dagger offers more advanced features and flexibility for dependency injection
  • Component uses Kotlin as its primary language, while Dagger supports both Java and Kotlin
  • Dagger has a larger ecosystem and more third-party integrations
  • Component aims to reduce boilerplate code compared to Dagger

Use Cases

  • Choose Component for simpler Android projects with a focus on rapid development
  • Opt for Dagger in larger, more complex applications or when working with Java-based projects
  • Consider Component if you prefer a more lightweight and Kotlin-centric approach to dependency injection

提高 Android UI 开发效率的 UI 库

Pros of QMUI_Android

  • Comprehensive UI component library with a wide range of pre-built elements
  • Extensive documentation and examples for easier implementation
  • Backed by Tencent, ensuring long-term support and updates

Cons of QMUI_Android

  • Larger library size, potentially increasing app size
  • Steeper learning curve due to the extensive feature set
  • Less flexibility for custom component creation compared to Component

Code Comparison

QMUI_Android:

QMUIRoundButton button = new QMUIRoundButton(context);
button.setText("QMUI Button");
button.setChangeAlphaWhenPress(true);

Component:

@RouterAnno(
    path = "component/user/login"
)
public class LoginActivity extends AppCompatActivity {
    // Activity implementation
}

QMUI_Android focuses on providing ready-to-use UI components, while Component emphasizes on navigation and modularization. QMUI_Android offers a more comprehensive set of UI tools, but Component provides a lightweight solution for app architecture and navigation.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Component 一定以最快的速度解决您的 issue, 提供解决方案.

KComponent 纯 Kotlin 版本已经发布很久啦, 欢迎大家使用 !!!!!!!!!!!!!

可以说到目前为止, 基于 URI 方面的所有路由框架中(ARouter、WMRouter、ActivityRouter ...) Component 是最强大和完善的组件化框架.

选择一个更好、更全面的、更稳定、更有发展前景的框架更是你们技术团队或者技术负责人要做的事情!

Component VS ARouter

点击查看 Component 解决了哪些开发中的痛点

Component

一个功能强大的组件化框架,极度注重用户体验,带给你使用上不一样的享受.欢迎大家使用,在使用的过程中发现任何问题,欢迎下方的 QQ群 里问或者提 issue 给我

1. Demo体验

扫码或者点击图片即可下载

2. Hello World 文档

最简单的 Hello World 文档

3. 完整文档

了解更多请看 wiki 更多功能等你来发现 **有关的文章 到底什么是组件化 **

4. Component 功能介绍

组件化方案真的有很多,那么这个组件化方案优秀在哪里?相比于 ARouter、WMRouter、ActivityRouter、CC、DDComponent 等开源的组件化框架, 有哪些一样或者更加优秀的点

  • 支持多 Module

  • 支持 Google App Bundle 架构

  • 支持 Flutter, H5 等混合项目

  • 支持 androidx, 几乎没有其他组件化框架支持 androidx 的

  • 整个设计贴近原生,对原生的代码入侵极少,尽最大的可能保留原生的代码

  • 支持依赖注入、支持目标界面的路由参数

  • 跨模块调用

  • 支持业务组件生命周期(被加载和被卸载)

  • 配套的 Idea Plugin 方便快速浏览,持续会更新此 插件

  • 完美支持 RxJava2(使用rx库)

  • 服务发现(跨模块调用)和路由分开设计 - 其实这两块本来就是两个方面,我不清楚为什么很多方案中都柔和在一块

  • 服务发现装饰增强

  • 业务模块单独运行

  • 路由跳转功能

    • 支持生成文档

    • 支持获取目标的 ProxyIntent

    • 支持标准 URI 的使用

    • 无缝对接 H5

      • H5 只需利用 URL 即可任意路由到任何界面(只需下面一段统一的跳转. 完全不需要关心目标界面是否需要登陆、定位、权限等.)

        @JavascriptInterface
        public void openUrl(final String url) {
            Router.with(this).url(url).forward();
        }
        
      • H5 发起路由不需要关心目标界面需要做的先决条件(框架的页面拦截器已经帮您做完)

    • 外部链接跳转

    • 支持原生的跳转动画

    • 支持跳转 Fragment(也就是跨组件获取Fragment)

    • 支持单 Activity 多 Fragment 架构

    • 路由拦截器执行线程设计是主线程, 整体是异步的(这点很多人不理解, 没有关系. 先用起来之后在慢慢理解)

      • 在路由拦截器的执行线程的设计上,考虑到用户平时书写的 90% 代码都是在主线程的,
        所以路由拦截器的执行线程也设计为主线程执行,可以让您放心的操作 UI、弹框等操作.
        同时提供 Callback 机制可以在拦截器中做任何耗时的任务
        这点绝对是压倒性的优势,不仅整体是 异步 的,而且拦截器中能像平常一样写实现的代码
    • 路由的取消,基本上没有路由框架支持路由的取消,这也是一个很大的优势!

      • 手动用代码取消某次路由
      • 路由自动取消, 当发起路由的 Fragment 或者 Activity 销毁的时候会取消
    • 路由拦截器,足矣满足所有业务情况(具体看 拦截器wiki)

      • 全局拦截器(针对全部路由)
      • 局部路由拦截器
        • 页面拦截器(针对所有跳转到某一个界面的路由)
        • 拦截器别名,支持跨模块使用(可以让每一个拦截器都放在自个的模块)
    • 跳转

      • 持标准 URI
      • 支持自定义 Intent, 你可以给任意一个 Intent 标记路由, 这个功能很强大!
      • 支持类似 Retrofit 接口编程式跳转
      • Idea Plugin 强势支持跳转代码和目标界面的来回导航,也支持拦截器的代码使用和声明处的来回导航
    • 0 配置拿到目标界面返回的 ActivityResult, 很多框架不支持或者需要入侵 BaseActivity. 绝对的优势

      • 和系统的行为一样,当 Context 是 Application 或者 Service 的 Context 或者 ContentProvider 的 Context 的时候, 不支持获取ActivityResult, 如果真的有需要, 你可以使用栈顶的 Activity 来充当 Context
      • 除第一点说的几个 Context, 其他的情况都是支持的,包括 Dialog 中获取到的 Context.
      • 如果你想单独使用这个功能, 也可以单独依赖使用, 链接是这里
  • 注解驱动器 不支持增量更新, 暂时不知道怎么去做

5. 配套的 Idea Plugin

Android Studio 中搜索插件名称:RouterGo, 即可下载对应的插件

RouterGo 源码地址:帮助你快速导航到目标界面或者目标拦截器,你值得拥有!

6. Component 项目结构(Demo + 库源码)

  • demo 示例代码
    • app --> 壳工程
    • Module1 --> Java 业务模块
    • Module1run --> Module1 业务模块单独运行的 Application 应用
    • Module2 --> Kotlin 业务模块
    • ModuleHelp --> Help 业务模块, 一些有关通用的或者系统相关的放这里
    • ModuleUser --> User 业务模块
    • ModuleBase --> 各个业务模块的基础模块, 上述的没一个业务模块都需要依赖
  • 实现库源码
    • ComponentApi --> Api 库
    • ComponentCompiler --> 注解驱动器库
    • ComponentImpl --> 实现库
    • ComponentRxImpl --> 实现库 RxJava 的扩展
    • ComponentPlugin --> 配套的 Gradle, 功能有两个
      • 优化初始化的方式, 优化反射加载模块为正常的 new 对象的方式, 利用字节码修改技术
      • 生成路由文档

7. 扫码进群

8. 如果你觉得项目不错, 就请我喝杯咖啡吧! 一块钱也是爱!

9. License