Android bottomnavigationbar实现竖向排列
时间: 2024-04-06 21:08:21 浏览: 21
Android的`BottomNavigationView`默认是水平排列的,如果需要竖向排列,可以通过自定义布局实现。
首先,在布局文件中,将`BottomNavigationView`替换为`LinearLayout`,并设置`orientation`为`vertical`,如下所示:
```xml
<LinearLayout
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<RelativeLayout
android:id="@+id/menu_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/ic_home" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/menu_home_icon"
android:layout_centerHorizontal="true"
android:text="Home" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/menu_search"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/ic_search" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/menu_search_icon"
android:layout_centerHorizontal="true"
android:text="Search" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/menu_profile"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:src="@drawable/ic_profile" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/menu_profile_icon"
android:layout_centerHorizontal="true"
android:text="Profile" />
</RelativeLayout>
</LinearLayout>
```
然后,通过代码为每个菜单项设置点击事件。例如:
```java
LinearLayout bottomNavigation = findViewById(R.id.bottom_navigation);
RelativeLayout menuHome = findViewById(R.id.menu_home);
RelativeLayout menuSearch = findViewById(R.id.menu_search);
RelativeLayout menuProfile = findViewById(R.id.menu_profile);
menuHome.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// do something
}
});
menuSearch.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// do something
}
});
menuProfile.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// do something
}
});
```
最后,需要将每个菜单项的图标和文本按照竖向排列的方式进行布局,可以使用`RelativeLayout`或者其他布局方式进行实现。
相关推荐
![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_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)
![](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)