Android 响应式设计钛金

Question

我最近一直在 Titanium 上开发 Android 应用程序，但遇到了一个问题。

我正在努力解决的是使特定视图具有响应性。

我想在视图上显示 15-20 个按钮，但我不希望它可滚动。 现在，如果我使用大约 50dpi（这是一些较小屏幕上按钮的推荐值），我会错过其中的一些。

我应该如何处理这个问题？我应该使用我喜欢的设备宽度和高度的%吗

function PixelsToDPUnits(ThePixels) {
    if ( Titanium.Platform.displayCaps.dpi > 160 )
        return (ThePixels / (Titanium.Platform.displayCaps.dpi / 160));
    else 
        return ThePixels;
}

Ti.App.deviceWidth = PixelsToDPUnits(Ti.Platform.displayCaps.platformWidth);
Ti.App.deviceHeight = PixelsToDPUnits(Ti.Platform.displayCaps.platformHeight);

我应该创建 4-5 个不同的视图并根据用户的 DPI 加载正确的视图吗？

解决这个问题最正确的方法是什么。

谢谢

Answer 1

我不知道这是否是您想要存档的内容，但您可以使用

android:layout_weight

。 如果您有 2 个按钮，并且重量均为 1，则每个按钮将始终覆盖屏幕的 50%。天气与否，我的回答有帮助，请发布您的 xml，以便我们可以更具体地了解您的问题。

Answer 2

这就是我所遵循的：

1. 获取按钮的长宽比（宽度/高度），使其不会被挤压或拉伸。
2. 将可用高度除以按钮数量。添加一些顶部和/或底部填充。这是每个按钮的高度
3. 按钮宽度=高度*长宽比

这样您就可以在包括平板电脑在内的任何屏幕上安装按钮

Answer 3

我要做的是将每个按钮制作为线性布局，这比按钮提供更多的自定义功能，并且猜猜也没有最小尺寸限制。

为了使 UI 响应，我主要使用带有 app:layout_constraintGuide_percent 的Guidelines 在约束布局中。

以下是水平引导线位于屏幕顶部 35% 和垂直引导线位于屏幕左侧 40% 的示例：

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.35"/>

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline_2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.40"/>

通过这种方式，您可以初始化辅助线并以背景和文本为中心响应地设置 LinearLayout 的大小，使宽度/高度为 0dp 并将其限制为两个水平/垂直辅助线，布局将占据这两个辅助线之间的空间.

<LinearLayout
    android:id="@+id/block_btn"
    android:layout_width="0dp" 
    android:layout_height="0dp"
    android:background="@drawable/home_block_btn_selector"
    android:enabled="false"
    android:gravity="center"
    app:layout_constraintBottom_toBottomOf="@id/guideline_btn_bottom"
    app:layout_constraintEnd_toStartOf="@+id/guideline_right"
    app:layout_constraintStart_toStartOf="@+id/guideline_left"
    app:layout_constraintTop_toTopOf="@+id/guideline_top">

    <TextView
        android:id="@+id/block_btn_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button"
        android:textAlignment="center"
        android:textAllCaps="false"
        android:textColor="@drawable/block_btn_text_selector"
        android:textSize="18sp" />

</LinearLayout>

希望对您有帮助，如有疑问，请随时联系