From 924ea03810e9ece5b12f29852d9fbc417835f4dc Mon Sep 17 00:00:00 2001 From: SeniorZhai Date: Tue, 7 Jul 2026 18:32:31 +0800 Subject: [PATCH] fix(ui): improve responsive market and trade layout --- .../ui/home/web3/market/MarketHolder.kt | 82 ++++++- .../android/ui/home/web3/trade/TradePage.kt | 5 +- app/src/main/res/layout/fragment_market.xml | 218 ++++++++++-------- app/src/main/res/layout/item_market.xml | 10 +- 4 files changed, 210 insertions(+), 105 deletions(-) diff --git a/app/src/main/java/one/mixin/android/ui/home/web3/market/MarketHolder.kt b/app/src/main/java/one/mixin/android/ui/home/web3/market/MarketHolder.kt index bfc176f4aa..ceaea1d98d 100644 --- a/app/src/main/java/one/mixin/android/ui/home/web3/market/MarketHolder.kt +++ b/app/src/main/java/one/mixin/android/ui/home/web3/market/MarketHolder.kt @@ -1,7 +1,9 @@ package one.mixin.android.ui.home.web3.market import android.annotation.SuppressLint +import android.view.ViewGroup.LayoutParams.WRAP_CONTENT import android.view.ViewGroup.MarginLayoutParams +import androidx.core.view.doOnLayout import androidx.core.view.updateLayoutParams import androidx.recyclerview.widget.RecyclerView import one.mixin.android.Constants @@ -25,9 +27,12 @@ class MarketHolder(val binding: ItemMarketBinding) : RecyclerView.ViewHolder(bin private val verticalPadding by lazy { 12.dp } init { - binding.container.setPadding(horizontalPadding - 4.dp, verticalPadding, horizontalPadding, verticalPadding) - binding.price.updateLayoutParams { - marginEnd = horizontalPadding + applyAdaptiveLayout(binding.root.context.screenWidth()) + binding.root.doOnLayout { applyAdaptiveLayout(it.width) } + binding.root.addOnLayoutChangeListener { _, left, _, right, _, oldLeft, _, oldRight, _ -> + if (right - left != oldRight - oldLeft) { + applyAdaptiveLayout(right - left) + } } } @@ -65,4 +70,75 @@ class MarketHolder(val binding: ItemMarketBinding) : RecyclerView.ViewHolder(bin sparkline.loadSvgWithTint(if (dayType) item.sparklineIn7d else item.sparklineIn24, isRising, isColorReversed) } } + + private fun applyAdaptiveLayout(width: Int) { + val isCompact = width in 1 until 380.dp + val isExtraCompact = width in 1 until 330.dp + val isTiny = width in 1 until 300.dp + val rowHorizontalPadding = if (isCompact) 12.dp else horizontalPadding + val favoriteSize = if (isTiny) 20.dp else 24.dp + val favoritePadding = if (isTiny) 2.dp else 4.dp + val iconSize = when { + isTiny -> 26.dp + isExtraCompact -> 30.dp + isCompact -> 34.dp + else -> 38.dp + } + val contentSpacing = when { + isTiny -> 4.dp + isExtraCompact -> 6.dp + isCompact -> 8.dp + else -> 10.dp + } + val nameWidth = when { + isTiny -> 66.dp + isExtraCompact -> 72.dp + isCompact -> 84.dp + else -> WRAP_CONTENT + } + val assetValueMaxWidth = when { + isTiny -> 48.dp + isExtraCompact -> 64.dp + isCompact -> 76.dp + else -> 280.dp + } + val chartWidth = when { + isTiny -> 42.dp + isExtraCompact -> 46.dp + isCompact -> 52.dp + else -> 60.dp + } + + binding.container.setPadding( + (rowHorizontalPadding - 4.dp).coerceAtLeast(8.dp), + verticalPadding, + rowHorizontalPadding, + verticalPadding + ) + binding.favorite.updateLayoutParams { + this.width = favoriteSize + this.height = favoriteSize + } + binding.favorite.setPadding(favoritePadding, favoritePadding, favoritePadding, favoritePadding) + binding.icon.updateLayoutParams { + this.width = iconSize + this.height = iconSize + marginStart = contentSpacing + } + binding.nameLayout.updateLayoutParams { + this.width = nameWidth + marginStart = contentSpacing + } + binding.assetSymbol.maxWidth = nameWidth.takeIf { it != WRAP_CONTENT } ?: Int.MAX_VALUE + binding.assetValue.maxWidth = assetValueMaxWidth + binding.price.updateLayoutParams { + marginEnd = if (isCompact) 6.dp else horizontalPadding + } + binding.marketRl.updateLayoutParams { + this.width = chartWidth + } + binding.sparkline.updateLayoutParams { + this.width = chartWidth + } + } } diff --git a/app/src/main/java/one/mixin/android/ui/home/web3/trade/TradePage.kt b/app/src/main/java/one/mixin/android/ui/home/web3/trade/TradePage.kt index d3e8716cee..6a565ff792 100644 --- a/app/src/main/java/one/mixin/android/ui/home/web3/trade/TradePage.kt +++ b/app/src/main/java/one/mixin/android/ui/home/web3/trade/TradePage.kt @@ -4,6 +4,7 @@ package one.mixin.android.ui.home.web3.trade import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.background +import androidx.compose.foundation.horizontalScroll import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Row @@ -17,6 +18,7 @@ import androidx.compose.foundation.layout.size import androidx.compose.foundation.layout.width import androidx.compose.foundation.pager.HorizontalPager import androidx.compose.foundation.pager.rememberPagerState +import androidx.compose.foundation.rememberScrollState import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Icon @@ -410,7 +412,8 @@ fun TradePage( modifier = Modifier .fillMaxWidth() .padding(horizontal = 16.dp) - .padding(top = 4.dp, end = 4.dp), + .padding(top = 4.dp, end = 4.dp) + .horizontalScroll(rememberScrollState()), horizontalArrangement = Arrangement.Start, ) { tabs.forEachIndexed { index, tab -> diff --git a/app/src/main/res/layout/fragment_market.xml b/app/src/main/res/layout/fragment_market.xml index 9a8f04c02c..3822d68b93 100644 --- a/app/src/main/res/layout/fragment_market.xml +++ b/app/src/main/res/layout/fragment_market.xml @@ -15,11 +15,15 @@ - - - - - - - - - - - - - + android:clipToPadding="false" + android:fillViewport="true" + android:paddingStart="16dp" + android:paddingEnd="16dp" + android:scrollbars="none"> - - - - - - - - - - - + android:orientation="horizontal"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -292,4 +312,4 @@ - \ No newline at end of file + diff --git a/app/src/main/res/layout/item_market.xml b/app/src/main/res/layout/item_market.xml index 8d109b48d1..9cf07faa36 100644 --- a/app/src/main/res/layout/item_market.xml +++ b/app/src/main/res/layout/item_market.xml @@ -41,6 +41,8 @@ android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="2dp" + android:ellipsize="end" + android:maxLines="1" android:textColor="?attr/text_primary" android:textSize="14sp" /> @@ -63,6 +65,7 @@ android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="4dp" + android:ellipsize="end" android:textColor="?attr/text_assist" android:singleLine="true" android:maxWidth="280dp" @@ -74,12 +77,15 @@ - \ No newline at end of file +