Увеличьте ширину ячейки в RecyclerView с помощью GridLayoutManager - PullRequest
0 голосов
/ 20 ноября 2018

У меня есть RecyclerView с GridLayoutManager с spanCount=2 и Vertical ориентацией.

Мои элементы правильно отображаются, как показано ниже:

Теперь мне нужно добавить анимацию, когда при нажатии на один из элементов, скажем, цифрой «3», этот элемент увеличивает свою ширину и нажимает на элемент рядом с ним (в данном примере, цифрой «4»") частично вне родителя / экрана.

Визуально это будет выглядеть примерно так:

Чтобы развернуть элемент, я устанавливаю видимость на VISIBLE для вида внутри элемента, а чтобы свернуть его, установите видимость на GONE.

. На данный момент явозможность показать и скрыть это представление, но оно занимает только пространство элемента, оно увеличивает ширину, нажимая на элемент рядом с ним.

Итак, мои вопросы:

  • Можно ли использовать для этого GridLayoutManager по умолчанию?
  • Какой будет хороший подход для достижения этой цели?

Ответы [ 2 ]

0 голосов
/ 25 ноября 2018

Можно использовать GridLayoutManager следующим образом:

  • Определить GridLayoutManager с двумя пролетами.
  • Настроить макет элемента, который включает в себя интерактивный вид идля вида, который будет установлен на VISIBLE и GONE.
  • В адаптере, когда, скажем, левый вид нажимается, установите расширяемый вид на VISIBLE, увеличьте размер itemView по ширине расширяемого вида.Переведите представление вправо на величину расширения, чтобы приспособиться к увеличенному размеру левого представления.
  • Выполните некоторую уборку, чтобы убедиться, что восстановленные представления сброшены.

Здесьэто пример.Я предполагаю, что можно щелкнуть только левый вид.Общий процесс аналогичен для правого представления, если его также можно щелкнуть, но детали отличаются в том, что необходимо перевести, и т. Д.

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

enter image description here

MainActivityjava

public class MainActivity extends AppCompatActivity {  
    private LinearLayoutManager mLayoutManager;  
    private RecyclerViewAdapter mAdapter;  
    private List<String> mItems = new ArrayList<>();  
    private RecyclerView mRecycler;  

    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  

        for (int i = 0; i < 100; i++) {  
            mItems.add(i + 1 + "");  
        }  

        mLayoutManager = new GridLayoutManager(this, 2);  
        mRecycler = findViewById(R.id.recyclerView);  
        mAdapter = new RecyclerViewAdapter(mItems);  
        mRecycler.setLayoutManager(mLayoutManager);  
        mRecycler.setAdapter(mAdapter);  
    }  
}

RecyclerViewAdapter.java
Этот демонстрационный адаптер предполагает наличие четного числа элементов для отображения.Для простоты нулевые проверки не были закодированы.

class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>
    implements View.OnClickListener {
    private final List<String> mItems;
    private RecyclerView mRecyclerView;

    RecyclerViewAdapter(List<String> items) {
        mItems = items;
    }

    @Override
    public void onAttachedToRecyclerView(@NonNull RecyclerView recyclerView) {
        mRecyclerView = recyclerView;
    }

    @Override
    public @NonNull
    RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item, parent, false);
        return new ItemViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
        ItemViewHolder vh = (ItemViewHolder) holder;

        vh.mItemTextView.setText(mItems.get(position));

        // Only allow clicks on left items which corresponds to even positions.
        vh.mItemTextView.setOnClickListener((position % 2 == 0) ? this : null);

        // Reset translation and expansion if viewholder is reused.
        vh.itemView.setTranslationX(0);
        if (vh.mExpansion != 0) {
            vh.itemView.getLayoutParams().width -= vh.mExpansion;
            vh.mExpansion = 0;
            vh.mGoneView.setVisibility(View.GONE);
        }

        int bgColor = (position % 2 == 0)
            ? android.R.color.holo_blue_light
            : android.R.color.holo_green_light;
        vh.mItemTextView.setBackgroundColor(vh.itemView.getContext().getResources().getColor(bgColor));
    }

    @Override
    public int getItemCount() {
        return (mItems == null) ? 0 : mItems.size();
    }

    @Override
    public int getItemViewType(int position) {
        return TYPE_ITEM;
    }

    @Override
    public void onClick(View v) {
        ItemViewHolder vh = (ItemViewHolder) mRecyclerView.findContainingViewHolder(v);
        View itemView = vh.itemView;

        // Get the child to the right. This child will be translated to the right to make room
        // for the expanded left view.
        View rightChild = mRecyclerView.getChildAt(findRightChildPos(vh.itemView));
        if (vh.mGoneView.getVisibility() == View.GONE) {
            // Reveal the "GONE" view, expand the itemView and translate the right-hand view.
            vh.mGoneView.setVisibility(View.VISIBLE);
            int translation = vh.mGoneView.getLayoutParams().width;
            itemView.getLayoutParams().width = itemView.getWidth() + translation;

            // Works with "GONE" view of fixed width. Make adjustments if width is variable.
            rightChild.setTranslationX(translation);
            vh.mExpansion = translation;
        } else { // View is expanded.
            // Undo the expansion changes.
            vh.mGoneView.setVisibility(View.GONE);
            itemView.getLayoutParams().width = itemView.getWidth() - vh.mExpansion;
            vh.mExpansion = 0;
            rightChild.setTranslationX(0);
        }
    }

    // Find the child to the right of a view within the RecyclerView.
    private int findRightChildPos(View view) {
        for (int i = 0; i < mRecyclerView.getChildCount(); i++) {
            if (mRecyclerView.getChildAt(i) == view) {
                return i + 1;
            }
        }
        return RecyclerView.NO_POSITION;
    }

    static class ItemViewHolder extends RecyclerView.ViewHolder {
        final TextView mItemTextView;
        final View mGoneView;
        int mExpansion;

        ItemViewHolder(View item) {
            super(item);
            mItemTextView = item.findViewById(R.id.textView);
            mGoneView = item.findViewById(R.id.expandingView);
        }
    }

    private final static int TYPE_ITEM = 1;
}

recycler_item.xml

<LinearLayout 
    android:id="@+id/item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:clickable="true"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:textSize="48sp"
        tools:background="@android:color/holo_blue_light"
        tools:text="1" />

    <View
        android:id="@+id/expandingView"
        android:layout_width="100dp"
        android:layout_height="match_parent"
        android:background="@android:color/holo_purple"
        android:visibility="gone" />

    <View
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:background="@android:color/holo_red_light" />
</LinearLayout>
0 голосов
/ 23 ноября 2018

Я вижу, как реализовать это, используя HorizontalScrollView / RecyclerView с LinearLayoutManager.Вместо того, чтобы использовать GridLayoutManager с двумя столбцами, вы можете использовать LinearLayoutManager с такими представлениями:

__|HorizontalScrollView/RecyclerView| | [Firts view] [Second view] | |---------------------------------|

Тогда будет просто реализовать расширенные представления.

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

...