我正在尝试在材料设计中实现一个简单的导航抽屉,因此我的抽屉顶部有一个标题和一些文字项(A:CompactHeader Drawer,...)(见图1)。单击标题图像时,应打开一个列表(B:mikepenz@gmail.com,...)并“覆盖”我现有的文本项(A)(见图2)。如果选择了文本项(B),则原始列表(A)应该返回其原始位置,并且(B)不再可见(参见图1)。
注意:这些截图来自教程,但代码太混乱了。我正在寻找一个相对简单的解决方案......我在考虑碎片,但我不知道这是否是解决这个问题的正确方法。
答案 0 :(得分:2)
此用例不存在API,这意味着应该手动处理。您应该通过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>
)中提取菜单项,模拟这些菜单项:此布局包含使用普通布局构建的标题部分和菜单项部分。 / p>
所以,定义了你的根布局:
navigation_view.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>
的位置:
header.xml
<?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>
是:
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);
}
}
然后在活动中:
content_1
您将获得此输出:
提供content_2
和{{1}}布局文件的布局以适合您的使用案例。
答案 1 :(得分:1)
非常感谢你!基于@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"
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>
nav_header_main.xml
的位置:
<?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="@dimen/nav_header_height"
android:background="@color/colorFlatBlue"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<android.support.v7.widget.CardView
android:id="@+id/profile_image"
android:layout_width="70dp"
android:layout_height="0dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="40dp"
android:shape="ring"
app:cardCornerRadius="35dp"
app:cardElevation="0dp"
app:layout_constraintDimensionRatio="h,1:1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/img_profile"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp"
android:src="@drawable/ic_home"
android:tint="@color/colorFlatFontColorBlack" />
</android.support.v7.widget.CardView>
<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:layout_marginRight="16dp"
android:background="?selectableItemBackgroundBorderless"
android:tint="#ffffff"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:srcCompat="@drawable/ic_arrow_downward_black_24dp" />
</android.support.constraint.ConstraintLayout>
然后在活动中:
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);
}
}