Skip to content

Commit 0c362b8

Browse files
SmartToolFactorySmartToolFactory
committed
add image scale and image thumbnail demos
1 parent 98d6912 commit 0c362b8

File tree

3 files changed

+770
-14
lines changed

3 files changed

+770
-14
lines changed

‎app/src/main/java/com/smarttoolfactory/composeimage/MainActivity.kt‎

Lines changed: 73 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,27 @@
1+
@file:OptIn(ExperimentalPagerApi::class, ExperimentalMaterial3Api::class)
2+
13
package com.smarttoolfactory.composeimage
24

35
import android.os.Bundle
46
import androidx.activity.ComponentActivity
57
import androidx.activity.compose.setContent
68
import androidx.compose.foundation.layout.fillMaxSize
7-
import androidx.compose.material3.MaterialTheme
8-
import androidx.compose.material3.Surface
9-
import androidx.compose.material3.Text
9+
import androidx.compose.foundation.layout.fillMaxWidth
10+
import androidx.compose.foundation.layout.padding
11+
import androidx.compose.material3.*
12+
import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
1013
import androidx.compose.runtime.Composable
14+
import androidx.compose.runtime.rememberCoroutineScope
1115
import androidx.compose.ui.Modifier
12-
import androidx.compose.ui.tooling.preview.Preview
16+
import androidx.compose.ui.unit.dp
17+
import com.google.accompanist.pager.ExperimentalPagerApi
18+
import com.google.accompanist.pager.HorizontalPager
19+
import com.google.accompanist.pager.PagerState
20+
import com.google.accompanist.pager.rememberPagerState
21+
import com.smarttoolfactory.composeimage.demo.ImageWithConstraintsDemo
22+
import com.smarttoolfactory.composeimage.demo.ThumbnailDemo
1323
import com.smarttoolfactory.composeimage.ui.theme.ComposeImageTheme
24+
import kotlinx.coroutines.launch
1425

1526
class MainActivity : ComponentActivity() {
1627
override fun onCreate(savedInstanceState: Bundle?) {
@@ -22,22 +33,70 @@ class MainActivity : ComponentActivity() {
2233
modifier = Modifier.fillMaxSize(),
2334
color = MaterialTheme.colorScheme.background
2435
) {
25-
Greeting("Android")
36+
HomeContent()
2637
}
2738
}
2839
}
2940
}
3041
}
3142

