Как создать степпер в макете?

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>

Любая помощь будет оценена.

3

android android-layout stepper

Источник

user5246397 10 май '18 в 08:20

1 ответ

Другие вопросы по тегам android android-layout stepper

user6075059 10 май '18 в 09:31 2018-05-10 09:31 · Answer 1 · 2018-05-10 09:31

Ну, вы можете добавить этот файл макета в верхней части каждого действия. А затем измените цвет и текст на выделение. Вот пример того, что я только что сказал.

Сначала сделайте файл макета.

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>

Добавьте stepper_layout в макет FirstActivity.

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>

Добавьте stepper_layout в макет SecondActivity.

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();
        }
    });
}
}

Два действия приведены в качестве примера здесь. Вам нужно добавить больше из них. И вы можете изменить атрибуты представления в классах деятельности. Надеюсь это поможет.