android堆叠效果相册_Android 堆叠式布局实现（一）简单堆叠式布局

写在前面的几句话

堆叠式布局，顾明思议，堆在一起的布局，我百度了一下好像还真没有太多关于这个方面的讲解，刚好最近学习的时候有看到这个方面的知识，那就把学习相关的东西记录下来，方便别人的学习，也对自己后面知识的巩固和温习有帮助。

首先给大家看看使用到堆叠式布应用的场景，

图1 大街App堆叠式布应用场景

图2 易信App堆叠式布应用场景

图3 某个Gif设计图实现效果

看完以后大家是不是还是觉得蛮酷炫的，有的其实还蛮复杂的，但是其实实现一个简单的堆叠式的布局没有想象的复杂，实际上就是自定义的layout来实现的，从简单到复杂，这一篇文章呢就实现一个简单一点的堆叠式的布局，让大家对这个方面有一定的了解

首先看下最后实现的效果

图4 简单堆叠式布局的实现

看起来是不是感觉效果还蛮不错的，其实实现起来也不复杂，很简单

那么我们根据这个图来分析下怎么实现这个效果

抛开动画效果，我们发现当移动第一个item的时候后面的第二个item其实是已经加载好了的，同样的当第二个item移动的时候第三个也是加载好了的，什么触发第三个加载好呢？显然是第一个消失的时候取触发的，这个是不是有点像ListView/RecycleView的效果，同样实现呢也是用这种方式来实现的，可以理解为一个简易版本的ListView/RecycleView。

接下来就一步一步实现上述的效果了

Step1.新建一个自定义的StackLayout与Adapter

StackLayout.Class

public class StackLayout extends FrameLayout{

public StackLayout(Context context) {

this(context,null);

}

public StackLayout(Context context, AttributeSet attrs) {

this(context, attrs, 0);

}

public StackLayout(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

}

}

StackAdapter.Class

public class StackAdapter extends ArrayAdapter{

public StackAdapter(Context context) {

super(context, R.layout.item_stack);

}

@Override

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

View view = convertView;

if (view == null) {

view = LayoutInflater.from(parent.getContext())

.inflate(R.layout.item_stack, parent, false);

}

final String name = (String)getItem(position);

((TextView)view.findViewById(R.id.name)).setText(name);

final View completeView = view.findViewById(R.id.completeCommand);

view.setTag(name);

completeView.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

remove(name);

notifyDataSetChanged();

}

});

return view;

}

}

Adapter的方法很简单，就是显示了xml里面的布局，旁边的View按下的是时候会把当前的Item移除掉，然后notifyDataSetChanged 让Adapter去更新

Step2.StackLayout与Adapter建立连接

首先在StackLayout中添加连接SetAdapter方法

public void setAdapter(ArrayAdapter adapter){

if (adapter == null){

throw new IllegalArgumentException("adapter not null");