Android complex layout design advise

问题:

I'm suppose to implement a complex layout for Android dashboard activity as shown in the following image.

Here for some cells multiple text views should be added like this, Eg:

Here the texts of some text views will be loaded from a web service using Async tasks. Only one image view should be click able.
I want to know that what is the best way to implement this type of complex layout in Android. I have tried to use linearlayouts withing lianearlayouts to implement this but it is huge mess and lot of complex. Then I tried to use tablelayouts with lianearlayouts but it is also getting more complex. Then I thought of doing this using grid views with linearlayouts but I'm wonder how to do this exactly.
I'm still in learning stage, I just want an advice what is the best way to implement this layout what type of layouts should I use and where. I don't need complete implementation.

Thanks in advance.

回答1:

These kind of problems can be solved very easy using Android Percent Support Lib,

checkout gist: https://gist.github.com/shekarrex/5458f697c02e5619b0e2

回答2:

see GridLyout that will help you.. GridLayout and Row/Column Span Woe

http://www.techotopia.com/index.php/Working_with_the_Android_GridLayout_in_XML_Layout_Resources

回答3:

Update: As we know the percent support library is deprecated from API level 26. ConstraintLayout is the new way to achieve the same flat xml structure.

Updated Github Project

Updated Samples:

<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>

Deprecated Any one need a simple demo to use percent support library.

CODE and CONCEPT HERE.

<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>

WithIn 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 Project HERE

回答4:

If I need to implement such a layout I would split it to 3 parts:
1. One row from top to the red TextView in your screenshot.
2. Left column from orange "2 TextViews" till the bottom.
3. Right column with green and grey TextViews.

For each part you have at least 3 choices:
1. If the part has some serious logic I would use Fragments because they have it's one life cycle.
2. If the has small logic and you don't want to implement all inside your activity, I would use a custom View.
3. If just want to split your layout xml check the include tag.
4. You can use any permutation of 1 - 3, and split the layout in different way that fits your needs.

回答5:

The best way is you can use the Fragments and include tag for adding the other xml layout