RecyclerView 的 ItemDecoration 破坏了使用 ConstraintLayout 构建的项目布局
RecyclerView’s ItemDecoration breaks items layout built with ConstraintLayout
我正在尝试构建此布局 - 只有两列网格,其中包含图片和图片下方的文字。
我想使用 RecyclerView、GridLayoutManager 和 ItemDecoration 来构建项目间距。这是我得到的结果,你可以看到右图下方的文字移到了底部。
MainActivity
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
GridLayoutManager layoutManager = new GridLayoutManager(this, 2);
recyclerView.setLayoutManager(layoutManager);
recyclerView.addItemDecoration(new SpacesItemDecoration());
Adapter adapter = new Adapter();
recyclerView.setAdapter(adapter);
}
}
SpacesItemDecoration
public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
@Override
public void getItemOffsets(Rect outRect, View view,
RecyclerView parent, RecyclerView.State state) {
outRect.bottom = 20;
if (parent.getChildLayoutPosition(view) % 2 == 0) {
outRect.right = 20;
} else {
outRect.right = 0;
}
}
}
item.xml
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#DDDDDD"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/image_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="h,4:5"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/text_view"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="@+id/text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:textStyle="bold"
android:gravity="center"
app:layout_constraintTop_toBottomOf="@+id/image_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
您还可以从 GitHub
克隆项目
从您发布的屏幕截图来看,右侧的图像似乎比左侧的图像大,这就是将右侧的文本向下推的原因。这可能是由 SpacesItemDecoration
定义插图的方式引起的。尝试更改 left/right 插图以平衡视图。
SpacesItemDecoration
public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
@Override
public void getItemOffsets(Rect outRect, View view,
RecyclerView parent, RecyclerView.State state) {
outRect.bottom = 20;
if (parent.getChildLayoutPosition(view) % 2 == 0) {
outRect.right = 10; // Pad on the right for left-hand side
} else {
outRect.left = 10; // Pad on the left for right-hand side
}
}
}
我正在尝试构建此布局 - 只有两列网格,其中包含图片和图片下方的文字。
我想使用 RecyclerView、GridLayoutManager 和 ItemDecoration 来构建项目间距。这是我得到的结果,你可以看到右图下方的文字移到了底部。
MainActivity
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
RecyclerView recyclerView = findViewById(R.id.recycler_view);
recyclerView.setHasFixedSize(true);
GridLayoutManager layoutManager = new GridLayoutManager(this, 2);
recyclerView.setLayoutManager(layoutManager);
recyclerView.addItemDecoration(new SpacesItemDecoration());
Adapter adapter = new Adapter();
recyclerView.setAdapter(adapter);
}
}
SpacesItemDecoration
public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
@Override
public void getItemOffsets(Rect outRect, View view,
RecyclerView parent, RecyclerView.State state) {
outRect.bottom = 20;
if (parent.getChildLayoutPosition(view) % 2 == 0) {
outRect.right = 20;
} else {
outRect.right = 0;
}
}
}
item.xml
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#DDDDDD"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/image_view"
android:layout_width="0dp"
android:layout_height="0dp"
android:scaleType="centerCrop"
app:layout_constraintDimensionRatio="h,4:5"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toTopOf="@+id/text_view"
app:layout_constraintVertical_chainStyle="packed" />
<TextView
android:id="@+id/text_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:textStyle="bold"
android:gravity="center"
app:layout_constraintTop_toBottomOf="@+id/image_view"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintBottom_toBottomOf="parent" />
</android.support.constraint.ConstraintLayout>
您还可以从 GitHub
克隆项目从您发布的屏幕截图来看,右侧的图像似乎比左侧的图像大,这就是将右侧的文本向下推的原因。这可能是由 SpacesItemDecoration
定义插图的方式引起的。尝试更改 left/right 插图以平衡视图。
SpacesItemDecoration
public class SpacesItemDecoration extends RecyclerView.ItemDecoration {
@Override
public void getItemOffsets(Rect outRect, View view,
RecyclerView parent, RecyclerView.State state) {
outRect.bottom = 20;
if (parent.getChildLayoutPosition(view) % 2 == 0) {
outRect.right = 10; // Pad on the right for left-hand side
} else {
outRect.left = 10; // Pad on the left for right-hand side
}
}
}