Android 如何实现基于箭头的布局？

Question

I want to know how is possible to achieve a arrow-based layout like this :

Any idea about what Layout is using this app in order to achieve that layout ? It seems like a kind of Staggered Grid Layout maybe ? Or maybe is using a library or a custom layout ? How can I achieve something similar ?

Answer 1

so here is how I would do something like this.

I make a bunch of custom views.

custom view #1: PokemonView. This is a regular Constraint Layout or CardView that contains all the items to show the pokemon, and its name, and all the other stuff.

custom view #2 EvolutionPokeminView. this is a custom constraint layout that contains a PokemonView, and The Arrow ImageView (and TextView below), and helper methods to place the arrow in different directions.

for example: setArrowDirection(int direction) \\direction is some kind of enum for all directions (top, topLeft, topRight.. etc

another helper method is setArrorPosition, setArrowPosition(int direction)

then you use the arrow direction method to set the correct arrow image into the arrowImageView, and you use the arrow position method to use ConstraintSet to programmatically set the correct position of the arrow in relation to the pokemon image.

after that, you prepare a few common layouts to use with different sets of data and populate them accordingly.

Things you'd need to know to make this approach work. How to Make a Custom View in Android. How to use ConstraintLayout effectively. How to use ConstraintSet to programmatically edit ConstraintLayout constraints.

Answer 2

It is easy...When you create the child layout for recycler view. You need to add an extra imageView for these arrows... in the main activity, you just need to assign these arrows images to that imageView value.