Android仿QQ空間頂部條背景變化效果

更新時(shí)間：2018年04月04日 13:32:48 作者：Chin_style

這篇文章主要介紹了Android仿QQ空間頂部條背景變化效果 ,qq空間的這個(gè)頁面其實(shí)很簡(jiǎn)單，感興趣的朋友跟隨腳本之家小編一起看看吧

本文給大家分享仿QQ空間頁面頂部條隨界面滑動(dòng)背景透明度變化的效果，這個(gè)效果在其他應(yīng)用程序中也很常見，技能+1。

一、上代碼，具體實(shí)現(xiàn)

筆者之前的文章第二部分總是二話不說，直接上代碼，很干脆，其實(shí)更好的方式是引導(dǎo)讀者思考：這個(gè)效果如何實(shí)現(xiàn)。前期做好效果的功能分析，才能讀者更好的理解。

QQ空間的這個(gè)頁面其實(shí)并不復(fù)雜，我們看看QQ空間的演示界面：

可以看見，整個(gè)頁面其實(shí)只有兩個(gè)根元素，一個(gè)是ListView，一個(gè)是標(biāo)題欄，前者可以上下滑動(dòng)，給用戶呈現(xiàn)內(nèi)容；后者固定位置不動(dòng)，類似于一個(gè)導(dǎo)航欄，左邊一個(gè)返回鍵圖標(biāo)，中間一段文字，右邊一個(gè)內(nèi)容添加圖標(biāo)，與用戶進(jìn)行交互。那么我們要自定義的View是哪一個(gè)，明顯是樣式變化的ListView，因?yàn)樗L(zhǎng)的和普通的ListView不一樣，“誰家的ListView頂個(gè)黑色矩形做頭部”

①自定義View代碼段——核心代碼段

package com.example.administrator.myview; 
import android.content.Context; 
import android.util.AttributeSet; 
import android.view.LayoutInflater; 
import android.view.View; 
import android.widget.AbsListView; 
import android.widget.ListView; 
/** 
 * Created by Administrator on 2018/4/3 0003. 
 * 拿到ListView滾動(dòng)事件 
 * 拿到高度變化 
 * 根據(jù)高度變化，設(shè)置頂部條的背景 
 * powered by Cpf.com. 
 */ 
public class ScrollChangeHeadView extends ListView { 
  private View viewHead; 
  private View topBar; 
  public ScrollChangeHeadView(Context context,AttributeSet attrs) { 
    super(context,attrs); 
  viewHead = LayoutInflater.from(context).inflate(R.layout.scroll_change_head,null); 
    addHeaderView(viewHead);//這個(gè)addHeaderView 
  setOnScrollListener(new OnScrollListener() { 
    @Override 
    public void onScrollStateChanged(AbsListView view, int scrollState) { 
    } 
    @Override 
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { 
      if (topBar != null) { 
        //滾動(dòng)中 
        int headTop = viewHead.getTop(); 
        headTop = Math.abs(headTop); 
        //0-255 0是全透明 255是不透明 
        topBar.getBackground().setAlpha(headTop); 
      } 
    } 
  }); 
  } 
  //人為的構(gòu)造一個(gè)方法，用來傳值，主類獲取對(duì)象實(shí)例之后，通過自定義的這個(gè)方法把對(duì)象傳入第二類，然后第二類才能做事 
  public void setTopBar(View v){ 
    topBar = v; 
  } 
}

本段代碼是核心代碼段：我們?cè)谶@段代碼里做了最關(guān)鍵的三件事：

1）拿到在自定義View內(nèi)部拿到ListView的滾動(dòng)事件；

2）在滾動(dòng)事件里面拿到矩形頭部的高度變化；

3）根據(jù)矩形頭部的高度變化，設(shè)置頂部條的背景；

在其中，還涉及了幾個(gè)方法，這里簡(jiǎn)單講解一下，幫助讀者理解，1） addHeaderView(),這個(gè)方法是ListView中方法，作用就是Add a fixed view to appear at the top of the list.為L(zhǎng)istView的頂部部分增加一個(gè)頂部矩形；2）getTop()，這個(gè)方法是View中的方法，作用就是Top position of this view relative to its parent.，作用就是獲得一個(gè)View的高度，在滾動(dòng)事件里調(diào)用這個(gè)方法，就可以不斷得到View的高度數(shù)據(jù)，以便于當(dāng)做參數(shù)值傳入setAlpha()方法中。

