如何在Android中的ListView中创建一个单元格,在触摸时会垂直展开和合并? [英] How can I make a cell in a ListView in Android expand and contract vertically when it's touched?
问题描述
我在ListView中有一个单元格,其中包含一堆文本。我显示前两行的文本,然后结束它与一个...,如果它超越。我希望用户能够触摸单元格,并在视图中动态展开,并显示所有数据。然后,当他们再次触摸该单元格时,它会缩回到正常的大小。
我看过一个iOS应用程序,这样做非常酷。有没有办法用Android这样做?如何?
我已经实现了一个适用于所有Android的sdk版本的简单代码。
请看下面的工作和代码。 / p>
Github代码: https:// github。 com / LeonardoCardoso / Animated-Expanding-ListView
有关我网站的信息: http://android.leocardz.com/animated-expanding-listview/
基本上,您必须创建一个自定义的TranslateAnimation和自定义列表适配器,而在动画时,y ou必须更新listview项目的当前高度,并通知适配器有关此更改。
我们来看看代码。
-
列表项目布局
<?xml version =1.0编码= 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 =@
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>
-
列表项目类
public class ListItem {
private String text;
private int collapsedHeight,currentHeight,expandedHeight;
private boolean isOpen;
私人ListViewHolder持有人;
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;
}
}
-
查看持有人类
public class ListViewHolder {
private LinearLayout textViewWrap;
私有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)上下文
.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中;
私人ListAdapter适配器;
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();
//在所选的一个打开之前关闭所有项目
if(accordion){
closeAll();
}
}
toggleAnimation(listItem,position,fromHeight,toHeight,true);
}
private void closeAll(){
int i = 0; $($)
(ListItem listItem:listItems){
if(listItem.isOpen()){
toggleAnimation(listItem,i,listItem.getExpandedHeight(),
listItem.getCollapsedHeight ,假);
}
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(动画动画){
}
@Override
public void onAnimationRepeat(动画动画){
}
@Override
public void onAnimationEnd(动画动画){
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做eiusmod时间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 exerciseitation ullamco laboris nisi ut aliquip ex ea commodo sinceat,
COLLAPSED_HEIGHT_2 ,COLLAPSED_HEIGHT_2,
EXPANDED_HEIGHT_2));
listItems
.add(new ListItem(
Duis aute irure dolor in reprehenderit in fevertate velit esse cillum dolore eu fugiat nulla pariatur。Excepteur sint occaecat cupidatat non proident,sunt in ,
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 ,
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 aberuri sint occaecati cupiditate非公积金,相似的unt unt; unt unt unt unt i i i。。。。。;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
listItems
.add(new ListItem(
Et harum quidem rerum facilis est et expedit distinctio。Nam libero tempore,cum soluta nobis est qualendi optio cumque nihil impedanceit quo minus id ,
COLLAPSED_HEIGHT_2,COLLAPSED_HEIGHT_2,
EXPANDED_HEIGHT_4));
listItems
.add(new ListItem(
Temporibus autem quibusdam et aut officiis debitis aut rerum needitatibus saepe eveniet ut et feuptated 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 dueias aut perferendis doloribus asperiores repellat,
COLLAPSED_HEIGHT_1,COLLAPSED_HEIGHT_1,
EXPANDED_HEIGHT_4));
}
}
I have a cell in a ListView that has a bunch of text in it. I show the first two rows of text and then end it with a "..." if it goes beyond. I want a user to be able to touch the cell and have it expand dynamically within the view, displaying all of the data. Then when they touch the cell again, it contracts back to it's normal size.
I've seen an iOS app do this and it's very cool. Is there any way to do this with Android? How?
I've implemented a simple code that works in all Android's sdk versions.
See below its working and the code.
Github code: https://github.com/LeonardoCardoso/Animated-Expanding-ListView
For information on my website: http://android.leocardz.com/animated-expanding-listview/
Basically, you have to create a custom TranslateAnimation and a Custom List Adapter and, while it's animating, you have to update the current height of listview item and notify the adapter about this change.
Let's go to the code.
List Item layout
<?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>
Activity Layout
<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>
List Item class
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; } }
View Holder class
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; } }
Custom Animation class
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(); } }
Custom List Adapter class
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; } }
Main Activity
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)); } }
这篇关于如何在Android中的ListView中创建一个单元格,在触摸时会垂直展开和合并?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!