Jetpack Compose – CSSS IST component library

In the front, this article just picked out most of the functions to write out, of course, there are also some knowledge points for us to expand the introduction. , can go to use more Accompanist of original official, please look at the following link address 👇 👇 Google, dead simple. IO/Accompanist… The original text of the official document:

Accompanist is a group of libraries which aim to supplement Jetpack Compose with features which are commonly required by developers, but not yet available.

It doesn’t matter if you don’t understand 👆👆. At present, I think it is only a library to help you transition Compose, which may be abandoned by Google in the future.

Future?

Any of the features available in this group of libraries may become obsolete in the future, at which point they will (probably) become deprecated.

Personally, I think it will be a slow integration process like upgrading android support to AppCompat and later to Android X

What functions does CSSS IST currently have?

1.1 🖼 ️ Image loading

Currently integrated Coil and Glide image loading, depending on the following:

// Choose what you like on demand
implementation "com.google.accompanist:accompanist-glide:<version>"
implementation "com.google.accompanist:accompanist-coil:<version>"
Copy the code

Here’s a simple usage example:

/ / the use of the Glide
Image(
    painter = rememberGlidePainter(
        "https://picsum.photos/300/300",
        fadeIn = true
    ),
    contentDescription = null.)//Coil usage: put the above rememberGlidePainter
// Replace rememberCoilPainter with rememberCoilPainter
// More extensions can be found in Google or the official documentation
Copy the code

1.2 📐 Insets

I think the most 🐂🍺 place is the interaction with the keyboard, after using Compse, only need to use a few key code can be done, very gko 👍👍👍

1. Note that the list gesture swipe control keyboard animation is still required: API 30+ devices are valid when running; 2. Click the text input box, and the device keyboard of API 21+ will pop up with animation. 3. Gestures do not take effect and require API 30+; 4.(At present, the list sliding is not stable, and the experience is not good. When using Redmi K30 mobile phone to test, it was found that the pictures had been loaded, and the problem of pictures flashing appeared when sliding at the bottom of the list);

The list slides to the bottom, pulling out the keyboard animation

// You need to rely on both libary first
implementation "com.google.accompanist:accompanist-insets:<version>"
implementation "com.google.accompanist:accompanist-systemuicontroller:<version>"
Copy the code

Step 1: Notify Windows, we will deal with any system Windows (not decor)

WindowCompat.setDecorFitsSystemWindows(window, false)
Copy the code

The second step: to effect is good, can the system bar with rememberSystemUiController (sb and nav) set the background to transparent (not set also broadly to, do not affect)

val systemUiController = rememberSystemUiController()
val useDarkIcons = MaterialTheme.colors.isLight
systemUiController.setSystemBarsColor(Color.Transparent, darkIcons = useDarkIcons)
Copy the code

Step 3: Enable animated illustration support

ProvideWindowInsets(windowInsetsAnimationsEnabled = true) {
   mainContent()
}
Copy the code

Step 4: Allow the gesture scroll component to pull/push the IME to open/close the keyboard

Implemented by NestedScrollConnection returned by the built-in implementation rememberImeNestedScrollConnection () note: this function only run on 30 + API equipment available at the time.

// For a simple example, the core code is as follows:
@Composable
private fun mainContent(a) {
    Scaffold(
        topBar = {
            TopAppBar(....)
        },
        bottomBar = {
            Surface(elevation = 1.dp) {
                val text = remember { mutableStateOf(TextFieldValue()) }
                OutlinedTextField(
                    // Omit other property definitions and set your own,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(horizontal = 16.dp, vertical = 8.dp)
                        //👇👇todo: note this method: 👇👇
                        // Add fill automatically when the keyboard is up
                        .navigationBarsWithImePadding()
                        / / 👆 👆 -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- 👆 👆
                )
            }
        },
        modifier = Modifier.fillMaxSize()
    ) { contentPadding ->
        Column {
            LazyColumn(
                contentPadding = contentPadding,
                modifier = Modifier
                    .weight(1f). NestedScroll (connection = rememberImeNestedScrollConnection ())) {items (incoming data collection) {//item......
                }
            }
        }
    }
}
Copy the code

