38

私は持っていListViewます。最初に、にListViewはいくつかのデータが含まれています。ユーザーがアイテムをクリックすると、別のレイアウトがそのアイテムに動的に追加されるため、アイテムの高さが増加します。

現在、アイテムの高さを上げると、変更されたアイテムが即座に表示されます。ただし、これをアニメーション化して、アイテムの高さを徐々に上げていくことが必要です。

4

5 に答える 5

36

尋ねられたのと同じものを探していたと思います。新しいコンテンツが表示されたときにリストビューアイテムの拡大をアニメーション化する方法を探していました（一部のビューの表示をからに変更しただけGONEですVISIBLE）。私は、翻訳アニメーションを適用するのを助けるために答えを使用しましたmirroredAbstraction（回転アニメーションは必要ありませんでした）：

<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/linear_interpolator"
android:fromYDelta="0"
android:toYDelta="-100%p"
android:duration="500"   
/>

各ビューに。それは素晴らしい効果を生み出しますが、よく見ると、リストビューアイテムは実際には必要なサイズ全体に突然拡大し、アニメーションによってビューが所定の位置にドロップされました。しかし、私が欲しかったのは、ビューが見えるようになるにつれてリストビューアイテムが成長する効果でした。

私はここで探していたものを正確に見つけました： expanding-listview-items

ブロガーは彼のgithubサンプルへのリンクをここに持っています： ExpandAnimationExample

これらのサイトがなくなった場合は、お知らせください。コピーを利用できるようにします。

彼は、コンテンツに負のマージンを設定して、可視性を次のように設定しGONEます。

android:layout_marginBottom="-50dip"

下マージンを操作するアニメーションを作成しました。

public class ExpandAnimation extends Animation {
...
    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        super.applyTransformation(interpolatedTime, t);

        if (interpolatedTime < 1.0f) {

            // Calculating the new bottom margin, and setting it
            mViewLayoutParams.bottomMargin = mMarginStart
                    + (int) ((mMarginEnd - mMarginStart) * interpolatedTime);

            // Invalidating the layout, making us seeing the changes we made
            mAnimatedView.requestLayout();
        }
        ...
    }
}

とても素敵に見えます。私はこのSO（重複の可能性がありますか？）の質問に対する彼の答えを見つけました：

コンテンツを展開/折りたたみするためにListViewにアニメーションを追加する

また、同じことをする別の方法を知っているなら、私に知らせてください。

于 2012-11-02T04:06:16.117 に答える
14

AndroidのすべてのSDKバージョンで機能する簡単なコードを実装しました。

以下の動作とコードを参照してください。

Githubコード：https ：//github.com/LeonardoCardoso/Animated-Expanding-ListView

私のウェブサイトの情報：http：//android.leocardz.com/animated-expanding-listview/

正常 アコーディオン

基本的に、カスタムのTranslateAnimationとカスタムリストアダプタを作成する必要があります。アニメーション化中に、リストビューアイテムの現在の高さを更新し、この変更についてアダプタに通知する必要があります。

コードに行きましょう。

  1. リストアイテムのレイアウト

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:id="@+id/text_wrap"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:paddingBottom="@dimen/activity_vertical_margin"
       android:paddingLeft="@dimen/activity_horizontal_margin"
       android:paddingRight="@dimen/activity_horizontal_margin"
       android:paddingTop="@dimen/activity_vertical_margin" >

       <TextView
           android:id="@+id/text"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:textSize="18sp" >
       </TextView>

