Component
A powerful componentized framework.一个强大、100% 兼容、支持 AndroidX、支持 Kotlin并且灵活的组件化框架. 大家尽量用 纯 Kotlin 的 KComponent 呀!!!
Top Related Projects
💪 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.
RxJava – Reactive Extensions for the JVM – a library for composing asynchronous and event-based programs using observable sequences for the Java VM.
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
- Basic navigation:
Router.with(context)
.hostAndPath("component1/test")
.forward()
- Passing parameters:
Router.with(context)
.hostAndPath("component2/user")
.putString("userId", "123")
.putInt("age", 25)
.forward()
- Handling navigation results:
Router.with(context)
.hostAndPath("component3/profile")
.requestCode(100)
.navigateForResult { resultCode, data ->
// Handle the result
}
Getting Started
- 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'
}
- Initialize Component in your Application class:
class MyApplication : Application() {
override fun onCreate() {
super.onCreate()
Component.init(
BuildConfig.DEBUG,
ComponentConfig.Builder()
.build()
)
}
}
- Define a route in your component:
@RouterAnno(
hostAndPath = "main/home"
)
class HomeActivity : AppCompatActivity() {
// Activity implementation
}
- Use the router to navigate:
Router.with(context)
.hostAndPath("main/home")
.forward()
Competitor Comparisons
💪 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.
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
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 designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Component
ä¸å®ä»¥æå¿«çé度解å³æ¨ç issue
, æä¾è§£å³æ¹æ¡.
KComponent 纯 Kotlin çæ¬å·²ç»åå¸å¾ä¹ å¦, 欢è¿å¤§å®¶ä½¿ç¨ ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼ï¼
å¯ä»¥è¯´å°ç®å为æ¢, åºäº URI
æ¹é¢çææè·¯ç±æ¡æ¶ä¸(ARouter
ãWMRouter
ãActivityRouter
...) Component
æ¯æ强大åå®åçç»ä»¶åæ¡æ¶.
éæ©ä¸ä¸ªæ´å¥½ãæ´å ¨é¢çãæ´ç¨³å®ãæ´æåå±åæ¯çæ¡æ¶æ´æ¯ä½ 们ææ¯å¢éæè ææ¯è´è´£äººè¦åçäºæ !
ç¹å»æ¥ç Component 解å³äºåªäºå¼åä¸ççç¹
Component
ä¸ä¸ªåè½å¼ºå¤§çç»ä»¶åæ¡æ¶,æ度注éç¨æ·ä½éª,带ç»ä½ 使ç¨ä¸ä¸ä¸æ ·ç享å.欢è¿å¤§å®¶ä½¿ç¨,å¨ä½¿ç¨çè¿ç¨ä¸åç°ä»»ä½é®é¢,欢è¿ä¸æ¹ç QQ群
éé®æè
æ issue
ç»æ
1. Demoä½éª
æ«ç æè ç¹å»å¾çå³å¯ä¸è½½
2. Hello World ææ¡£
æç®åç Hello World ææ¡£
3. å®æ´ææ¡£
- ä¾èµåé ç½®
- Activity注解使ç¨
- ç»ä»¶çå½å¨æ
- 跳转
- æ¦æªå¨
- æå¡åç°å®ç°è·¨æ¨¡åè°ç¨
- ProxyIntent å¨éè¦ä½¿ç¨
Intent
çå°æ¹ä½¿ç¨ - çæææ¡£
- åç¬è¿è¡
- åè¯è§£é
- åºæ¬ä»ç»
- æ´æ°æ¥å¿
äºè§£æ´å¤è¯·ç 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
) -
è·¯ç±æ¦æªå¨æ§è¡çº¿ç¨è®¾è®¡æ¯ä¸»çº¿ç¨, æ´ä½æ¯å¼æ¥ç(è¿ç¹å¾å¤äººä¸ç解, 没æå ³ç³». å ç¨èµ·æ¥ä¹åå¨æ ¢æ ¢ç解)
- å¨è·¯ç±æ¦æªå¨çæ§è¡çº¿ç¨ç设计ä¸,èèå°ç¨æ·å¹³æ¶ä¹¦åç
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
Top Related Projects
💪 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.
RxJava – Reactive Extensions for the JVM – a library for composing asynchronous and event-based programs using observable sequences for the Java VM.
A fast dependency injector for Android and Java.
提高 Android UI 开发效率的 UI 库
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot