私はListViewです。当初、ListViewにはいくつかのデータが含まれています。ユーザーがアイテムをクリックすると、別のレイアウトがそのアイテムに動的に追加され、高さが増加します。Expand List List with animationアニメーション
現在、アイテムの高さが増加すると、変更されたアイテムが瞬時に表示されます。しかし、私が欲しいのは、これがアニメーション化されてアイテムの高さが徐々に増加するからです。
私は質問されたのと同じものを探していたと思います。リストビュー項目をいくつかの新しいものとして展開する方法を探していましたコンテンツが表示されています（一部のビューの表示をGONEからVISIBLEに変更しています）。ビューのそれぞれに
<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"
/>
：私は私が翻訳したアニメーションを（私は回転アニメーションを使用していなかった）適用を支援するためにmirroredAbstractionで答えを使用していました。これは素晴らしい効果を作り出しますが、よく見ると、リストビュー項目は実際には必要なサイズ全体に突然拡大していき、アニメーションによってビューが所定の位置にドロップされました。しかし、私が望んでいたのは、ビューが可視になると、リストビュー項目が小さくなるという効果でした。
私はここで探していたまさに見つかりました 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（？可能複製）の質問に彼の答えを見つけた：
Adding animation to a ListView in order to expand/collapse content
また、あなたが同じことを行うための別の方法を知っていれば私に知らせてください。
あなたは
はまず、基本的なanimation.xmlファイルを作成するのresフォルダにアニメーションという名前のフォルダを作成し、それにあなたのanimation.xmlファイルを入れて、あなたが望むものを達成するために、あなたListViewのAdapterでアニメーションを実装する必要があります。
私はその後、あなたのアダプタ実装のGetViewメソッドに続いて、このようなAnimationObject
private Animation animation;
のインスタンスを作成
<?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" />
rotate_animation.xmlという名前のサンプルアニメーションを作成しました。この
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;
}
私はすべてのAndroidのsdkバージョンで動作する簡単なコードを実装しました。
下記の作業とコードを参照してください。
のGithubコード：私のウェブサイト上の情報についてはhttps://github.com/LeonardoCardoso/Animated-Expanding-ListView
：http://android.leocardz.com/animated-expanding-listview/
それは、あなたのアニメーションている間基本的に、あなたは、カスタムTranslateAnimationとカスタムリストアダプタを作成する必要がありますし、リストビュー項目の現在の高さを更新し、この変更についてアダプタに通知する必要があります。
コードに行きましょう。
リスト項目のレイアウト
<?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>
活動レイアウト
<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>
一覧Itemクラス
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;
}
}
表示Holderクラス
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;
}
}
アニメーションクラス
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();
}
}
カスタムリストアダプタクラス
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;
}
}
主な活動
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));
}
}
このコードはどの程度うまく機能しますか？それが頻繁に通知する方法を見て、複雑なビューで処理するのはかなり重いようです... – Pkmmte
確かに。しかしAFAIKはあまり知らせずにアニメーション化中にスクロールするとリストビューが失われます。 –
値のアニメーターを使用したソリューションが良さそうに見えます：
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();
ただ、Androidデベロッパーガイドを読んで、それは読む価値がある：http://developer.android.com/guide/topics/graphics/prop-animation.html
しかしrequestLayout（）処理が重いことを、覚えておいてください。 requestLayout（）を1回呼び出すと、視覚的に影響を受けるすべての近くの要素が作成されるため、レイアウトが再計算されます。また、負の下マージンを使用する方がよい（別の1の下であなたの要素の一部を非表示にする）と、それを表示するには、次の使用可能性があります。もちろん
listViewItem.setTranslationY((Integer) animation.getAnimatedValue());
を、あなただけの下マージンをアニメーション化することが、他に提案されているようにこの質問に答えてください。
私の使用例は多かれ少なかれテキストを表示することです。たとえば、リストビュー項目の状態を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();
}
この場合、ListViewアイテムの高さは事前に分かっています。しかし、私の場合、それは動的です。つまり、展開されたレイアウトの高さは実行時にわかります。 – Manjunath
はい、私は...私は動的に追加/作成されたコンテンツに影響を与える能力が必要かもしれないと思う。だから私もまだ見ています。私はあなたの質問をアップボートして、もっと多くの人がそれを見るようにしたいと思いますが、あなたはあまり詳しく説明していません（つまり、あなたはダイナミックな部分を取り除いています）、そして、少なくとも、混乱した言葉を言い換えるべきです。私はしたい：アイテムの高さが増加すると、それは変更されたアイテムを突然表示するが、アイテムの高さが増加するとアニメーション化する必要がある」 – David