Android實現透明度可變的標題欄效果

我們在做類似於個人主頁類應用的時候，可能會遇到這樣的需求，效果如下

相信大家應該看明白是什麼效果了，就是隨著列表的滑動，上面的標題欄的透明度會隨之變化。在IOS中，有很多的軟件有這種效果，下面，我們看一下這種效果是如何實現的。
先看一下項目的目錄

我們可以看到，目錄結構很簡單，因為我這個地方是使用的XListview代替的Listview，有很多文件都是XListview自帶的，所以顯得文件多一些，如果沒使用過XListview，請先百度XListview看看。
這裡面，我們需要重點關注的只有一個文件，就是MainActivity，我們的關鍵代碼都在這裡，下面，我們看一下代碼實現

/**
 * 透明度可變的標題欄
 * 
 * @author Zhao KaiQiang
 * 
 * @Time 2014-6-20 上午11:46:42
 */
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的背景圖片的透明度即可。

是不是很神奇，希望大家喜歡。