自定义侧边栏样式(模仿网易云音乐布局)

最新推荐文章于 2024-04-14 20:27:02 发布

萝莉丝

最新推荐文章于 2024-04-14 20:27:02 发布

阅读量476

点赞数 6

文章标签： android-studio

本文链接：https://blog.csdn.net/weixin_43918445/article/details/135508685

版权

本文描述了如何在Android项目中，将原有的NavigationView转换为卡片式布局，以实现更灵活的菜单设计，并提及了个人资料图片的切换功能。作者计划使用RecyclerView和CardView来重构滑动菜单内容。

摘要由CSDN通过智能技术生成

主页面(主要修改Navigation部分)

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/navView_main"
        android:layout_width="250dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:clickable="true"
        android:focusable="true"
        android:background="@color/white">
        <LinearLayout
            android:id="@+id/activity_main_drawer_top_l"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:gravity="center_vertical"
            android:background="@color/pink"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent">
            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/circle_icon_image"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_margin="10dp"/>
            <RelativeLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp">
                <TextView
                    android:id="@+id/activity_main_self_message_check"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/jump_to_mine_fragment"
                    android:textSize="18sp"/>
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toEndOf="@id/activity_main_self_message_check"
                    android:src="@drawable/arrow_forward_icon"/>
            </RelativeLayout>
        </LinearLayout>
        <ScrollView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toBottomOf="@id/activity_main_drawer_top_l"
            android:orientation="vertical"
            android:layout_marginTop="20dp">
            <include layout="@layout/activity_main_navigation_scroll"/>
        </ScrollView>
    </androidx.constraintlayout.widget.ConstraintLayout>

内部卡片布局

<?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:orientation="vertical">
    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        app:cardCornerRadius="5dp">
        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <RelativeLayout
                android:id="@+id/list1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                app:layout_constraintTop_toTopOf="parent" >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_margin="10dp"
                    android:text="我的消息"
                    android:textSize="16sp"/>
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:src="@drawable/arrow_forward_icon"/>
            </RelativeLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                app:layout_constraintTop_toBottomOf="@id/list1"
                android:background="@color/gray"/>

            <RelativeLayout
                android:id="@+id/list2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                app:layout_constraintTop_toBottomOf="@id/list1">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_margin="10dp"
                    android:text="剩余币"
                    android:textSize="16sp"/>
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:src="@drawable/arrow_forward_icon"/>
            </RelativeLayout>
            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                app:layout_constraintTop_toBottomOf="@id/list2"
                android:background="@color/gray"/>
            <RelativeLayout
                android:id="@+id/list3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                app:layout_constraintTop_toBottomOf="@id/list2"
                app:layout_constraintBottom_toBottomOf="parent" >

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentStart="true"
                    android:layout_marginStart="10dp"
                    android:layout_marginTop="10dp"
                    android:layout_marginEnd="10dp"
                    android:layout_marginBottom="10dp"
                    android:text="创作者中心"
                    android:textSize="16sp" />
                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentEnd="true"
                    android:src="@drawable/arrow_forward_icon"/>
            </RelativeLayout>

        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.google.android.material.card.MaterialCardView>
</LinearLayout>

MainActivity修改：

    private void initNavigationView(){
        //左侧图标按钮触发事件
        toolbar.setNavigationOnClickListener(view -> {
            drawerLayout.openDrawer(GravityCompat.START);
            changePersonalImage();
        });
        //NavigationView滑动菜单内相应组件点击的监听事件，问题是这里menu形式固定，要改成卡片化布局，准备改用recycleView+CardView
//        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
//            @Override
//            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
//                int id = item.getItemId();
//                switch (id){
//                    case R.id.navMySelf:
//                        myViewPager.setCurrentItem(TAB_MINE, false);
//                        break;
//                }
//                return false;
//            }
//        });
        //菜单内头像点击事件监听
    }