Android: Wie kann ich erreichen, das layout so?

Ich bin in der Lage, dies zu tun, verwenden Sie folgenden code. Aber problem ist "Shipping Address" und "1" TextView muss zentriert werden, um vertikale Linie(unterhalb der "1" sollte es sein, Zentrum der "Lieferadresse" TextView).

neccesary_part_of_layout.xml

       <RelativeLayout
            android:id="@+id/fcm_rl_scroll"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="50dp"
            android:layout_marginRight="50dp">


            <ProgressBar
                android:id="@+id/mProgressBar"
                style="@android:style/Widget.DeviceDefault.Light.ProgressBar.Horizontal"
                android:layout_width="wrap_content"
                android:layout_height="5dp"
                android:layout_centerInParent="true"
                android:layout_weight="1"
                android:focusable="false"
                android:nestedScrollingEnabled="false"
                android:progress="100"
                android:progressDrawable="@drawable/custom_progress_bar"
                android:secondaryProgress="100"
                android:visibility="visible" />

            <TextView
                android:id="@+id/fcm_tv_step1"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignBaseline="@+id/mProgressBar"
                android:layout_alignLeft="@+id/mProgressBar"
                android:layout_alignStart="@+id/mProgressBar"
                android:layout_centerVertical="true"
                android:background="@drawable/bg_round_filled_white"
                android:gravity="center"
                android:text="1"
                android:textColor="@color/colorPrimary"
                android:textSize="@dimen/sp16" />


            <TextView
                android:id="@+id/fcm_tv_step1text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/fcm_tv_step1"
                android:layout_marginTop="@dimen/dp40"
                android:text="Shopping Address"
                android:textColor="@color/white"
                android:textSize="@dimen/sp16" />


            <TextView
                android:id="@+id/fcm_tv_step22"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignBaseline="@+id/mProgressBar"
                android:layout_alignLeft="@+id/mProgressBar"
                android:layout_alignStart="@+id/mProgressBar"
                android:layout_centerVertical="true"
                android:layout_marginLeft="150dp"
                android:layout_toRightOf="@+id/fcm_tv_step1"
                android:background="@drawable/bg_round_filled_white"
                android:gravity="center"
                android:text="2"
                android:textColor="@color/colorPrimary"
                android:textSize="@dimen/sp16" />


            <TextView
                android:id="@+id/fcm_tv_step22text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/fcm_tv_step22"
                android:layout_marginLeft="150dp"
                android:layout_marginTop="@dimen/dp40"
                android:layout_toRightOf="@+id/fcm_tv_step1text"
                android:text="Address"
                android:textColor="@color/white"
                android:textSize="@dimen/sp16" />
        </RelativeLayout>

Dies ist, was ich erreicht habe mit obigen code:

Android: Wie kann ich erreichen, das layout so?

Problem im Detail:

Ich weiß ProgressBar(Sie können jede Ansicht temporär) auf, das will ich TextView mit Schritt-Nummern. und unterhalb jeder Zahl möchte ich Schritt Titel sowohl zentriert ausgerichtet, um jeden-anderen.

Wie kann ich das erreichen? Ich versuchte, um es im layout, sondern, dass Pausen Abhängigkeit mit Fortschrittsbalken.

InformationsquelleAutor Er. Kaushik Kajavadara | 2017-03-08

Habe ich endlich das Problem gelöst mit ConstraintLayout. Dank 'Google' für die Bereitstellung solcher ein gutes layout, das ermöglicht eine bessere Anpassung.

