ConstraintLayout宽度未填充屏幕

由 发布于

I'm currently using a cardView inside of a constraint layout. This is presented using a pager view in a fragment. Despite my best efforts the constraint layout width will not go to the edges of the screen. I've already seen that layout_width must be "match_parent" for the constraintLayout and then 0dp for immediate children. This problem worsens for smaller screens. In the emulator (see image) it looks fine for the pixel 3XL (far left) but looks awful on the nexus S (far right). To emphasis the effect, I added a button in the background. I'm also using the scaled dp and scaled sp from https://github.com/intuit/sdp.

任何帮助将非常感激。谢谢！

Screenshot of emulators (Pixel 3XL -> Pixel 3 -> Nexus S)

这是代码：

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:id="@+id/relativeLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

   <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="@dimen/_16sdp"
        android:layout_marginRight="@dimen/_16sdp"

        android:layout_marginTop="@dimen/_2sdp"
        android:layout_marginBottom="@dimen/_65sdp"
        app:cardCornerRadius="@dimen/_20sdp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:cardPreventCornerOverlap="false"
        android:clipToPadding="false"
        app:cardUseCompatPadding="true">


        <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/relativeLayout2"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_475sdp">

            <ImageView
                android:id="@+id/image"
                android:layout_width="0dp"
                android:layout_height="@dimen/_250sdp"
                android:scaleType="centerCrop"
                android:src="@drawable/brochure"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/title"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/_16sdp"
                android:layout_marginTop="@dimen/_10sdp"
                android:text="Name"
                android:textColor="#262626"
                android:textSize="@dimen/_26ssp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/image" />

            <TextView
                android:id="@+id/desc"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="@dimen/_16sdp"
                android:layout_marginTop="@dimen/_3sdp"
                android:layout_marginRight="@dimen/_16sdp"
                android:ellipsize="end"
                android:text="Description"
                android:textSize="@dimen/_12ssp"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/title" />

            <Button
                android:id="@+id/btnOrder"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/_20sdp"
                android:background="@drawable/rounded_button"
                android:paddingLeft="@dimen/_30sdp"
                android:paddingRight="@dimen/_30sdp"
                android:text="Send a message"
                android:textSize="@dimen/_12sdp"
                android:textColor="#fff"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>


</androidx.constraintlayout.widget.ConstraintLayout>

FrepsFragment.java：

import android.animation.ArgbEvaluator;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
import androidx.viewpager2.widget.ViewPager2;

import java.util.ArrayList;
import java.util.List;

public class FrepsFragment extends Fragment {

    ViewPager viewPager;
    Adapter adapter;
    List<Model> models;
    Integer[] colors = null;
    ArgbEvaluator argbEvaluator = new ArgbEvaluator();


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // inflate

        View view  = inflater.inflate(R.layout.fragment_freps, container, false);


        models = new ArrayList<>();
        models.add(new Model (R.drawable.brochure, "Person 1", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius nunc leo, euismod tincidunt erat malesuada nec. Nullam rhoncus massa neque. Praesent in arcu felis. Vivamus elementum neque at rutrum fermentum."));
        models.add(new Model (R.drawable.poster, "Person 2", "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam varius nunc leo, euismod tincidunt erat malesuada nec. Nullam rhoncus massa neque. Praesent in arcu felis. Vivamus elementum neque at rutrum fermentum."));


        adapter = new Adapter(models, getContext());

        viewPager = view.findViewById(R.id.viewPager);
        viewPager.setAdapter(adapter);
        viewPager.setPadding(130,0,130,0);

        Integer[] colors_temp = {
                getResources().getColor(R.color.color1),
                getResources().getColor(R.color.color2)
        };

        colors = colors_temp;



        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                if (position < (adapter.getCount() -1) && position < (colors.length -1)){
                    viewPager.setBackgroundColor(

                            (Integer) argbEvaluator.evaluate(
                                    positionOffset,
                                    colors[position],
                                    colors[position + 1]
                            )
                    );
                }
                else {
                    viewPager.setBackgroundColor(colors[colors.length - 1]);
                }
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        return view;

    }

}

fragment_freps.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@color/cardview_light_background"
    tools:context=".FrepsFragment">

    <androidx.viewpager.widget.ViewPager
        android:foregroundGravity="center"
        android:id="@+id/viewPager"
        android:layout_centerInParent="true"
        android:overScrollMode="never"
        android:clipToPadding="false"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />







</RelativeLayout>

Adapter.java：

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;

import org.w3c.dom.Text;

import java.util.List;

public class Adapter extends PagerAdapter {

    private List<Model> models;
    private LayoutInflater layoutInflater;
    private Context context;


    public Adapter(List<Model> models, Context context) {
        this.models = models;
        this.context = context;
    }

    @Override
    public int getCount() {
        return models.size();
    }

    @Override
    public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
        return view.equals(object);
    }

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        layoutInflater = LayoutInflater.from(context);
        View view = layoutInflater.inflate(R.layout.item, container, false);

        ImageView imageView;
        TextView title, desc;

        imageView = view.findViewById(R.id.image);
        title = view.findViewById(R.id.title);
        desc = view.findViewById(R.id.desc);

        imageView.setImageResource(models.get(position).getImage());
        title.setText(models.get(position).getTitle());
        desc.setText(models.get(position).getDesc());

        container.addView(view, 0);

        return view;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView((View)object);
    }
}