</LinearLayout>

  2. アクティビティレイアウト

       <RelativeLayout 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=".MainActivity" >

          <ListView
              android:id="@+id/list"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:divider="@android:color/black"
              android:dividerHeight="3dp" >
          </ListView>

      </RelativeLayout>

  3. リストアイテムクラス

    public class ListItem {

private String text;
private int collapsedHeight, currentHeight, expandedHeight;
private boolean isOpen;
private ListViewHolder holder;
private int drawable;

public ListItem(String text, int collapsedHeight, int currentHeight,
        int expandedHeight) {
    super();
    this.text = text;
    this.collapsedHeight = collapsedHeight;
    this.currentHeight = currentHeight;
    this.expandedHeight = expandedHeight;
    this.isOpen = false;
    this.drawable = R.drawable.down;
}

public String getText() {
    return text;
}

public void setText(String text) {
    this.text = text;
}

public int getCollapsedHeight() {
    return collapsedHeight;
}

public void setCollapsedHeight(int collapsedHeight) {
    this.collapsedHeight = collapsedHeight;
}

public int getCurrentHeight() {
    return currentHeight;
}

public void setCurrentHeight(int currentHeight) {
    this.currentHeight = currentHeight;
}

public int getExpandedHeight() {
    return expandedHeight;
}

public void setExpandedHeight(int expandedHeight) {
    this.expandedHeight = expandedHeight;
}

public boolean isOpen() {
    return isOpen;
}

public void setOpen(boolean isOpen) {
    this.isOpen = isOpen;
}

public ListViewHolder getHolder() {
    return holder;
}

public void setHolder(ListViewHolder holder) {
    this.holder = holder;
}

public int getDrawable() {
    return drawable;
}

public void setDrawable(int drawable) {
    this.drawable = drawable;
}
}

  4. ビューホルダークラス

    public class ListViewHolder {
 private LinearLayout textViewWrap;
 private TextView textView;

 public ListViewHolder(LinearLayout textViewWrap, TextView textView) {
    super();
    this.textViewWrap = textViewWrap;
    this.textView = textView;
 }

 public TextView getTextView() {
        return textView;
 }

 public void setTextView(TextView textView) {
    this.textView = textView;
 }

 public LinearLayout getTextViewWrap() {
    return textViewWrap;
 }

 public void setTextViewWrap(LinearLayout textViewWrap) {
    this.textViewWrap = textViewWrap;
 }
}

  5. カスタムアニメーションクラス

        public class ResizeAnimation extends Animation {
    private View mView;
    private float mToHeight;
    private float mFromHeight;

    private float mToWidth;
    private float mFromWidth;

    private ListAdapter mListAdapter;
    private ListItem mListItem;

    public ResizeAnimation(ListAdapter listAdapter, ListItem listItem,
            float fromWidth, float fromHeight, float toWidth, float toHeight) {
        mToHeight = toHeight;
        mToWidth = toWidth;
        mFromHeight = fromHeight;
        mFromWidth = fromWidth;
        mView = listItem.getHolder().getTextViewWrap();
        mListAdapter = listAdapter;
        mListItem = listItem;
        setDuration(200);
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        float height = (mToHeight - mFromHeight) * interpolatedTime
                + mFromHeight;
        float width = (mToWidth - mFromWidth) * interpolatedTime + mFromWidth;
        LayoutParams p = (LayoutParams) mView.getLayoutParams();
        p.height = (int) height;
        p.width = (int) width;
        mListItem.setCurrentHeight(p.height);
        mListAdapter.notifyDataSetChanged();
    }
  }

  6. カスタムリストアダプタクラス

    public class ListAdapter extends ArrayAdapter<ListItem> {
private ArrayList<ListItem> listItems;
private Context context;

public ListAdapter(Context context, int textViewResourceId,
    ArrayList<ListItem> listItems) {
super(context, textViewResourceId, listItems);
this.listItems = listItems;
this.context = context;
}

@Override
@SuppressWarnings("deprecation")
public View getView(int position, View convertView, ViewGroup parent) {
ListViewHolder holder = null;
ListItem listItem = listItems.get(position);

if (convertView == null) {
    LayoutInflater vi = (LayoutInflater) context
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    convertView = vi.inflate(R.layout.list_item, null);

    LinearLayout textViewWrap = (LinearLayout) convertView
            .findViewById(R.id.text_wrap);
    TextView text = (TextView) convertView.findViewById(R.id.text);

    holder = new ListViewHolder(textViewWrap, text);
} else
    holder = (ListViewHolder) convertView.getTag();

holder.getTextView().setText(listItem.getText());

LayoutParams layoutParams = new LayoutParams(LayoutParams.FILL_PARENT,
        listItem.getCurrentHeight());
holder.getTextViewWrap().setLayoutParams(layoutParams);

holder.getTextView().setCompoundDrawablesWithIntrinsicBounds(
        listItem.getDrawable(), 0, 0, 0);

convertView.setTag(holder);

listItem.setHolder(holder);

return convertView;
}

}

  7. 主な活動

    public class MainActivity extends Activity {

private ListView listView;
private ArrayList<ListItem> listItems;
private ListAdapter adapter;

private final int COLLAPSED_HEIGHT_1 = 150, COLLAPSED_HEIGHT_2 = 200,
    COLLAPSED_HEIGHT_3 = 250;

private final int EXPANDED_HEIGHT_1 = 250, EXPANDED_HEIGHT_2 = 300,
    EXPANDED_HEIGHT_3 = 350, EXPANDED_HEIGHT_4 = 400;

private boolean accordion = true;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

listView = (ListView) findViewById(R.id.list);

listItems = new ArrayList<ListItem>();
mockItems();

adapter = new ListAdapter(this, R.layout.list_item, listItems);

listView.setAdapter(adapter);

listView.setOnItemClickListener(new OnItemClickListener() {

    @Override
    public void onItemClick(AdapterView<?> parent, View view,
            int position, long id) {
        toggle(view, position);
    }
});
}

