仿魅族應(yīng)用商店應(yīng)用詳情頁效果

趁著UI妹子還沒有把圖切好,我這幾天簡直閑得不行莲镣,所以得空學(xué)習(xí)一下CoordinatorLayout的使用,當(dāng)然這里不會是想特地寫一篇文章來介紹它的基本用法,因為這個在網(wǎng)上有太多的資料刹孔。學(xué)習(xí)完基礎(chǔ)我們就可以深入其中,學(xué)習(xí)其精髓小泉。那么CoordinatorLayout最精髓的地方是什么呢芦疏?就是Behaviour。
那么什么是Behaviour呢微姊?可以先看看以下博客
Android——CoordinatorLayout之Behavior入門學(xué)習(xí)(上)
Android——CoordinatorLayout之Behavior入門學(xué)習(xí)(下)
感謝博主郭神酸茴。

Behaviour使用

一、仿知乎首頁

項目中將會使用到知乎首頁的效果

zhihu

我們可以看到兢交,底部菜單Tab會隨著滑動隱藏和顯示

不使用Behaviour

我在第一次思考時是不使用Behaviour薪捍,監(jiān)聽AppBarLayout滑動距離進(jìn)行操作:

bar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
            @Override
            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
                ///下拉:0~-height,上拉:-height~0
                if (verticalOffset != 0) {
                    if (height != 0) {
                        Log.d("Activity", "onOffsetChanged: vertaicalOffset =====" + verticalOffset);
                        //通過滑動距離跟高度計算得到percent值
                        float i = (height + verticalOffset) / height;
                        Log.d("Activity", "onOffsetChanged: i=====" + i);
                        float alpha = 255 * i / 255;
                        Log.d("Activity", "onOffsetChanged: alpha === " + alpha);
                        ViewGroup.LayoutParams params = mBottom.getLayoutParams();
                        //通過percent值對底部Tab的LayoutParams進(jìn)行修改
                        params.height = (int) (height * alpha);
                        mBottom.requestLayout();
                    }
                }
            }
        });```
這時我遇到一個小問題配喳,就是在快速滑動的時候底部Tab計算會跟不上滑動的速度導(dǎo)致底部Tab的高度不正確
(如下圖)

![error](http://upload-images.jianshu.io/upload_images/2605454-50d04a033b273dca.gif?imageMogr2/auto-orient/strip)
那么我是怎樣解決的呢酪穿?

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
Log.d("Activity", "onScrollStateChanged: newState===" + newState);
// LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();
LinearLayoutManager layoutManager = (LinearLayoutManager) recyclerView.getLayoutManager();
int position = layoutManager.findFirstCompletelyVisibleItemPosition();
Log.d("Activity", "onScrollStateChanged: completeItemPosition ====" + position);
if (position == 0 && newState == RecyclerView.SCROLL_STATE_IDLE) {
if (mBottom.getHeight() != height) {
mBottom.getLayoutParams().height = (int) height;
mBottom.requestLayout();
}
}
}

    });```

我這里是通過監(jiān)聽recyclerView的顯示item來強(qiáng)制修改,達(dá)到目的(這里提供一個解決思路晴裹,非最佳)

使用Behaviour

簡單自定義一個Behaviour即可達(dá)到效果

/**
 * Created by AmatorLee on 2017/7/18.
 */

public class FootBehaviour extends CoordinatorLayout.Behavior<View> {


    public FootBehaviour(Context context, AttributeSet attrs) {
        super(context, attrs);
    }


    @Override
    public boolean layoutDependsOn(CoordinatorLayout parent, View child, View dependency) {
        return dependency instanceof AppBarLayout;
    }

