WearableRecyclerView 不将列表项居中

Question

几天来，我一直在尝试制作一个列表，其效果与某些 Wear OS 应用程序的效果相同，例如 Google Play Store，其中列表正在缩小正在消失的项目并扩展正在出现的新项目：

我遵循了 Google Developers 文档，问题是当我将自定义布局管理器应用于它时，这些项目不会保持居中，它们看起来像这样：

这是我使用的代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.wear.widget.BoxInsetLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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"
    android:padding="@dimen/box_inset_layout_padding"
    tools:context=".ui.activity.HomeActivity"
    tools:deviceIds="wear">

    <androidx.wear.widget.WearableRecyclerView
        android:id="@+id/wearable_recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</androidx.wear.widget.BoxInsetLayout>

private fun setupAdapter() {
    val homeOptionsAdapter = HomeOptionsAdapter(petList)
    val customScrollingLayoutCallback = CustomScrollingLayoutCallback()
    recyclerWearable.layoutManager = WearableLinearLayoutManager(
       this, 
       customScrollingLayoutCallback
    )
    recyclerWearable.isEdgeItemsCenteringEnabled = true
    recyclerWearable.adapter = homeOptionsAdapter
}

private const val MAX_ICON_PROGRESS = 2f

class CustomScrollingLayoutCallback : WearableLinearLayoutManager.LayoutCallback() {

    private var progressToCenter: Float = 0f

    override fun onLayoutFinished(child: View, parent: RecyclerView) {
        child.apply {
            // Figure out % progress from top to bottom
            val centerOffset = height.toFloat() / 2.0f / parent.height.toFloat()
            val yRelativeToCenterOffset = y / parent.height + centerOffset

            // Normalize for center
            progressToCenter = abs(0.5f - yRelativeToCenterOffset)
            // Adjust to the maximum scale
            progressToCenter = progressToCenter.coerceAtMost(MAX_ICON_PROGRESS)

            scaleX = 1 - progressToCenter.pow(2f)
            scaleY = 1 - progressToCenter.pow(2f)
        }
    }
}

我用选项 setEdgeItemsCenteringEnabled 读到了列表居中，但我没有看到它居中，我该怎么办？

Answer 1

我有/遇到过同样的问题，这是我能得到的最好的解决方法：

视频演示：video link

主要的.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- OPTIONAL -->
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#000000"
    tools:context=".Main"
    android:id="@+id/main">

<!-- REQUIRED-->
    <androidx.wear.widget.WearableRecyclerView
        android:id="@+id/recycler_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

<!-- OPTIONAL -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/top_shadow"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@drawable/gradient_shadow"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">
    </androidx.constraintlayout.widget.ConstraintLayout>

<!-- OPTIONAL -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/bottom_shadow"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@drawable/gradient_shadow"
        android:rotation="180"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent">
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

渐变阴影.xml //OPTIONAL

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <gradient
        android:type="linear"
        android:centerX="100%"
        android:startColor="#DD000000"
        android:endColor="#00000000"
        android:angle="-90"/>
</shape>

list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="56sp"
    android:layout_marginBottom="3sp"
    android:background="@drawable/list_design">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginStart="18sp"
        android:background="#FF0000"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/avatars" />

    <TextView
        android:id="@+id/list_main_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="10sp"
        android:text="List item"
        android:textColor="@color/white"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

list_design.item

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/gray"></solid>
    <corners android:radius="50dp"/>
</shape>

customScrollingLayoutCallback

// I have this "math" from another app that I was design in javascript for smartphone a long time ago... I dont remember why each part, so, sorry, cant explain hahaha

//I just added the if part and alpha

public void onLayoutFinished(View child, RecyclerView parent) {
    int height_parent = parent.getHeight();

    float half_height_parent = (float) parent.getHeight() / 2;

    int child_max_width = parent.getWidth();

    float child_new_width = ((1 - Math.abs((child.getY() - half_height_parent + 45) / height_parent)) * height_parent);

    float equivalent_scale = child_new_width / child_max_width;

    child.setAlpha(equivalent_scale);

    if(child_new_width > (child_max_width * 0.63)) {
        child.setScaleX(0.96f);
        child.setScaleY(1);
    } else {
        child.setScaleX(equivalent_scale + 0.2f);
        child.setScaleY(0.98f);
    }
}