如何显示水平和垂直渐变分隔线？

Posted 2023-04-13

技术标签:

【中文标题】如何显示水平和垂直渐变分隔线？【英文标题】：how to show horizontal and vertical gradient divider line? 【发布时间】：2017-11-17 15:14:59 【问题描述】：

我不太擅长编码，但在 android 中设计部分时，我总是做不出来。渐变颜色适用于垂直但不适用于水平。任何人都可以建议我如何将水平线上的分隔线像垂直一样放在整个项目上？

我的divider.xml

   <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

<gradient
    android:angle="0"
    android:endColor="@android:color/white"
    android:centerColor="#000"
    android:startColor="@android:color/white"
    android:type="linear" />

</shape>

设计.xml

    <?xml version="1.0" encoding="utf-8"?>
   <RelativeLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_
   android:layout_
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   app:layout_behavior="@string/appbar_scrolling_view_behavior"
   tools:context="com.thebrogrammers.design.MainActivity"
   tools:showIn="@layout/app_bar_main"
   android:background="@color/grey">

<android.support.v7.widget.CardView
    android:layout_
    android:layout_
    android:layout_weight="1"
    android:clickable="true"
    android:focusable="true"
    android:elevation="4dp"
    >

    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="vertical">

        <LinearLayout android:layout_
        android:layout_
        android:orientation="horizontal"
        android:layout_weight="1"
        >


        <LinearLayout
            android:layout_
            android:layout_
            android:orientation="vertical"
            android:layout_weight="1"
            >


            <ImageView
                android:id="@+id/image1"
                android:layout_
                android:layout_
                android:layout_marginTop="15dp"
                android:layout_gravity="center"
                android:src="@mipmap/ic_launcher"

                />
            <TextView
                android:layout_
                android:layout_
                android:layout_marginTop="5dp"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="Apply For Icard"
                android:layout_marginBottom="15dp"
                android:id="@+id/textView15"
                android:textColor="@color/colorPrimaryDark"
                android:textAlignment="center"
                android:textStyle="bold"
                />

        </LinearLayout>

            <ImageView
                android:layout_
                android:layout_
                android:src="@drawable/divider2"/>
        <LinearLayout
                android:layout_
                android:layout_
                android:orientation="vertical"
                android:layout_weight="1"
            >


                <ImageView
                    android:id="@+id/image1"
                    android:layout_
                    android:layout_
                    android:layout_marginTop="15dp"
                    android:layout_gravity="center"
                    android:src="@mipmap/ic_launcher"

                    />
                <TextView
                    android:layout_
                    android:layout_
                    android:layout_marginTop="5dp"
                    android:textAppearance="?
                    android:attr/textAppearanceSmall"
                    android:text="Apply For Icard"
                    android:layout_marginBottom="15dp"
                    android:id="@+id/textView15"
                    android:textColor="@color/colorPrimaryDark"
                    android:textAlignment="center"
                    android:textStyle="bold"
                    />

            </LinearLayout>




        </LinearLayout>

        <ImageView
            android:layout_
            android:layout_
            android:src="@drawable/divider"/>

        <LinearLayout
            android:layout_
            android:layout_
            android:orientation="horizontal"
            android:layout_weight="1">


            <LinearLayout
                android:layout_
                android:layout_
                android:orientation="vertical"
                android:layout_weight="1"
                >


                <ImageView
                    android:id="@+id/image1"
                    android:layout_
                    android:layout_
                    android:layout_marginTop="15dp"
                    android:layout_gravity="center"
                    android:src="@mipmap/ic_launcher"

                    />
                <TextView
                    android:layout_
                    android:layout_
                    android:layout_marginTop="5dp"
                    android:textAppearance="?
                    android:attr/textAppearanceSmall"
                    android:text="Apply For Icard"
                    android:layout_marginBottom="10dp"
                    android:id="@+id/textView15"
                    android:textColor="@color/colorPrimaryDark"
                    android:textAlignment="center"
                    android:textStyle="bold"
                    />

            </LinearLayout>

            <ImageView
                android:layout_
                android:layout_
                android:src="@drawable/divider2"/>
            <LinearLayout
                android:layout_
                android:layout_
                android:orientation="vertical"
                android:layout_weight="1">


                <ImageView
                    android:id="@+id/image1"
                    android:layout_
                    android:layout_
                    android:layout_marginTop="15dp"
                    android:layout_gravity="center"
                    android:src="@mipmap/ic_launcher"

                    />
                <TextView
                    android:layout_
                    android:layout_
                    android:layout_marginTop="5dp"
                    android:textAppearance="?
                    android:attr/textAppearanceSmall"
                    android:text="Apply For Icard"
                    android:layout_marginBottom="10dp"
                    android:id="@+id/textView15"
                    android:textColor="@color/colorPrimaryDark"
                    android:textAlignment="center"
                    android:textStyle="bold"
                    />

            </LinearLayout>

        </LinearLayout>


      </LinearLayout>

   </android.support.v7.widget.CardView>

 </RelativeLayout>

