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

Question

我不太擅长编码，但在 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_width="match_parent"
   android:layout_height="match_parent"
   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_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:clickable="true"
    android:focusable="true"
    android:elevation="4dp"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <LinearLayout android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:layout_weight="1"
        >


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_weight="1"
            >


            <ImageView
                android:id="@+id/image1"
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:layout_marginTop="15dp"
                android:layout_gravity="center"
                android:src="@mipmap/ic_launcher"

                />
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                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_width="1dp"
                android:layout_height="match_parent"
                android:src="@drawable/divider2"/>
        <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="1"
            >


                <ImageView
                    android:id="@+id/image1"
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:layout_marginTop="15dp"
                    android:layout_gravity="center"
                    android:src="@mipmap/ic_launcher"

                    />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    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_width="match_parent"
            android:layout_height="1dp"
            android:src="@drawable/divider"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:layout_weight="1">


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="1"
                >


                <ImageView
                    android:id="@+id/image1"
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:layout_marginTop="15dp"
                    android:layout_gravity="center"
                    android:src="@mipmap/ic_launcher"

                    />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    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_width="1dp"
                android:layout_height="match_parent"
                android:src="@drawable/divider2"/>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:layout_weight="1">


                <ImageView
                    android:id="@+id/image1"
                    android:layout_width="match_parent"
                    android:layout_height="80dp"
                    android:layout_marginTop="15dp"
                    android:layout_gravity="center"
                    android:src="@mipmap/ic_launcher"

                    />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    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>

Answer 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:width=".8dp"
            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:width=".8dp"
                android:color="@color/company_color" />

        </shape>

    </item>

</layer-list>

试试你自己的宽度。

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

Answer 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_width="match_parent"
        android:layout_height="3dp"
        android:background="@drawable/background_gradient"
        android:gravity="center_horizontal"
        />

Answer 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_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="5">

        <TextView
            android:id="@+id/textView1"
            android:layout_width="0dp"
            android:layout_weight="1.5"
            android:layout_height="@dimen/_100sdp"
            android:text="1"
            android:textSize="@dimen/_40sdp"/>

        <View
            android:layout_width="0dp"
            android:layout_weight=".1"
            android:layout_height="match_parent"
            android:background="@drawable/divider" />

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_weight="3.4"
            android:layout_height="@dimen/_100sdp"
            android:text="2"
            android:textSize="@dimen/_40sdp" />

    </LinearLayout>

结果：