Android仿“知乎”隱藏標題欄、回答詳情頁動畫效果
2014已經遠去,2015年的目標很簡單,就是繼續熟悉Android的上層API,雖然偶爾會為了某個問題去研究下FrameWork的程式碼,但是對於我們這種新手來說,只有對上層的API用的熟練了,才能更好的往下研究原理。所以,今年的任務就是繼續學習和研究Android的上層API的使用,順便寫一篇畢業論文,然後畢個業。
OK,從這篇開始,咱們就開始【凱子哥帶你夯實應用層】系列,如果你有想要實現的介面效果,或者是有一些開發中的疑問,請私信我,如果我覺得比較好的話,會自己實現一下,然後寫blog和大家分享實現思路。
廢話不多說,咱們第一篇文章就是模仿“知乎”的回答詳情頁的動畫效果,先上個原版的效果圖,咱們就是要做出這個效果
在實現之前,我們先根據上面的動畫效果,研究下需求,因為gif幀數有限,所以不是很連貫,推薦你直接下載一個知乎,找到這個介面自己玩玩
☞當文章往上移動到一定位置之後,最上面的標題欄Bar和問題佈局Title是會隱藏的,回答者Author佈局不會隱藏
☞當文章往下移動移動到一定位置之後,原先隱藏的標題欄Bar和問題佈局Title會下降顯示
☞當文章往上移動的時候,下部隱藏的Tools佈局會上升顯示
☞當文章往下移動的時候,如果Tools佈局是顯示的,則隱藏
☞當標題欄Bar和問題佈局Title下降顯示的時候,Title是從Bar的下面出來的,有個遮擋的效果
☞當快速滑動內容到達底部的時候,隱藏的Tools會顯示出來
☞當快速滑動內容到頂部的時候,隱藏的Bar和Title也會顯示出來
不分析不知道,這樣一個簡單地效果,經過分析需要完成不少東西呢,那麼下面根據要實現的需求,咱們分析一下解決方案。
在做這種仿介面之前,我們可以使用ADT帶的View Hierarchy工具看一下“知乎”原生是怎麼實現的
從右邊的分析圖可以看出,知乎的這個介面,內容用的WebView,這很正常,因為使用者的回答裡面格式比較複雜,用WebView是最好的解決方案,而標題欄是一個VIew,是ActionBar還是自定義View呢,不得而知,下面是就是一個LinearLayout包了4個ToggleButton,佈局很簡單,我們沒有WebView,所以使用ScrollView代替,上面的佈局直接ImageView了,設定個src,模擬一個佈局。
其實佈局很簡單,咱們一個效果一個效果的來實現。
首先是下面的Tools如何顯示和隱藏呢?當然是用動畫了!什麼動畫呢?能實現的有屬性動畫和幀動畫,屬性動畫能夠真實的改變View的屬性,幀動畫只是視覺上移動了,View的實際屬性並不改變,這兩種都可以,我們這裡使用屬性動畫
- /**
- * 顯示工具欄
- */
- privatevoid showTools() {
- ObjectAnimator anim = ObjectAnimator.ofFloat(img_tools, "y", img_tools.getY(),
- img_tools.getY() - img_tools.getHeight());
- anim.setDuration(TIME_ANIMATION);
- anim.start();
- isToolsHide = false;
- }
- /**
- * 隱藏工具欄
- */
- privatevoid hideTools() {
- ObjectAnimator anim = ObjectAnimator.ofFloat(img_tools, "y", img_tools.getY(),
- img_tools.getY() + img_tools.getHeight());
- anim.setDuration(TIME_ANIMATION);
- anim.start();
- isToolsHide = true;
- }
那麼什麼時候呼叫呢?從上面的需求分析中,我們知道,使用者手指下拉的時候,Tools顯示,反之隱藏,那麼我們就可以監聽ScrollView的onTouch,判斷手指方向,實現動畫效果的呼叫
- mScroller.setOnTouchListener(new View.OnTouchListener() {
- @Override
- publicboolean onTouch(View v, MotionEvent event) {
- switch (event.getAction()) {
- case MotionEvent.ACTION_DOWN:
- lastY = event.getY();
- break;
- case MotionEvent.ACTION_MOVE:
- float disY = event.getY() - lastY;
- //垂直方向滑動
- if (Math.abs(disY) > viewSlop) {
- //是否向上滑動
- isUpSlide = disY < 0;
- //實現底部tools的顯示與隱藏
- if (isUpSlide) {
- if (!isToolsHide)
- hideTools();
- } else {
- if (isToolsHide)
- showTools();
- }
- }
- break;
- }
- returnfalse;
- }
- });
用變數isToolsHide放置程式碼重複呼叫。
下面的Tools的問題解決了,我們再看一下上面的佈局動畫如何來實現。上面的思路和下面一樣,也是通過屬性動畫,完成位置的移動,移動的佈局有Bar、Title和根佈局。為什麼答題人佈局Author不移動呢?因為根佈局必須移動,否則就會擋住下面的文字內容,根佈局的移動會讓子佈局都跟著移動,所以只移動根佈局即可。
對了,為了更大範圍的現實文字,“知乎”的WebView是佔據整個佈局的,其他佈局都是在根佈局FrameLayout裡面,所以,在首次載入的時候,下面的文字在開頭需要留出一定的間隔,防止被遮擋,當上面的佈局隱藏之後,就沒有問題了。
在簡單分析之後,我再給出實現的佈局的程式碼
- <FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="@android:color/white"
- >
- <com.socks.zhihudetail.MyScrollView
- android:id="@+id/scroller"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- >
- <TextView
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:textSize="16sp"
- android:textColor="@android:color/black"
- android:text="@string/hello_world"/>
- </com.socks.zhihudetail.MyScrollView>
- <FrameLayout
- android:id="@+id/ll_top"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:background="@android:color/white"
- android:orientation="vertical"
- android:layout_gravity="top">
- <ImageView
- android:id="@+id/img_author"
- android:layout_width="match_parent"
- android:layout_height="80dp"
- android:scaleType="fitXY"
- android:src="@drawable/bg_author"/>
- <TextView
- android:id="@+id/tv_title"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="55dp"
- android:text="為什麼美國有那麼多肌肉極其強大的肌肉男?"
- android:textSize="18sp"
- android:background="#DBDBDB"
- android:gravity="center|left"
- android:paddingLeft="15dp"
-
android:paddingRight
相關推薦
Android仿“知乎”隱藏標題欄、回答詳情頁動畫效果
2014已經遠去,2015年的目標很簡單,就是繼續熟悉Android的上層API,雖然偶爾會為了某個問題去研究下FrameWork的程式碼,但是對於我們這種新手來說,只有對上層的API用的熟練了,才能更好的往下研究原理。所以,今年的任務就是繼續學習和研究A
Kotlin實現仿知乎底部導航欄顯示隱藏效果Behavior
最開始遇見這個問題我的第一想法是給recyclerview新增滑動監聽,然後再給底部導航新增顯示隱藏動畫,可是這麼做很不優雅,一旦recyclerview不止一個就需要給每個都新增一遍監聽(雖然同樣的程式碼cv就行了),這絕不是一個優秀程式設計師的追求。所以就
Android關於小米相簿懸浮標題欄、凍結標題欄的實現方式(巢狀型RecycleView)
效果圖如下: 網上完全查詢不到關於凍結標題欄的實現方式,經過幾天的摸索嘗試,終於實現了這種效果;當然在過程中遇到了很多問題拖延了進度,關鍵是沒有摸清思路。 本文的實現方式已經盡了本人最大的能力進行簡化,並解決了快速滑動造成的錯亂問題,具體思路如下:
Android Studio下實現隱藏標題欄和狀態列的閃屏頁
之前在Eclipse下實現理想的全屏閃屏頁,同樣的程式碼拷貝到AS下仍然可以看見標題欄和狀態列,不知道是不是因為AppCompatActivity的原因。 方案一:在程式碼中動態隱藏標題欄和狀態列,但是失敗了。 方案二: 首先在style.xml裡新建resource
Android 仿知乎廣告控制元件,廣告圖隨滑動控制元件滑動
仿知乎廣告模組,效果:RecyclerView其中的一個item是廣告圖片 - 知乎的效果圖如下: 從下到上 從上到下 - 仿的效果圖: 兩種情況,一種是廣告圖片比滑動控制元件長,另外一種是廣告圖片比滑動控制元件短,效果如下: 廣告圖
在AndroidManifest(清單文件)中註冊activity(活動)及配置主活動、更改App圖標、App名稱、修改隱藏標題欄
雙擊 建議 nba cat ima manager ram spa src 打開app/src/main/AndroidManifest。 1 <?xml version="1.0" encoding="utf-8"?> 2 <manifest xm
Android掃碼二維碼、美女瀑布流、知乎網易音樂、動畫源碼等
代碼 安裝 開發工具 -c dep 更多 應用程序 strip 瀏覽器中 Android精選源碼 QRCode 掃描二維碼、掃描條形碼、相冊獲取圖片後識別、生... 一個簡潔好看的loading彈窗 Android用瀑布流展示美女圖片源碼
Android開發隱藏標題欄問題
Android第一種方式:requestWindowFeature(Window.FEATURE_NO_TITLE);註意,當繼承的類為AppCompatActivity 時,這種方式沒有用,如下,要將其改為Activity public class MainActivity extends AppCompa
Android App 隱藏標題欄+狀態列+導航欄
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
安卓專案實戰之ByeBurger一句程式碼實現標題欄、導航欄滑動隱藏
簡介 效果圖 內容View可為:ViewPager中巢狀RecycleView 內容View可為:NestedScrollView包裹TextView 內容View可為:NestedScrollView包裹WebView 如何使用 1.在project的
Android隱藏標題欄
繼承自Activity時在setContentView之前呼叫requestWindowFeature(Window.FEATURE_NO_TITLE); 繼承自AppCompatActivity時在
Android Activity隱藏標題欄
activity隱藏標題欄需要注意: 1、繼承Activity、FragmentActivity的頁面 1)在onCreate方法裡面新增: requestWindowFeature(Window.FEATURE_NO_TITLE); 2)在AndroidManifes
Android標題欄、狀態列圖示文字顏色及背景動態變化
android中沉浸式狀態列的文章已經滿大街了,可是在實現某些效果時,還是得各種搜尋,測試一通後,最後還常常滿足不了要求,即使好不容易在一部手機上滿足了需求,放在另外一手機上,發現效果還各種不適配。今天把自己這幾天學到的關於沉浸式狀態列知識進行總結下。 問題 比如我想實現
Android仿小米商城底部導航欄之二(BottomNavigationBar、ViewPager和Fragment的聯動使用)
簡介 在前文《Android仿小米商城底部導航欄(基於BottomNavigationBar)》我們使用BottomNavigationBar控制元件模仿實現了小米商城底部導航欄效果。接下來更進一步的,我們將通過BottomNavigationBar控制元件和
Android 仿淘寶商品詳情標題欄變色,佈局層疊效果
如圖效果 思路:如圖可以將圖片中佈局分成三個部分,1標題欄透明背景,2上半部分佈局,3下半部分佈局,當我們向上拉動的時候,1佈局實現漸變,從透明變到白色,2佈局背景色漸變到白色,23佈局隨滾動條上拉,並且慢慢改變2佈局paddingtop的屬性,其中1佈局漂浮在整個scro
Android Studio App隱藏標題欄
IDE是Android Studio。 1.把MainActivity.java檔案裡的 public class MainActivity extends ActionBarActivity 改為
Android 高仿知乎日報(1)
個人蠻喜歡沒事看看知乎的,前陣子湊巧也在網上搜到了知乎日報的API,詳情見某位開發者在Github上的分享:知乎日報 API 分析 靠著這個,我就做了一個高仿知乎日報的小應用 動態圖看起來不怎麼流暢,其實真機執行的話還是很流程的,畢竟這只是一個純
Android隱藏標題欄和狀態列的方法
package com.example.layoutdemo; import android.os.Bundle; import android.view.Window; import android.view.Wi
Android之登陸樣式(仿知乎)
好長時間沒有上知乎了,今天開啟的時候,發現提示令牌失效了,讓重新登陸,一看這個效果,其實很好實現的,在Material Design裡面其實有相關的view的,為TextInputLayout,這裡簡單寫個demo: xml佈局檔案 <?xml ve
【Android】仿知乎夜間模式的實現
1.簡介 目前很多App都有夜間模式的功能,網上教程也是很多,最近專案不忙,抽空學習了下,在這做下記錄,希望能幫到正在看部落格的你,我們先來看下知乎的效果: 看我的效果: 臥槽,好像啊,哈