listView动态影藏显现列表项中的多项部分

现在很多流行的APP要表达的内容都很多,很多app为了节省布局资源,在listview 的靠右的部分加入了“更多”之类的字样,提醒用户点击这里 可以看到跟多的内容,这样整个listview要表达的内容就少了,看起来就要简洁舒服。接下来我就为大家实现一下这个特效。先来看看效果,源码放在最后供下载参看:

效果看完了,那就来一步一步实现这个效果。

1.布局代码如下:

主布局:

<LinearLayout 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" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView"
        android:layout_gravity="center_horizontal" />
</LinearLayout>

单项布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="100dp">

        <ImageView
            android:id="@+id/touXiang"
            android:background="#f00"
            android:layout_width="100dp"
            android:layout_height="match_parent" />

        <TextView
            android:id="@+id/tv"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"/>

        <Button
            android:id="@+id/more"
            android:layout_width="60dp"
            android:layout_height="match_parent"
            android:background="#ccc"
           android:text="更多"/>
    </LinearLayout>
    <LinearLayout
        android:id="@+id/moreLayout"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#aaa"
        android:gravity="center|center_horizontal">

        <ImageButton
            android:id="@+id/dianZan"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/shoucang"/>
    </LinearLayout>
</LinearLayout>

效果如下:

2、主代码如下:

package com.example.my.learnactionbarexample;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private ListView lv;
    private item item;
    private ArrayList<item> items;
    private int[] touxiang ={R.drawable.touxiang1,R.drawable.touxiang2,R.drawable.touxiang3,
            R.drawable.touxiang4,R.drawable.touxiang5,R.drawable.touxiang6};

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

        lv = (ListView) findViewById(R.id.listView);
        items = new ArrayList<item>();
        for (int i = 0; i < 6; i++) {
            item = new item();
            item.setName("名字:"+i);
            item.setImg(touxiang[i]);
            item.setIsDianZan(false);
            items.add(item);
        }
        lv.setAdapter(new myAdapter(MainActivity.this,items));

    }

} 

自定义实体类如下:

package com.example.my.learnactionbarexample;

/**
 * Created by Administrator on 2015/11/16.
 */
public class item {

    public Integer getImg() {
        return img;
    }

    public void setImg(Integer img) {
        this.img = img;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Boolean getIsDianZan() {
        return isDianZan;
    }

    public void setIsDianZan(Boolean isDianZan) {
        this.isDianZan = isDianZan;
    }

    private Integer img;
    private String name;
    private Boolean isDianZan;
}

实体类主要是封装一些单项列表的数据,这个可以根据具体情况定义,我这拿点赞来做演示。
3、BaseAdapter的实现:

package com.example.my.learnactionbarexample;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;

/**
 * Created by Administrator on 2015/11/16.
 */
public class myAdapter extends BaseAdapter {

    private Context context;
    private ArrayList<item> items;
    private LayoutInflater inflater;

    private Boolean[] isOpens = new Boolean[20];

    public myAdapter(Context context, ArrayList<item> items) {
        this.context = context;
        this.items = items;
        inflater = LayoutInflater.from(context);

        for (int i = 0; i < items.size(); i++) {
            isOpens[i] = false;
        }
    }

    @Override
    public int getCount() {
        return items.size();
    }

    @Override
    public Object getItem(int position) {
        return items.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(final int position, View convertView, ViewGroup parent) {

        ViewHolder holder = null;
        if (convertView == null){
            holder = new ViewHolder();

            convertView = inflater.inflate(R.layout.list_item,null);

            holder.tv = (TextView) convertView.findViewById(R.id.tv);
            holder.touXiang = (ImageView) convertView.findViewById(R.id.touXiang);
            holder.more = (Button) convertView.findViewById(R.id.more);
            holder.ll = (LinearLayout) convertView.findViewById(R.id.moreLayout);
            holder.dianZan = (ImageButton) convertView.findViewById(R.id.dianZan);
            convertView.setTag(holder);

        }else {
            holder = (ViewHolder) convertView.getTag();
        }
        holder.touXiang.setImageResource(items.get(position).getImg());
        holder.tv.setText(items.get(position).getName());
        if (items.get(position).getIsDianZan()){
            holder.dianZan.setImageResource(R.drawable.dianzan1);
        }else {
            holder.dianZan.setImageResource(R.drawable.dianzan0);
        }

        holder.more.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (isOpens[position]) {
                    isOpens[position] = false;
                    notifyDataSetChanged();
                } else {
                    isOpens[position] = true;

                    for (int i = 0; i < getCount(); i++) {
                        if (i == position){
                           continue;
                        }
                        isOpens[i] = false;
                    }
                    notifyDataSetChanged();
                }
            }
        });
        if (isOpens[position]){
            holder.ll.setVisibility(View.VISIBLE);
        }else {
            holder.ll.setVisibility(View.GONE);
        }

        holder.dianZan.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (items.get(position).getIsDianZan()){
                    items.get(position).setIsDianZan(false);
                }else {
                    items.get(position).setIsDianZan(true);
                }
                notifyDataSetChanged();
            }
        });

        return convertView;
    }

    public final class ViewHolder{

        private TextView tv;
        public ImageView touXiang;
        public Button more;
        public LinearLayout ll;
        public ImageButton dianZan;
    }
}

源码下载地址

文章导航