我如何创建一个包含固定大小图像的 RecyclerView 来包装内容并且图像以裁剪为中心
How I can create a RecyclerView with fixed size image that wrap contents and image is crop centered
这是我想要的目标:
我想用 recyclerview 在 3 行中显示我的网格项目。我也有 dp 120dpx120dp 的固定图像大小。但我想让我的网格项目填充所有垂直 space 以便在 recyclerView 中没有空白 space 和。所以我将此布局用于项目:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<android.support.v7.widget.CardView
android:id="@+id/view_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical"
app:elevation="10dp">
<LinearLayout
android:id="@+id/image_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical">
<ImageView
android:id="@+id/icon"
android:layout_width="120dp"
android:layout_height="120dp"
android:scaleType="centerCrop"/>
<ir.per.ttf.PersianTextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:ellipsize="end"
android:singleLine="true"
android:textSize="16sp"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout
>
但是我看到的是这样的,图片没有被裁剪中心!
但是通过将图像大小减小到 100dpx100dp,我的 RecyclerView 不会填充项目:
我无法达到我想要的视图。
这是我使用适配器的方式:
GridLayoutManager gridLayoutManager = new GridLayoutManager(context, 3,
LinearLayoutManager.VERTICAL, false);
gridLayoutManager.setReverseLayout(true);
holder.horizonrtalItemRecyclerView.setLayoutManager(gridLayoutManager);
RecyclerChambersAdapter recyclerAdapter = new RecyclerChambersAdapter(context, items.get(position),3); //pass context, Items and showing count
holder.horizonrtalItemRecyclerView.setAdapter(recyclerAdapter);
这是 onBind 视图持有者:
@Override
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
RecyclerChambersItemViewHolder holder = (RecyclerChambersItemViewHolder) viewHolder;
try {
holder.setmyClass(myClasses.get(position));
holder.setTitle(myClasses.get(position).getName());
holder.setId(myClasses.get(position).getId());
holder.setItemImageSrc(myClasses.get(position).getPhoto().getUrl().toString());
} catch (Exception ex) {
holder.setItemImageSrc("");
ex.printStackTrace();
}
}
我通过 set all width="match_parent"
:
更改网格项解决了这个问题
<?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="wrap_content"
android:gravity="center">
<android.support.v7.widget.CardView
android:id="@+id/view_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical"
app:elevation="10dp">
<LinearLayout
android:id="@+id/image_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical">
<ImageView
android:id="@+id/icon"
android:layout_width="match_parent"
android:layout_height="120dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:transitionName="@string/transition_avatar"
tools:ignore="ContentDescription"/>
<ir.per.ttf.PersianTextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:ellipsize="end"
android:singleLine="true"
android:textSize="16sp"
android:transitionName="@string/transition_title"
app:customTypeface="@string/primary_font"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
现在我实现了我的视图和项目填充所有 recyclerview space 和所有图像裁剪中心。
这是我想要的目标:
<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center">
<android.support.v7.widget.CardView
android:id="@+id/view_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical"
app:elevation="10dp">
<LinearLayout
android:id="@+id/image_container"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical">
<ImageView
android:id="@+id/icon"
android:layout_width="120dp"
android:layout_height="120dp"
android:scaleType="centerCrop"/>
<ir.per.ttf.PersianTextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:ellipsize="end"
android:singleLine="true"
android:textSize="16sp"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout
>
但是我看到的是这样的,图片没有被裁剪中心!
但是通过将图像大小减小到 100dpx100dp,我的 RecyclerView 不会填充项目:
我无法达到我想要的视图。
这是我使用适配器的方式:
GridLayoutManager gridLayoutManager = new GridLayoutManager(context, 3,
LinearLayoutManager.VERTICAL, false);
gridLayoutManager.setReverseLayout(true);
holder.horizonrtalItemRecyclerView.setLayoutManager(gridLayoutManager);
RecyclerChambersAdapter recyclerAdapter = new RecyclerChambersAdapter(context, items.get(position),3); //pass context, Items and showing count
holder.horizonrtalItemRecyclerView.setAdapter(recyclerAdapter);
这是 onBind 视图持有者:
@Override
public void onBindViewHolder(RecyclerView.ViewHolder viewHolder, int position) {
RecyclerChambersItemViewHolder holder = (RecyclerChambersItemViewHolder) viewHolder;
try {
holder.setmyClass(myClasses.get(position));
holder.setTitle(myClasses.get(position).getName());
holder.setId(myClasses.get(position).getId());
holder.setItemImageSrc(myClasses.get(position).getPhoto().getUrl().toString());
} catch (Exception ex) {
holder.setItemImageSrc("");
ex.printStackTrace();
}
}
我通过 set all width="match_parent"
:
<?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="wrap_content"
android:gravity="center">
<android.support.v7.widget.CardView
android:id="@+id/view_item"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical"
app:elevation="10dp">
<LinearLayout
android:id="@+id/image_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:orientation="vertical">
<ImageView
android:id="@+id/icon"
android:layout_width="match_parent"
android:layout_height="120dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:transitionName="@string/transition_avatar"
tools:ignore="ContentDescription"/>
<ir.per.ttf.PersianTextView
android:id="@+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:ellipsize="end"
android:singleLine="true"
android:textSize="16sp"
android:transitionName="@string/transition_title"
app:customTypeface="@string/primary_font"/>
</LinearLayout>
</android.support.v7.widget.CardView>
</LinearLayout>
现在我实现了我的视图和项目填充所有 recyclerview space 和所有图像裁剪中心。