行跨度和列跨度设计的最佳布局
如何实现这样的设计我不知道如何为模糊的图像做好抱歉。
我有三个选择
-
使用权重（硬）的线性布局
-
TableLayout（不支持列范围）
-
GridLayout（不知道）
我试过这个表格布局
"file:///mnt/sdcard/image.png" // from SD card
"file:///mnt/sdcard/video.mp4" // from SD card (video thumbnail)
"content://media/external/images/media/13" // from content provider
"content://media/external/video/media/13" // from content provider (video thumbnail)
"assets://image.png" // from assets
"drawable://" + R.drawable.img // from drawables (non-9patch images)
1 个答案:
答案 0 :(得分：3)
android.support.v7.widget.GridLayout适合您的情况。
在你的build.gradle中（任何版本都可以）：
compile "com.android.support:gridlayout-v7:24.1.1"
在你的布局xml文件中：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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"
android:background="@android:color/white"
android:orientation="vertical"
android:padding="16dp">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingTop="3dp"
android:paddingBottom="3dp"
android:text="Fir 08 Jul 10:44GMT +01"/>
<android.support.v7.widget.GridLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"
app:columnCount="8">
<!--
Header Row
-->
<TextView
style="@style/CellStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_columnSpan="7"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:padding="3dp"
android:background="@android:color/darker_gray"
android:text="ATP Singles Winmbeldon"
android:textColor="@android:color/white"/>
<!-- Spacer for green -->
<View
style="@style/CellSpacerStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"/>
<!--
First Row SF 13:00
-->
<!-- Title -->
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_rowSpan="2"
android:text="SF\n13:00"/>
<!-- Sore 1 -->
<TextView
style="@style/CellStyle"
android:layout_height="@dimen/row_height"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_rowSpan="1"
android:text="Raonic M. (6)"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="6"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="4"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="3"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="4"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="5"/>
<!-- GreenView -->
<FrameLayout
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="@dimen/border_size"
android:paddingTop="@dimen/border_size"
android:background="@android:color/white">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/green_circle"/>
</FrameLayout>
<!-- Sore 2 -->
<TextView
style="@style/CellStyle"
android:layout_height="@dimen/row_height"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_rowSpan="1"
android:text="Federer R. (3)"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="4"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="6"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="7"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="7"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="5"/>
<!-- GreenView -->
<FrameLayout
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="@dimen/border_size"
android:paddingTop="@dimen/border_size"
android:background="@android:color/white">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/green_circle"/>
</FrameLayout>
<!--
Second Row SF 15:00
-->
<!-- Title -->
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_rowSpan="2"
android:text="SF\n15:00"/>
<!-- Sore 1 -->
<TextView
style="@style/CellStyle"
android:layout_height="@dimen/row_height"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_rowSpan="1"
android:text="Berdych T.(10)"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="6"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="4"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="3"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="4"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="5"/>
<!-- GreenView -->
<FrameLayout
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="@dimen/border_size"
android:paddingTop="@dimen/border_size"
android:background="@android:color/white">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/green_circle"/>
</FrameLayout>
<!-- Sore 2 -->
<TextView
style="@style/CellStyle"
android:layout_height="@dimen/row_height"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
app:layout_rowSpan="1"
android:text="Murray A (2)"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="4"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="6"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:gravity="center"
android:text="7"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="7"/>
<TextView
style="@style/CellStyle"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:text="5"/>
<!-- GreenView -->
<FrameLayout
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:layout_marginLeft="@dimen/border_size"
android:paddingTop="@dimen/border_size"
android:background="@android:color/white">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/green_circle"/>
</FrameLayout>
<!--
Bottom Brders
-->
<View
android:layout_width="0dp"
android:layout_height="@dimen/border_size"
app:layout_columnSpan="7"
app:layout_columnWeight="1"
app:layout_rowWeight="1"/>
<View
android:layout_width="0dp"
android:layout_height="@dimen/border_size"
android:layout_marginLeft="@dimen/border_size"
app:layout_columnWeight="1"
app:layout_rowWeight="1"
android:background="@android:color/white"/>
</android.support.v7.widget.GridLayout>
</LinearLayout>
在你的style.xml中：
<resources>
...
<style name="CellStyle">
<item name="android:layout_marginTop">@dimen/border_size</item>
<item name="android:layout_marginLeft">@dimen/border_size</item>
<item name="android:background">@android:color/white</item>
<item name="android:gravity">center</item>
</style>
<style name="CellSpacerStyle">
<item name="android:layout_width">0dp</item>
<item name="android:layout_height">0dp</item>
<item name="android:layout_marginLeft">@dimen/border_size</item>
<item name="android:background">@android:color/white</item>
</style>
...
</resources>
在你的dimens.xml中：
<resources>
...
<dimen name="border_size">1px</dimen>
<dimen name="row_height">54dp</dimen>
...
</resources>
结果如下：
GridLayout [document]
的属性-
app:columnCount是Gridlayout的列数。 -
app:rowCount是Gridlayout的行数。
GridLayout＆＃39;的属性孩子[document]
-
app:layout_columnSpan是此视图占用的列数。 -
app:layout_rowSpan是此视图占用的跨度数。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？