    @Override
    public boolean onDependentViewChanged(CoordinatorLayout parent, View child, View dependency) {
        //通過AppBarLayout的滑動距離計算percent
        float scaleY = Math.abs(dependency.getY()) / dependency.getHeight();
        //通過percent動態(tài)移動我們的view被济,注意是移動不是修改
        child.setTranslationY(child.getHeight() * scaleY);
        return true;
    }
}```
看看效果

![success](http://upload-images.jianshu.io/upload_images/2605454-d2c1dd241203bd1b.gif?imageMogr2/auto-orient/strip)
#####二、仿魅族應(yīng)用商店應(yīng)用詳情效果
作為一個多年的魅族手機(jī)使用者涧团,看起來魅族的應(yīng)用商店也挺不錯的只磷,來看看要實現(xiàn)的效果(**注:實現(xiàn)效果而非實現(xiàn)實現(xiàn)界面**)

![sheet](http://upload-images.jianshu.io/upload_images/2605454-3b9fc78ca7aaaa87.gif?imageMogr2/auto-orient/strip)

1. 思路一:使用Activity實現(xiàn),但是這樣需要解決的問題有:
  1.  Activity進(jìn)場/出場動畫
  2.     對于滑動的監(jiān)聽
 3. 對狀態(tài)欄的動態(tài)改變

2. 思路二:由于我們這邊使用的是Behaviour泌绣,而系統(tǒng)給我們提供了一個```BottomSheetBehavior```應(yīng)該可以完美的給我們解決滑動的問題钮追,但是Activity方面的問題依然存在,然后找到了一個強(qiáng)大的Dialog(```BottomSheetDialog```)和一個DialogFragment(```BottomSheetDialogFragment```),,以我夜觀天象應(yīng)該這個就是實現(xiàn)了``````BottomSheetBehavior```的View阿迈,很好很強(qiáng)大元媚。
我們來看看我們是怎樣是實現(xiàn)的:
    /**
     * BottomSheetDialog
     */
    Button btnShowDialog = (Button) findViewById(R.id.bottom_pull_sheet);
    mDatas = new ArrayList<>();
    View inflate = getLayoutInflater().inflate(R.layout.dialog_bottom_sheet, null);
    mLeftIcon = inflate.findViewById(R.id.delete);
    mLeftIcon.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (mBottomSheetDialog != null && mBottomSheetDialog.isShowing()) {
                mBottomSheetDialog.dismiss();
            }
        }
    });
    RecyclerView recyclerView = inflate.findViewById(R.id.recyclerView);
    mDatas = new ArrayList<>();
    for (int i = 0; i < 50; i++) {
        mDatas.add("這是第" + i + "個數(shù)據(jù)");
    }
    recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));
    recyclerView.setLayoutManager(new LinearLayoutManager(this));
    Adapter adapter = new Adapter();
    recyclerView.setAdapter(adapter);
    mBottomSheetDialog = new BottomSheetDialog(this);
    mBottomSheetDialog.setContentView(inflate);
    View container = mBottomSheetDialog.getDelegate().findViewById(android.support.design.R.id.design_bottom_sheet);
    final BottomSheetBehavior containerBehaviour = BottomSheetBehavior.from(container);
    containerBehaviour.setBottomSheetCallback(new BottomSheetBehavior.BottomSheetCallback() {
        @Override
        public void onStateChanged(@NonNull View bottomSheet, int newState) {
            Log.d(TAG, "onStateChanged: newState === " + newState);
            if (newState == BottomSheetBehavior.STATE_HIDDEN) {
                mBottomSheetDialog.dismiss();
                containerBehaviour.setState(BottomSheetBehavior.STATE_COLLAPSED);
            } else if (newState == BottomSheetBehavior.STATE_COLLAPSED) {
                //強(qiáng)制修改彈出高度為屏幕高度的0.9倍,不做此操作僅僅有CollapSed/Expand兩種苗沧,就是0.5和1倍展開的效果
                containerBehaviour.setPeekHeight((int) (0.9 * height));
            }
        }

        @Override
        public void onSlide(@NonNull View bottomSheet, float slideOffset) {
            Log.d("BottomBahaviour", "onSlide: slideOffset====" + slideOffset);
            if (slideOffset == 1.0) {
                mLeftIcon.setImageResource(R.drawable.back);

// containerBehaviour.setPeekHeight(height + getStatusBarHeight());
//修改狀態(tài)欄
mBottomSheetDialog.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
mBottomSheetDialog.getWindow().setStatusBarColor(getResources().getColor(android.R.color.transparent));
try {
//修改魅族系統(tǒng)狀態(tài)欄字體顏色
WindowManager.LayoutParams lp = mBottomSheetDialog.getWindow().getAttributes();
Field darkFlag = WindowManager.LayoutParams.class
.getDeclaredField("MEIZU_FLAG_DARK_STATUS_BAR_ICON");
Field meizuFlags = WindowManager.LayoutParams.class
.getDeclaredField("meizuFlags");
darkFlag.setAccessible(true);
meizuFlags.setAccessible(true);
int bit = darkFlag.getInt(null);
int value = meizuFlags.getInt(lp);
value |= bit;

                        meizuFlags.setInt(lp, value);
                        mBottomSheetDialog.getWindow().setAttributes(lp);

                    } catch (Exception e) {

                    }
                }
            } else {

                mLeftIcon.setImageResource(R.drawable.icon_delete);
            }
        }
    });

    btnShowDialog.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (!mBottomSheetDialog.isShowing()) {
                containerBehaviour.setPeekHeight((int) (0.9 * height));
                mBottomSheetDialog.show();
            } else {
                mBottomSheetDialog.dismiss();
            }
        }
    });

class Adapter extends RecyclerView.Adapter<Adapter.ViewHolder> {
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
return new ViewHolder(LayoutInflater.from(BottomActivity.this).inflate(R.layout.layout_item, parent, false));
}

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.mTvTip.setText(mDatas.get(position));
    }

    @Override
    public int getItemCount() {
        return mDatas == null && mDatas.size() < 0 ? 0 : mDatas.size();
    }

    class ViewHolder extends RecyclerView.ViewHolder {

        TextView mTvTip;

        public ViewHolder(View itemView) {
            super(itemView);
            mTvTip = (TextView) itemView.findViewById(R.id.tv_tips);
        }
    }
}
通過以上簡單的錯作即可實現(xiàn)我們想要的效果:

![pullSheet](http://upload-images.jianshu.io/upload_images/2605454-a1bcc209a0eba14f.gif?imageMogr2/auto-orient/strip)
這是在模擬器上運行的結(jié)果刊棕,在魅族手機(jī)呢?

![meizu](http://upload-images.jianshu.io/upload_images/2605454-ee040385cd582da2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
就這么簡單即可完美實現(xiàn)效果待逞。
#####總結(jié)
通過對Behaviour的學(xué)習(xí)很多看起來以前很難的效果我們都可以輕松實現(xiàn)鞠绰。如果你發(fā)現(xiàn)上面有任何錯漏,麻煩留言指出飒焦,同時我也會進(jìn)行自我完善蜈膨。
#####參考文章
[白底黑字屿笼!Android淺色狀態(tài)欄黑色字體模式](http://www.reibang.com/p/7f5a9969be53)
[Material Design系列](http://blog.csdn.net/yanzhenjie1003/article/details/52205665)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市翁巍,隨后出現(xiàn)的幾起案子驴一,更是在濱河造成了極大的恐慌,老刑警劉巖灶壶,帶你破解...
    沈念sama閱讀 221,888評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件肝断,死亡現(xiàn)場離奇詭異,居然都是意外死亡驰凛,警方通過查閱死者的電腦和手機(jī)胸懈,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,677評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來恰响,“玉大人趣钱,你說我怎么就攤上這事∨呋拢” “怎么了首有?”我有些...
    開封第一講書人閱讀 168,386評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長枢劝。 經(jīng)常有香客問我井联,道長,這世上最難降的妖魔是什么您旁? 我笑而不...
    開封第一講書人閱讀 59,726評論 1 297
  • 正文 為了忘掉前任烙常,我火速辦了婚禮,結(jié)果婚禮上鹤盒,老公的妹妹穿的比我還像新娘军掂。我一直安慰自己,他們只是感情好昨悼,可當(dāng)我...
    茶點故事閱讀 68,729評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著跃洛,像睡著了一般率触。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上汇竭,一...
    開封第一講書人閱讀 52,337評論 1 310
  • 那天葱蝗,我揣著相機(jī)與錄音,去河邊找鬼细燎。 笑死两曼,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的玻驻。 我是一名探鬼主播悼凑,決...
    沈念sama閱讀 40,902評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼偿枕,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了户辫?” 一聲冷哼從身側(cè)響起渐夸,我...
    開封第一講書人閱讀 39,807評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎渔欢,沒想到半個月后墓塌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,349評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡奥额,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,439評論 3 340
  • 正文 我和宋清朗相戀三年苫幢,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片垫挨。...
    茶點故事閱讀 40,567評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡韩肝,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出棒拂,到底是詐尸還是另有隱情伞梯,我是刑警寧澤,帶...
    沈念sama閱讀 36,242評論 5 350
  • 正文 年R本政府宣布帚屉,位于F島的核電站谜诫,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏攻旦。R本人自食惡果不足惜喻旷,卻給世界環(huán)境...
    茶點故事閱讀 41,933評論 3 334
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望牢屋。 院中可真熱鬧且预,春花似錦、人聲如沸烙无。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,420評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽截酷。三九已至涮拗,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間迂苛,已是汗流浹背三热。 一陣腳步聲響...
    開封第一講書人閱讀 33,531評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留三幻,地道東北人就漾。 一個月前我還...
    沈念sama閱讀 48,995評論 3 377
  • 正文 我出身青樓,卻偏偏與公主長得像念搬,于是被迫代替她去往敵國和親抑堡。 傳聞我的和親對象是個殘疾皇子摆出,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,585評論 2 359

推薦閱讀更多精彩內(nèi)容

  • 寫在前面:參考YoKey,感謝夷野。附上他的鏈接:http://www.reibang.com/p/d30fd8da4...
    喜歡丶下雨天閱讀 3,238評論 0 9
  • 一.常用控件的使用方法 1.TextView match_parent 由父布局來決定當(dāng)前控件的大小懊蒸。wrap_c...
    努力生活的西魚閱讀 1,191評論 5 0
  • Tangram是阿里出品、用于快速實現(xiàn)組合布局的框架模型悯搔,在手機(jī)天貓Android&iOS版 內(nèi)廣泛使用 該框架提...
    wintersweett閱讀 3,306評論 0 1
  • 第二章 UI 標(biāo)簽(空格分隔): 未分類 疑問 3.5.2骑丸,inflate()的第三個參數(shù)false是起什么作用?...
    秋山君閱讀 796評論 1 0
  • 第二天 其實住院以后妒貌,反而離動手術(shù)越來越遠(yuǎn)了通危。 自從住進(jìn)這里,每天一摞一摞的檢查單甩給你灌曙,肝菊碟,腎,肺在刺,腸胃逆害,腦部,...
    royalshaw閱讀 213評論 0 0