<HorizontalScrollView
    android:id="@+id/checkout_hsv_scrollview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:layout_constraintLeft_creator="1"
    tools:layout_constraintRight_creator="1">

    <android.support.constraint.ConstraintLayout
        android:layout_width="wrap_content"
        android:layout_height="@dimen/checkout_steps_view_height"
        android:layout_marginBottom="@dimen/checkout_steps_view_margin_bottom"
        android:layout_marginTop="@dimen/checkout_steps_view_margin_top"
        android:minWidth="@dimen/checkout_steps_view_minwidth">

        <ProgressBar
            android:id="@+id/progressBar2"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="@dimen/checkout_progressbar_width"
            android:layout_height="@dimen/checkout_progressbar_height"
            android:layout_marginLeft="@dimen/checkout_steps_side_margin"
            android:layout_marginRight="@dimen/checkout_steps_side_margin"
            android:progressDrawable="@drawable/custom_progress_bar"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/fcm_tv_step1"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"

            android:text="@string/str_checkout_step1"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintRight_toLeftOf="@+id/progressBar2"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step1text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name1"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step1"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step1"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step1" />

        <TextView
            android:id="@+id/fcm_tv_step2"
            android:layout_width="@dimen/checkout_step_big_node_size"
            android:layout_height="@dimen/checkout_step_big_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step2"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step1"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step2text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name2"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_big_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step2"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step2"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step2" />

        <TextView
            android:id="@+id/fcm_tv_step3"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step3"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step2"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step3text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name3"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step3"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step3"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step3" />

        <TextView
            android:id="@+id/fcm_tv_step4"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step4"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step3"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step4text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name4"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step4"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step4"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step4" />

        <TextView
            android:id="@+id/fcm_tv_step5"
            android:layout_width="@dimen/checkout_step_small_node_size"
            android:layout_height="@dimen/checkout_step_small_node_size"
            android:layout_marginLeft="@dimen/checkout_step_two_node_margin"
            android:layout_marginStart="@dimen/checkout_step_two_node_margin"
            android:background="@drawable/bg_round_filled_white"
            android:gravity="center"
            android:text="@string/str_checkout_step5"
            android:textColor="@color/colorPrimary"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintBottom_toBottomOf="@+id/progressBar2"
            app:layout_constraintLeft_toRightOf="@+id/fcm_tv_step4"
            app:layout_constraintTop_toTopOf="@+id/progressBar2" />

        <TextView
            android:id="@+id/fcm_tv_step5text"
            android:layout_width="@dimen/checkout_step_name_width"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="@dimen/dp10"
            android:text="@string/str_checkout_step_name5"
            android:textColor="@color/white"
            android:textSize="@dimen/checkout_step_small_node_font_size"
            app:layout_constraintLeft_toLeftOf="@+id/fcm_tv_step5"
            app:layout_constraintRight_toRightOf="@+id/fcm_tv_step5"
            app:layout_constraintTop_toBottomOf="@+id/fcm_tv_step5" />
    </android.support.constraint.ConstraintLayout>
</HorizontalScrollView>

Kontaktieren Sie mich, wenn jemand will helfen, design diese Art von layout. Ich denke, ich bin Experte nun nutzen ConstaintLayout.

Hi, hast du die vollständige Beispiel-oder vielleicht die Dimensionen und hintergrund Stile? Dank

InformationsquelleAutor Er. Kaushik Kajavadara

Überprüfen Sie diese schöne Bibliothek für Schritt anzeigen https://github.com/baoyachi/StepView?utm_source=android-arsenal.com&utm_medium=referral&utm_campaign=3774

Probe

<com.baoyachi.stepview.HorizontalStepView
            android:id="@+id/step_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            />

HorizontalStepView setpview5 = (HorizontalStepView) mView.findViewById(R.id.step_view5);
        List<StepBean> stepsBeanList = new ArrayList<>();
        StepBean stepBean0 = new StepBean("接单",1);
        StepBean stepBean1 = new StepBean("打包",1);
        StepBean stepBean2 = new StepBean("出发",1);
        StepBean stepBean3 = new StepBean("送单",0);
        StepBean stepBean4 = new StepBean("完成",-1);
        stepsBeanList.add(stepBean0);
        stepsBeanList.add(stepBean1);
        stepsBeanList.add(stepBean2);
        stepsBeanList.add(stepBean3);
        stepsBeanList.add(stepBean4);


        setpview5
                .setStepViewTexts(stepsBeanList)//总步骤
                .setTextSize(12)//set textSize
                .setStepsViewIndicatorCompletedLineColor(ContextCompat.getColor(getActivity(), android.R.color.white))//设置StepsViewIndicator完成线的颜色
                .setStepsViewIndicatorUnCompletedLineColor(ContextCompat.getColor(getActivity(), R.color.uncompleted_text_color))//设置StepsViewIndicator未完成线的颜色
                .setStepViewComplectedTextColor(ContextCompat.getColor(getActivity(), android.R.color.white))//设置StepsView text完成线的颜色
                .setStepViewUnComplectedTextColor(ContextCompat.getColor(getActivity(), R.color.uncompleted_text_color))//设置StepsView text未完成线的颜色
                .setStepsViewIndicatorCompleteIcon(ContextCompat.getDrawable(getActivity(), R.drawable.complted))//设置StepsViewIndicator CompleteIcon
                .setStepsViewIndicatorDefaultIcon(ContextCompat.getDrawable(getActivity(), R.drawable.default_icon))//设置StepsViewIndicator DefaultIcon
                .setStepsViewIndicatorAttentionIcon(ContextCompat.getDrawable(getActivity(), R.drawable.attention));//设置StepsViewIndicator AttentionIcon

In meinem Layout habe ich Sie mehrere <com.baoyachi.stepview.HorizontalStepView android:id="@+id/step_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" /> mit id stepview0, stepview1 bis 5?

InformationsquelleAutor Rajesh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.