How to create simple view separators

创建Android应用中按钮之间的美观分隔符

最新推荐文章于 2021-01-25 21:54:43 发布

转载最新推荐文章于 2021-01-25 21:54:43 发布 · 469 阅读

本文介绍如何在Android应用布局中创建简洁、美观的分隔符，用于在一组按钮之间增加视觉区分。提供了三种实现方法，包括手动添加视图、设置线性布局的分隔线和使用按钮样式默认分隔。这些方法适用于不同API级别，旨在帮助开发者轻松定制UI设计。

CV from http://envyandroid.com/archives/1193/view-separators

How to create simple view separators

12 Replies

This will show you three ways to create nice looking view separators, to use between a row of buttons for example.

The examples shows a LinearLayout with three buttons, that should get separators in between them.
The third example may be the easiest one to implement, while the other ones gives you better customizability.

Method one – Manually adding a view separator to the LinearLayout

We can create a simple View that represents the separator, and just add it in between our buttons.

As a separator, we can use a view like this:

<View

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

So the whole layout, as pictured, becomes:

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

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="?android:attr/buttonBarButtonStyle"
        android:text="Yes"
        android:layout_weight="1"
        android:id="@+id/button1"
        android:textColor="#00b0e4" />

    <View android:layout_height="fill_parent"
        android:layout_width="1px"
        android:background="#90909090"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:id="@+id/separator1" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="?android:attr/buttonBarButtonStyle"
        android:text="No"
        android:layout_weight="1"
        android:id="@+id/button2"
        android:textColor="#00b0e4" />

    <View android:layout_height="fill_parent"
        android:layout_width="1px"
        android:background="#90909090"
        android:layout_marginBottom="5dp"
        android:layout_marginTop="5dp"
        android:id="@+id/separator2" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="?android:attr/buttonBarButtonStyle"
        android:text="Neutral"
        android:layout_weight="1"
        android:id="@+id/button3"
        android:textColor="#00b0e4" />

</LinearLayout>

Method two – Specifying a divider for the LinearLayout

As pointed out by Paul Burke in the comments, you can specify a view divider on the linearlayout. This is obviously a better solution (and the solution I was searching for), that also works when you are dealing with an unknown number of items.

This methods only works for API level 11 and higher.

Create a new file called separator.xml in the drawable folder:

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

We can then use this separator in our LinearLayout like this:

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

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="?android:attr/buttonBarButtonStyle"
        android:text="Yes"
        android:layout_weight="1"
        android:id="@+id/button1"
        android:textColor="#00b0e4" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="?android:attr/buttonBarButtonStyle"
        android:text="No"
        android:layout_weight="1"
        android:id="@+id/button2"
        android:textColor="#00b0e4" />

    <Button
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        style="?android:attr/buttonBarButtonStyle"
        android:text="Neutral"
        android:layout_weight="1"
        android:id="@+id/button3"
        android:textColor="#00b0e4" />

</LinearLayout>

The important part here is on the LinearLayout:

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

Method three – ButtonBarStyle (the easiest way for default separators)

As danialgoodwin mentioned in the comments, adding the buttonBarStyle to the LinearLayout will show default separators. This is also for api level 11 or higher only.

The important part here, is adding this line to the LinearLayout:

style="?android:buttonBarStyle"

And the whole code will look like this:

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        style="?android:buttonBarStyle"
        android:dividerPadding="15dp"
        >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="New Button"
            android:id="@+id/button1"
            android:layout_gravity="center_vertical" />

        <!-- more buttons/views -->
        
    </LinearLayout>

You can also adjust the paddings of the view separators with the “dividerPadding” setting.