2. 程式人生 > >Android學習筆記（八）--CoordinatorLayout的應用-仿支付寶介面

Android學習筆記（八）--CoordinatorLayout的應用-仿支付寶介面

阿新 • • 發佈：2019-02-14

哈哈，差不多有一個禮拜沒有更新，去廣東那邊旅遊了四五天所以就沒有更新，接下來就要恢復正常了，又要開始學習了。今天帶來的是關於CoordinatorLayout的應用，模仿著支付寶做了一個介面，先看一下效果圖吧。
這裡寫圖片描述
實現了和支付寶一樣的上滑收縮和變化的功能。核心使用的就是今天要說的coordinatorLayout。CoordinatorLayout作為“super-powered FrameLayout”基本實現兩個功能：
1、作為頂層佈局
2、排程協調子佈局
就我的大白話來說就是協調子View之間動作的一個父View,通過Behavior來給子view實現互動的。
另外使用CoordinatorLayout需要在Gradle加入Support Design Library

compile 'com.android.support:design:24.2.1'

然後先看一下主佈局。

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
 

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.sp.coordinatortry.MainActivity">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
 

        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="@color/color1984D1"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
            app:title=" ">
            <include layout="@layout/shenghuo_head1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="100dp"
                android:layout_marginBottom="25dp"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.8"/>
            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:contentInsetLeft="0dp"

                app:layout_collapseMode="pin">
                <include android:id="@+id/toolbar1"
                    layout="@layout/toolbar_head1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>
                <include android:id="@+id/toolbar2"
                    layout="@layout/toolbar_head2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:visibility="gone"/>
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
    <include layout="@layout/content_scrolling"/>
</android.support.design.widget.CoordinatorLayout>

shenghuo_head1和head2分別是如下這裡寫圖片描述
這裡寫圖片描述
就不放具體程式碼了，可以自己自由的來實現，也不用非要拘泥於支付寶的樣子。
然後是toolbar_head1和head2.分別是拖拉前後的樣子。
這裡寫圖片描述這裡寫圖片描述
然後content_scrolling就是一個簡單的recyclerView，itemlayout則是一個CardView嵌套了一個TextView。
先放一下這個RecyclerView的Adapter。

package com.sp.coordinatortry;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by Jack on 2016/9/16.
 */

public class ToolbarAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder>{

    private Context context;

    public ToolbarAdapter(Context context){
        this.context=context;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if(viewType==0){
           return new ItemView(LayoutInflater.from(context).inflate(R.layout.shenghuo_head2,null));
        }else{
           return new ItemView(LayoutInflater.from(context).inflate(R.layout.layout_item,parent,false));
        }
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 50;
    }

    @Override
    public int getItemViewType(int position) {
        if(position==0){
            return 0;
        }else{
            return 1;
        }
    }

    class ItemView extends RecyclerView.ViewHolder{
        public ItemView(View itemView) {
            super(itemView);
        }
    }

}

都很清晰簡單，也不多說了。整個實現過程中最關鍵的就是在activity中的實現。先來介紹一下OnOffsetChangedListener。這個方法在AppBarLayout的佈局偏移量發生改變時被呼叫。這個方法允許子view根據偏移量實現自定義的行為（比如在特定的時候更改View）。

      mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (verticalOffset == 0){
                    //張開
                    mToolbar1.setVisibility(View.VISIBLE);
                    mToolbar2.setVisibility(View.GONE);
                    setToolbar1Alpha(255);
                } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
                    //收縮
                    mToolbar1.setVisibility(View.GONE);
                    mToolbar2.setVisibility(View.VISIBLE);
                    setToolbar2Alpha(255);
                } else {
                    int alpha=255-Math.abs(verticalOffset)-150;
                    if(alpha<=0){
                        //收縮toolbar
                        mToolbar1.setVisibility(View.GONE);
                        mToolbar2.setVisibility(View.VISIBLE);
                        setToolbar2Alpha(Math.abs(verticalOffset));
                    }else{
                        //張開toolbar
                        mToolbar1.setVisibility(View.VISIBLE);
                        mToolbar2.setVisibility(View.GONE);
                        setToolbar1Alpha(alpha);
                    }
                }
            }
        });