43+
@ExperimentalPagerApi
3244
@Composable
33-
fun Greeting(name: String) {
34-
Text(text = "Hello $name!")
35-
}
45+
private fun HomeContent() {
3646

37-
@Preview(showBackground = true)
38-
@Composable
39-
fun DefaultPreview() {
40-
ComposeImageTheme {
41-
Greeting("Android")
47+
val pagerState: PagerState = rememberPagerState(initialPage = 0)
48+
49+
val coroutineScope = rememberCoroutineScope()
50+
51+
Scaffold(
52+
topBar = {
53+
ScrollableTabRow(
54+
modifier = Modifier.fillMaxWidth(),
55+
// Our selected tab is our current page
56+
selectedTabIndex = pagerState.currentPage,
57+
// Override the indicator, using the provided pagerTabIndicatorOffset modifier
58+
indicator = { tabPositions: List<TabPosition> ->
59+
TabRowDefaults.Indicator(
60+
modifier = Modifier.tabIndicatorOffset(
61+
tabPositions[pagerState.currentPage]
62+
),
63+
height = 4.dp
64+
)
65+
},
66+
edgePadding = 4.dp
67+
) {
68+
// Add tabs for all of our pages
69+
tabList.forEachIndexed { index, title ->
70+
Tab(
71+
text = { Text(title) },
72+
selected = pagerState.currentPage == index,
73+
onClick = {
74+
coroutineScope.launch {
75+
pagerState.animateScrollToPage(index)
76+
}
77+
}
78+
)
79+
}
80+
}
81+
}
82+
) {
83+
84+
HorizontalPager(
85+
modifier = Modifier.padding(it),
86+
state = pagerState,
87+
count = tabList.size
88+
) { page: Int ->
89+
90+
when (page) {
91+
0 -> ImageWithConstraintsDemo()
92+
else-> ThumbnailDemo()
93+
}
94+
}
4295
}
43-
}
96+
}
97+
98+
internal val tabList =
99+
listOf(
100+
"Image Constraints",
101+
"Image Thumbnail"
102+
)

‎app/src/main/java/com/smarttoolfactory/composeimage/demo/ImageScaleDemo.kt‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
package com.smarttoolfactory.composeimage.demo
2+
3+
import androidx.compose.foundation.*
4+
import androidx.compose.foundation.layout.*
5+
import androidx.compose.foundation.shape.RoundedCornerShape
6+
import androidx.compose.material3.*
7+
import androidx.compose.runtime.*
8+
import androidx.compose.ui.Modifier
9+
import androidx.compose.ui.graphics.Color
10+
import androidx.compose.ui.graphics.ImageBitmap
11+
import androidx.compose.ui.layout.ContentScale
12+
import androidx.compose.ui.platform.LocalContext
13+
import androidx.compose.ui.res.imageResource
14+
import androidx.compose.ui.text.font.FontWeight
15+
import androidx.compose.ui.unit.dp
16+
import androidx.compose.ui.unit.sp
17+
import com.smarttoolfactory.composeimage.ContentScaleSelectionMenu
18+
import com.smarttoolfactory.composeimage.ImageSelectionButton
19+
import com.smarttoolfactory.composeimage.R
20+
import com.smarttoolfactory.image.ImageWithConstraints
21+
22+
/**
23+
* This demo is for comparing results with [Image] and [ImageWithConstraints]
24+
*/
25+
@OptIn(ExperimentalMaterial3Api::class)
26+
@Composable
27+
fun ImageWithConstraintsDemo() {
28+
29+
val imageBitmapLarge = ImageBitmap.imageResource(
30+
LocalContext.current.resources, R.drawable.landscape2
31+
)
32+
33+
var imageBitmap by remember { mutableStateOf(imageBitmapLarge) }
34+
35+
Scaffold(
36+
floatingActionButton = {
37+
ImageSelectionButton {
38+
imageBitmap = it
39+
}
40+
},
41+
floatingActionButtonPosition = FabPosition.End,
42+
content = { paddingValues: PaddingValues ->
43+
Column(
44+
modifier = Modifier
45+
.padding(paddingValues)
46+
.fillMaxSize()
47+
.verticalScroll(rememberScrollState())
48+
.padding(10.dp)
49+
) {
50+
ImageScale(imageBitmap = imageBitmap)
51+
}
52+
}
53+
)
54+
}
55+
56+
@Composable
57+
fun ImageScale(imageBitmap: ImageBitmap) {
58+
59+
val modifier = Modifier
60+
.background(Color.LightGray)
61+
.border(2.dp, Color.Red)
62+
.fillMaxWidth()
63+
.aspectRatio(4 / 3f)
64+
65+
var text by remember { mutableStateOf("") }
66+
67+
Spacer(modifier = Modifier.height(20.dp))
68+
Text(
69+
text = "ImageWithConstraints ContentScale",
70+
fontSize = 20.sp,
71+
fontWeight = FontWeight.Bold,
72+
color = MaterialTheme.colorScheme.primary,
73+
modifier = Modifier.padding(8.dp)
74+
)
75+
76+
var contentScale by remember { mutableStateOf(ContentScale.Fit) }
77+
ContentScaleSelectionMenu(contentScale = contentScale) {
78+
contentScale = it
79+
}
80+
81+
ImageWithConstraints(
82+
modifier = modifier,
83+
imageBitmap = imageBitmap,
84+
contentDescription = null,
85+
contentScale = contentScale
86+
) {
87+
88+
val imageWidth = this.imageWidth.value.toInt()
89+
val imageHeight = this.imageHeight.value.toInt()
90+
val bitmapRect = this.rect
91+
92+
text = "Image width: ${imageWidth}dp, height: ${imageHeight}dp\n" +
93+
"Bitmap Rect: $bitmapRect"
94+
95+
Spacer(
96+
modifier = Modifier
97+
.size(this.imageWidth, this.imageHeight)
98+
.border(3.dp, Color.Yellow)
99+
)
100+
}
101+
102+
Spacer(modifier = Modifier.height(8.dp))
103+
104+
Surface(
105+
modifier = Modifier
106+
.fillMaxWidth()
107+
.wrapContentHeight(),
108+
shape = RoundedCornerShape(12.dp),
109+
shadowElevation = 1.dp,
110+
tonalElevation = 4.dp,
111+
color = Color.LightGray,
112+
contentColor = Color.White
113+
) {
114+
Text(
115+
text = text,
116+
fontSize = 14.sp,
117+
fontWeight = FontWeight.Bold,
118+
modifier = Modifier.padding(8.dp)
119+
)
120+
}
121+
122+
Text(
123+
text = "Image Content Scale",
124+
fontSize = 20.sp,
125+
fontWeight = FontWeight.Bold,
126+
color = MaterialTheme.colorScheme.primary,
127+
modifier = Modifier.padding(8.dp)
128+
)
129+
130+
Image(
131+
modifier = modifier,
132+
bitmap = imageBitmap,
133+
contentDescription = null,
134+
contentScale = contentScale
135+
)
136+
137+
}

0 commit comments

Comments
 (0)