Как сделать дизайн макета вот так - PullRequest
0 голосов
/ 19 января 2020

Я пытаюсь создать макет, как это. Моя идея состоит в том, чтобы использовать горизонтальную компоновку для достижения дизайна. я не умею создавать интервалы как в этом дизайне. Кто-нибудь может помочь мне сделать это. Дизайн дан ниже. когда пользователь завершит уровень. значок изменится с красного на желтый. мы можем использовать просмотр корзины или просмотр списка? enter image description here

Ответы [ 2 ]

10 голосов
/ 28 января 2020

Этот вопрос был интересным, и после некоторого тестирования неуверенность в том, что мое решение идеально, ощущалось скорее как обходной путь, но я смог добиться аналогичного макета, используя RecyclerView и GridLayoutManager.

* 1004. * Во-первых, создано 2 векторных прямоугольника для рисования по одному для обычных держателей и когда он выделен.

как в примере ниже:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<padding android:left="2dp"
    android:top="2dp"
    android:right="2dp"
    android:bottom="2dp" />
<corners android:radius="10dp" />
<solid android:color="@color/colorAccent" />
</shape>

В макете для владелец реселлера создан вид внутри FrameLayout с этим фоном по умолчанию. Используйте android:scaleX и android:scaleY, чтобы немного уменьшить вид, и android:rotation="45", чтобы получить форму ромба. Обязательно используйте поля и отступы, чтобы фон не обрезался при вращении

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

    <View
        android:id="@+id/view"
        android:layout_width="96dp"
        android:layout_height="96dp"
        android:scaleX="0.85"
        android:scaleY="0.85"
        android:layout_margin="24dp"
        android:background="@drawable/diamond_default"
        android:rotation="45" />

    <ImageView
        android:id="@+id/iv_cup"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="16dp"
        android:layout_margin="16dp"
        android:src="@drawable/cup"
        android:scaleType="fitCenter"  />
</FrameLayout>

Вы можете показать свой кубок / трофей в ImageView

Остальное настройте горизонтальный просмотр рециркулятора с GridLayoutManager, имеющим spanCount 2.

Далее вам нужно создать класс для декорирования интервала путем расширения RecyclerView.ItemDecoration

Пример, который я использовал, приведен ниже:

public class RecyclerViewItemSpacingDecoration extends RecyclerView.ItemDecoration {

private int spaceLeft;
private int spaceRight;
private int spaceTop;
private int spaceBottom;

public RecyclerViewItemSpacingDecoration(int spaceLeft, int spaceRight, int spaceTop, int spaceBottom) {
    this.spaceLeft = spaceLeft;
    this.spaceRight = spaceRight;
    this.spaceTop = spaceTop;
    this.spaceBottom = spaceBottom;
}

@Override
public void getItemOffsets(Rect outRect, View view,
                           RecyclerView parent, RecyclerView.State state) {
    if(parent.getChildLayoutPosition(view) % 2 == 0) {
        outRect.left = spaceLeft;
        outRect.right = spaceRight;
        outRect.top = spaceTop;
        outRect.bottom = spaceBottom;
    } else {
        outRect.left = 0;
        outRect.right = 0;
        outRect.top = 0;
        outRect.bottom = 0;
    }
  }
}

Используйте проверку положения% 2, чтобы добавить интервал только к одной строке gridLayout. Затем добавьте это к вашему представлению переработчика, используя rv.addItemDecoration(new RecyclerViewItemSpacingDecoration(148, -148, 112, -112)); Интервал нужно будет отрегулировать в соответствии с размером вашего представления.

Вам нужно будет добавить android:paddingEnd="84dp" android:clipToPadding="false" аналогичных кодов, чтобы предотвратить срезание повторного просмотра в конце из-за добавленного пространство для украшения.

И когда необходимо выделить viewHolder внутри onBindViewHolder(), вы можете установить выделенный фон и увеличить его, чтобы получить желаемый эффект от viewHolder.view.setBackground(viewHolder.itemView.getContext().getDrawable(R.drawable.diagonal_highlighted)); viewHolder.view.setScaleX(1.05f); viewHolder.view.setScaleY(1.05f); Вы можете добавить анимацию для этого масштабирования для улучшения эффектов. ,

Наконец достигните чего-то подобного:

sample layout

Надеюсь, что этот ответ поможет вам в некотором роде.

1 голос
/ 25 января 2020

Вы можете создать этот вид фигуры (ромб) с помощью векторного рисования, а интервал - с помощью StaggeredGridLayoutManager с видом переработчика.

...