我的水平RecyclerView
上有很长的单元格宽度,我希望它们有一个在用户水平滚动时保持静止的标题。
- Recycler View (A)
- - Cell (parent) (B)
- - - Header (C) <-- We want that to be still
- - - Content (D)
这是它在视觉上的样子:
因此,我正在寻找一种方法:
1)当用户在RecyclerView
(A)上拖动手指时,停止标题(C)改变位置
要么
2)像往常一样滚动单元格(B),但将其子项(C)的位置改为相反方向,以使标题即使在移动时也显示为静止(在父项的相反方向(B) 。
这是我正在尝试构建的内容:
有任何想法吗?
p.s 1:我注意到很多SO答案,建议使用ItemDecoration
,但所有可能的答案都有VERTICAL
实现的代码,这与HORIZONTAL
实现非常不同。
p.s 2我正在以编程方式创建所有视图内容,因此我不会使用布局文件。 (那是因为内容将是反应原生视图,我无法创建具有布局文件的内容)。
p.s 3:我也注意到ItemDecoration
是老战术,最近的第三方图书馆扩展了LayoutManager
。
请稍微说清楚,谢谢。
虽然可以将标题视图保留在RecyclerView
中并使其静止,但我建议采用另一种方法。
标题可以继续在RecyclerView
内部表示,但显示将被带到RecyclerView
的顶部,如下所示:
- Title (C) <-- We want that to be still
- Recycler View (A)
- - Cell (parent) (B)
- - - Content
RecyclerView.OnScrollListener
将听取新项目的出现并相应地更改标题。这样,当新项目出现时,标题即TextView
将显示新标题。以下说明了这一点。
(这是一个用于演示目的的简单实现。一个完整的应用程序将显示狗品种图像和某种有意义的描述。)
以下是实现此效果的代码:
main activity.Java
public class MainActivity extends AppCompatActivity {
private LinearLayoutManager mLayoutManager;
private RecyclerViewAdapter mAdapter;
private TextView mBreedNameTitle;
private int mLastBreedTitlePosition = RecyclerView.NO_POSITION;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
List<String> breedList = createBreedList();
// This is where the breed title is displayed.
mBreedNameTitle = findViewById(R.id.breedNameTitle);
// Set up the RecyclerView.
mLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
RecyclerView recyclerView = findViewById(R.id.recyclerView);
mAdapter = new RecyclerViewAdapter(breedList);
recyclerView.setLayoutManager(mLayoutManager);
recyclerView.setAdapter(mAdapter);
// Add the OnScrollListener so we know when to change the breed title.
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
int lastVisible = mLayoutManager.findLastVisibleItemPosition();
if (lastVisible == RecyclerView.NO_POSITION) {
return;
}
if (lastVisible != mLastBreedTitlePosition) {
mBreedNameTitle.setText(mAdapter.getItems().get(lastVisible));
mLastBreedTitlePosition = lastVisible;
}
}
});
}
private List<String> createBreedList() {
List<String> breedList = new ArrayList<>();
breedList.add("Affenpinscher");
breedList.add("Afghan Hound");
breedList.add("Airedale Terrier");
breedList.add("Akita");
breedList.add("Alaskan Malamute");
breedList.add("American Cocker Spaniel");
breedList.add("American Eskimo Dog (Miniature)");
breedList.add("American Eskimo Dog (Standard)");
breedList.add("American Eskimo Dog (Toy)");
breedList.add("American Foxhound");
breedList.add("American Staffordshire Terrier");
breedList.add("American Eskimo Dog (Standard)");
return breedList;
}
@SuppressWarnings("unused")
private final static String TAG = "MainActivity";
}
class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private final List<String> mItems;
RecyclerViewAdapter(List<String> items) {
mItems = items;
}
@Override
@NonNull
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view;
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);
return new RecyclerViewAdapter.ItemViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
RecyclerViewAdapter.ItemViewHolder vh = (RecyclerViewAdapter.ItemViewHolder) holder;
vh.mBreedImage.setImageDrawable(holder.itemView.getResources().getDrawable(R.drawable.no_image));
vh.mBreedName = mItems.get(position);
}
@Override
public int getItemCount() {
return mItems.size();
}
public List<String> getItems() {
return mItems;
}
static class ItemViewHolder extends RecyclerView.ViewHolder {
private ImageView mBreedImage;
private String mBreedName;
ItemViewHolder(View itemView) {
super(itemView);
mBreedImage = itemView.findViewById(R.id.breedImage);
}
}
}
activity_main.xml中
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="@dimen/activity_horizontal_margin"
android:orientation="vertical">
<TextView
android:id="@+id/breedNameTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:fontFamily="sans-serif"
android:textColor="@android:color/black"
android:textSize="16sp"
tools:text="Breed name" />
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" />
</LinearLayout>
item_layout.xml
<android.support.constraint.ConstraintLayout
android:id="@+id/cont_item_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">
<ImageView
android:id="@+id/breedImage"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:contentDescription="Dog breed image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="1.0"
tools:ignore="HardcodedText" />
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:text="@string/large_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/breedImage"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
更新:这是另一种设置TextView
的左边距以使标头粘滞的方法。 TextView
的负x偏移量被视为标题的填充,使其在TextView
内向右滑动并粘在屏幕的左侧。
结果如下:
main activity.Java
public class MainActivity extends AppCompatActivity {
private LinearLayoutManager mLayoutManager;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
List<String> breedList = createBreedList();
// Set up the RecyclerView.
mLayoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
RecyclerView recyclerView = findViewById(R.id.recyclerView);
RecyclerViewAdapter adapter = new RecyclerViewAdapter(breedList);
recyclerView.setLayoutManager(mLayoutManager);
recyclerView.setAdapter(adapter);
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
// Pad the left of the breed name so it stays aligned with the left side of the display.
int firstVisible = mLayoutManager.findFirstVisibleItemPosition();
View firstView = mLayoutManager.findViewByPosition(firstVisible);
firstView.findViewById(R.id.itemBreedName).setPadding((int) -firstView.getX(), 0, 0, 0);
// Make sure the other breed name has zero padding because we may have changed it.
int lastVisible = mLayoutManager.findLastVisibleItemPosition();
View lastView = mLayoutManager.findViewByPosition(lastVisible);
lastView.findViewById(R.id.itemBreedName).setPadding(0, 0, 0, 0);
}
});
}
private List<String> createBreedList() {
List<String> breedList = new ArrayList<>();
breedList.add("Affenpinscher");
breedList.add("Afghan Hound");
breedList.add("Airedale Terrier");
breedList.add("Akita");
breedList.add("Alaskan Malamute");
breedList.add("American Cocker Spaniel");
breedList.add("American Eskimo Dog (Miniature)");
breedList.add("American Eskimo Dog (Standard)");
breedList.add("American Eskimo Dog (Toy)");
breedList.add("American Foxhound");
breedList.add("American Staffordshire Terrier");
breedList.add("American Eskimo Dog (Standard)");
return breedList;
}
@SuppressWarnings("unused")
private final static String TAG = "MainActivity";
}
class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
private final List<String> mItems;
RecyclerViewAdapter(List<String> items) {
mItems = items;
}
@Override
@NonNull
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view;
view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_layout, parent, false);
return new RecyclerViewAdapter.ItemViewHolder(view);
}
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
RecyclerViewAdapter.ItemViewHolder vh = (RecyclerViewAdapter.ItemViewHolder) holder;
vh.mBreedImage.setImageDrawable(holder.itemView.getResources().getDrawable(R.drawable.no_image));
vh.mBreedName.setPadding(0, 0, 0, 0);
vh.mBreedName.setText(mItems.get(position));
}
@Override
public int getItemCount() {
return mItems.size();
}
static class ItemViewHolder extends RecyclerView.ViewHolder {
private ImageView mBreedImage;
private TextView mBreedName;
ItemViewHolder(View itemView) {
super(itemView);
mBreedImage = itemView.findViewById(R.id.breedImage);
mBreedName = itemView.findViewById(R.id.itemBreedName);
}
}
}
activity_main.xml中
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="@dimen/activity_horizontal_margin"
android:orientation="vertical">
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" />
</LinearLayout>
item_layout.xml
<android.support.constraint.ConstraintLayout
android:id="@+id/cont_item_root"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white">
<TextView
android:id="@+id/itemBreedName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:ellipsize="none"
android:fontFamily="sans-serif"
android:singleLine="true"
android:textColor="@android:color/black"
android:textSize="16sp"
tools:text="Breed name" />
<ImageView
android:id="@+id/breedImage"
android:layout_width="64dp"
android:layout_height="64dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:contentDescription="Dog breed image"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/itemBreedName"
app:layout_constraintVertical_bias="1.0"
tools:ignore="HardcodedText" />
<TextView
android:id="@+id/textView"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginEnd="16dp"
android:layout_marginStart="16dp"
android:text="@string/large_text"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/breedImage"
app:layout_constraintTop_toBottomOf="@+id/itemBreedName" />
</android.support.constraint.ConstraintLayout>
希望这个图书馆有所帮助:TableView
<com.evrencoskun.tableview.TableView
android:id="@+id/content_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:column_header_height="@dimen/column_header_height"
app:row_header_width="@dimen/row_header_width"
app:selected_color="@color/selected_background_color"
app:shadow_color="@color/shadow_background_color"
app:unselected_color="@color/unselected_background_color" />
我正在使用这个答案作为解决方案stackoverflow.com/a/44327350/4643073工作得很好!
如果你想要水平粘性标题,只需更改与“垂直度”相关的eveything,将getY()
更改为getX()
,将getTop()
更改为getRight()
,将getHeight()
更改为getWidth()
。
为什么你认为ItemDecoration
是老战术?它没有被弃用,它不会弄乱你的适配器来扩展某些特定的类,它运行良好。
我最终做的事(感谢Cheticamp给我的灵感)如下:
- Helper Header (C) <-- We now have an extra title view
- Recycler View (A)
- - Cell (parent) (B)
- - - Header (C) <-- Plus the typical titles within our cells
- - - Content
如你看到的:
这是一些实际的代码,看看会发生什么:
公共类CalendarView扩展LinearLayout {protected LinearLayoutManager mLayoutManager; protected HeaderView helperHeaderView; protected RecyclerView recyclerView;
public CalendarView(final ReactContext context) {
super(context);
setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT));
setOrientation(LinearLayout.VERTICAL);
helperHeaderView = new HeaderView(context);
addView(helperHeaderView);
final DailyViewAdapter adapter = new DailyViewAdapter(context) {
@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
super.onBindViewHolder(holder, position);
// if our header is not assinged any position yet (we haven't given it any data yet)
if (helperHeaderView.getLastPosition() == null) {
updateHeaderData(helperHeaderView, globals.getInitialPosition()); // hydrate it
}
}
};
recyclerView = new SPRecyclerView(context) {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
if (mLayoutManager == null) {
mLayoutManager = (LinearLayoutManager) getLayoutManager();
}
// the width of any header
int headerWidth = helperHeaderView.getWidth();
// get the position of the first visible header in the recyclerview
int firstVisiblePos = mLayoutManager.findFirstVisibleItemPosition();
// get a ref of the Cell that contains that header
DayView firstView = (DayView) mLayoutManager.findViewByPosition(firstVisiblePos);
// get the X coordinate of the first visible header
float firstViewX = firstView.getX();
// get the position of the last visible header in the recyclerview
int lastVisiblePos = mLayoutManager.findLastVisibleItemPosition();
// get a ref of the Cell that contains that header
DayView lastView = (DayView) mLayoutManager.findViewByPosition(lastVisiblePos);
// get the X coordinate of the last visible header
float lastViewX = lastView.getX();
// if the first visible position is not the one our header is set to
if (helperHeaderView.getLastPosition() != firstVisiblePos) {
// update the header data
adapter.updateHeaderData(helperHeaderView, firstVisiblePos);
}
// if the first visible is not also the last visible (happens when there's only one Cell on screen)
if (firstVisiblePos == lastVisiblePos) {
// reset the X coordinates
helperHeaderView.setX(0);
} else { // else if there are more than one cells on screen
// set the X of the helper header, to whatever the last visible header X was, minus the width of the header
helperHeaderView.setX(lastViewX - headerWidth);
}
}
};
// ...
RelativeLayout
,以使实际视图重叠(辅助标题视图位于循环器视图的正上方)。我希望将来帮助某人。