Credit card machine how to handle the code [NI] emblem with electric 15,732,660,050 develop pictures, video-related functions, the album is not open around the topic, because we have acquired basic needs pictures or video from the album. The most direct way is to call the Safe interface, although basic function is to meet, but can not meet some of the advanced features, such as custom UI, multiple choice pictures.
Design ideas
simple fish this album leisure component API use, feature-rich and flexible, with high resistance to order. Service may choose full access component can also select to customize a UI on the modules.
Flutter do UI presentation layer, specific data provided by the Native platform. This model, are isolated from the native UI code and data codes engineering. We often use the MVC architecture in the development of a native component of the time. Ideas developed Flutter components are basically similar. The overall structure is as follows:
As can be seen in the side Flutter is a typical MVC architecture, here is the Widget View, View and Model bindings, when the Model View will change to reflect changes to re-build the Model. View event triggers Native Controller to get the data and update the Model. Native and Flutter by Method Channel communication, there is no strong dependency between the two layers, simply press a communication protocol can be agreed.
Part of Native side, UIAdapter primarily responsible for model adaptation, bangs screen, full-screen identification and the like. Permission is responsible for media processing applications read and write permissions. Cache Cache is responsible for GPU texture, improve response time in the big picture preview. Decoder is responsible for parsing Bitmap, OpenGL Bitmap turn responsible for the texture.
It should be noted: This is a realization of our dependence on external flutter texture. In most of the pictures to see the whole album is a component GPU texture, so to java heap memory usage relative to the previous albums have achieved a significant reduction. If you use the machine in the low-end top album native system, due to memory, app risk of being killed systems. Phenomenon is the return from the system album, app restart. Use Flutter albums components, has changed in the low-end machines will experience above.
Some difficulties
pages load
album list needs to load a lot of pictures, Flutter the GridView component has several constructors, relatively easy mistake is to use the first function, which requires the provision of a large number of widget at the outset. Should choose the second constructor, GridView will slide when the callback IndexedWidgetBuilder to get the widget, the equivalent of one kind of lazy loading.
GridView.builder ({... List children = const [], ...})
GridView.builder ({... @ required IndexedWidgetBuilder itemBuilder , int itemCount, ...})
Copy the code
sliding, glide after pictures, which is not visible when you want to recover resources, we are here to here is the corresponding textures deleted. Continuous slide GridView, after rising in the memory will be in a stable, not always grow. If the rapid slide back and forth repeatedly texture creation and deletion, so there will shake the memory of the experience is not very good.
Thus, we maintain a picture of the state machine states include None, Loading, Loaded, Wait_Dispose, Disposed. Beginning loaded into the state from None Loading, this time the user sees is a blank placeholder or drawing, when the data status callback will come back to this time Loaded will re-build widget tree to display the picture icon, when the user take the time to slip into the state Wait_Dispose, this time not Dispose immediately, if you will come back and slippery from Wait_Dispose into the Loaded state, will not continue to Dispose. If the user does not slide back from the state will enter Disposed Wait_Dispose. When entering Disposed state, then the picture to be displayed when you need to re-take the loading process.
Gallery Big Picture Show
when clicking the GridView certain images will conduct this picture Enlarge the image, to facilitate a clearer view of the user. We know that camera images are very high resolution, if fully loaded, will be a great memory overhead, so we have been scaled when Decode Bitmap, and only up to 1080p. Decode Bitmap native Android experience equally applicable to the Decode Bitmap width and height, and then to be calculated from the size of the display scaling factor, and the Bitmap Decode required.
Android photo album is mostly the angle of rotation, if not addressed directly displayed, there will rotate the picture 90 degrees issue, it is necessary to Bitmap rotation, a rotation using Matrix 1080p picture above in my test machine takes about 200ms , if the OpenGL texture coordinates is rotated, only greater than about 10ms, so the use of texture OpenGl rotation is a better choice.
During the big picture when preview will enter a horizontal sliding PageView, Flutter of PageView generally not take the initiative to load the adjacent page. There is a tricky way, for viewportFraction we can set parameters PageController be 0.9999, as follows:
PageController (viewportFraction = 0.9999)
copying the code
there is another way to do that is preloaded Native side. For example: In the first five pictures loaded when the adjacent picture 4,6 textures loaded in advance, when the slide to 4,6 when the direct use of texture cache.
Memory
Album pictures using the GPU texture, can significantly reduce the Java heap memory usage, there is a certain improvement on the performance of the entire app. Note that, GPU memory is limited need for timely deleted after use, otherwise there will be risk of memory leaks. In addition, the Android platform delete texture when the need to ensure that in the GPU threads, or delete no effect.
Huawei P8, Android5.0 above tests were compared, Flutter original native albums and albums overall memory footprint basically the same, the GridView list page, add about 13M maximum memory. The difference is that the original native albums using the Java heap memory, Flutter album using Native memory.
to sum up
This album Component API is simple, easy to use, highly customizable. Flutter side structured, there is demand for customized UI Widget can be rewritten to achieve their goals. This album is another component that does not depend on the system of the album itself is complete, to maintain consistency UI, interaction and existing app. At the same time as the rear support more and albums related to play in future.
Next Steps
Since we are using the GPU texture, can be considered to support high-definition 4K display pictures, and client memory will not have too much pressure. But 4k Bitmap image texture turn consumes more time, UI interaction above considerations do next loading state support.