UI libraries
/
InstantSearch Android
/
Widgets
Nov 14, 2024
Multi Hits
About this widget
To use this widget to display a paginated list of results from multiple categories, you need these components:
MultiSearcher
: theSearcher
that handles your searchesFilterState
: tracks any applied filters (such as genre or year) and updates search results when the filters change.HitsState
: hits UI stateSearchBoxState
: search box UI state
The widget can handle various kinds of search results. For example, you can display different types of results, such as movies or actors, each represented by a unique data class.
Examples
Activity
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class SearchActivity : ComponentActivity() {
private val viewModel: SearchViewModel by viewModels()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MaterialTheme {
SearchScreen(
searchBoxState = viewModel.searchBoxState,
actorsState = viewModel.actorsState,
moviesState = viewModel.moviesState,
)
}
}
}
}
View model
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class SearchViewModel : ViewModel() {
private val multiSearcher = MultiSearcher(
applicationID = ApplicationID("YourApplicationID"),
apiKey = APIKey("YourAPIKey")
)
private val actorsSearcher = multiSearcher.addHitsSearcher(IndexName("YourActorsIndex"), Query(hitsPerPage = 5))
private val moviesSearcher = multiSearcher.addHitsSearcher(IndexName("YourMoviesIndex"))
private val searchBoxConnector = SearchBoxConnector(multiSearcher)
private val connections = ConnectionHandler(searchBoxConnector)
val searchBoxState = SearchBoxState()
val actorsState = HitsState<Actor>()
val moviesState = HitsState<Movie>()
init {
connections += searchBoxConnector.connectView(searchBoxState)
connections += actorsSearcher.connectHitsView(actorsState) { it.hits.deserialize(Actor.serializer()) }
connections += moviesSearcher.connectHitsView(moviesState) { it.hits.deserialize(Movie.serializer()) }
multiSearcher.searchAsync()
}
override fun onCleared() {
super.onCleared()
multiSearcher.cancel()
connections.clear()
}
}
UI
Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
@Composable
fun SearchScreen(
modifier: Modifier = Modifier,
searchBoxState: SearchBoxState,
actorsState: HitsState<Actor>,
moviesState: HitsState<Movie>,
) {
val scrollState = rememberScrollState()
Column(
modifier = modifier
.fillMaxWidth()
.verticalScroll(scrollState)
) {
SearchBox(
modifier = Modifier
.fillMaxWidth()
.padding(12.dp),
searchBoxState = searchBoxState,
)
Actors(actors = actorsState.hits)
Movies(movies = moviesState.hits)
}
}
@Composable
private fun Actors(
modifier: Modifier = Modifier,
actors: List<Actor>,
) {
if (actors.isEmpty()) return
Column(modifier) {
SectionTitle(
modifier = Modifier.padding(start = 12.dp, end = 12.dp, bottom = 4.dp),
title = "Actors"
)
actors.forEach { actor ->
Actor(actor = actor)
}
}
}
@Composable
private fun Actor(
modifier: Modifier = Modifier,
actor: Actor
) {
Row(
modifier
.fillMaxWidth()
.background(MaterialTheme.colors.surface)
.padding(horizontal = 24.dp, vertical = 12.dp)
) {
Icon(
imageVector = Icons.Default.AccountCircle,
tint = MaterialTheme.colors.onSurface.copy(alpha = 0.2f),
contentDescription = null
)
Text(
text = actor.highlightedName?.toAnnotatedString() ?: AnnotatedString(actor.name),
modifier = Modifier.padding(start = 12.dp),
)
}
}
@Composable
private fun Movies(
modifier: Modifier = Modifier,
movies: List<Movie>
) {
if (movies.isEmpty()) return
Column(modifier) {
SectionTitle(
modifier = Modifier.padding(horizontal = 12.dp, vertical = 8.dp),
title = "Movies"
)
movies.forEach { movie ->
Movie(movie = movie)
}
}
}
@Composable
private fun Movie(modifier: Modifier = Modifier, movie: Movie) {
Row(
modifier
.fillMaxWidth()
.background(MaterialTheme.colors.surface)
.padding(horizontal = 24.dp, vertical = 12.dp)
) {
Icon(
imageVector = Icons.Default.Movie,
tint = MaterialTheme.colors.onSurface.copy(alpha = 0.2f),
contentDescription = null
)
Text(
text = movie.highlightedTitle?.toAnnotatedString() ?: AnnotatedString(movie.title),
modifier = Modifier.padding(start = 12.dp),
)
}
}
@Composable
private fun SectionTitle(modifier: Modifier = Modifier, title: String) {
Text(
modifier = modifier,
text = title, style = MaterialTheme.typography.subtitle2,
color = MaterialTheme.colors.onBackground.copy(alpha = 0.4f),
)
}
Models
Copy
1
2
3
4
5
6
7
8
9
10
@Serializable
data class Actor(
val name: String,
override val objectID: ObjectID,
override val _highlightResult: JsonObject?
) : Indexable, Highlightable {
val highlightedName
get() = getHighlight(Attribute("name"))
}
Copy
1
2
3
4
5
6
7
8
9
10
@Serializable
data class Movie(
val title: String,
override val objectID: ObjectID,
override val _highlightResult: JsonObject?
) : Indexable, Highlightable {
val highlightedTitle
get() = getHighlight(Attribute("title"))
}
Did you find this page helpful?