private void toggle(View view, final int position) {
ListItem listItem = listItems.get(position);
listItem.getHolder().setTextViewWrap((LinearLayout) view);

int fromHeight = 0;
int toHeight = 0;

if (listItem.isOpen()) {
    fromHeight = listItem.getExpandedHeight();
    toHeight = listItem.getCollapsedHeight();
} else {
    fromHeight = listItem.getCollapsedHeight();
    toHeight = listItem.getExpandedHeight();

    // This closes all item before the selected one opens
    if (accordion) {
        closeAll();
    }
}

toggleAnimation(listItem, position, fromHeight, toHeight, true);
}

private void closeAll() {
int i = 0;
for (ListItem listItem : listItems) {
    if (listItem.isOpen()) {
        toggleAnimation(listItem, i, listItem.getExpandedHeight(),
                listItem.getCollapsedHeight(), false);
    }
    i++;
}
}

private void toggleAnimation(final ListItem listItem, final int position,
    final int fromHeight, final int toHeight, final boolean goToItem) {

ResizeAnimation resizeAnimation = new ResizeAnimation(adapter,
        listItem, 0, fromHeight, 0, toHeight);
resizeAnimation.setAnimationListener(new AnimationListener() {

    @Override
    public void onAnimationStart(Animation animation) {
    }

    @Override
    public void onAnimationRepeat(Animation animation) {
    }

    @Override
    public void onAnimationEnd(Animation animation) {
        listItem.setOpen(!listItem.isOpen());
        listItem.setDrawable(listItem.isOpen() ? R.drawable.up
                : R.drawable.down);
        listItem.setCurrentHeight(toHeight);
        adapter.notifyDataSetChanged();

        if (goToItem)
            goToItem(position);
    }
});

listItem.getHolder().getTextViewWrap().startAnimation(resizeAnimation);
}

private void goToItem(final int position) {
listView.post(new Runnable() {
    @Override
    public void run() {
        try {
            listView.smoothScrollToPosition(position);
        } catch (Exception e) {
            listView.setSelection(position);
        }
    }
});
}

