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

2019-10-22 18:13:14

字體：大中小

來源：轉載

供稿：網友

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

一、上代碼，具體實現

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

QQ空間的這個頁面其實并不復雜，我們看看QQ空間的演示界面：

背景變化,android,qq空間

可以看見，整個頁面其實只有兩個根元素，一個是ListView，一個是標題欄，前者可以上下滑動，給用戶呈現內容；后者固定位置不動，類似于一個導航欄，左邊一個返回鍵圖標，中間一段文字，右邊一個內容添加圖標，與用戶進行交互。那么我們要自定義的View是哪一個，明顯是樣式變化的ListView，因為它長的和普通的ListView不一樣，“誰家的ListView頂個黑色矩形做頭部”

①自定義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滾動事件  * 拿到高度變化  * 根據高度變化，設置頂部條的背景  * 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);//這個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) {         //滾動中         int headTop = viewHead.getTop();         headTop = Math.abs(headTop);         //0-255 0是全透明 255是不透明         topBar.getBackground().setAlpha(headTop);       }     }   });   }   //人為的構造一個方法，用來傳值，主類獲取對象實例之后，通過自定義的這個方法把對象傳入第二類，然后第二類才能做事   public void setTopBar(View v){     topBar = v;   } }

本段代碼是核心代碼段：我們在這段代碼里做了最關鍵的三件事：

1）拿到在自定義View內部拿到ListView的滾動事件；

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

3）根據矩形頭部的高度變化，設置頂部條的背景；

在其中，還涉及了幾個方法，這里簡單講解一下，幫助讀者理解，1） addHeaderView(),這個方法是ListView中方法，作用就是Add a fixed view to appear at the top of the list.為ListView的頂部部分增加一個頂部矩形；2）getTop()，這個方法是View中的方法，作用就是Top position of this view relative to its parent.，作用就是獲得一個View的高度，在滾動事件里調用這個方法，就可以不斷得到View的高度數據，以便于當做參數值傳入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>

這個布局文件里面，我們設置了添加進ListView的頂部部分的樣式，也就是矩形的樣式，便于顯示，這里的顏色設置為何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，然后再在后面布局了一個LinerLayout，作為頂部條的裝載容器，放入一個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中，我們獲取到了兩個控件，1)然后給自定義的ListView設置適配器和簡單的傳入數據；2）接著把頂部條的實例對象topBar獲取到，作為參數傳入到自定義控件里面去。

運行效果如下：

背景變化,android,qq空間

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

背景變化,android,qq空間