Android 安卓导航抽屉&x2013;单击“用其他列表替换列表”
我试图在material design中实现一个简单的导航抽屉,因此在抽屉顶部有一个标题和一些文本项(a:CompactHeader抽屉…)(参见图1)。单击标题图像时,应打开一个列表(B:mikepenz@gmail.com,…)和“覆盖”我现有的文本项(A)(见图2)。如果选择了文本项(B),则原始列表(a)应回到其原始位置,并且(B)不再可见(见图1)Android 安卓导航抽屉&x2013;单击“用其他列表替换列表”,android,material-design,navigation-drawer,navigationview,android-navigationview,Android,Material Design,Navigation Drawer,Navigationview,Android Navigationview,我试图在material design中实现一个简单的导航抽屉,因此在抽屉顶部有一个标题和一些文本项(a:CompactHeader抽屉…)(参见图1)。单击标题图像时,应打开一个列表(B:mikepenz@gmail.com,…)和“覆盖”我现有的文本项(A)(见图2)。如果选择了文本项(B),则原始列表(a)应回到其原始位置,并且(B)不再可见(见图1) 注意:这些截图来自教程,但是代码太混乱了。我正在寻找一个相对简单的解决方案。。。我在考虑片段,但我不知道这是否是解决此问题的正确方法。
注意:这些截图来自教程,但是代码太混乱了。我正在寻找一个相对简单的解决方案。。。我在考虑片段,但我不知道这是否是解决此问题的正确方法。此用例不存在API,这意味着它应该手动处理。您不应该从资源(
/res/menu
)中膨胀菜单项,而应该通过app:headerLayout
提供自定义布局,该布局模拟这些菜单项:此布局包含标题部分和使用普通布局构造的菜单项部分
因此,定义了如下根布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#7e25d1" />
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/navigation_view" />
</android.support.v4.widget.DrawerLayout>
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/colorFlatWhite"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:itemIconTint="@color/colorFlatDarkerGray"
app:itemTextColor="@color/colorFlatDarkerGray"
app:menu="@menu/navigation" />
</android.support.v4.widget.DrawerLayout>
而header.xml
是:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include
android:id="@+id/include"
layout="@layout/header"
android:layout_width="match_parent"
android:layout_height="190dp" />
<FrameLayout
android:id="@+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="190dp"
android:background="@drawable/background_material">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/profile_image"
android:layout_width="60dp"
android:layout_height="0dp"
android:layout_marginLeft="24dp"
android:layout_marginStart="16dp"
android:layout_marginTop="40dp"
android:src="@drawable/profile"
app:civ_border_color="#FF000000"
app:layout_constraintDimensionRatio="h,1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/username"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingBottom="4dp"
android:text="John Doe"
android:textColor="#FFF"
android:textSize="14sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="@+id/email"
app:layout_constraintLeft_toLeftOf="@+id/profile_image"
app:layout_constraintStart_toStartOf="@+id/profile_image" />
<TextView
android:id="@+id/email"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="john.doe@gmail.com"
android:textColor="#fff"
android:textSize="14sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="@+id/username"
app:layout_constraintStart_toStartOf="@+id/username" />
<ImageButton
android:id="@+id/arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:layout_marginEnd="16dp"
android:background="?selectableItemBackgroundBorderless"
android:src="@drawable/ic_arrow_drop_down_black_24dp"
android:tint="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent" />
</android.support.constraint.ConstraintLayout>
您将获得以下输出:
为
content\u 1
和content\u 2
布局文件提供适合您的用例的布局。非常感谢!基于回答@azizbekian和@Mohsen,我将分享我的完整解决方案,该解决方案工作完美,并给出预期结果
这样定义了我的根布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#7e25d1" />
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_width="300dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/navigation_view" />
</android.support.v4.widget.DrawerLayout>
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<android.support.design.widget.NavigationView
android:id="@+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@color/colorFlatWhite"
android:fitsSystemWindows="true"
app:headerLayout="@layout/nav_header_main"
app:itemIconTint="@color/colorFlatDarkerGray"
app:itemTextColor="@color/colorFlatDarkerGray"
app:menu="@menu/navigation" />
</android.support.v4.widget.DrawerLayout>
然后在活动中:
public class MainActivity extends AppCompatActivity {
boolean initial = true;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
View headerView = navigationView.getHeaderView(0);
ImageButton arrow = headerView.findViewById(R.id.arrow);
ViewGroup frame = headerView.findViewById(R.id.frame);
frame.setOnClickListener(v -> toggle(arrow, frame));
changeContent(frame);
arrow.setOnClickListener(v -> toggle(arrow, frame));
}
private void toggle(ImageButton arrow, ViewGroup frame) {
initial = !initial;
arrow.setImageDrawable(ContextCompat.getDrawable(MainActivity.this, initial ? R.drawable.ic_arrow_drop_down_black_24dp : R.drawable.ic_arrow_drop_up_black_24dp));
changeContent(frame);
}
private void changeContent(ViewGroup frame) {
frame.removeAllViews();
getLayoutInflater().inflate(initial ? R.layout.content1 : R.layout.content2, frame);
}
}
NavigationView navigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
navigationView = (NavigationView) findViewById(R.id.nav_view);
View headerView = navigationView.getHeaderView(0);
final ImageButton arrow = (ImageButton) headerView.findViewById(R.id.arrow);
arrow.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
toggle(arrow);
}
});
}
boolean initial=true;
private void toggle(ImageButton arrow) {
initial = !initial;
arrow.setImageDrawable(ContextCompat.getDrawable(MainActivity.this, initial ? R.drawable.ic_arrow_downward_black_24dp : R.drawable.ic_arrow_upward_black_24dp));
if(initial)
{
navigationView.getMenu().clear();
navigationView.inflateMenu(R.menu.navigation);
SetLeftMenuNavLabels();
}else
{
navigationView.getMenu().clear();
navigationView.getMenu().add("account1@gmail.com").setIcon( R.drawable.ic_home);
navigationView.getMenu().add("account2@gmail.com").setIcon( R.drawable.ic_home);
navigationView.getMenu().add("Add New Account").setIcon( R.drawable.ic_add);
navigationView.getMenu().add("Manage Accounts").setIcon( R.drawable.ic_settings);
}
}
这是期望的输出。谢谢大家!
如何将项目添加到抽屉列表的列表视图中?也许这就是解决方案,请添加代码以帮助您,因为您可以看到两个ListView不是来自同一类型,因为字体和间距不同。这就是为什么我会想到碎片。教程:也许你会发现Mike Penz是如何做到的…@MbengaMutombo遵循代码,在本课程中:在第52行,他创建标题(电子邮件),在第88行,将标题添加到抽屉中,添加标题后,使用侦听器进行单击,检查是否有其他代码,我现在没有手机可以试一试是的,我注意到,他用他的OnAccountHeaderListener解决了这个问题,但我不知道他在哪里添加了配置文件?@KamilIbadov这应该有帮助:使用标准android导航抽屉的
inflateMenu