這是個(gè)看臉的時(shí)代狞换，如果你沒有個(gè)Beautiful Face（B臉），都不好意思寫博客。繼上一次我通宵加班（鑰匙鎖家里了低斋，門也砸了）給大家介紹了UC瀏覽器基本布局的實(shí)現(xiàn)（輕點(diǎn)這里），帥氣的我又來水文了匪凡。今天我們將實(shí)現(xiàn)UC瀏覽器主頁的交互膊畴，No picture you say a ...
相似度是不是很高O(∩_∩)O? 如果你喜歡或者想和我一起完成這個(gè)項(xiàng)目，請(qǐng)github一波（歡迎star）：
https://github.com/zibuyuqing/UCBrowser
由于頁面管理（堆疊視圖）實(shí)現(xiàn)起來很復(fù)雜病游，我放到下一篇水文中唇跨。
這篇文章將按照以下順序講故事：
1.UCRootView簡(jiǎn)介（照顧沒看過第一篇的同學(xué)：輕點(diǎn)這里）
2.自定義基本父布局（BaseLayout）
3.網(wǎng)頁導(dǎo)航欄（HeadLayout）視圖更新
4.貝塞爾背景（BezierLayout）實(shí)現(xiàn)
5.底部菜單欄（Bottombar）視圖更新
6.其他view簡(jiǎn)析
下面開始表演
UCRootView簡(jiǎn)介
UCRootView是這些可滑動(dòng)布局（除了堆疊視圖）的Parent，里面重寫了onInterceptTouchEvent和onTouchEvent方法衬衬，定義了通用滑動(dòng)接口：
public interface ScrollStateListener{
void onStartScroll();
void onScroll(float rate);
void onEndScroll();
void onTouch(float x,float y);//手指位置
}
滑動(dòng)狀態(tài)通過滑動(dòng)距離與目標(biāo)距離之間的比值rate來表示买猖。在這個(gè)布局下，所有子布局的位置滋尉、大小玉控，透明度等屬性通過rate來控制。今天重點(diǎn)不是講這個(gè)狮惜，如果想具體了解高诺，請(qǐng)點(diǎn)這里制圈。
自定義基本父布局（BaseLayout）
從上圖可以看出膨报，BaseLayout是UC瀏覽器主頁面所有View組件的父類官辽，里面定義了基本的移位（translate纳账，目前只針對(duì)Y方向）甘磨、縮放（scale）烦周、漸變（alpha）等方法帚稠，所有的view的屬性變化都是基于Rootview傳過來的rate計(jì)算得到孵运，子view通過擴(kuò)展父類實(shí)現(xiàn)不同場(chǎng)景的界面切換效果。
移位
控制開關(guān)：mTranslateEnable
方向：Y
初始化：
/**
*
* @param from 起始位置
* @param to 最終位置
*/
public void initTranslationY(int from, int to){
mFromPosition = from;
mToPosition = to;
setTranslationY(from);
mDistance = from - to;
}
計(jì)算TransY：
/**
*
* @param rate 滑動(dòng)的相對(duì)比率
* @return
*/
private float calculateTransY(float rate){
Log.i(TAG,"rate :: =;" + rate);
return mFromPosition + mDistance * rate;
}
調(diào)用：在 onScroll（rate）方法中調(diào)用 setTranslationY(calculateTransY(rate));
縮放
控制開關(guān)：mScaleEnable
方向：X诅迷，Y
初始化：
public void initScale(float startScale,float endScale){
mStartScale = startScale;
mEndScale = endScale;
setScaleX(startScale);
setScaleY(startScale);
mScale = endScale - startScale;
}
計(jì)算Scale：
private float calculateScale(float rate){
return mStartScale + mScale * rate;
}
調(diào)用：
private void setScaleXY(float rate){
setScaleX(calculateScale(rate));
setScaleY(calculateScale(rate));
}
漸變同上佩番，很簡(jiǎn)單。這樣就把最基本的父布局寫完了O(∩_∩)O哈哈~罢杉，然后我們就要寫各個(gè)部件的更新啦趟畏。
網(wǎng)頁導(dǎo)航欄（HeadLayout）視圖更新
這張圖展示了UC瀏覽器HeadLayout布局結(jié)構(gòu)，其中的BezierLayout包裹了天氣欄滩租、搜索欄赋秀、導(dǎo)航欄，其下方是網(wǎng)站列表律想，“刷新進(jìn)入U(xiǎn)C頭條”提示默認(rèn)不可見×粤現(xiàn)在打開手機(jī)UC瀏覽器，一起向上滑技即，預(yù)備著洼，走！我們看到而叼，當(dāng)向上滑時(shí)身笤，整個(gè)layout逐漸變小，并且小幅度向上移動(dòng)葵陵，同時(shí)變黑液荸，怎么實(shí)現(xiàn)這個(gè)效果呢？我們來分解一下：
變小 —— scale脱篙，上移 —— transY娇钱，變黑 —— foreground（黑色）改變Alpha漸顯。
初始化
mUCHeadLayout.setTranslateEnable(true); // 可移動(dòng)
mUCHeadLayout.initTranslationY(0, -100); // 小幅移動(dòng)
開始移動(dòng)
@Override
public void onStartScroll() {
// mUCCoverLayout 為下拉時(shí)所看到的提示“上滑進(jìn)入U(xiǎn)C頭條”的布局
mUCCoverLayout.setVisibility(VISIBLE);
mUCCoverLayout.setAlpha(0.f);
super.onStartScroll();
}
更新視圖
@Override
public void onScroll(float rate) {
if(rate > 0) {
// 下拉
// 顯示提示語并下移
mCoverTip.setTranslationY(100 * Math.abs(rate));
// 提示布局逐漸顯現(xiàn)
mUCCoverLayout.setAlpha(rate * 1.5f);
} else {
// 上滑
// 隱藏提示布局
mUCCoverLayout.setVisibility(GONE);
// foreground 逐漸顯現(xiàn)绊困，布局變黑
mForeground.setAlpha((int) (ALPHA_255 * Math.abs(rate)));
float adjustRate = 1.0f + rate * 0.05f;
// 布局內(nèi)容逐漸變小
mCategoryContain.setScaleX(adjustRate);
mCategoryContain.setScaleY(adjustRate);
mWebsiteContain.setScaleX(adjustRate);
mWebsiteContain.setScaleY(adjustRate);
}
super.onScroll(rate);
}
正如之前所說文搂，整個(gè)過程受相對(duì)滑動(dòng)比率rate控制，這樣就實(shí)現(xiàn)了我們的HeadLayout界面更新秤朗，接下來我們看其下拉時(shí)背景效果實(shí)現(xiàn)细疚。
貝塞爾背景（BezierLayout）實(shí)現(xiàn)
關(guān)于貝塞爾的相關(guān)知識(shí)感興趣的可以百度一波哈。
我想告訴你ScrollStateListener接口中的onTouch(float x, float y)方法就是為了這貨添加的川梅，因?yàn)槲覀冊(cè)陂_始構(gòu)建貝塞爾曲線的時(shí)候要有控制點(diǎn)，總不能寫死吧然遏。當(dāng)用戶向下滑動(dòng)時(shí)贫途，我們動(dòng)態(tài)的更新布局大小(Y方向)，并把我們的控制點(diǎn)始終放在底部待侵，貝塞爾曲線的起始點(diǎn)和終止點(diǎn)高度（Y）更新慢于控制點(diǎn)丢早，就可以達(dá)到效果了。
設(shè)置畫筆
mPaint = new Paint();
mPaint.setColor(mThemeColor);
mPaint.setAntiAlias(true); // 抗鋸齒
mPaint.setStyle(Paint.Style.FILL); // 填充
初始化位置
mEdgeHeight = mHeight; // mEdgeHeight 為左右兩個(gè)邊的高度
mControlPoint = new Point(0,mHeight); // 初始位置為整個(gè)視圖的底部，這樣一開始畫出來是條直線
繪制貝塞爾區(qū)域
@Override
protected void dispatchDraw(Canvas canvas) {
drawBg(canvas);
super.dispatchDraw(canvas);
}
private void drawBg(Canvas canvas) {
mPath.reset();
// 頂部開始
mPath.moveTo(0,0);
mPath.lineTo(0,mEdgeHeight);
// 貝塞爾曲線
mPath.quadTo(mControlPoint.x,mControlPoint.y,mScreenWidth,mEdgeHeight);
mPath.lineTo(mScreenWidth,0);
// 閉合
mPath.lineTo(0,0);
canvas.drawPath(mPath,mPaint);
}
這里用到的drawPath方法怨酝，大家可以詳細(xì)了解一下Path的用法傀缩，很多炫酷效果是用這貨弄的。
當(dāng)手指下滑時(shí)农猬，我們開始變彎了赡艰。
開始滑動(dòng)并設(shè)置控制點(diǎn)
@Override
public void onStartScroll() {
mStartScroll = true;
super.onStartScroll();
}
public void touch(float x, float y) {
mControlPoint.set((int) x, mControlPoint.y);
invalidate();
}
更新視圖
@Override
public void onScroll(float rate) {
if(!mStartScroll){
return;
}
// 獲取 LayoutParams 根據(jù)滑動(dòng)狀態(tài)動(dòng)態(tài)更新視圖大小
if(mLayoutParams == null){
mLayoutParams = getLayoutParams();
}
if(rate >= 0) {
// 下拉
// FINAL_DISTANCE 為最大能滑動(dòng)的距離
int dis = (int) (FINAL_DISTANCE * rate);
// 左右邊界更新速度是控制點(diǎn)的0.5倍
mEdgeHeight = (int) (mHeight + dis * 0.5f);
//控制點(diǎn)更新
mControlPoint.set(mControlPoint.x, mHeight + dis);
// 視圖內(nèi)容改變大小，位置和透明度
mContain.setScaleX(1.0f - rate * 0.2f);
mContain.setScaleY(1.0f - rate * 0.2f);
mContain.setTranslationY(dis * 0.5f);
mContain.setAlpha(1.0f - rate * 1.5f);
} else {
// 上滑
mControlPoint.set(0,mHeight);
}
// 改變視圖大小
mLayoutParams.height = mControlPoint.y;
setLayoutParams(mLayoutParams);
requestLayout();
super.onScroll(rate);
}
結(jié)束
@Override
public void onEndScroll() {
mStartScroll = false;
super.onEndScroll();
}
上面注釋的很詳細(xì)斤葱，我們來看一下效果慷垮，不虛，不虛 O(∩_∩)O
底部菜單欄（Bottombar）視圖更新
底部菜單欄視圖更新原理和上面一樣揍堕，只不過要根據(jù)menu位置計(jì)算更新速率料身，還有橫向滑動(dòng)。效果可以看前面的高清無碼動(dòng)圖衩茸，這里我直接貼代碼了芹血。
計(jì)算中間Menu橫向移動(dòng)TransX
private float calculateMenuBtnTransX(float rate){
float dis = mScreenWidth / 5;
return - dis * rate;
}
計(jì)算新聞Menu豎向移動(dòng)TransY
上滑時(shí)我們會(huì)看到新聞按鈕（頭條、視頻楞慈、訂閱）會(huì)根據(jù)不同速率依次滑動(dòng)到指定位置幔烛，計(jì)算方法如下：
private float calculateNewsBtnTransY(int finalY, float rate, float velocity){
// velocity 是調(diào)整速率
float adjustRate = rate * velocity;
rate = adjustRate < -1.0f ? -1.0f : adjustRate;
return 0 + finalY * rate;
}
計(jì)算Menu透明度
private float calculateBtnAlpha(float rate){
return 1.0f + rate;
}
更新視圖
@Override
public void onScroll(float rate) {
Log.(TAG,"onScroll :: rate =:" + rate);
if(rate > 0){
return;
}
//第1,2,4個(gè)按鈕漸隱
ivForward.setAlpha(calculateBtnAlpha(rate));
ivBack.setAlpha(calculateBtnAlpha(rate));
flWindowNum.setAlpha(calculateBtnAlpha(rate));
// 第三個(gè)按鈕移動(dòng)到第四個(gè)位置
ivMenu.setTranslationX(calculateMenuBtnTransX(rate));
// 新聞按鈕依次上升出現(xiàn)
tvSubscribe.setTranslationY(calculateNewsBtnTransY(mHalfHeight,rate,1.0f));
tvVideo.setTranslationY(calculateNewsBtnTransY(mHalfHeight,rate,1.5f));
tvHeadline.setTranslationY(calculateNewsBtnTransY(mHalfHeight ,rate,2.0f));
}
其他view簡(jiǎn)析
除了以上view組件，我們還要頂部搜索條（searchbar）抖部，新聞分類標(biāo)簽（newsTab）的更新沒說呢说贝，別急哈，很簡(jiǎn)單慎颗，用BaseLayout做這兩個(gè)view組件的父布局乡恕，然后init一波就可以了,以searchbar為例
寫布局
<?xml version="1.0" encoding="utf-8"?>
<com.zibuyuqing.ucbrowser.base.BaseLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@color/themeBlue"
android:padding="8dp"
android:layout_height="@dimen/dimen_48dp">
<ImageView
android:layout_gravity="center"
android:src="@drawable/ic_searchbar_book"
style="@style/SearchBoxImageIconStyle"/>
<TextView
android:gravity="center"
android:textSize="13dp"
android:textColor="@color/windowBg"
android:text="UC頭條"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:background="@drawable/search_box_bg"
android:padding="6dp"
android:layout_marginLeft="8dp"
android:layout_height="32dp">
<ImageView
android:layout_gravity="center_vertical"
android:layout_width="14dp"
android:layout_height="14dp"
android:layout_alignParentStart="true"
android:layout_marginLeft="8dp"
android:src ="@drawable/ic_search" />
<TextView
android:textColor="@color/windowBg"
android:gravity="center"
android:layout_marginLeft="8dp"
android:textSize="13dp"
android:text="搜索你感興趣的內(nèi)容"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
</LinearLayout>
</com.zibuyuqing.ucbrowser.base.BaseLayout>
初始化
// 可移動(dòng)
mTopSearchBar.setTranslateEnable(true);
// 這方法是在view layout 之后獲取大小，避免獲取的大小全是 0
mTopSearchBar.getViewTreeObserver().addOnGlobalLayoutListener(
new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
mTopSearchBar.getViewTreeObserver().removeOnGlobalLayoutListener(this);
// 初始化移動(dòng)參數(shù)
mTopSearchBar.initTranslationY(-mTopSearchBar.getHeight(), 0);
}
}
);
大功告成俯萎，是不是很簡(jiǎn)單
說點(diǎn)其他的
文章寫得很詳細(xì)傲宜，能看到這個(gè)地方也算難為你了，給你點(diǎn)贊（也給我點(diǎn)個(gè)吧夫啊，順手牽個(gè)贊O(∩_∩)O）函卒，如果你喜歡我的博客，請(qǐng)關(guān)注一下撇眯，我會(huì)不斷將有意思的事情寫出來报嵌，你也可以給我發(fā)一些需求，我來幫你實(shí)現(xiàn)或者給些建議熊榛，大家一起學(xué)習(xí)一起進(jìn)步锚国。
項(xiàng)目地址：https://github.com/zibuyuqing/UCBrowser，歡迎踩踏玄坦。血筑、
下篇文章我們將探討堆疊視圖的實(shí)現(xiàn)绘沉，敬請(qǐng)期待
轉(zhuǎn)載請(qǐng)注明：http://www.reibang.com/p/af2dcf4f6522
上一篇：嘗試寫個(gè)UC瀏覽器（布局篇）