【问题讨论】：

与 recyclerview ?.您可以通过扩展 RecyclerView.ItemDecoration 来使用自定义网格项装饰查看gist.github.com/raghunandankavi2010/… 我以前从不使用gridview！ :| 哦，好的。只需 google，如果您使用 recyclerview，您应该会获得各种物品装饰器。 【参考方案1】：

改用 line 怎么样？：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">



<item android:top="-5dp" android:right="-5dp" android:left="-5dp">
    <shape>
        <stroke android:color="@android:color/transparent" />
        <stroke
            android:
            android:color="@color/black" />

    </shape>

</item>

上面的分隔线是垂直的，这个是水平的：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">



    <item android:top="-5dp" android:bottom="-5dp" android:left="-5dp">
        <shape>
            <stroke android:color="@android:color/transparent" />
            <stroke
                android:
                android:color="@color/company_color" />

        </shape>

    </item>

</layer-list>

试试你自己的宽度。

或从当前分隔符android:centerColor="#000"中删除此行@

【讨论】：

我应该在我的 divider.xml 上使用它吗？它不像我在垂直方向上那样给出渐变线！！ @Krixnaas 您可以根据需要添加开始颜色和结束颜色。在你的分隔线中也是如此。添加该颜色会产生空白设计好吧，使用你的旧分隔线并删除这一行android:centerColor="#000"【参考方案2】：

我们可以使用 imageView 通过设置渐变背景来实现这一点。试试这个：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
        <gradient
            android:endColor="@android:color/transparent"
            android:centerColor="#000"
            android:startColor="@android:color/transparent"
            android:angle="0"
            android:type="linear"/>
    </shape>

然后像这样设置imageView的背景：

<ImageView
        android:id="@+id/hr"
        android:layout_
        android:layout_
        android:background="@drawable/background_gradient"
        android:gravity="center_horizontal"
        />

【讨论】：

希望这可以帮助别人。【参考方案3】：

divider.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
            <item>
                <shape android:shape="rectangle">
                    <gradient android:angle="270" android:endColor="#00000000" android:startColor="#00000000" android:type="linear" />
                </shape>
            </item>
            <item android:top="@dimen/_20sdp" android:bottom="@dimen/_20sdp" android:left="@dimen/_2sdp" android:right="@dimen/_2sdp">
                <shape>
                    <gradient
                        android:angle="90"
                        android:startColor="#07FFFFFF"
                        android:centerColor="#D3000000"
                        android:endColor="#07FFFFFF"
                        android:type="linear" />
                </shape>
            </item>
        </layer-list>
    </item>

</selector>

example.xml

   <LinearLayout
        android:layout_
        android:layout_
        android:orientation="horizontal"
        android:weightSum="5">

        <TextView
            android:id="@+id/textView1"
            android:layout_
            android:layout_weight="1.5"
            android:layout_
            android:text="1"
            android:textSize="@dimen/_40sdp"/>

        <View
            android:layout_
            android:layout_weight=".1"
            android:layout_
            android:background="@drawable/divider" />

        <TextView
            android:id="@+id/textView2"
            android:layout_
            android:layout_weight="3.4"
            android:layout_
            android:text="2"
            android:textSize="@dimen/_40sdp" />

    </LinearLayout>

结果：

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

以上是关于如何显示水平和垂直渐变分隔线？的主要内容，如果未能解决你的问题，请参考以下文章

背景色实现按钮分隔线

如何在 Flutter 中的 Column 上的 Widget 之间添加垂直分隔线？

在winform里怎么加入一条灰色的分隔线

如何通过 Bootstrap 垂直分隔线画线？

如何添加垂直分隔符？

我们如何使分隔线高度等于 SWIFT UI 小部件中水平堆栈的另一个子级