How to create simple view separators

介绍

这将向您展示两种方法可以创建漂亮的分隔符,例如一排按钮之间使用。

(https://raw.githubusercontent.com/ITBox/Picture/master/buttons-with-separators3.png)

方法1 手动添加一个视图分离器LinearLayout

作为一个分隔符,我们可以使用一个视图如下:

<View
   android:layout_height="fill_parent"
   android:layout_width="1dp"
   android:background="#90909090"
   android:layout_marginBottom="5dp"
   android:layout_marginTop="5dp"
/>

整个布局,如图所示,就变成:

 <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:orientation="horizontal">

<span class="nt">&lt;Button</span>
    <span class="na">android:layout_width=</span><span class="s">"fill_parent"</span>
    <span class="na">android:layout_height=</span><span class="s">"wrap_content"</span>
    <span class="na">style=</span><span class="s">"?android:attr/buttonBarButtonStyle"</span>
    <span class="na">android:text=</span><span class="s">"Yes"</span>
    <span class="na">android:layout_weight=</span><span class="s">"1"</span>
    <span class="na">android:id=</span><span class="s">"@+id/button1"</span>
    <span class="na">android:textColor=</span><span class="s">"#00b0e4"</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;View</span> <span class="na">android:layout_height=</span><span class="s">"fill_parent"</span>
    <span class="na">android:layout_width=</span><span class="s">"1px"</span>
    <span class="na">android:background=</span><span class="s">"#90909090"</span>
    <span class="na">android:layout_marginBottom=</span><span class="s">"5dp"</span>
    <span class="na">android:layout_marginTop=</span><span class="s">"5dp"</span>
    <span class="na">android:id=</span><span class="s">"@+id/separator1"</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;Button</span>
    <span class="na">android:layout_width=</span><span class="s">"fill_parent"</span>
    <span class="na">android:layout_height=</span><span class="s">"wrap_content"</span>
    <span class="na">style=</span><span class="s">"?android:attr/buttonBarButtonStyle"</span>
    <span class="na">android:text=</span><span class="s">"No"</span>
    <span class="na">android:layout_weight=</span><span class="s">"1"</span>
    <span class="na">android:id=</span><span class="s">"@+id/button2"</span>
    <span class="na">android:textColor=</span><span class="s">"#00b0e4"</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;View</span> <span class="na">android:layout_height=</span><span class="s">"fill_parent"</span>
    <span class="na">android:layout_width=</span><span class="s">"1px"</span>
    <span class="na">android:background=</span><span class="s">"#90909090"</span>
    <span class="na">android:layout_marginBottom=</span><span class="s">"5dp"</span>
    <span class="na">android:layout_marginTop=</span><span class="s">"5dp"</span>
    <span class="na">android:id=</span><span class="s">"@+id/separator2"</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;Button</span>
    <span class="na">android:layout_width=</span><span class="s">"fill_parent"</span>
    <span class="na">android:layout_height=</span><span class="s">"wrap_content"</span>
    <span class="na">style=</span><span class="s">"?android:attr/buttonBarButtonStyle"</span>
    <span class="na">android:text=</span><span class="s">"Neutral"</span>
    <span class="na">android:layout_weight=</span><span class="s">"1"</span>
    <span class="na">android:id=</span><span class="s">"@+id/button3"</span>
    <span class="na">android:textColor=</span><span class="s">"#00b0e4"</span> <span class="nt">/&gt;</span>

</LinearLayout>

方法2 指定一个分压器LinearLayout

您可以指定一个视图linearlayout分配器。这显然是一个更好的解决方案(和我寻找的解决方案),还可以锻炼当你处理一个未知数量的Items。 这种方法只适用于API 11和更高的水平。 * 创建一个叫separator.xml的drawable文件:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
   <size android:width="1dp" />
   <solid android:color="#90909090" />
</shape>

  • 我们可以这样在布局中用

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:divider="@drawable/separator"
    android:showDividers="middle"
    android:orientation="horizontal">

<span class="nt">&lt;Button</span>
    <span class="na">android:layout_width=</span><span class="s">"fill_parent"</span>
    <span class="na">android:layout_height=</span><span class="s">"wrap_content"</span>
    <span class="na">style=</span><span class="s">"?android:attr/buttonBarButtonStyle"</span>
    <span class="na">android:text=</span><span class="s">"Yes"</span>
    <span class="na">android:layout_weight=</span><span class="s">"1"</span>
    <span class="na">android:id=</span><span class="s">"@+id/button1"</span>
    <span class="na">android:textColor=</span><span class="s">"#00b0e4"</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;Button</span>
    <span class="na">android:layout_width=</span><span class="s">"fill_parent"</span>
    <span class="na">android:layout_height=</span><span class="s">"wrap_content"</span>
    <span class="na">style=</span><span class="s">"?android:attr/buttonBarButtonStyle"</span>
    <span class="na">android:text=</span><span class="s">"No"</span>
    <span class="na">android:layout_weight=</span><span class="s">"1"</span>
    <span class="na">android:id=</span><span class="s">"@+id/button2"</span>
    <span class="na">android:textColor=</span><span class="s">"#00b0e4"</span> <span class="nt">/&gt;</span>

<span class="nt">&lt;Button</span>
    <span class="na">android:layout_width=</span><span class="s">"fill_parent"</span>
    <span class="na">android:layout_height=</span><span class="s">"wrap_content"</span>
    <span class="na">style=</span><span class="s">"?android:attr/buttonBarButtonStyle"</span>
    <span class="na">android:text=</span><span class="s">"Neutral"</span>
    <span class="na">android:layout_weight=</span><span class="s">"1"</span>
    <span class="na">android:id=</span><span class="s">"@+id/button3"</span>
    <span class="na">android:textColor=</span><span class="s">"#00b0e4"</span> <span class="nt">/&gt;</span>

</LinearLayout>

这里的重要部分是:

      android:divider="@drawable/separator"
      android:showDividers="middle"