該activity中的應用如上。核心就設定AppBarLayout 的監聽器addOnOffsetChangedListener來進行效果的處理。當verticalOffset=0的時候即使整個展開的是時候要做的就是顯示要顯示的，隱藏要隱藏的設定，在設定透明度，同理當verticalOffset等於appBarLayout.getTotalScrollRange()即等於最大值的時候，就是關閉的時候，處理的展開相反。當他在中間值的時候，通過`int alpha=255-Math.abs(verticalOffset);得到要設定的透明度。當alpha小於0的時候是執行展開的toolbar的透明度效果，反之大於0的時候是閉合時toolbar的透明圖效果。
然後看一下完整的程式碼。

package com.sp.coordinatortry;

import android.graphics.Color;
import android.support.design.widget.AppBarLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private AppBarLayout mAppBarLayout=null;
    private View mToolbar1=null;
    private View mToolbar2=null;

    private ImageView mZhangdan=null;
    private TextView mZhangdan_txt=null;
    private ImageView mTongxunlu=null;
    private ImageView mJiahao=null;

    private ImageView mZhangdan2=null;
    private ImageView mShaoyishao=null;
    private ImageView mSearch=null;
    private ImageView mZhaoxiang=null;

    private RecyclerView myRecyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myRecyclerView=(RecyclerView)findViewById(R.id.myRecyclerView);
        myRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        myRecyclerView.setAdapter(new ToolbarAdapter(this));

        mAppBarLayout=(AppBarLayout)findViewById(R.id.app_bar);
        mToolbar1=(View)findViewById(R.id.toolbar1);
        mToolbar2=(View)findViewById(R.id.toolbar2);
        mZhangdan=(ImageView)findViewById(R.id.img_zhangdan);
        mZhangdan_txt=(TextView)findViewById(R.id.img_zhangdan_txt);
        mTongxunlu=(ImageView)findViewById(R.id.tongxunlu);
        mJiahao=(ImageView)findViewById(R.id.jiahao);
        mZhangdan2=(ImageView)findViewById(R.id.img_shaomiao);
        mShaoyishao=(ImageView)findViewById(R.id.img_fukuang);
        mSearch=(ImageView)findViewById(R.id.img_search);
        mZhaoxiang=(ImageView)findViewById(R.id.img_zhaoxiang);

        mAppBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                if (verticalOffset == 0){
                    //張開
                    mToolbar1.setVisibility(View.VISIBLE);
                    mToolbar2.setVisibility(View.GONE);
                    setToolbar1Alpha(255);
                } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {
                    //收縮
                    mToolbar1.setVisibility(View.GONE);
                    mToolbar2.setVisibility(View.VISIBLE);
                    setToolbar2Alpha(255);
                } else {
                    int alpha=255-Math.abs(verticalOffset);
                    if(alpha<=0){
                        //收縮toolbar
                        mToolbar1.setVisibility(View.GONE);
                        mToolbar2.setVisibility(View.VISIBLE);
                        setToolbar2Alpha(Math.abs(verticalOffset));
                    }else{
                        //張開toolbar
                        mToolbar1.setVisibility(View.VISIBLE);
                        mToolbar2.setVisibility(View.GONE);
                        setToolbar1Alpha(alpha);
                    }
                }
            }
        });
    }

    //設定展開時各控制元件的透明度
    public void setToolbar1Alpha(int alpha){
        mZhangdan.getDrawable().setAlpha(alpha);
        mZhangdan_txt.setTextColor(Color.argb(alpha, 255, 255, 255));
        mTongxunlu.getDrawable().setAlpha(alpha);
        mJiahao.getDrawable().setAlpha(alpha);
    }

    //設定閉合時各控制元件的透明度
    public void setToolbar2Alpha(int alpha){
        mZhangdan2.getDrawable().setAlpha(alpha);
        mShaoyishao.getDrawable().setAlpha(alpha);
        mSearch.getDrawable().setAlpha(alpha);
        mZhaoxiang.getDrawable().setAlpha(alpha);
    }

}

到此就基本實現了。上面程式碼參考了一些他人的部落格，導致自己對appbarlayout和CoordinatorLayout的應用還不是很深入，還要繼續學習啊。

相關推薦

Android學習筆記（八）--CoordinatorLayout的應用-仿支付寶介面

哈哈，差不多有一個禮拜沒有更新，去廣東那邊旅遊了四五天所以就沒有更新，接下來就要恢復正常了，又要開始學習了。今天帶來的是關於CoordinatorLayout的應用，模仿著支付寶做了一個介面，先看一下效果圖吧。 實現了和支付寶一樣的上滑收縮和變化的功能。核

Ionic3學習筆記（八）使iOS端、Android端 Navbar 透明化

href 添加 down nic ionic navbar str div 學習 本文為原創文章，轉載請標明出處 若要使iOS端 Navbar 透明，只需要給 ion-navbar 添加 transparent 屬性，但是Android端依舊會有一條border在，所以再給

Kubernetes學習筆記（八）:Deployment--宣告式的升級應用

## 概述 本文核心問題是：如何升級應用。 對於Pod的更新有兩種策略： - 一是刪除全部舊Pod之後再建立新Pod。好處是，同一時間只會有一個版本的應用存在；缺點是，應用有一段時間不可用。 - 二是先建立新Pod，再刪除舊Pod。可以一次性建立全部，再刪除全部，也可以逐漸建立刪除。好處是應用一直可用，缺點是

機器學習筆記（八）非線性變換

nbsp 線性 logs 等於 線性模型 images http 自己 空間 一、非線性問題 對於線性不可分的數據資料，用線性模型分類，Ein會很大，相應的Ein=Eout的情況下，Eout也會很大，導致模型表現不好，此時應用非線性模型進行分類，例如： 分類器模型是一個圓

匯編入門學習筆記 （八）—— 轉移指令

無條件轉移 fse ear tom 內存 star space off 編譯器 瘋狂的暑假學習之 匯編入門學習筆記 （八）—— 轉移指令 參考： 《匯編語言》 王爽 第9章 能夠改動ip或者同一時候改動cs和ip的指令統稱

流暢的python和cookbook學習筆記（八）

不可變 pri 列表 改變 如果 book 影響 color print 1.函數的默認參數必須不可變 　　如果函數的默認參數為可變的對象，那麽默認參數在函數外被修改也會影響到函數本身的。 >>> def spam(a, b=None): # b要為不

Python學習筆記（八）

base 函數式編程 輸出 必須 返回 叠代 use map 作用 一、變量可以指向一個函數 　　a = abs 二、通過調用指向函數的變量可以執行該函數 　　a = abs　　a(-10) 三、指向函數的變量可以作為參數傳遞給一個函數 　　def add(x,y,f):　

EF學習筆記（八）：更新關聯數據

tro rop es2017 net sage red ida string entity 學習筆記主目錄鏈接：ASP.NET MVC5 及 EF6 學習筆記 - （目錄整理） 上一篇鏈接：EF學習筆記（七）：讀取關聯數據 本篇原文鏈接：Updating Related D

python學習筆記（八）面向對象擴展

archive ive 解釋 alt bound take src pri 執行 原鏈：http://www.cnblogs.com/vamei/archive/2012/06/02/2532018.html 筆記：今天的內容感覺自己理解不太容易 1 #昨天學習定義m

java學習筆記（八）：繼承

this關鍵字 log implement java學習 方式 show 使用 類型 多繼承 繼承 子類擁有父類非private的屬性，方法。 子類可以擁有自己的屬性和方法，即子類可以對父類進行擴展。 子類可以用自己的方式實現父類的方法。 Java的繼承

Java框架spring Boot學習筆記（八）：Spring相關概念

擴展 靜態 輕量級 想要 spring配置 核心 使用 oot 調用方法 Spring是開源、輕量級、一站式框架。 Spring核心主要兩部分 aop:面向切面編程，擴展功能不是修改源代碼實現 ioc:控制反轉，比如一個類，在類裏面有方法（不是靜態的方法），想要調用類

python學習筆記（八）之運算符

技術 ima 學習 表達式 water nag proc 說明 ddc python學習筆記（八）之運算符 算術運算符 比較運算符 邏輯運算符（1）布爾運算（2）復雜的布爾表達式 說明：以上內容摘自《跟老齊學python》python學習筆記（八）之運算符

【大話存儲】學習筆記（八），數據保護

clip 調度員 系統管 區域 工具 管理軟件 安裝 inf 利用 第一章 數據保護 所謂數據保護是指對當前位置上的數據進行備份，不一定是實時的。這樣帶來的好處是如果發生磁盤損壞或者說被修改了，可以通過備份數據找回 1.1 文件級備份 文件級備份：將磁盤上所有文件通過調用文

day5-Python學習筆記（八）內置函數

lte lis map 真的 數據類型 小白 十進制 list all #函數即變量# len type print input str# print(all([1, 2, 3, 4])) # 判斷可叠代的對象裏面的值是否都為真# print(any([0, 1, 2,

《Qt5 開發與實例（第三版）》學習筆記（八）

nbsp font public insert enter body win parent hbox 1 // 3.3 堆棧窗體 QStackedWidget類 2 //stackdlg.h 3 #ifndef STACKDLG_H 4 #define STACK

Linux學習筆記（八）文件和目錄權限chmod、更改所有者和所屬組chown、umask、隱藏權限

筆記 前三 表示 col color 新建 ttr 執行文件 mar 一、chmod chmod 命令用於修改文件或者文件夾的權限， 之前學習過 ls -l 如圖，第一位-之前已經學習過，代指這是一個文本之後的 rw-r--r--是文件的權限前三位rw-是文件所有者的權限中

Nodejs學習筆記（八）—Node.js + Express 實現上傳文件功能（felixge/node-formidable）

blog args 一個 type屬性 ole java mod device 前端 前言 　　前面講了一個構建網站的示例，這次在此基礎上再說說web的常規功能----文件上傳，示例以一個上傳圖片的功能為例子 　　上傳功能命名用formidable實現，示例很簡單! 　　P

kettle學習筆記（八）——kettle查詢步驟與連接步驟

ttl 配置 實例 nio ket 裏的 mage 2.x 步驟 一、概述　 　　查詢步驟：　　　　用來查詢數據源裏的數據並合並到主數據流中 。　　連接步驟：　　　　結果集通過關鍵字進行連接 。（與前面的UNION不同） 二、查詢步驟 　　1.流查詢 　　 　　　　流查詢示

Redis學習筆記（八）——持久化

配置信息 成功 一個 filename 自動啟用 復數 裏的 ont 安全性 一、介紹 　　Redis的所有的數據都存在內存中，然後不定期的通過異步方式保存到磁盤上（這稱為"半持久化模式"）；也可以把每一次數據變化都寫入到一個append only file（aof）裏面（

吳恩達深度學習筆記（八） —— ResNets殘差網絡

con 一個 學習 ets str 帶來 圖片 梯度 就是 （好累……，明日在寫……） 主要內容： 一.殘差網絡簡介 二.identity block 和 convolutional block 一.殘差網絡簡介 1.深度神經網絡很大的一個優點就是能夠表示一個