Android - аккордеонный виджет

Question

Я ищу лучший способ создания Accordion-style widget such as on this page. Есть ли способ добиться такого же эффекта с помощью стандартного инструментария Android или мне нужно создать собственный виджет? Если да, то какой из них вы бы рекомендовали продлить, если таковые имеются?

Answer 1

Я толкаемом android accordion view проект на GitHub. Мы используем его для наших клиентов, проверенных на 2.2, 2.3.x, 3.2 и 4.0.3. Работает очень хорошо для нас.

Идет добавление анимации на складке/разворачивании в следующем шаге.

Вот небольшой скриншот:

Answer 2

И в случае, если вы все еще задаетесь вопросом - это может быть сделано в значительной степени с помощью пары кнопок/макетов, уложенных внутри линейного макета. Псевдо-код следует

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

Другое дело, возможно, попробовать складывает ExpandableListView-е поверх друг друга

Answer 3

Я должен сам рисковать и сказать, что @Bostone ответ является наиболее подходящим. Я дам вам свой код ниже, чтобы вы могли видеть. Спасибо за GitHub Maciej Łopaciński, но, как сказал @SudoPlz в комментариях, документации вообще нет. Я не знал, с чего начать. Я пытаюсь сделать это с помощью Eclipse и Android Studio, и ни я не мог запустить проект, чтобы начать выяснять, как его работа. Кроме того, последний бой в этом проекте был около 1 года назад, что заставляет меня бояться многого, что если что-то пойдет не так, я застрянет в тупике. Итак, без дальнейших проволочек, вот мое решение, основанное на @Bostone:

1.- Сначала вы должны создать кнопку и макет вложенной в 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.- После этого перейдите на ваш соответствующий JAVA, найдите кнопку и установите onClickListener, внутри onClickListener вы найдете макет.

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

      } 
     }); 

3.- Так что теперь внутри onClickListener мы найдем макет. Как вы можете видеть на первом шаге, макет устанавливается по умолчанию на GONE, но теперь мы должны установить его на видимое. Проблема в том, как я могу сделать это снова и наоборот? Итак, мы добавим условие для получения видимости макета и на основе этого он будет скрыт или показать:

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

Это можно поставить друг на друга столько раз, сколько вы хотите.

Итак, если вы действительно хотите, чтобы это выглядело как аккордеон, вы можете сутулиться. Вы можете положить стрелку справа от него, используя пример:

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

Вы должны сделать это внутри onClickListener и использовать условие, чтобы изменить направление стрелки, изменяя вытяжке (если ушел, и стрелка вниз, а если отображается стрелка вверх).

Кроме того, вы можете сделать его более естественным путем добавления анимации, как это:

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

Вы должны учитывать, что выше анимация должна быть сделана в то время как вид виден. Имейте в виду, что setFillAfter(true), изменит размер контейнера постоянно, поэтому, если вы это сделаете, возможно, вы больше не хотите использовать VIEW.GONE. Этот вопрос имеет замечательное объяснение по поводу Scale Animation