Android實(shí)現(xiàn)酷炫的頂部欄
AppBarLayout 是繼承LinerLayout實(shí)現(xiàn)的一個(gè)ViewGroup容器組件,它是為了Material Design設(shè)計(jì)的App Bar,支持手勢(shì)滑動(dòng)操作的,不過(guò)經(jīng)常與Toolbar、CoordinatorLayout以及CollapsingToolbarLayout等一起配合使用,在說(shuō)到AppBarLayout之前,我們先簡(jiǎn)單學(xué)習(xí)一下Toolbar。和往常一樣,主要還是想總結(jié)一下我在學(xué)習(xí)過(guò)程中的一些筆記以及一些需要注意的地方。
一、Toolbar
Toolbar是在 Android 5.0 開(kāi)始推出的一個(gè) Material Design 風(fēng)格的導(dǎo)航控件 ,Google 非常推薦大家使用 Toolbar 來(lái)作為Android客戶端的導(dǎo)航欄,以此來(lái)取代之前的 Actionbar,也就是說(shuō),ActionBar能做的,Toolbar都能做 。與 Actionbar 相比, Toolbar 要靈活的多。它不像 Actionbar 一樣,一定要固定在Activity的頂部,而是可以放到界面的任意位置。除此之外,在設(shè)計(jì) Toolbar 的時(shí)候,Google也留給我們很多可以修改的余地
•設(shè)置導(dǎo)航欄圖標(biāo)
•設(shè)置App的logo
•設(shè)置標(biāo)題和子標(biāo)題
•添加一個(gè)或多個(gè)的自定義控件
•設(shè)置Action Menu
為了容易理解,我們先看看效果圖:
按照效果圖,從左到右分別是導(dǎo)航欄圖標(biāo) 、App的logo 、 標(biāo)題和子標(biāo)題 、 自定義控件(一個(gè)TextView和ImageView) 以及 ActionMenu
1、用Toolbar的時(shí)候,首先要隱藏原本的ActionBar
(1)通過(guò)在我們的styles.xml文件中的AppTheme標(biāo)簽中設(shè)置以下屬性:
<item name="windowActionBar">false</item>
<item name="android:windowNoTitle">true</item>
(2)通過(guò)修改我們繼承的主題為:Theme.AppCompat.Light.NoActionBar
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/blue</item> <item name="colorPrimaryDark">@color/blue_dark</item> <item name="colorAccent">@color/red</item> <item name="textAllCaps">false</item> </style>
(3)在Activity中調(diào)用下面這句,去掉了默認(rèn)的導(dǎo)航欄
supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
2、在布局文件中添加我們需要的Toolbar控件
<?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"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?android:actionBarSize" android:background="?attr/colorPrimary"> <!--自定義控件--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="點(diǎn)擊" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="2dp" android:src="@mipmap/icon" /> </android.support.v7.widget.Toolbar> </LinearLayout>
3、接著在 menu_main.xml 中添加 action menu 菜單項(xiàng)
<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/add" android:icon="@mipmap/icon_add" app:showAsAction="always" /> <item android:id="@+id/add_friend" android:title="添加朋友" app:showAsAction="never" /> <item android:id="@+id/scace" android:title="掃一掃" app:showAsAction="never" /> </menu>
4、在Activity 中初始化Toolbar 控件,并設(shè)置相對(duì)應(yīng)的屬性
package per.lijuan.appbarlayoutdome; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; import android.view.Menu; import android.view.MenuItem; import android.view.Window; import android.widget.Toast; /** * Created by lijuan on 2016/8/31. */ public class Activity extends AppCompatActivity { private Toolbar toolbar; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_second); toolbar = (Toolbar) findViewById(R.id.toolbar); /** * 設(shè)置標(biāo)題 */ toolbar.setTitle("標(biāo)題"); /** * 設(shè)置子標(biāo)題 */ toolbar.setSubtitle("子標(biāo)題"); /** * 設(shè)置App的logo */ toolbar.setLogo(R.mipmap.ic_launcher); /** * 設(shè)置導(dǎo)航按鈕 */ toolbar.setNavigationIcon(R.mipmap.back); setSupportActionBar(toolbar); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; } /** * 設(shè)定菜單各按鈕的動(dòng)作 * * @return */ @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: finish(); break; case R.id.add: Toast.makeText(SecondActivity.this, "添加", Toast.LENGTH_SHORT).show(); break; case R.id.add_friend: Toast.makeText(SecondActivity.this, "添加朋友", Toast.LENGTH_SHORT).show(); break; case R.id.scace: Toast.makeText(SecondActivity.this, "掃一掃", Toast.LENGTH_SHORT).show(); break; default: break; } return super.onOptionsItemSelected(item); } }
二、CollapsingToolbarLayout
CollapsingToolbarLayout作用是提供了一個(gè)可以折疊的Toolbar,它繼承至FrameLayout,給它設(shè)置layout_scrollFlags,它可以控制包含在CollapsingToolbarLayout中的控件(如:ImageView、Toolbar)在響應(yīng)layout_behavior事件時(shí)作出相應(yīng)的scrollFlags滾動(dòng)事件(移除屏幕或固定在屏幕頂端)
三、AppBarLayout
我們來(lái)看看最終的效果圖:
從效果圖來(lái)看,當(dāng)設(shè)置了layout_behavior的控件響應(yīng)起了CollapsingToolbarLayout中的layout_scrollFlags事件時(shí),ImageView會(huì)有視差效果的向上滾動(dòng)移除屏幕,當(dāng)開(kāi)始折疊時(shí),CollapsingToolbarLayout的背景色(也就是Toolbar的背景色)就會(huì)變?yōu)槲覀冊(cè)O(shè)置好的背景色,Toolbar也一直會(huì)固定在最頂端
activity_main.xml
<?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.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:contentScrim="#3F51B5" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:adjustViewBounds="true" android:src="@mipmap/icon_bg" app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.5" /> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="56dp" app:layout_collapseMode="pin" app:title="@string/app_name" app:titleTextColor="#FFFFFF" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" /> </android.support.design.widget.CoordinatorLayout>
(1)我們?cè)贑ollapsingToolbarLayout中設(shè)置了一個(gè)ImageView和一個(gè)Toolbar,并將這個(gè)CollapsingToolbarLayout作為一個(gè)整體放在AppBarLayout中
(2)在CollapsingToolbarLayout中,我們?cè)O(shè)置了app:layout_scrollFlags="scroll|enterAlwaysCollapsed",它的值還包括:
•scroll - 想滾動(dòng)就必須設(shè)置這個(gè),也就是說(shuō)值設(shè)為scroll的View會(huì)跟隨滾動(dòng)事件一起滾動(dòng)
◦enterAlways - 值設(shè)為enterAlways的View,當(dāng)RecyclerView往下滾動(dòng)時(shí),該View會(huì)直接往下滾動(dòng)
◦exitUntilCollapsed - 值設(shè)為exitUntilCollapsed的View,當(dāng)這個(gè)View要往上逐漸“消逝”時(shí),會(huì)一直往上滑動(dòng),直到剩下的的高度達(dá)到它的最小高度后,再響應(yīng)RecyclerView的內(nèi)部滑動(dòng)事件。
◦enterAlwaysCollapsed - 當(dāng)值設(shè)為enterAlwaysCollapsed 的View已經(jīng)設(shè)置minHeight屬性又使用此標(biāo)志時(shí),這個(gè)View只能以最小高度進(jìn)入,只有當(dāng)滾動(dòng)視圖到達(dá)頂部時(shí)才擴(kuò)大到完整高度
另外app:contentScrim="#3F51B5"是指當(dāng)完全CollapsingToolbarLayout折疊(收縮)后的背景顏色
(3)在ImageView控件中,我們?cè)O(shè)置了app:layout_collapseMode="parallax",layout_collapseMode (折疊模式) - 有兩個(gè)值:
•pin - 設(shè)置為這個(gè)模式時(shí),當(dāng)CollapsingToolbarLayout完全收縮后,Toolbar還可以保留在屏幕上
•parallax - 設(shè)置為這個(gè)模式時(shí),在內(nèi)容滾動(dòng)時(shí),CollapsingToolbarLayout中的View(比如ImageView)也可以同時(shí)滾動(dòng),實(shí)現(xiàn)視差滾動(dòng)效果,通常和layout_collapseParallaxMultiplier(設(shè)置視差因子)搭配使用
另外app:layout_collapseParallaxMultiplier="0.5"設(shè)置視差滾動(dòng)因子,值為:0~1
(4)在Toolbar控件中,我們?cè)O(shè)置了layout_collapseMode(折疊模式):為pin
MainActivity.class
package com.per.appbarlayout; import android.graphics.Color; import android.os.Bundle; import android.support.design.widget.CollapsingToolbarLayout; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.LinearLayoutManager; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.Toolbar; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class MainActivity extends AppCompatActivity { public Toolbar mToolbar; private RecyclerView mRecyclerView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mToolbar = (Toolbar) findViewById(R.id.toolbar); mToolbar.setTitleTextColor(Color.GREEN); mToolbar.setTitle("AppBarLayout"); setSupportActionBar(mToolbar); getSupportActionBar().setHomeButtonEnabled(true); getSupportActionBar().setDisplayHomeAsUpEnabled(true); mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview); mRecyclerView.setLayoutManager(new LinearLayoutManager(this)); mRecyclerView.setAdapter(new ContentAdapter()); CollapsingToolbarLayout mCollapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout); //通過(guò)CollapsingToolbarLayout設(shè)置title mCollapsingToolbarLayout.setTitle("AppBarLayout"); //通過(guò)CollapsingToolbarLayout修改字體顏色 mCollapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//設(shè)置還沒(méi)收縮時(shí)狀態(tài)下字體顏色 mCollapsingToolbarLayout.setCollapsedTitleTextColor(Color.RED);//設(shè)置收縮后Toolbar上字體的顏色 } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.menu_main, menu); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case android.R.id.home: finish(); break; } return super.onOptionsItemSelected(item); } private class ContentAdapter extends RecyclerView.Adapter<ContentAdapter.ContentHolder> { @Override public ContentAdapter.ContentHolder onCreateViewHolder(ViewGroup parent, int viewType) { return new ContentHolder(LayoutInflater.from(MainActivity.this).inflate(android.R.layout.simple_list_item_1, parent, false)); } @Override public void onBindViewHolder(ContentAdapter.ContentHolder holder, int position) { holder.itemTv.setText("item"); } @Override public int getItemCount() { return 35; } class ContentHolder extends RecyclerView.ViewHolder { private TextView itemTv; public ContentHolder(View itemView) { super(itemView); itemTv = (TextView) itemView.findViewById(android.R.id.text1); } } } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android仿網(wǎng)易客戶端頂部導(dǎo)航欄效果
- Android項(xiàng)目實(shí)戰(zhàn)之仿網(wǎng)易頂部導(dǎo)航欄效果
- Android自定義View之組合控件實(shí)現(xiàn)類似電商app頂部欄
- 3種Android隱藏頂部狀態(tài)欄及標(biāo)題欄的方法
- Android頂部工具欄和底部工具欄的簡(jiǎn)單實(shí)現(xiàn)代碼
- Android實(shí)現(xiàn)沉浸式導(dǎo)航欄實(shí)例代碼
- Android程序開(kāi)發(fā)之Fragment實(shí)現(xiàn)底部導(dǎo)航欄實(shí)例代碼
- Android實(shí)現(xiàn)沉浸式通知欄通知欄背景顏色跟隨app導(dǎo)航欄背景顏色而改變
- Android實(shí)現(xiàn)底部導(dǎo)航欄功能(選項(xiàng)卡)
- android底部菜單欄實(shí)現(xiàn)原理與代碼
相關(guān)文章
Android自定義View實(shí)現(xiàn)豎向滑動(dòng)回彈效果
這篇文章主要為大家詳細(xì)介紹了Android自定義View實(shí)現(xiàn)滑動(dòng)回彈效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Android RecyclerView滾動(dòng)定位
這篇文章主要為大家詳細(xì)介紹了Android RecyclerView滾動(dòng)定位的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01安裝時(shí)加入外部數(shù)據(jù)庫(kù)示例(android外部數(shù)據(jù)庫(kù))
這篇文章主要介紹了android打包安裝時(shí)加入外部數(shù)據(jù)庫(kù)的示例,需要的朋友可以參考下2014-03-03Android Activity的生命周期與加載模式超詳細(xì)圖文解析
這篇文章主要介紹了Android Activity的生命周期與加載模式,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-02-02Android總結(jié)之WebView與Javascript交互(互相調(diào)用)
本篇文章主要介紹了WebView與Javascript進(jìn)行數(shù)據(jù)交互,詳解的講訴了WebView與Javascript進(jìn)行數(shù)據(jù)交互的方法,有興趣的可以了解一下。2016-11-11