使水平回收器视图项目的宽度为屏幕宽度的 70%答案

【问题标题】：Make width of horizontal recycler view items 70% of screen width使水平回收器视图项目的宽度为屏幕宽度的 70%
【发布时间】：2016-07-29 07:54:01
【问题描述】：

我正在尝试创建这种效果

我正在使用回收站视图，但我的问题是每张卡片都是屏幕宽度的 100%，而不是 70%。

这是每个项目的xml代码

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rowLayout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/scale_20dp">

    <LinearLayout
        android:id="@+id/button_parent"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <android.support.v7.widget.CardView
            android:id="@+id/card_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <LinearLayout
                android:id="@+id/currentYear"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:background="@drawable/paymentscreengrey"
                android:gravity="center"
                android:orientation="vertical"
                android:paddingLeft="35dp"
                android:paddingTop="@dimen/scale_50dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/scale_20dp"
                    android:text="****   ****   ****   5432"
                    android:textColor="@color/white"
                    android:textSize="@dimen/scale_20dp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="2345"
                    android:textColor="@color/white"
                    android:textSize="@dimen/scale_16dp" />

【问题讨论】：

您可以使用视图寻呼机代替回收站视图，默认情况下您需要此功能refer this
你能动态添加项目到浏览器吗？
是的，您可以动态添加/删除视图寻呼机
是否可以让viewpager只占用70%的屏幕尺寸？
@saravinfern -》能否请您指出viewpager的具体方法？

标签： android xml android-layout

【解决方案1】：

如果您希望第一项左对齐（即重现屏幕截图中的内容），请继承 LinearLayoutManager 并覆盖三个 generate*LayoutParams 方法。我是这样做的：https://gist.github.com/bolot/6f1838d29d5b8a87b5fcadbeb53fb6f0。

class PeekingLinearLayoutManager : LinearLayoutManager {
    @JvmOverloads
    constructor(context: Context?, @RecyclerView.Orientation orientation: Int = RecyclerView.VERTICAL, reverseLayout: Boolean = false) : super(context, orientation, reverseLayout)

    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int, defStyleRes: Int) : super(context, attrs, defStyleAttr, defStyleRes)

    override fun generateDefaultLayoutParams() =
        scaledLayoutParams(super.generateDefaultLayoutParams())

    override fun generateLayoutParams(lp: ViewGroup.LayoutParams?) =
        scaledLayoutParams(super.generateLayoutParams(lp))

    override fun generateLayoutParams(c: Context?, attrs: AttributeSet?) =
        scaledLayoutParams(super.generateLayoutParams(c, attrs))

    private fun scaledLayoutParams(layoutParams: RecyclerView.LayoutParams) =
        layoutParams.apply {
            when(orientation) {
                HORIZONTAL -> width = (horizontalSpace * ratio).toInt()
                VERTICAL -> height = (verticalSpace * ratio).toInt()
            }
        }

    private val horizontalSpace get() = width - paddingStart - paddingEnd

    private val verticalSpace get() = height - paddingTop - paddingBottom

    private val ratio = 0.9f // change to 0.7f for 70%
}

此解决方案基于/启发于跨越（即，使所有项目适合屏幕）线性布局管理器 https://gist.github.com/heinrichreimer/39f9d2f9023a184d96f8。

顺便说一句，如果您只想在左侧和右侧显示项目，而当前项目居中，您可以在回收站视图中添加填充并将clipToPadding 设置为false。在这种情况下，您甚至不需要自定义布局管理器。

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:paddingStart="16dp"
    android:paddingEnd="16dp"
    android:clipToPadding="false"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager">

【讨论】：

美丽的答案，真的很喜欢：)
我认为这不是一个好的答案，因为在平板电脑中我们也会有“ratio = 0.9f”的项目，但我们不需要它
虽然我使用了@Peterdk 的解决方案，但感谢android:clipToPadding="false"（带填充）。填充取决于屏幕大小和比例。

【解决方案2】：

