0

我需要设计以下屏幕，但我不知道如何绘制一条垂直线，该垂直线将成为imageview我现在的中心cardview

我当前的 xml 代码是

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/account_opening_grey_bg"
    android:baselineAligned="false"
    android:orientation="vertical"
    android:paddingBottom="10dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp">

<com.widgets.TextViewRobotoRegular
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_gravity="center"
    android:layout_marginBottom="10dp"
    android:layout_marginTop="10dp"
    android:layout_weight="0.6"
    android:gravity="center"
    android:text="@string/lbl_acc_header" />

<android.support.v7.widget.CardView
    android:id="@+id/cardStep1"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginBottom="25dp"
    android:layout_weight="1"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardBackgroundColor="@color/white"
    card_view:cardCornerRadius="@dimen/dimen_2"
    card_view:cardElevation="@dimen/dimen_2"
    card_view:cardUseCompatPadding="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:layout_width="4dp"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:background="@color/step_one_view" />

        <com.widgets.TextViewRobotoLight
            android:id="@+id/lblStepOne"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:text="@string/lbl_step_one"
            android:textColor="@color/step_one_view" />

        <com.widgets.TextViewRobotoLight
            android:id="@+id/lblStepOneDetails"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/lblStepOne"
            android:layout_alignStart="@+id/lblStepOne"
            android:layout_below="@+id/lblStepOne"
            android:layout_marginTop="5dp"
            android:text="@string/lbl_step_one_details"
            android:textColor="@color/txt_black" />

        <ImageView
            android:id="@+id/imgStep1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:src="@drawable/menu_ipo" />


    </RelativeLayout>

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

<android.support.v7.widget.CardView
    android:id="@+id/cardStep2"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginBottom="25dp"
    android:layout_weight="1"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardBackgroundColor="@color/white"
    card_view:cardCornerRadius="@dimen/dimen_2"
    card_view:cardElevation="@dimen/dimen_2"
    card_view:cardUseCompatPadding="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:layout_width="4dp"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:background="@color/step_two_view" />

        <com.widgets.TextViewRobotoLight
            android:id="@+id/lblStepTwo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:text="@string/lbl_step_two"
            android:textColor="@color/step_two_view" />

        <com.widgets.TextViewRobotoLight
            android:id="@+id/lblStepTwoDetails"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/lblStepTwo"
            android:layout_alignStart="@+id/lblStepTwo"
            android:layout_below="@+id/lblStepTwo"
            android:layout_marginTop="5dp"
            android:text="@string/lbl_step_two_details"
            android:textColor="@color/txt_black" />

        <ImageView
            android:id="@+id/imgStep2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:src="@drawable/menu_ipo" />


    </RelativeLayout>

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


<android.support.v7.widget.CardView
    android:id="@+id/cardStep3"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_marginBottom="25dp"
    android:layout_weight="1"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardBackgroundColor="@color/white"
    card_view:cardCornerRadius="@dimen/dimen_2"
    card_view:cardElevation="@dimen/dimen_2"
    card_view:cardUseCompatPadding="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:layout_width="4dp"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:background="@color/step_three_view" />

        <com.widgets.TextViewRobotoLight
            android:id="@+id/lblStepThree"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:text="@string/lbl_step_three"
            android:textColor="@color/step_three_view" />

        <com.widgets.TextViewRobotoLight
            android:id="@+id/lblStepThreeDetails"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/lblStepThree"
            android:layout_alignStart="@+id/lblStepThree"
            android:layout_below="@+id/lblStepThree"
            android:layout_marginTop="5dp"
            android:text="@string/lbl_step_three_details"
            android:textColor="@color/txt_black" />

        <ImageView
            android:id="@+id/imgStep3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:src="@drawable/menu_ipo" />

    </RelativeLayout>

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


<android.support.v7.widget.CardView
    android:id="@+id/cardStep4"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_marginBottom="25dp"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardBackgroundColor="@color/white"
    card_view:cardCornerRadius="@dimen/dimen_2"
    card_view:cardElevation="@dimen/dimen_2"
    card_view:cardUseCompatPadding="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:layout_width="4dp"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:background="@color/step_four_view" />

        <com.widgets.TextViewRobotoLight
            android:id="@+id/lblStepFour"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:text="@string/lbl_step_four"
            android:textColor="@color/step_four_view" />

        <com.widgets.TextViewRobotoLight
            android:id="@+id/lblStepFourDetails"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/lblStepFour"
            android:layout_alignStart="@+id/lblStepFour"
            android:layout_below="@+id/lblStepFour"
            android:layout_marginTop="5dp"
            android:text="@string/lbl_step_four_details"
            android:textColor="@color/txt_black" />

        <ImageView
            android:id="@+id/imgStep4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:src="@drawable/menu_ipo" />

    </RelativeLayout>

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


