Developing Apps with Jetpack Compose for Android【04】 - Compose Screens

• This is the fourth article in this series.
  At this stage, we will focus more on
  implementing the UI/UX design drafts.
  You can start writing and detailing the code.
  

• The libraries used are as follows:

• After collaborating with different UI/UX designers,
  I found that many design screens have common components
  specific to the current project.
  
  If there are some components that are universally used
  throughout the project, you can extract them to create common Compose components.
  (It mainly depends on how you communicate with the designer.)
  
  

• Common components like edittext, dialog, or some custom components
  can be made into reusable Compose components.
  Here are a few examples of such components.
  You can implement them based on your needs.
  

• Next, you can start assembling various screens.
  If the new screens and designs follow the same pattern,
  you can easily assemble the screens
  you painstakingly created earlier.
  
  For example, the following screen uses the common toolbar
  from the initial setup article and the Compose components shared above.
  
  

• Modern apps have more and more features,
  so the sources or requirements for obtaining values have also increased.
  
  If a feature is required to handle multiple screen changes
  with different sources of values,
  I might use Flow to handle the values returned by various coroutines.
  
  Use Flow for the return or type of source data.
  Sometimes you can’t control the access speed of the data source,
  such as network requests or querying large amounts of data from a local DB.
  So you can use Flow to wait for the data to be emitted to you.
  Here’s a brief example:

• Next, to organize all the content on your screen that will change
  you can create a data class to store the data needed for your screen
  

• Next, use combine to combine various data sources
  combine will combine all your flows
  and combine the most recent values emitted
  
  The principle behind its implementation is to use function types or lambda functions
  to return a flow of the type you specify
  
  
  
• If you want to make judgments within the lambda {} you can consider doing so
  Finally, return the result you want using the ViewState defined earlier
  .stateIn can set the initial value of this R-type flow
  

• After completing the previous steps, you can use .collectAsState() to get the flow
  and collect it into a state that Compose can use
  At this point, you can responsively update the screen~
  

Back to Table of Contents