Home / Questions / 119010
Accepted
V0LT3RR4
Asked: 2020-11-21 20:56:55 +0800 CST 2020-11-21 20:56:55 +0800 CST

修复组件的布局和大小（RecyclerView）？

  • 772

我有一个card_video.xml（这是我填充的元素RecyclerView），根据 Android Studio 的设计视图，它应该看起来像这样，我知道由于每个设备的属性，它并不总是这样，但它应该看起来像这样对于每个元素：

在此处输入图像描述

其中有以下代码： 

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardCornerRadius="15dp"
    app:cardUseCompatPadding="true">

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="1">
        <TextView
            android:layout_weight=".1"
            android:paddingLeft="10dp"
            android:id="@+id/textViewIndex"
            android:textSize="20sp"
            android:layout_gravity="center_vertical"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="1"/>
        <TextView
            android:layout_weight=".8"
            android:id="@+id/textViewNameCourse"
            android:textAlignment="center"
            android:layout_gravity="center_vertical"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:textSize="16sp"
            android:text="Introduction"/>

        <ImageButton
            android:id="@+id/imageButtonSee"
            style="@style/Widget.AppCompat.Button.Borderless.Colored"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight=".1"
            android:src="@drawable/ic_eye_black_24dp" />
    </LinearLayout>

</android.support.v7.widget.CardView>

当用数据填充 Recycler 时，它最终看起来像这样：
在此处输入图像描述

这里是适配器的代码

public class VideoAdapter extends RecyclerView.Adapter<VideoAdapter.ViewHolder>{

    ArrayList<Video> nVideoList;
    private int layout;
    private static OnItemClickListener listener;


    public VideoAdapter(ArrayList<Video> nVideoList, int layout, OnItemClickListener listener) {
        this.nVideoList = nVideoList;
        this.layout = layout;
        this.listener = listener;
    }


    @Override
    public VideoAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(layout, parent, false);
        return new VideoAdapter.ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(VideoAdapter.ViewHolder holder, int position) {
        holder.index.setText((position+1)+"");
        holder.name.setText(nVideoList.get(position).getName());
        //events
    }

    @Override
    public int getItemCount() {
        return nVideoList.size();
    }


    public static class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener{

        TextView name;
        TextView index;
        ImageView imageView;
        public ViewHolder(View itemView) {
            super(itemView);
            name = itemView.findViewById(R.id.textViewNameCourse);
            index = itemView.findViewById(R.id.textViewIndex);
            imageView = itemView.findViewById(R.id.imageButtonSee);
            imageView.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
            // Llamas el método onItemClickListener() de la interfaz OnItemClickListener
            listener.onItemClickListener(view, getLayoutPosition());
        }
    }
    public interface OnItemClickListener{
        // Este método recibe como parámetro la vista del elemento seleccionado
        void onItemClickListener(View view, int position);
    }
}

这是 RecyclerView 所在的 XML：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.vycto.atomiccourses.VideoActivity">

    <LinearLayout
        android:id="@+id/linearLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="horizontal"
        android:weightSum="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageButton
            android:id="@+id/buttonBackToCourses"
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".33"
            android:src="@drawable/ic_arrow_back_white_24dp" />

        <ImageButton
            android:id="@+id/buttonHome"
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".33"
            android:src="@drawable/ic_home_white" />

        <ImageButton
            style="@style/Widget.AppCompat.Button.Colored"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight=".33"
            android:src="@drawable/ic_list_white" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="12dp"
        android:orientation="vertical"
        android:padding="10dp"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/linearLayout">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:cardCornerRadius="15dp">
            <ImageView
                android:id="@+id/imageViewCoverVideos"
                android:layout_width="match_parent"
                android:layout_height="127dp"
                android:scaleType="fitStart"
                android:src="@drawable/cover_default" />
        </android.support.v7.widget.CardView>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/textViewNameCourse"
            android:text="Android"
            android:layout_marginTop="3dp"
            android:textAlignment="center"
            android:textSize="22sp"/>
        <TextView
            android:id="@+id/textViewDescriptionCourse"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="Ingrese aqui descripcion"
            />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textViewCost1"
            android:layout_gravity="end"
            android:textStyle="bold"
            android:text="Cost: $0 (1 MONTH)"/>

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

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/buttonBuy"
            android:text="Buy"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="3dp"
            style="@style/Widget.AppCompat.Button.Colored"/>
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

