6

Tôi đang cố gắng triển khai ngăn điều hướng đơn giản trong thiết kế material design, vì vậy có một tiêu đề ở đầu ngăn kéo và một số mục văn bản (A: CompactHeader Drawer,. ..) (xem hình 1). Khi nhấp vào hình ảnh tiêu đề, sẽ mở danh sách (B: [email protected], ...) và "ghi đè" các mục văn bản hiện tại của tôi (A) (xem hình 2). Nếu một mục văn bản (B) được chọn, danh sách gốc (A) sẽ trở lại vị trí ban đầu và (B) không hiển thị nữa (xem hình 1).Ngăn điều hướng Android - Thay thế danh sách bằng Danh sách khác trên Click

Picture 1 Picture 2

Lưu ý: Những ảnh chụp màn hình đến từ một hướng dẫn, nhưng mã là cách quá khó hiểu. Tôi đang tìm một giải pháp tương đối đơn giản ... Tôi đã suy nghĩ về Fragments, nhưng tôi không biết đây có phải là cách đúng đắn để tấn công vấn đề này hay không.

+0

cách bạn thêm các mục vào danh sách xem danh sách ngăn kéo? có thể đó là giải pháp, vui lòng thêm mã để giúp bạn –

+0

Vì bạn có thể thấy cả hai ListView không phải từ cùng một loại, bởi vì phông chữ và khoảng cách là khác nhau. Vì vậy, đó là lý do tại sao tôi đã suy nghĩ về Fragments. Hướng dẫn: https: // github.com/mikepenz/MaterialDrawer Có thể bạn sẽ tìm hiểu cách Mike Penz thực hiện ... –

+0

@ MbengaMutombo theo mã, trên lớp này: https://github.com/mikepenz/MaterialDrawer/blob/master/app/src/ main/java/com/mikepenz/materialdrawer/app/ComplexHeaderDrawerActivity.java trên dòng 52, anh ta tạo tiêu đề (email) và trên dòng 88 thêm tiêu đề vào ngăn kéo, sau khi thêm tiêu đề, sử dụng trình nghe cho các lần nhấp, kiểm tra nếu bạn có một mã khác trên này, tôi không có điện thoại di động của tôi để thử nó ngay bây giờ –

Trả lời

2

Không tồn tại một API cho trường hợp sử dụng này, có nghĩa là, nó phải được xử lý thủ công. Thay vì tăng các mục menu từ tài nguyên (/res/menu), bạn nên cung cấp bố cục tùy chỉnh qua app:headerLayout, mô phỏng các mục menu này: bố cục này chứa cả phần tiêu đề và mục menu được tạo bằng bố cục thông thường.

Vì vậy, sau khi được xác định bố cục gốc của bạn như thế này:

<?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> 

đâu navigation_view.xml là:

<?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 là:

<?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="[email protected]" 
     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> 

Sau đó, trong hoạt động:

 

    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); 
     } 

    } 
 

Bạn sẽ nhận được kết quả này:

enter image description here

Cung cấp bố trí của bạn cho content_1content_2 file bố trí để phù hợp với trường hợp sử dụng của bạn.

1

Cảm ơn bạn rất nhiều! Dựa trên câu trả lời @azizbekian và @Mohsen tôi sẽ chia sẻ giải pháp tổng thể của tôi hoạt động hoàn hảo và mang lại kết quả mong muốn.

Vì vậy, sau khi được xác định bố cục gốc của tôi như thế này:

<?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> 

đâu nav_header_main.xml là:

<?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="[email protected]" 
     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> 

Sau đó, trong hoạt động:

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("[email protected]").setIcon( R.drawable.ic_home); 
      navigationView.getMenu().add("[email protected]").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); 
     } 
    } 

Và đây là mong muốn đầu ra. Cảm ơn bạn vì tất cả! enter image description here

Các vấn đề liên quan