Android里的网格空隙


在很多移动端或者web端开发中我们会遇到很多网格布局,如果我们使用线性布局来实现一些简单的网格布局就需要使用padding/margin等属性来使其对齐,代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="@dimen/spacing_medium">

<TextView
android:layout_width="match_parent"
android:layout_height="128dp"
android:background="@color/light_gray"
android:gravity="center"
android:textSize="@dimen/text_size"
android:text="@string/application_logo"
android:textAppearance="@android:style/TextAppearance.Material.Display1" />

<LinearLayout
android:id="@+id/buttons_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<Button
android:id="@+id/btn_first"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="@dimen/text_size"
android:background="@color/violet"
android:text="@string/button_1" />

<Button
android:id="@+id/btn_second"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="@dimen/text_size"
android:background="@color/blue"
android:text="@string/button_2" />

<Button
android:id="@+id/btn_third"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="@dimen/text_size"
android:background="@color/green"
android:text="@string/button_3" />

</LinearLayout>

</
LinearLayout>

这里写图片描述
但是我们很多时候需要让这些网格元素之间有一些空隙,这样看起来好看一些,如下
这里写图片描述
这样看起来确实很漂亮,但是漂亮的同时问题来了,现在我们需要去掉BUTTON 3,去掉后就会发现最右边对齐出现了问题(因为我们是使用padding/margin来实现的),其实LinearLayout已经有间隙的概念,可以设置其子元素间的间隙,下面我们来定义我们自己的间隙,使得后面更加灵活的变化我们网格元素间的间隙。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">


<size
android:width="@dimen/spacing_medium"
android:height="@dimen/spacing_medium" />


<solid android:color="@android:color/transparent" />

</shape>

现在我们可以给LinearLayout设置divider 和 showDividers (注意:android:divider, android:showDividers)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="@drawable/spacer_medium"
android:orientation="vertical"
android:padding="@dimen/spacing_medium"
android:showDividers="middle">


<!-- TextView -->

<LinearLayout
android:id="@+id/buttons_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:divider="@drawable/spacer_medium"
android:orientation="horizontal"
android:showDividers="middle">


<!-- Buttons -->

</LinearLayout>

</LinearLayout>

这样我们可以自由方便的调节类似的网格布局之间的间隙了,这些技巧可以方便我们的布局,减少代码量,让我们的代码更加容易维护。

智能推荐

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2019 ITdaan.com 粤ICP备14056181号  

赞助商广告