有時做項目遇到ListView或ScrollView上方加圖片和標題欄布局,在滾動時要求改變標題欄的透明度,即上滑標題欄出現,下拉標題欄變透明,類似百度手機助手6.0裝機必備界面效果



要實現這種標題欄透明度隨滾動漸變的動畫很簡單,我們只需要實現onScroll方法就可以,完成對HeaderView的位置檢測,然后通過HeaderView的高度和顯示的高度來計算比例,設置TitleBar的背景圖片的透明度即可,此種實現方法與FadingActionBar是不同的。詳細實現源碼如下:
public class MainActivity extends Activity implements OnScrollListener {
private XListView listView;
// 標題欄的布局
private RelativeLayout 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.main);
title = (RelativeLayout) findViewById(R.id.title);
listView = (XListView) findViewById(R.id.list);
title.getBackground().setAlpha(0);
inflater = LayoutInflater.from(this);
headerView = inflater.inflate(R.layout.header, 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;
title.getBackground().setAlpha((int) (f * 255));
// 通知標題欄刷新顯示
title.invalidate();
}
}
} else if (firstVisibleItem > 1) {
title.getBackground().setAlpha(255);
} else {
title.getBackground().setAlpha(0);
}
}
}
