如何在布局中創建步進器？

Question

我要創建步進器，如上圖所示。 下面是我嘗試過的代碼。 圓圈下方的文字應位於圓圈的中心。 在瀏覽下一個活動時，應更改每行的顏色。 導航到下一個活動時，還應更改每個圓圈的顏色。

  <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/padding_title"
            android:layout_gravity="center"
            android:gravity="center"
            android:orientation="horizontal"
            android:visibility="visible">


            <View
                android:id="@+id/circle_one"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:background="@drawable/ic_gray_hollow_circle" />

            <View
                android:id="@+id/line_one"
                android:layout_width="76dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/circle_one"
                android:background="@drawable/ic_gray_line" />

            <View
                android:id="@+id/circle_two"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/line_one"
                android:background="@drawable/ic_gray_hollow_circle" />

            <View
                android:id="@+id/line_two"
                android:layout_width="76dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/circle_two"
                android:background="@drawable/ic_gray_line" />

            <View
                android:id="@+id/circle_three"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/line_two"
                android:background="@drawable/ic_gray_hollow_circle" />

            <View
                android:id="@+id/line_three"
                android:layout_width="76dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/circle_three"
                android:background="@drawable/ic_gray_line" />

            <View
                android:id="@+id/circle_four"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_toEndOf="@+id/line_three"
                android:background="@drawable/ic_gray_hollow_circle" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/circle_one"
                android:text="Pay"
                android:textColor="#dbdbdb" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@+id/circle_two"
                android:layout_toEndOf="@id/line_one"
                android:text="Amount"
                android:textColor="#dbdbdb" />

        </RelativeLayout>

任何幫助將不勝感激。

Answer 1

好了，您可以在每個活動的頂部添加此布局文件。 然后在選擇時更改顏色和文本。 這是我剛才說的一個例子。

首先制作一個布局文件。

stepper_layout.xml

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/padding_title"
        android:layout_gravity="center"
        android:gravity="center"
        android:orientation="horizontal"
        android:visibility="visible">

        <View
            android:id="@+id/circle_one"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:background="@drawable/ic_gray_hollow_circle" />

        <View
            android:id="@+id/line_one"
            android:layout_width="76dp"
            android:layout_height="15dp"
            android:layout_toEndOf="@+id/circle_one"
            android:background="@drawable/ic_gray_line" />

        <View
            android:id="@+id/circle_two"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_toEndOf="@+id/line_one"
            android:background="@drawable/ic_gray_hollow_circle" />

        <View
            android:id="@+id/line_two"
            android:layout_width="76dp"
            android:layout_height="15dp"
            android:layout_toEndOf="@+id/circle_two"
            android:background="@drawable/ic_gray_line" />

        <View
            android:id="@+id/circle_three"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_toEndOf="@+id/line_two"
            android:background="@drawable/ic_gray_hollow_circle" />

        <View
            android:id="@+id/line_three"
            android:layout_width="76dp"
            android:layout_height="15dp"
            android:layout_toEndOf="@+id/circle_three"
            android:background="@drawable/ic_gray_line" />

        <View
            android:id="@+id/circle_four"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_toEndOf="@+id/line_three"
            android:background="@drawable/ic_gray_hollow_circle" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/circle_one"
            android:text="Pay"
            android:textColor="#dbdbdb" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/circle_two"
            android:layout_toEndOf="@id/line_one"
            android:text="Amount"
            android:textColor="#dbdbdb" />

    </RelativeLayout>

在FirstActivity布局中添加stepper_layout。

FirstActivity.xml

<?xml version="1.0" encoding="utf-8"?>  
<android.support.constraint.ConstraintLayout      
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">

<include layout="@layout/stepper_layout" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="First!"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

在SecondActivity布局中添加stepper_layout。

SecondActivity.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
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">

<include layout="@layout/stepper" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Second"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

   </android.support.constraint.ConstraintLayout>

根據需要更改stepper_layout視圖。

FirstActivity.java

public class FirstActivity extends AppCompatActivity {

@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    final View view = findViewById(R.id.circle_one);
    view.setBackground(getResources().getDrawable(R.drawable.ic_green));

    final View view2 = findViewById(R.id.circle_two);
    view2.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(FirstActivity.this, SecondActivity.class);
            startActivity(intent);
            finish();
        }
    });
}
}

根據需要更改stepper_layout視圖。

SecondActivity.java

public class SecondActivity extends AppCompatActivity {

@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_second);

    final View view2 = findViewById(R.id.circle_two);
    view2.setBackground(getResources().getDrawable(R.drawable.ic_green));

    final View view = findViewById(R.id.circle_one);
    view.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(SecondActivity.this, FirstActivity.class);
            startActivity(intent);
            finish();
        }
    });
}
}

這里以兩個活動為例。 您需要添加更多。 您可以在活動類中更改視圖屬性。 希望這可以幫助。