preface

It is often necessary to display the network request status in the page to bring better user experience. Specifically, there are usually loading, loading failed, loading empty, loading success and other states. In XML, we typically use a ViewGroup to encapsulate various states. How do you do this with Compose? Compose provides a simple and easy-to-use StateLayout for Compose

rendering

First take a look at the final renderings

features

  1. You can configure the global default layout, such as default loading, default success or failure
  2. Support custom default style copy, images and other details
  3. Support for fully custom styles, such as custom loading styles
  4. Supports custom handling of click retry events
  5. Fully data-driven, easy to use and easy to access

use

Access to the

Step 1: In your project build.gradle add:

allprojects {
	repositories {
		...
		mavenCentral()
	}
}
Copy the code

Step 2: In your application’s build.gradle add:

dependencies {
        implementation 'the IO. Making. Shenzhen2017: compose - statelayout: 1.0.0'
}
Copy the code

Simple to use

Defining global styles

There is no default style specified in the framework, so you need to customize your own default load, load failure and other page styles at the same time you need to customize the data structure type passed to the custom style, convenient data driven

data class StateData(
    val tipTex: String? = null.val tipImg: Int? = null.val btnText: String? = null
)

@Composable
fun DefaultStateLayout(
    modifier: Modifier = Modifier,
    pageStateData: PageStateData,
    onRetry: OnRetry = { },
    loading: @Composable (StateLayoutData) - >Unit = { DefaultLoadingLayout(it) },
    empty: @Composable (StateLayoutData) -> Unit = { DefaultEmptyLayout(it) },
    error: @Composable (StateLayoutData) -> Unit = { DefaultErrorLayout(it) },
    content: @Composable() - >Unit = { }
) {
    ComposeStateLayout(
        modifier = modifier,
        pageStateData = pageStateData,
        onRetry = onRetry,
        loading = { loading(it) },
        empty = { empty(it) },
        error = { error(it) },
        content = content
    )
}
Copy the code

As shown above, the main things we need to do during initialization are the following

  1. Custom default load, load failure, load as empty style
  2. The customStateDataThat is, to pass the default style of the data structure, such as copy, image, etc., so that it can be changed later when neededStateDataCan be

Direct use of

If we use the default style, we can use it as follows

@Composable
fun StateDemo(a) {
    var pageStateData by remember {
        mutableStateOf(PageState.CONTENT.bindData())
    }
    DefaultStateLayout(
        modifier = Modifier.fillMaxSize(),
        pageStateData = pageStateData,
        onRetry = {
            pageStateData = PageState.LOADING.bindData()
        }
    ) {
        //Content}}Copy the code

As shown above, you can use it directly. If you need to change the status, modify pageStateData

Custom copywriting

If we need to customize details like copywriting or images, we can simply modify StateData directly

fun StateDemo(a) {
    var pageStateData by remember {
        mutableStateOf(PageState.CONTENT.bindData())
    }
    //....
    pageStateData = PageState.LOADING.bindData(StateData(tipTex = "Custom loading Chinese case"))}Copy the code

Custom layout

Sometimes the page loads in a different style than the global one, which requires a custom layout style

@Composable
fun StateDemo(a) {
    var pageStateData by remember {
        mutableStateOf(PageState.CONTENT.bindData())
    }
    DefaultStateLayout(
        modifier = Modifier.fillMaxSize(),
        pageStateData = pageStateData,
        loading = { CustomLoadingLayout(it) },
        onRetry = {
            pageStateData = PageState.LOADING.bindData()
        }
    ) {
        //Content}}Copy the code

The main principle of

For Compose, it’s easy to create different states by passing in different data, as shown below:

    Box(modifier = modifier) {
        when (pageStateData.status) {
            PageState.LOADING -> loading()
            PageState.EMPTY -> empty()
            PageState.ERROR -> error()
            PageState.CONTENT -> content()
        }
    }
Copy the code

The code is very simple, but it is generic logic and would be a bit of a hassle if you had to write it on every page. So the Scaffold scaffolding we thought of provides an API for combining the scaffolding components. This includes title bars, bottom bars, snackbars (like toast), floating buttons, drawer components, remaining content layout, and more, allowing us to quickly define a basic page structure.

Modelled on the Scaffold, we can also define a template component, the user can incoming custom looading, empty, and the error, the content and other components, and then combine them together, thus formed the ComposeStateLayout

data class PageStateData(val status: PageState, val tag: Any? = null)

data class StateLayoutData(val pageStateData: PageStateData, val retry: OnRetry = {})

typealias OnRetry = (PageStateData) -> Unit

@Composable
fun ComposeStateLayout(
    modifier: Modifier = Modifier,
    pageStateData: PageStateData,
    onRetry: OnRetry = { },
    loading: @Composable (StateLayoutData) - >Unit = {},
    empty: @Composable (StateLayoutData) - >Unit = {},
    error: @Composable (StateLayoutData) - >Unit = {},
    content: @Composable() - >Unit= {}) {
    val stateLayoutData = StateLayoutData(pageStateData, onRetry)
    Box(modifier = modifier) {
        when (pageStateData.status) {
            PageState.LOADING -> loading(stateLayoutData)
            PageState.EMPTY -> empty(stateLayoutData)
            PageState.ERROR -> error(stateLayoutData)
            PageState.CONTENT -> content()
        }
    }
}
Copy the code

As shown above, the code is very simple, with the following main points to note:

  1. PageStateDatathetagThat is, pass to customloadingEtc page information forAnyType, without any restrictions, the user can handle flexibly
  2. The customloadingWait for the page to come inOnRetry, so we can also handle custom click events

conclusion

This article mainly implements a Compose version of StateLayout, which has the following features

  1. You can configure the global default layout, such as default loading, default success or failure
  2. Support custom default style copy, images and other details
  3. Support for fully custom styles, such as custom loading styles
  4. Supports custom handling of click retry events
  5. Fully data-driven, easy to use and easy to access

The project address

Compose is composed’s easy to use version of StateLayout open source is not easy, if the project can help you, please like,Star