我们在做类似于个人主页类应用的时候,可能会遇到这样的需求,效果如下
相信大家应该看明白是什么效果了,就是随着列表的滑动,上面的栏的透明度会随之变化。在IOS中,有很多的软件有这种效果,下面,我们看一下这种效果是如何实现的。
先看一下项目的目录
我们可以看到,目录结构很简单,因为我这个地方是使用的XListview代替的Listview,有很多文件都是XListview自带的,所以显得文件多一些,如果没使用过XListview,请先百度XListview看看。
这里面,我们需要重点关注的只有一个文件,就是MainActivity,我们的关键代码都在这里,下面,我们看一下代码实现
public class MainActivity extends Activity implements OnScrollListener {
private XListView listView;
// 栏的布局
private RelativeLayout rl_title;
// ListView的头布局
private View headerView;
// 头布局的高度
private int headerHeight;
private LayoutInflater inflater;
private Handler handler = new Handler();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rl_title = (RelativeLayout) findViewById(R.id.rl_title);
listView = (XListView) findViewById(R.id.list);
rl_title.getBackground().setAlpha(0);
inflater = LayoutInflater.from(this);
headerView = inflater.inflate(R.layout.header_listview, null);
// 添加头布局
listView.addHeaderView(headerView);
listView.setAdapter(new MyAdapter());
// 设置滚动监听
listView.setOnScrollListener(this);
// 设置可以刷新与加载更多
listView.setPullLoadEnable(true);
listView.setPullRefreshEnable(true);
listView.setXListViewListener(new IXListViewListener() {
@Override
public void onRefresh() {
// 单纯的模拟刷新过程
handler.postDelayed(new Runnable() {
@Override
public void run() {
listView.stopRefresh();
}
}, 500);
}
@Override
public void onLoadMore() {
// 单纯的模拟加载过程
handler.postDelayed(new Runnable() {
@Override
public void run() {
listView.stopLoadMore();
}
}, 500);
}
});
}
// 自定义适配器
private class MyAdapter extends BaseAdapter {
// 默认显示10个item
@Override
public int getCount() {
return 10;
}
@Override
public Object getItem(int position) {
return position;
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
if (convertView == null) {
convertView = inflater.inflate(R.layout.item_list, null);
}
return convertView;
}
}
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
// 最重要的方法,栏的透明度变化在这个方法实现
@Override
public void onScroll(AbsListView listView, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {
// 判断当前最上面显示的是不是头布局,因为Xlistview有刷新控件,所以头布局的位置是1,即第二个
if (firstVisibleItem == 1) {
// 获取头布局
View view = listView.getChildAt(0);
if (view != null) {
// 获取头布局现在的最上部的位置的相反数
int top = -view.getTop();
// 获取头布局的高度
headerHeight = view.getHeight();
// 满足这个条件的时候,是头布局在XListview的最上面第一个控件的时候,只有这个时候,我们才调整透明度
if (top <= headerHeight && top >= 0) {
// 获取当前位置占头布局高度的百分比
float f = (float) top / (float) headerHeight;
rl_title.getBackground().setAlpha((int) (f * 255));
// 通知栏刷新显示
rl_title.invalidate();
}
}
} else if (firstVisibleItem > 1) {
rl_title.getBackground().setAlpha(255);
} else {
rl_title.getBackground().setAlpha(0);
}
}
}
代码是不是不复杂?我们只需要实现onScroll方法就可以,在这里面,完成我们对HeaderView的位置的检测,然后通过HeaderView的高度和显示的高度来计算比例,设置到TitleBar的背景图片的透明度即可。
是不是很神奇,希望大家喜欢。
您可能感兴趣的文章:android仿知乎ScrollView滚动改变栏透明度