logo标签列表

安卓复杂布局设计建议

androidandroid-layoutandroid-intentandroid-fragmentsandroid-emulator
5
我需要在Android仪表盘活动中实现一个复杂的布局，如下图所示。其中，有些单元格需要添加多个文本视图。例如：
在这里，一些文本视图的文本将使用Async任务从Web服务加载。只有一个ImageView应该可以点击。
我想知道，在Android中实现这种复杂布局的最佳方法是什么。我尝试了在线性布局中使用嵌套的线性布局来实现这一点，但它非常混乱和复杂。然后我尝试使用表格布局与线性布局，但也变得更加复杂。然后我想到使用网格视图和线性布局来完成，但我不确定如何确切地做到这一点。因为我还处于学习阶段，我只需要建议使用哪些布局以及在哪里使用它们，而不需要完整的实现。谢谢！
你可以尝试使用GridLayout。 - Nitin Sethi
你的意思是在网格中使用线性布局来添加多个文本视图吗？ - Grant
你有响应式元素吗？ - NickF
我指的是这里描述的那个。http://developer.android.com/reference/android/support/v7/widget/GridLayout.html - Nitin Sethi
请查看此链接 https://github.com/maurycyw/StaggeredGridViewDemo - Mikel
显示剩余3条评论
5个回答
7
2

更新：我们知道百分比支持库从API级别26开始被弃用。 ConstraintLayout 是实现相同平面XML结构的新方法。

更新的Github项目

更新的示例：

<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/fifty_thirty"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ffff8800"
        android:gravity="center"
        android:text="@string/fifty_fifty_text"
        android:textColor="@android:color/white"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="0.5"
        android:textSize="25sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.5" />

    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ffff5566"
        android:gravity="center"
        android:text="@string/fifty_fifty_text"
        android:textColor="@android:color/white"
        android:textSize="25sp"
        app:layout_constraintHeight_default="percent"
        app:layout_constraintHeight_percent="0.5"
        app:layout_constraintLeft_toRightOf="@id/fifty_thirty"
        app:layout_constraintTop_toBottomOf="@id/fifty_thirty"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.5" />

</android.support.constraint.ConstraintLayout>

已弃用 需要一个使用百分比支持库的简单演示。

代码和概念在这里。

<android.support.percent.PercentRelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/fifty_huntv"
        android:background="#ffff8800"
        android:text="50% - 50%"
        android:textColor="@android:color/white"
        style="@style/STYLE_PERCENT_TV"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%" />
    <TextView
        android:id="@+id/comp2_twenty_fifty_tv"
        android:layout_toRightOf="@id/fifty_huntv"
        android:background="#ffff5566"
        android:text="20%-50%"
        style="@style/STYLE_PERCENT_TV"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="50%"
        />

    <TextView
        android:id="@+id/comp2_ten_fifty_tv"
        android:layout_below="@id/comp2_twenty_fifty_tv"
        android:layout_toRightOf="@id/fifty_huntv"
        android:background="#aa3628cc"
        android:text="30%-50%"
        style="@style/STYLE_PERCENT_TV"
        app:layout_heightPercent="30%"
        app:layout_widthPercent="50%"
        />
    <TextView
        android:id="@+id/century_50_tv"
        android:layout_below="@id/fifty_huntv"
        android:background="#aacacc46"
        android:text="50%-100%"
        style="@style/STYLE_PERCENT_TV"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="100%"
        />
</android.support.percent.PercentRelativeLayout>

在styles.xml文件中

 <style name="STYLE_PERCENT_TV">
        <item name="android:height">0dp</item>
        <item name="android:width">0dp</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@android:color/white</item>
        <item name="android:textSize">25sp</item>
    </style>

在这里查看Github项目。 percent complex design：这是一个复杂度百分比设计图片。
1
如果我需要实现这样的布局，我会将其分为三个部分：
1. 从顶部到屏幕截图中红色TextView的一行。
2. 从橙色“2 TextViews”到底部的左列。
3. 带有绿色和灰色TextView的右列。
对于每个部分，您至少有三个选择：
1. 如果该部分具有一些严重的逻辑，则会使用Fragments，因为它们具有自己的生命周期。
2. 如果该部分具有较小的逻辑，并且您不想在活动内全部实现，则会使用custom View。
3. 如果只是想拆分布局xml，请检查include标记。
4. 您可以使用1-3的任何排列方式，并以不同的方式拆分布局以适应您的需求。
0

最好的方法是使用Fragments和include标签来添加其他的XML布局

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接