android - 如何在布局中创建步进器？

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>

任何帮助将不胜感激。

score 2 · Accepted Answer

好吧，您可以在每个活动的顶部添加此布局文件。然后在选择时更改颜色和文本。这是我刚才所说的一个例子。

首先制作一个布局文件。

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。

第一活动.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 视图。

第一活动.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();
        }
    });
}
}

这里以两个活动为例。您需要添加更多。您可以更改活动类中的视图属性。希望这可以帮助。

android - 如何在布局中创建步进器？

1 回答 1

Related

Reference