Android - accordion widget

Question

Tôi đang tìm cách tốt nhất để tạo một Accordion-style widget such as on this page. Có cách nào để đạt được hiệu quả tương tự bằng cách sử dụng bộ công cụ Android tiêu chuẩn hay tôi cần xây dựng tiện ích tùy chỉnh? Nếu vậy - bạn muốn giới thiệu cái nào nếu có?

Answer 1

tôi đã đẩy android accordion view dự án tại github. Chúng tôi sử dụng nó cho khách hàng của chúng tôi, thử nghiệm trên 2.2, 2.3.x, 3.2 và 4.0.3. Hoạt động khá tốt cho chúng tôi.

Sẽ thêm hoạt ảnh khi gấp/mở trong bước tiếp theo.

Dưới đây là ảnh chụp màn hình nhỏ:

Answer 2

Và trong trường hợp bạn vẫn tự hỏi - điều này có thể được thực hiện khá nhiều với cặp nút/bố cục được xếp chồng lên nhau bên trong bố cục tuyến tính. Pseudo code sau

<LinearLayout android:orientation="vertical"> 
    <Button android:text="Panel 1"/> 
    <SomeKindOfLayout android:id="@+id/panel1"> 
      <!-- widgets in first panel go here --> 
    </SomeKindOfLayout> 
    <Button android:text="Panel 2"/> 
    <SomeKindOfLayout android:id="@+id/panel2" android:visibility="gone"> 
      <!-- widgets in second panel go here --> 
    </SomeKindOfLayout> 
    <Button android:text="Panel 3"/> 
    <SomeKindOfLayout android:id="@+id/panel3" android:visibility="gone"> 
      <!-- widgets in third panel go here --> 
    </SomeKindOfLayout> 
    <Button android:text="Panel 4"/> 
    <SomeKindOfLayout android:id="@+id/panel4" android:visibility="gone"> 
      <!-- widgets in fourth panel go here --> 
    </SomeKindOfLayout></LinearLayout> 

Một điều để có thể thử được xếp chồng ExpandableListView-s trên đầu trang của mỗi khác

Answer 3

tôi phải mạo hiểm bản thân mình và nói rằng câu trả lời @Bostone là thích hợp nhất. Tôi sẽ cung cấp cho bạn mã của tôi dưới đây để bạn có thể nhìn thấy. Cảm ơn GitHub Maciej Łopaciński, nhưng như @SudoPlz đã nói trong phần bình luận, không có tài liệu nào cả. Tôi không biết bắt đầu từ đâu. Tôi cố gắng làm điều đó với Eclipse và Android Studio và trong cả hai tôi không thể chạy dự án để bắt đầu tìm ra cách hoạt động của nó. Bên cạnh đó, cam kết cuối cùng trong dự án đó là khoảng 1 năm trước, điều đó khiến tôi lo sợ rằng nếu có điều gì đó không ổn, tôi sẽ bị kẹt ở một ngõ cụt. Vì vậy, không chậm trễ hơn nữa, đây là giải pháp của tôi có trụ sở tại @Bostone:

1. Trước tiên, bạn phải tạo một Button và một Layout lồng trong một scrollview:

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     tools:context=".TasksListActivity"> 


      <Button 
       android:id="@+id/magic_btn" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:text="Magic Btn"/> 
      <LinearLayout 
       android:id="@+id/magic_layout" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:orientation="vertical" 
       android:visibility="gone"> 

     </LinearLayout> 
</ScrollView> 

2.- Sau đó đi đến JAVA tương ứng của bạn, có nút tìm và đặt onClickListener, bên trong onClickListener bạn sẽ tìm thấy bố cục.

Button findMagicBtn = (Button) findViewById(R.id.magic_btn); 
     findMagicBtn.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 

      } 
     }); 

3.- Vì vậy, bây giờ bên trong onClickListener, chúng tôi sẽ tìm bố cục. Như bạn có thể thấy trong bước đầu tiên, bố cục được đặt theo mặc định là GONE, nhưng bây giờ chúng tôi phải đặt bố cục đó thành hiển thị. Vấn đề là, làm thế nào tôi có thể làm cho nó biến mất một lần nữa và ngược lại? Vì vậy, chúng tôi sẽ thêm một điều kiện để có được khả năng hiển thị của bố cục và dựa trên đó sẽ được ẩn hoặc hiển thị:

Button findMagicBtn = (Button) findViewById(R.id.magic_btn); 
     findMagicBtn.setOnClickListener(new View.OnClickListener() { 
      @Override 
      public void onClick(View v) { 
       LinearLayout findMagicLl = (LinearLayout) findViewById(R.id.magic_layout); 
       if (findMagicLl.getVisibility() == View.VISIBLE) { 
        findMagicLl.setVisibility(View.GONE); 
       } else { 
        findMagicLl.setVisibility(View.VISIBLE); 
       } 
      } 
     }); 

Có thể đặt lại nhiều lần bạn muốn.

Vì vậy, bây giờ nếu bạn thực sự muốn làm cho nó trông giống như một accordion bạn có thể pimp nút. Bạn có thể đặt một mũi tên bên phải của nó, sử dụng bằng ví dụ:

findMagicBtn.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.drawable.right_arrow, 0); 

Bạn nên làm điều đó bên trong OnClickListener và sử dụng tình trạng này để thay đổi hướng của mũi tên, bằng cách thay đổi drawable (nếu đã biến mất và mũi tên xuống và nếu có thể nhìn thấy mũi tên lên).

Ngoài ra, bạn có thể làm cho nó trông tự nhiên hơn bằng cách thêm một hình ảnh động, như thế này:

ScaleAnimation animation = new ScaleAnimation(1f, 1f, 1f, 0f, Animation.RELATIVE_TO_SELF, 0f, Animation.RELATIVE_TO_SELF, 0f); 
animation.setDuration(180); 
animation.setFillAfter(true); 
findMagicLl.startAnimation(animation); 

Bạn sẽ phải cân nhắc rằng hình ảnh động trên phải được thực hiện trong khi quan điểm là nhìn thấy được. Xin lưu ý rằng setFillAfter(true), sẽ thay đổi kích thước của vùng chứa vĩnh viễn vì vậy nếu bạn làm như vậy, có thể bạn không muốn sử dụng VIEW.GONE nữa. Câu hỏi này có một lời giải thích tuyệt vời về Scale Animation