Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
277 views
in Technique[技术] by (71.8m points)

java - How can I make a cell in a ListView in Android expand and contract vertically when it's touched?

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?

Closed

Opened

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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/

normal accordion

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.

  1. 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>
    
  2. 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>
    
  3. 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;
    }
    }
    
  4. 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;
     }
    }
    
  5. 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();
        }
      }
    
  6. 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;
    }
    
    }
    
  7. 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));
    
    list

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...