<android.support.v7.widget.CardView
    android:id="@+id/cardStep5"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:layout_marginBottom="25dp"
    android:foreground="?android:attr/selectableItemBackground"
    app:cardBackgroundColor="@color/white"
    card_view:cardCornerRadius="@dimen/dimen_2"
    card_view:cardElevation="@dimen/dimen_2"
    card_view:cardUseCompatPadding="true">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <View
            android:layout_width="4dp"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true"
            android:background="@color/step_five_view" />

        <com.widgets.TextViewRobotoLight
            android:id="@+id/lblStepFive"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="15dp"
            android:text="@string/lbl_step_five"
            android:textColor="@color/step_five_view" />

        <com.widgets.TextViewRobotoLight
            android:id="@+id/lblStepFiveDetails"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/lblStepFive"
            android:layout_alignStart="@+id/lblStepFive"
            android:layout_below="@+id/lblStepFive"
            android:layout_marginTop="5dp"
            android:text="@string/lbl_step_five_details"
            android:textColor="@color/txt_black" />

        <ImageView
            android:id="@+id/imgStep5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_marginRight="15dp"
            android:layout_marginTop="15dp"
            android:src="@drawable/menu_ipo" />

    </RelativeLayout>

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

<com.widgets.RobotoRegularButton
    android:id="@+id/buttonPayIn"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/selector_fp_next_button"
    android:text="@string/btn_get_started"
    android:textAllCaps="true"
    android:textAlignment="center"
    android:textColor="@color/color_primary_text_color_fivep"
    android:textSize="16sp" />

</LinearLayout>

我曾经LinearLayout作为我的父母使用垂直方向现在我需要在cardview我使用的 5 之间绘制垂直线。请任何建议都会很有帮助

在此处输入图像描述

4

3 回答 3

1

解决您的问题的简单方法（这不是一个完美的解决方案，但在您的情况下，我认为这就足够了）：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/account_opening_grey_bg">

    <View
        android:layout_widht="1dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:layout_marginRight="56dp"
        android:background="#FF785C"/> 
    <!-- You will need to vary layout_marginRight parameter -->
    <!-- to pick up correct position for asked grey stripe -->
    <!-- I assumed this value as sum of 10(padding of linearlayout), -->
    <!-- 15(margin of image in cardview), 24(half size of image) --> 
    <!-- and 7(margin of cardView), but you can change it, as I said-->

    <LinearLayout ...>
    <!-- paste here your layout but remove background for root LinearLayout-->
</FrameLayout>
于 2016-10-06T06:45:21.567 回答
0

你所要做的就是：

  1. 将您的布​​局根更改为RelativeLayout

  2. 使用该属性确保所有CardViews 彼此之间具有所需的间距（边距）layout_below

  3. RelativeLayout在根内部但在 XML 中的 s 之后声明“线视图” CardView，这样当您将它们布置时，它们会出现在CardViews 的顶部

  4. 使用layout_below和layout_above引用ImageView线的顶部和底部的 s。例如...

<View
    android:layout_width="2dp"
    android:layout_below="@id\id_of_the_image_view_at_the_top"
    android:layout_above="@id\id_of_the_image_view_below" />

然后确保设置边距，以便水平居中

于 2016-10-06T06:36:02.373 回答
0