②自定義View的XML布局文件

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:orientation="vertical"> 
  <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="100dp" 
    android:background="#0f0c2f" 
    android:gravity="center" 
    android:orientation="vertical"> 
    <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="我是head" 
      android:textColor="#fff" /> 
  </LinearLayout> 
</LinearLayout>

這個(gè)布局文件里面，我們?cè)O(shè)置了添加進(jìn)ListView的頂部部分的樣式，也就是矩形的樣式，便于顯示，這里的顏色設(shè)置為何QQ空間的頂部背景色一樣。

③主布局XML文件中引入自定義布局

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin" 
  android:paddingLeft="@dimen/activity_horizontal_margin" 
  android:paddingRight="@dimen/activity_horizontal_margin" 
  android:paddingTop="@dimen/activity_vertical_margin" 
  tools:context="com.example.administrator.myview.MainActivity"> 
  <com.example.administrator.myview.ScrollChangeHeadView 
    android:id="@+id/schv" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"></com.example.administrator.myview.ScrollChangeHeadView> 
  <LinearLayout 
    android:id="@+id/topBar" 
    android:layout_width="match_parent" 
    android:layout_height="45dp" 
    android:background="#12b7f5" 
    android:gravity="center" 
    android:orientation="horizontal"> 
    <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="QQ空間" 
      android:textColor="#fff"/> 
  </LinearLayout> 
</RelativeLayout>

主布局文件中引入了自定義的LlstView，然后再在后面布局了一個(gè)LinerLayout，作為頂部條的裝載容器，放入一個(gè)TextView，用于顯示頂部條文字。

④主Activity代碼段

package com.example.administrator.myview; 
import android.os.Bundle; 
import android.support.v7.app.AppCompatActivity; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.BaseAdapter; 
import android.widget.LinearLayout; 
import android.widget.TextView; 
public class MainActivity extends AppCompatActivity { 
    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
      super.onCreate(savedInstanceState); 
      setContentView(R.layout.activity_main); 
      LinearLayout topBar = (LinearLayout) findViewById(R.id.topBar); 
      ScrollChangeHeadView schv = (ScrollChangeHeadView) findViewById(R.id.schv); 
      schv.setTopBar(topBar); 
      schv.setAdapter(new BaseAdapter() { 
        @Override 
        public int getCount() { 
          return 100; 
        } 
        @Override 
        public Object getItem(int position) { 
          return null; 
        } 
        @Override 
        public long getItemId(int position) { 
          return 0; 
        } 
        @Override 
        public View getView(int position, View convertView, ViewGroup parent) { 
          TextView tv = new TextView(MainActivity.this); 
          tv.setText("+"+position); 
          return tv; 
        } 
      }); 
  } 
}

主Activity中，我們獲取到了兩個(gè)控件，1)然后給自定義的ListView設(shè)置適配器和簡(jiǎn)單的傳入數(shù)據(jù)；2）接著把頂部條的實(shí)例對(duì)象topBar獲取到，作為參數(shù)傳入到自定義控件里面去。

運(yùn)行效果如下：

小結(jié)：本節(jié)內(nèi)容主要是實(shí)現(xiàn)了一個(gè)仿QQ空間頂部條隨滾動(dòng)事件發(fā)生而背景變化的效果，在應(yīng)用程序中的使用率蠻高，還有一些其他的對(duì)于頂部條的處理，其實(shí)現(xiàn)方式其實(shí)都比較類似，比如下面這個(gè)“廚房故事”（2016年谷歌Material Design設(shè)計(jì)獎(jiǎng)獲得者）的應(yīng)用程序（筆者用的是最新版本），其頂部條的變化，我們也可以運(yùn)用上面的方法，進(jìn)行實(shí)現(xiàn)，效果是頂部條隨滾動(dòng)事件的發(fā)生而出現(xiàn)或者隱藏。有興趣的讀者，可以參考筆者的代碼進(jìn)行實(shí)現(xiàn)。