我需要您创建的所有图像都显示为第一张图像，谢谢。

android

3 Answers

  1. 您必须分配layout_width="0dp"给视图，否wrap_content，以便为它们分配百分比值：

    <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="6">
    <TextView
        android:layout_weight="1"
        android:paddingLeft="10dp"
        android:id="@+id/textViewIndex"
        android:textSize="30sp"
        android:layout_gravity="center_vertical"

       <!--Se cambio de wrap_content a 0dp-->
        android:layout_width="0dp"

        android:layout_height="wrap_content"
        android:text="1"/>
    <TextView
        android:layout_weight="4"
        android:id="@+id/textViewNameCourse"
        android:textAlignment="center"
        android:layout_gravity="center_vertical"

       <!--Se cambio de wrap_content a 0dp-->
        android:layout_width="0dp"

        android:layout_height="wrap_content"
        android:textSize="20sp"
        android:text="Introduction"/>

    <ImageButton
        style="@style/Widget.AppCompat.Button.Borderless.Colored"
        android:layout_width="33dp"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:layout_weight="1"
        android:src="@drawable/ic_eye_black_24dp" />
</LinearLayout>

    这是因为虽然看起来不像，但 wrap_content 是在运行时计算的度量单位，这会导致系统将大小分配给视图而不是百分比值。

    请记住，如果方向LinearLayout是垂直的，也会发生同样的情况。在这种情况下，它将是layout_height="0dp".

    更新：

    虽然你没有添加代码，但你也必须记住，当你为一个视图充气时，你必须分配它，parent以便视图在使用时可以计算它的大小match_parent。

    检查你在膨胀时没有发送空值：

     CardView cardView = (CardView)LayoutInflater.from(parent.getContext())
                .inflate(R.layout.card_video, null, false);

    您必须将父级发送到充气：

     CardView cardView = (CardView)LayoutInflater.from(parent.getContext())
                .inflate(R.layout.card_video, parent, false);
    • 1

  2. 我知道一个答案，因为它可以通过不同的方式解决。和属性有关android:weightSum，你在6中专门定义的。我建议将其设置为 1，这意味着它相当于 100% 线性布局处于水平方向，因此您要在子级中影响的属性android:layout_width因此始终设置为零，并且您将百分比设置为android:layout_weight. 您使用 .number 分配百分比（注意：在父级 (LinearLayout) 中 1 = 100%，因此我分配第一个子 textview .1 = 10%，第二个 .8 = 80% 和第三个 .1 = 10%）如果您不分配 100%，则会发生组件将向左移动。

    我给你举个例子：

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="15dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="1">

        <TextView
            android:id="@+id/textViewIndex"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight=".1"
            android:paddingLeft="10dp"
            android:text="1"
            android:textSize="30sp"/>
        <TextView
            android:id="@+id/textViewNameCourse"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_weight=".8"
            android:text="Introduction"
            android:textAlignment="center"
            android:textSize="20sp"/>

        <ImageButton
            style="@style/Widget.AppCompat.Button.Borderless.Colored"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:layout_weight=".1"
            android:src="@drawable/ic_..."/>


    </LinearLayout>

</android.support.v7.widget.CardView>

    如果你想给它一个更好的印象，给cardView添加填充。另外，可能是图像看起来不太好，使用 ScaleType 属性或者针对不同的密度进行优化。

    我希望它有帮助

    干杯!

    • 1
  3. Best Answer

    实际上您的文件card_video.xml是正确的，它将显示的元素RecyclerView如下所示：

    在此处输入图像描述

    元素显示不正确的真正“问题” RecyclerView是您使用的是ConstraintLayout，我建议您查看文档以使用这种类型的布局，因为它可能导致意外行为，例如您在您的问题：

    在此处输入图像描述

    为了解决这个问题，在定义的RecyclerView定义中android:layout_height="match_parent"代替android:layout_height="200dp" ：

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

    这样，您将导致除了显示所有元素之外，它们还会正确显示。

    在此处输入图像描述

    如果您的应用程序有必要将 200dp 定义为您的高度RecyclerView：

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

    选项是将父容器从 aConstraintLayout更改为LinearLayout具有纵向方向的 a，

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    tools:context="com.example.vycto.atomiccourses.VideoActivity">
...
...

</LinearLayout>

    通过此更改，您将获得相同的结果，正确显示RecyclerView.

    • 1