private void mockItems() {
listItems
        .add(new ListItem(
                "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1,
                EXPANDED_HEIGHT_1));

listItems
        .add(new ListItem(
                "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
                COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2,
                EXPANDED_HEIGHT_2));

listItems
        .add(new ListItem(
                "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                COLLAPSED_HEIGHT_3, COLLAPSED_HEIGHT_3,
                EXPANDED_HEIGHT_3));

listItems
        .add(new ListItem(
                "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
                COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2,
                EXPANDED_HEIGHT_4));

listItems
        .add(new ListItem(
                "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.",
                COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1,
                EXPANDED_HEIGHT_4));

listItems
        .add(new ListItem(
                "Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.",
                COLLAPSED_HEIGHT_2, COLLAPSED_HEIGHT_2,
                EXPANDED_HEIGHT_4));

listItems
        .add(new ListItem(
                "Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.",
                COLLAPSED_HEIGHT_3, COLLAPSED_HEIGHT_3,
                EXPANDED_HEIGHT_3));

listItems
        .add(new ListItem(
                "Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.",
                COLLAPSED_HEIGHT_1, COLLAPSED_HEIGHT_1,
                EXPANDED_HEIGHT_4));

    }

}
于 2014-03-04T01:04:07.917 に答える
7

バリューアニメーターを使用すると、ソリューションは見栄えがします。

ValueAnimator animator = ValueAnimator.ofInt(100, 300);
animator.setDuration(1000);
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  @Override
  public void onAnimationUpdate(ValueAnimator animation) {
    listViewItem.getLayoutParams().height = (Integer) animation.getAnimatedValue();
    listViewItem.requestLayout();
  }
});
animator.start();

アンドロイド開発者ガイドを読むだけで、読む価値があります：http: //developer.android.com/guide/topics/graphics/prop-animation.html

ただし、requestLayout（）の処理は重いことに注意してください。requestLayout（）を1回呼び出すと、視覚的に影響を受ける近くのすべての要素が作成されるため、そのレイアウトを再計算します。負の下部マージンを使用して（要素の一部を別の要素の下に非表示にするため）、以下を使用して表示する方がよい場合があります。

listViewItem.setTranslationY((Integer) animation.getAnimatedValue());

もちろん、この質問に対する別の回答で提案されているように、下マージンのみをアニメーション化することもできます。

于 2014-10-28T15:39:16.103 に答える
6

あなたが望むものを達成するためAdapterにあなたはあなたの中にアニメーションを実装しなければならないでしょう、ListView

まず、基本animation.xmlファイルを作成し、resフォルダーにanimという名前のフォルダーを作成してから、その中にanimation.xmlファイルを配置します。

たとえば、rotate_animation.xmlという名前のサンプルアニメーションを作成しました

<?xml version="1.0" encoding="UTF-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:duration="400" />

Animation Object次に、このようなインスタンスを作成します

private Animation animation;

次に、アダプタ実装のgetViewメソッドで、次のようにします。

public View getView(int position, View convertView, ViewGroup parent) {
        View v = convertView;
        ViewHolder viewHolder;
        if (convertView == null) {
            LayoutInflater li = (LayoutInflater) mContext
                    .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            v = li.inflate(R.layout.my_layout, null);
            viewHolder = new ViewHolder(v);
            v.setTag(viewHolder);

        } else {
            viewHolder = (ViewHolder) v.getTag();
        }

        viewHolder.mAppName.setText("SomeText");
        viewHolder.mAppImage.setImageDrawable(R.drawable.someImage);
        animation = AnimationUtils.loadAnimation(mContext, R.anim.my_animation);
        v.startAnimation(animation);
        return v;
    }
于 2012-10-04T14:57:25.690 に答える
0

私のユースケースは、多かれ少なかれテキストを表示することです。したがって、たとえばリストビューアイテムの状態を最大2〜6行に切り替えるには、これを行うことができます。そして、それもアニメーション化されています。アニメーションは正確に滑らかに見えませんが...

                            if(!textDescriptionLenghtToggle) { // simple boolean toggle
                                ObjectAnimator animation = ObjectAnimator.ofInt(
                                        textViewContainingDescription,
                                        "maxLines",
                                        6);
                                animation.setDuration(300);
                                animation.start();
                            } else {
                                ObjectAnimator animation = ObjectAnimator.ofInt(
                                        textViewContainingDescription,
                                        "maxLines",
                                        2);
                                animation.setDuration(300);
                                animation.start();
                            }
于 2018-02-25T17:24:11.027 に答える