在这里..使用这个布局..

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/account_opening_grey_bg"
    android:baselineAligned="false"
    android:orientation="vertical"
    android:paddingBottom="10dp"
    android:paddingLeft="10dp"
    android:paddingRight="10dp" >

    <com.widgets.TextViewRobotoRegular
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_gravity="center"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:layout_weight="0.6"
        android:gravity="center"
        android:text="@string/lbl_acc_header" />

    <android.support.v7.widget.CardView
        android:id="@+id/cardStep1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardBackgroundColor="@color/white"
        card_view:cardCornerRadius="@dimen/dimen_2"
        card_view:cardElevation="@dimen/dimen_2"
        card_view:cardUseCompatPadding="true" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <View
                android:layout_width="4dp"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:background="@color/step_one_view" />

            <com.widgets.TextViewRobotoLight
                android:id="@+id/lblStepOne"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="15dp"
                android:text="@string/lbl_step_one"
                android:textColor="@color/step_one_view" />

            <com.widgets.TextViewRobotoLight
                android:id="@+id/lblStepOneDetails"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/lblStepOne"
                android:layout_alignStart="@+id/lblStepOne"
                android:layout_below="@+id/lblStepOne"
                android:layout_marginTop="5dp"
                android:text="@string/lbl_step_one_details"
                android:textColor="@color/txt_black" />

            <ImageView
                android:id="@+id/imgStep1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:src="@drawable/menu_ipo" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>

    <View
        android:layout_width="1dp"
        android:layout_height="25dp"
        android:layout_gravity="right"
        android:layout_marginRight="40dp"
        android:background="#666" />

    <android.support.v7.widget.CardView
        android:id="@+id/cardStep2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardBackgroundColor="@color/white"
        card_view:cardCornerRadius="@dimen/dimen_2"
        card_view:cardElevation="@dimen/dimen_2"
        card_view:cardUseCompatPadding="true" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <View
                android:layout_width="4dp"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:background="@color/step_two_view" />

            <com.widgets.TextViewRobotoLight
                android:id="@+id/lblStepTwo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="15dp"
                android:text="@string/lbl_step_two"
                android:textColor="@color/step_two_view" />

            <com.widgets.TextViewRobotoLight
                android:id="@+id/lblStepTwoDetails"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/lblStepTwo"
                android:layout_alignStart="@+id/lblStepTwo"
                android:layout_below="@+id/lblStepTwo"
                android:layout_marginTop="5dp"
                android:text="@string/lbl_step_two_details"
                android:textColor="@color/txt_black" />

            <ImageView
                android:id="@+id/imgStep2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:src="@drawable/menu_ipo" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>

    <View
        android:layout_width="1dp"
        android:layout_height="25dp"
        android:layout_gravity="right"
        android:layout_marginRight="40dp"
        android:background="#666" />

    <android.support.v7.widget.CardView
        android:id="@+id/cardStep3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardBackgroundColor="@color/white"
        card_view:cardCornerRadius="@dimen/dimen_2"
        card_view:cardElevation="@dimen/dimen_2"
        card_view:cardUseCompatPadding="true" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <View
                android:layout_width="4dp"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:background="@color/step_three_view" />

            <com.widgets.TextViewRobotoLight
                android:id="@+id/lblStepThree"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="15dp"
                android:text="@string/lbl_step_three"
                android:textColor="@color/step_three_view" />

            <com.widgets.TextViewRobotoLight
                android:id="@+id/lblStepThreeDetails"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/lblStepThree"
                android:layout_alignStart="@+id/lblStepThree"
                android:layout_below="@+id/lblStepThree"
                android:layout_marginTop="5dp"
                android:text="@string/lbl_step_three_details"
                android:textColor="@color/txt_black" />

            <ImageView
                android:id="@+id/imgStep3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:src="@drawable/menu_ipo" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>

    <View
        android:layout_width="1dp"
        android:layout_height="25dp"
        android:layout_gravity="right"
        android:layout_marginRight="40dp"
        android:background="#666" />

    <android.support.v7.widget.CardView
        android:id="@+id/cardStep4"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardBackgroundColor="@color/white"
        card_view:cardCornerRadius="@dimen/dimen_2"
        card_view:cardElevation="@dimen/dimen_2"
        card_view:cardUseCompatPadding="true" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <View
                android:layout_width="4dp"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:background="@color/step_four_view" />

            <com.widgets.TextViewRobotoLight
                android:id="@+id/lblStepFour"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="15dp"
                android:text="@string/lbl_step_four"
                android:textColor="@color/step_four_view" />

            <com.widgets.TextViewRobotoLight
                android:id="@+id/lblStepFourDetails"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/lblStepFour"
                android:layout_alignStart="@+id/lblStepFour"
                android:layout_below="@+id/lblStepFour"
                android:layout_marginTop="5dp"
                android:text="@string/lbl_step_four_details"
                android:textColor="@color/txt_black" />

            <ImageView
                android:id="@+id/imgStep4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:src="@drawable/menu_ipo" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>

    <View
        android:layout_width="1dp"
        android:layout_height="25dp"
        android:layout_gravity="right"
        android:layout_marginRight="40dp"
        android:background="#666" />

    <android.support.v7.widget.CardView
        android:id="@+id/cardStep5"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginBottom="25dp"
        android:layout_weight="1"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardBackgroundColor="@color/white"
        card_view:cardCornerRadius="@dimen/dimen_2"
        card_view:cardElevation="@dimen/dimen_2"
        card_view:cardUseCompatPadding="true" >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <View
                android:layout_width="4dp"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:background="@color/step_five_view" />

            <com.widgets.TextViewRobotoLight
                android:id="@+id/lblStepFive"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="15dp"
                android:layout_marginTop="15dp"
                android:text="@string/lbl_step_five"
                android:textColor="@color/step_five_view" />

            <com.widgets.TextViewRobotoLight
                android:id="@+id/lblStepFiveDetails"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/lblStepFive"
                android:layout_alignStart="@+id/lblStepFive"
                android:layout_below="@+id/lblStepFive"
                android:layout_marginTop="5dp"
                android:text="@string/lbl_step_five_details"
                android:textColor="@color/txt_black" />

            <ImageView
                android:id="@+id/imgStep5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginRight="15dp"
                android:layout_marginTop="15dp"
                android:src="@drawable/menu_ipo" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>

    <com.widgets.RobotoRegularButton
        android:id="@+id/buttonPayIn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/selector_fp_next_button"
        android:text="@string/btn_get_started"
        android:textAlignment="center"
        android:textAllCaps="true"
        android:textColor="@color/color_primary_text_color_fivep"
        android:textSize="16sp" />

</LinearLayout>
于 2016-10-06T07:08:18.103 回答