5

我想爲Android儀表板活動實現一個複雜的佈局,如下圖所示。Android複雜的佈局設計建議

enter image description here

這裏是一些小區的多個文本視圖應該這樣被添加, 如:

enter image description here

這裏的一些文本視圖的文本將使用異步Web服務被加載任務。只有一個圖像視圖應該是可點擊的。
我想知道在Android中實現這種類型的複雜佈局的最佳方式是什麼。 我試圖用lianearlayouts實現這個使用linearlayouts,但它是巨大的混亂和很多複雜。然後我試着用lianearlayouts來使用tablelayouts,但它也變得越來越複雜。然後我想到使用帶有linearlayouts的網格視圖來做這件事,但我很好奇如何完全做到這一點。
我還在學習階段,我只是想要一個建議什麼是實現這種佈局的最佳方式我應該使用哪種類型的佈局以及在哪裏。我不需要完整的實現。

在此先感謝。

+0

可以GI ve GridLayout一試。 –

+0

你是指用網格添加多個文本視圖的線性佈局? – Grant

+0

你有響應元素嗎? – NickF

回答

1

如果我需要實現這樣的佈局,我會將它分成3部分:
1.從屏幕截圖的頂部到紅色TextView的一行。
2.從橙色「2 TextViews」的左列到底部。
3.帶有綠色和灰色TextView的右欄。

對於每個部分至少有3種選擇:
1.如果部分有一些嚴重的邏輯,我會用Fragments因爲他們有它的一個生命週期。
2.如果邏輯有小而你不想在你的活動中實現所有內容,我會 使用custom View
3.如果只是想分割佈局xml,請檢查include標記。
4.您可以使用1 - 3的任何排列,並以不同的方式分割佈局以滿足您的需求。

0

最好的辦法是,你可以使用片段包括標籤添加其它XML佈局

2

任何一個需要一個簡單的演示使用%的支持庫。

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> 

內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