Android實用功能(一)CollapsingToolbarLayout實現標題欄的伸縮
概述
CollapsingToolbarLayout作用是提供了一個可以摺疊的Toolbar,它繼承至FrameLayout,給它設定layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控制元件(如:ImageView、Toolbar)在響應layout_behavior事件時作出相應的scrollFlags滾動事件(移除螢幕或固定在螢幕頂端)。
效果圖
程式碼如下:
1、配置Gradle:
compile 'com.android.support:appcompat-v7:25.3.1'
compile 'com.android.support:design:25.3.1'
2、佈局檔案:
<?xml version="1.0" encoding="utf-8"?>
<!-- 實現滾動標題欄效果 -->
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipToPadding="true"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="240dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id ="@+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleGravity="left|center_vertical"
app:collapsedTitleTextAppearance="@style/CollapsingToolbarLayoutTitle"
app:expandedTitleTextAppearance="@style/CollapsingToolbarLayoutTitle"
app:contentScrim="@color/cl_titlebar_bg"
app:expandedTitleMarginEnd="12dp"
app:expandedTitleMarginStart="12dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<!--拉開後顯示的背景圖片-->
<ImageView
android:id="@+id/iv_background"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
android:src="@drawable/background_1"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"/>
<!--標題欄-->
<android.support.v7.widget.Toolbar
android:id="@+id/tool_bar"
android:layout_width="match_parent"
android:layout_height="@dimen/header_height"
app:layout_collapseMode="pin"
app:navigationIcon="@mipmap/ic_header_back"
>
<TextView
android:id="@+id/tv_share"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="right"
android:paddingLeft="@dimen/padding"
android:paddingRight="@dimen/padding"
android:textSize="16sp"
android:textColor="@color/white"
android:text="分享"/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="@+id/scroll_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
android:scrollbars="none"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:gravity="center_vertical"
android:paddingLeft="@dimen/padding"
android:paddingRight="@dimen/padding"
android:paddingTop="@dimen/padding"
android:text=""
android:textColor="@color/cl_title"
android:textSize="20sp" />
<TextView
android:id="@+id/tv_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_title"
android:gravity="center_vertical"
android:paddingLeft="@dimen/padding"
android:paddingRight="@dimen/padding"
android:paddingTop="6dp"
android:text=""
android:textColor="@color/gray_smoke"
android:textSize="13sp" />
<TextView
android:id="@+id/tv_content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tv_time"
android:gravity="center_vertical"
android:padding="@dimen/padding"
android:text=""
android:textColor="@color/cl_content"
android:textSize="16sp" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
在這裡對一些關鍵性的屬性作下說明:
(1)app:layout_scrollFlags:設定滾動標誌
- scroll 設定滾動;
- enterAlways 快速顯示View,也就是當向下滑動時候,立即就顯示View;
- exitUntilCollapsed 向上滾動收縮View;
- enterAlwaysCollapsed 當你的View已經設定minHeight屬性又使用此標誌時,你的View只能以最小高度進入,只有當滾動檢視到達頂部時才擴大到完整高度。
(2)contentScrim:收縮後標題欄的背景色
(3)layout_collapseMode :摺疊模式
- pin:當CollapsingToolbarLayout完全收縮後,Toolbar還可以保留在螢幕上;
- parallax:在內容滾動時,CollapsingToolbarLayout中的View(比如ImageView)也可以同時滾動,實現視差滾動效果,通常和layout_collapseParallaxMultiplier(視差因子)搭配使用。
(4)layout_behavior:@string/appbar_scrolling_view_behavior”。NestedScrollView設定該屬性後,就可以跟CollapsingToolbarLayout進行聯動了,相當於為兩者建立一種聯絡。
(5)其他的屬性有expandedTitleMarginStart(展開狀態時標題距離左邊的距離)、expandedTitleMarginEnd(展開狀態時標題距離右邊的距離)等。
(6)修改CollapsingToolbarLayout的標題大小:expandedTitleTextAppearance
樣式:
<!--CollapsingToolbarLayout標題大小-->
<style name="CollapsingToolbarLayoutTitle" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
<item name="android:textSize">18sp</item>
</style>
(7)修改Toolbar的navigation icon的padding值:
樣式:
<!--修改Toolbar的navigation icon的padding值 -->
<style name="myToolbarNavigationButtonStyle" parent="@style/Widget.AppCompat.Toolbar.Button.Navigation">
<item name="android:minWidth">0dp</item>
<item name="android:padding">12dp</item>
<item name="android:scaleType">centerInside</item>
</style>
然後我們將這個Activity的主題設定為:無標題,window背景色為白色,Toolbar的導航圖示的padding值
<!-- CollapsingToolbarLayoutActivity主題:無標題-->
<style name="NoTitleTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowNoTitle">true</item>
<!-- Actionbar/toolbar color -->
<!--<item name="colorPrimary">@color/colorPrimaryDark</item>-->
<!--狀態列顏色 color-->
<!--<item name="colorPrimaryDark">@color/colorPrimary</item>-->
<!--Window color-->
<item name="android:windowBackground">@color/white</item>
<!--修改Toolbar的navigation icon的padding值 -->
<item name="toolbarNavigationButtonStyle">@style/myToolbarNavigationButtonStyle</item>
</style>
3、Activity程式碼:
package com.ha.cjy.utilityfunction;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
/**
* CollapsingToolbarLayout實現上滑隱藏ToolBar
* Created by cjy on 17/11/21.
*/
public class CollapsingToolbarLayoutActivity extends AppCompatActivity implements View.OnClickListener {
private AppBarLayout mAppBarLayout;
private CollapsingToolbarLayout mCollapsingToolbarLayout;
private Toolbar mToolBar;
private TextView mTvTitle;
private TextView mTvTime;
private TextView mTvContent;
private TextView mTvShare;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.act_appbarlayout);
findControl();
initControl();
}
public void findControl() {
mAppBarLayout = (AppBarLayout) findViewById(R.id.appbar_layout);
mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
mToolBar = (Toolbar) mCollapsingToolbarLayout.findViewById(R.id.tool_bar);
mTvTitle = (TextView) findViewById(R.id.tv_title);
mTvTime = (TextView) findViewById(R.id.tv_time);
mTvContent = (TextView) findViewById(R.id.tv_content);
mTvShare = (TextView) findViewById(R.id.tv_share);
//這句話要加,不然底部滾動文字會顯示不全
setSupportActionBar(mToolBar);
}
public void initControl() {
//監聽展開摺疊狀態
mAppBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {
@Override
public void onStateChanged(AppBarLayout appBarLayout, State state) {
if( state == State.EXPANDED ) {//展開狀態
//使用CollapsingToolbarLayout必須把title設定到CollapsingToolbarLayout上,設定到Toolbar上則不會顯示
mCollapsingToolbarLayout.setTitle("展開狀態的標題");
}else if(state == State.COLLAPSED){//摺疊狀態
mCollapsingToolbarLayout.setTitle("詳情");
}else {//中間狀態
mCollapsingToolbarLayout.setTitle("");
}
}
});
mToolBar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
mTvShare.setOnClickListener(this);
refreshUI();
}
private void refreshUI() {
mTvTitle.setText(getString(R.string.txt_appbarlayout));
mTvTime.setText(getString(R.string.txt_time, "2017-11-21","2017-12-11"));
mTvContent.setText(getString(R.string.txt_content));
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.tv_share:{
Toast.makeText(this,"分享一次",Toast.LENGTH_SHORT).show();
break;
}
}
}
}
好了,到這裡就結束了,歡迎各位指教…….
相關推薦
Android實用功能(一)CollapsingToolbarLayout實現標題欄的伸縮
概述 CollapsingToolbarLayout作用是提供了一個可以摺疊的Toolbar,它繼承至FrameLayout,給它設定layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控制元件(如:Imag
Android從零開始之一步一步教你實現聯絡人功能(一)
在最近的專案中有這樣的一個需求,就是要實現類似聯絡人的列表,包含模糊查詢、按照A到Z拼音首字母分組排序、和收藏功能。參考了一下網上的例子,我覺得還是自己親自操刀來實現所有的功能。今天帶領大家先實現聯絡人右邊的側邊欄【A~Z】。先上一張圖: 可以看到,右邊是
Android相機開發(一)之預覽拍照檢視圖片基本功能的實現
前言 接觸Android開發有一段時間了。一開始時純粹是出於自己的興趣,空閒時寫幾個小軟體自娛自樂。剛好暑假時老闆佈置的任務跟Android相關,所以這段時間又繼續進行了Android的開發學習。現在的Android開發水平僅屬於
Struts2+Spring+Hibernate實現員工管理增刪改查功能(一)之ssh框架整合
pri support scrip ext ack efault ring src 兩張 前言 轉載請標明出處:http://www.cnblogs.com/smfx1314/p/7795837.html 本項目是我寫的一個練習,目的是回顧ssh框架的整合以及
關於Unity實現AR功能(一)
get 創建 leg 子物體 機制 9.png 菜單欄 設置 developer 一. 下載“Vuforia SDK” 官網鏈接:https://developer.vuforia.com/ 1.進行註冊賬號 2.註冊完成後,在Pricing界面進行選擇免費付費版等,
前端開發框架總結之利用Jtopo實現網路拓撲功能(一)
前端開發框架總結之利用Jtopo實現網路拓撲功能(一) 前言: 前段時間由於專案需要實現一個網路裝置拓撲管理的
python+openCV實現簡單的圖片搜尋功能(一)
一、圖片搜尋引擎有三種不同的模式 1.Search by Meta-Data:元資料搜尋模式,這種和傳統的文字搜尋類似,給索引資料新增文字註釋,上傳待查詢的圖片的時候,需要附加圖片的文字描述,實際在後臺搜尋對應的文字描述,典型的有 https://www.flickr.com/ 
PHP+MySQL實現留言板功能(一)
1.登陸註冊頁面前端設計 由於小編第一次寫部落格,加上前端知識還不夠紮實,本文小編著重處理後端,及PHP連線資料庫,實現新增留言,刪除留言功能。話不多說,我們直接上程式碼。 登陸頁面設計:我們將其命名為:in
Android二維碼掃描開發(一):實現思路與原理
【 回覆“ 1024 ”,送你一個特別推送 】 現在二維碼已經非常普及了,那麼二維碼的掃描與處理也成為了Android開發中的一個必要技能。網上有很多關於Android中二維碼處理的帖子,大都是在講開源框架zxing用法,然後貼貼程式碼就完了,並沒有一個系統的分析和
總結之java web實現分頁功能(一)
網頁開發離不開分頁,分頁如何實現呢 可以看一下百度的分頁有什麼功能 上一頁、下一頁、10頁按鈕、一頁顯示10條資訊 定義一個 PageResult類專門返回分頁所需資訊## public class PageResult { //滿足條件的
Android-活動部分功能(一)
Toast Toast,一種提醒機制。程式碼如下 Button button1 = (Button) findViewById(R.id.button_1); button1.setOnClickListener(new View.OnClickLi
android介面設計(一)側邊欄的兩種實現方式
dome:https://github.com/linliangliang/sidebar 一、使用slideingMenu結合fragment實現。 二、使用Navigation和DrawerLayout實現。 第二種實現方式:https://mp.csdn.net/postedit/
使用snmp4j實現Snmp功能(一)
插播一段宣告:樓主我其實就用了小半年的Snmp而已,就把學習心得發了出來,目的就是能夠引導大家入門,但是更深入的知識我就不知道啦。請大家不要再問我問題了,我知道的都已經寫出來啦,謝謝! 上一篇有關Snmp的文章已經是一年前寫的了,因為工作等各種原因,一直沒有繼續下去。但
Android Camera學習(一):如何實現轉動螢幕介面選單跟著轉動效果
最近公司在做車載專案,需要把照相機原本豎向顯示改為橫向顯示。所以研究了下camera選單朝向的問題。 系統提供了一個監聽sensor狀態變化的類OrientationEventListener。在系統程式碼CameraActivity中就是繼承的這個類。 private
Vue + Canvas 實現頭像截圖上傳功能(一)
此文共分為兩篇,上篇主要是展示最終的效果,下篇為程式碼實現部分。 首先,上圖看最終的製作效果。 這是選擇圖片前: 這是選擇圖片後: 主要需求有這幾點:
微信小程序 支付功能(前端)的實現
pen 回退 ole pack spa session 統一支付 ges 應用 只提供微信小程序端代碼: 1 var app = getApp(); 2 Page({ 3 data: {}, 4 onLoad: function (options) {
【Fiddler的常用功能(一)】
fiddler 更改host一、Host配置可以使用fiddler配置host將一些文件的服務ip進行更改。操作步驟:1、點擊tools->HOSTS->勾選彈窗,啟動enable->配置ip地址和域名->保存後,重新請求一次,查看服務器ip地址。2、如果不想使用host時直接取消勾
Nginx實用教程(一):啟動、停止、重載配置
style 負載 繼續 local con doc lin 配置文件的修改 tex Nginx是一個功能強大的web服務器和負載均衡軟件,由俄羅斯人開發。Nginx包括一個master進程和數個worker進程,master進程用於讀取、解析配置文件和管理worker進程,
異步線程池的實現(一)-------具體實現方法
fun format 測試 路徑 線程池。 用戶體驗 deb tar clas 本篇是這個內容的第一篇,主要是寫:遇到的問題,和自己摸索實現的方法。後面還會有一篇是總結性地寫線程池的相關內容(偏理論的)。 一、背景介紹 朋友的項目開發到一定程度之後,又遇到
Android 插件(一)之類加載器
load ron 概念 基本概念 android oid ont 基本上 style 1、類加載器基本概念 類加載器(class loader)用來加載 Java 類到 Java 虛擬機中。一般來說,Java 虛擬機使用 Java 類的方式如下:Java 源程序(.j