用java实现android的垂直侧边栏,切换会出现指定文字,尽量简洁,不使用viewpager
时间: 2024-05-15 16:17:33 浏览: 12
您好,可以使用RecyclerView和LinearLayoutManager实现垂直侧边栏。以下是实现步骤:
1. 在布局文件中添加RecyclerView:
```xml
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:scrollbars="vertical" />
```
2. 创建一个侧边栏的数据类,包含需要显示的文字信息:
```java
public class SidebarItem {
private String text;
public SidebarItem(String text) {
this.text = text;
}
public String getText() {
return text;
}
}
```
3. 创建一个RecyclerView的Adapter,用于显示侧边栏的数据项:
```java
public class SidebarAdapter extends RecyclerView.Adapter<SidebarAdapter.ViewHolder> {
private List<SidebarItem> mItems;
public class ViewHolder extends RecyclerView.ViewHolder {
public TextView textView;
public ViewHolder(View itemView) {
super(itemView);
textView = itemView.findViewById(R.id.item_text);
}
}
public SidebarAdapter(List<SidebarItem> items) {
mItems = items;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.sidebar_item, parent, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
final SidebarItem item = mItems.get(position);
holder.textView.setText(item.getText());
}
@Override
public int getItemCount() {
return mItems.size();
}
}
```
4. 在布局文件中为侧边栏的每个数据项创建一个TextView并设置样式:
```xml
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/item_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:paddingTop="8dp"
android:paddingBottom="8dp"
android:textColor="@color/black" />
```
5. 在Activity中初始化RecyclerView并设置LayoutManager和Adapter:
```java
RecyclerView recyclerView = findViewById(R.id.recyclerview);
List<SidebarItem> items = new ArrayList<>();
// 添加侧边栏的数据项
items.add(new SidebarItem("Item 1"));
items.add(new SidebarItem("Item 2"));
items.add(new SidebarItem("Item 3"));
// ...
SidebarAdapter adapter = new SidebarAdapter(items);
recyclerView.setAdapter(adapter);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
recyclerView.setLayoutManager(layoutManager);
```
6. 在RecyclerView的ItemDecoration中实现侧边栏的指示文字,根据RecyclerView的滚动位置计算当前显示的数据项,设置指示文字的显示内容:
```java
public class SidebarDecoration extends RecyclerView.ItemDecoration {
private TextView mIndicatorView;
public SidebarDecoration(Context context) {
mIndicatorView = new TextView(context);
mIndicatorView.setTextColor(ContextCompat.getColor(context, R.color.white));
mIndicatorView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20);
mIndicatorView.setGravity(Gravity.CENTER);
mIndicatorView.setBackgroundColor(ContextCompat.getColor(context, R.color.colorAccent));
mIndicatorView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
}
@Override
public void onDrawOver(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDrawOver(c, parent, state);
int childCount = parent.getChildCount();
if (childCount == 0) {
return;
}
int position = ((LinearLayoutManager) parent.getLayoutManager()).findFirstVisibleItemPosition();
if (position == RecyclerView.NO_POSITION) {
return;
}
SidebarItem item = ((SidebarAdapter) parent.getAdapter()).getItem(position);
if (item == null) {
return;
}
String text = item.getText().substring(0, 1);
mIndicatorView.setText(text);
int viewWidth = parent.getWidth();
int viewHeight = parent.getHeight();
int indicatorWidth = mIndicatorView.getWidth();
int indicatorHeight = mIndicatorView.getHeight();
int x = viewWidth - indicatorWidth - 40;
int y = (int) (position * 1.0f / parent.getAdapter().getItemCount() * viewHeight + (viewHeight * 1.0f / parent.getAdapter().getItemCount() - indicatorHeight) / 2);
c.translate(0, 0);
c.drawRect(x, y, x + indicatorWidth, y + indicatorHeight, new Paint());
mIndicatorView.layout(x, y, x + indicatorWidth, y + indicatorHeight);
mIndicatorView.draw(c);
}
}
```
7. 在Activity中添加ItemDecoration并设置RecyclerView的滚动监听,实现侧边栏指示文字的更新:
```java
SidebarDecoration decoration = new SidebarDecoration(this);
recyclerView.addItemDecoration(decoration);
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
int position = ((LinearLayoutManager) recyclerView.getLayoutManager()).findFirstVisibleItemPosition();
SidebarItem item = adapter.getItem(position);
if (item == null) {
return;
}
String text = item.getText().substring(0, 1);
decoration.setText(text);
recyclerView.invalidateItemDecorations();
}
});
```
至此,垂直侧边栏的实现就完成了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)