This will allow your keyboard to interact with the interface, very ginkgo 😍😍😍 official keyboard interactive Demo: ImeAnimationSample

Modifier. NavigationBarsWithImePadding: keyboard automatically added when filling up

NavigationBarsWithImePadding meaning

1.3 🍫 System UI Controller

Use to update the system UI bar color in Jetpack Compose

implementation "com.google.accompanist:accompanist-systemuicontroller:<version>"
Copy the code

The simple example code is as follows:

val systemUiController = rememberSystemUiController()
val useDarkIcons = MaterialTheme.colors.isLight
SideEffect {
   // Set the status bar background color to transparent and the status bar icon color to black
   systemUiController.setStatusBarColor(
        color = Color.Transparent,
        darkIcons = true)}Copy the code

1.4 📖 Pager

A library for the paging layout of Jetpack Compose, similar to Android’s ViewPager, is extremely powerful, including the direct call 6666666, Banner rotation diagram we can use it

implementation "com.google.accompanist:accompanist-pager:<version>"
// If you need to use indicators, add the dependencies below
implementation "com.google.accompanist:accompanist-pager-indicators:<version>"
Copy the code

CSSS first-chair IST Pager

1.5 🌊 Flow layouts

Unlike the standard Row and Column combinations, if these subitems exceed the available space, they are arranged across multiple rows/columns

FlowRow {
    // Encapsulate the compose control in a left-to-right layout that wraps the contents of the screen
}

FlowColumn {
// Encapsulate the compose control: place its children in the vertical flow as a composable item.
// The Column is different from the Column
// If "vertical space is too small" to put all subitems in one column, use multiple columns (one row)
// If "verticalScroll package" is used, FlowColum will only be displayed in one column.
}
Copy the code

No vertical scrolling, no more than one screen high

Column{
   Text(text = "Column package without any decoration.")
   //FlowRow Subview Layout display of waterfall flow
   // The FlowColum subview goes off screen and displays multiple columns in one row
   ShowFlowLayout()
}

@Composable
fun ShowHorizontalPager(a){
        Text(text = "FlowRow")
        FlowRow {
            Image(..)
            // Add two or three to make sure the following ones are displayed on the screen
        }
        Text(text = "FlowColumn")
        FlowColumn(modifier = Modifier
            .fillMaxWidth()
            // Make sure you can swipe horizontally when off screen
            .horizontalScroll(rememberScrollState())) {
            Image(..)
            // Omit several hundred....}}Copy the code

It can scroll vertically, and it can be more than a screen high

Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
    Text(text = "Column package modified by Modifier. VerticalScroll")
    //FlowRow Subview Layout display of waterfall flow
    //FlowColumn subviews will only be displayed in one column, not side by side
    ShowFlowLayout()
}
Copy the code

1.6 🎨 AppCompat Theme Adapter

You can reuse the AppCompat XML theme in Jetpack Compose for themeization

This library attempts to bridge the gap between the AppCompat XML theme and the one in Jetpack Compose by allowing you to Compose the MaterialTheme activity-based XML theme:

AppCompatTheme {
    // MaterialTheme.colors, MaterialTheme.shapes, MaterialTheme.typography
    // will now contain copies of the context's theme
}
Copy the code

This can be handy when migrating existing applications, fragments (or other UI containers) all at once. AppCompat Compose documents

1.7 ⬆️ Swipe To refresh

The drop-down refresh is used as follows:

val viewModel: MyViewModel = viewModel()
val isRefreshing by viewModel.isRefreshing.collectAsState()
SwipeRefresh(
    state = rememberSwipeRefreshState(isRefreshing),
    onRefresh = { viewModel.refresh() },
) {
    LazyColumn {
        items(30) { index ->
            // TODO: list items}}}Copy the code

Pull down to refresh the document