我需要将水平 RecyclerView 中的项目设置为 recyclerview 宽度的 70%。在onCreateViewHolder()可以轻松搞定：

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
        val view = LayoutInflater.from(context).inflate(R.layout.row, parent, false);
        view.layoutParams = ViewGroup.LayoutParams((parent.width * 0.7).toInt(),ViewGroup.LayoutParams.MATCH_PARENT)
        return ViewHolder(view);
    }

【讨论】：

或者只是view.layoutParams.width = (parent.width * 0.7).toInt()。只有这个解决方案对我有帮助。
我使用了parent.measuredWidth 而不是parent.width。这是唯一适用于我的案例的解决方案

【解决方案3】：

真正做到这一点的两种方法。

1) 为您的回收视图使用自定义视图。覆盖 onMeasure 以将其宽度返回为屏幕的 70%。

2)在您的 Recycler View 适配器中，当您创建视图时，将其宽度设置为屏幕宽度的 70%。

无论哪种情况，您都可以从显示器获得屏幕尺寸，然后将宽度乘以 0.7。在第一种情况下，您将其设置为精确测量的宽度，在第二种情况下，您将其设置在布局参数中。第二个可能更容易一些。

【讨论】：

我尝试了 2，但它从未奏效，尽管它调整了视图的大小，项目底部和左侧的所有项目都从屏幕上消失了。如果我尝试您的第一个答案，我会不会遇到同样的问题？

【解决方案4】：

我有一个类似的问题，我有一个带有水平 RecyclerView 的片段，并希望每个视图项的宽度为用户屏幕的三分之一。通过在我们的 ViewHolder 类的构造函数中添加以下内容来解决它：

    private class OurViewHolder extends RecyclerView.ViewHolder {
        ...

        public OurViewHolder (LayoutInflater inflater, ViewGroup parent) {
            super (inflater.inflate (R.layout.list_item_layout, parent, false));

            // This code is used to get the screen dimensions of the user's device
            DisplayMetrics displayMetrics = new DisplayMetrics();
            getActivity().getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
            int width = displayMetrics.widthPixels;
            int height = displayMetrics.heightPixels;

            // Set the ViewHolder width to be a third of the screen size, and height to wrap content
            itemView.setLayoutParams(new RecyclerView.LayoutParams(width/3, RecyclerView.LayoutParams.WRAP_CONTENT));

            ...
        }

        ...

【讨论】：

这会给出问题中显示的结果吗？不，它现在显示 3 个项目！
感谢这就像魅力一样，刚刚通过活动的显示指标

【解决方案5】：

对于您的 row.xml 父级，您必须使用 wrap_content 作为其宽度，然后添加此属性。

android:paddingLeft="25dp"

你会得到同样的结果

【讨论】：

【解决方案6】：

刚刚从this 答案更新了一点，添加了边距并从资源中获取 displayMetrics 以使其干净：

inner class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {

        fun bind(product: StyleMaster) = with(itemView) {
            val width = context.resources.displayMetrics?.widthPixels
            if (width != null) {
                val params = RecyclerView.LayoutParams(width / 2, RecyclerView.LayoutParams.WRAP_CONTENT)
                params.setMargins(2, 2, 2, 2)
                itemView.layoutParams = params
            }
// Rest of the code goes here...

【讨论】：

【解决方案7】：

尝试将 LinearLayout 更改为 PercentRelativeLayout 以“包裹”RecyclerView，然后将其宽度设置为 70%。

改变这个：

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rv"
        />

</LinearLayout>

有了这个：

<android.support.percent.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_widthPercent="70%"
            android:id="@+id/rv"
            />

编辑

由于百分比支持库随 Android 支持库 23 一起提供，因此请确保您已将 SDK 管理器中的 Android 支持库更新到最新版本（实际上是 24）。然后在build.gradle文件中添加如下依赖：

compile 'com.android.support:percent:24.0.0'

【讨论】：

不幸的是，这从来没有奏效，它只是让回收站查看 70% 的宽度，而不是里面的项目你看我添加的图片来显示我在找什么吗？