如何显示水平和垂直渐变分隔线?
how to show horizontal and vertical gradient divider line?
我不太擅长编码,但在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>
改用线怎么样? :
<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"
我们可以使用 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"
/>
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>
结果:
我不太擅长编码,但在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>
改用线怎么样? :
<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"
我们可以使用 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"
/>
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>
结果: