如何显示水平和垂直渐变分割线?

时间:2017-06-15 08:14:16

标签: android xml layout divider

enter image description here

我不擅长编码,但是当涉及到在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>

design.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>

2 个答案:

答案 0 :(得分:0)

如何使用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"

中删除此行

答案 1 :(得分:0)

我们可以使用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"
        />