Android 頂部標(biāo)題欄隨滑動時(shí)的漸變隱藏和漸變顯示效果
各位早上好,話不多說,先上效果圖:
注意頂部:首頁TextView的變化(顯示和隱藏)!
首先分析下:UI狀態(tài),其是由RecyclerView添加頭部組成+RecyclerView
頭部添加和RecyclerView分別引用如下:具體的分裝數(shù)據(jù)的過程這里就不在說明,下篇博客會更加深入的寫關(guān)于
RecyclerView總添加多種不同type類型
compile 'com.bartoszlipinski.recyclerviewheader:library:1.2.1' compile 'com.android.support:recyclerview-v7:25.3.1'
第一步:生成布局視圖
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:background="#f2f2f2" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler" android:layout_width="match_parent" android:layout_height="match_parent"/> <TextView android:background="#ffffff" android:paddingTop="5dp" android:paddingBottom="5dp" android:gravity="center_horizontal" tools:visibility="visible" android:textColor="#000000" android:textSize="20sp" android:id="@+id/home_text" android:visibility="invisible" android:text="首頁" android:layout_width="match_parent" android:layout_height="wrap_content"/> </FrameLayout>
第二步:直接上其他主要的代碼,其注釋很詳細(xì),不多說
public class MainActivity extends AppCompatActivity { private TextView mTextView; private int mTextViewHeight; private RecyclerView mRecyclerView; private RecyclerViewHeader mRecyclerViewHeader; //頭部圖片(輪播圖的高度) private int mRecyclerHeaderBannerHeight; //頭部的高度 private int mRecyclerHeaderHeight; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mTextView = (TextView) findViewById(R.id.home_text); //recyclerView填充數(shù)據(jù)(忽略不計(jì)) initData(); mRecyclerView = (RecyclerView) findViewById(R.id.recycler); mRecyclerView.setLayoutManager(new LinearLayoutManager(this)); mRecyclerView.setAdapter(mAdapter); //獲取到文本的高度 mTextViewHeight = mTextView.getHeight(); //輪播圖片的高度--和xml圖片的高度是一樣的 mRecyclerHeaderBannerHeight = (int) getResources().getDimension(R.dimen.home_page_banner_height); //RecyclerView每個(gè)Item之間的距離,和Adapter中設(shè)置的距離一樣 final int recyclerItemHeight = (int) getResources().getDimension(R.dimen.home_page_list_item_margin_top); //添加頭部視圖,其布局文件就忽略 mRecyclerViewHeader = RecyclerViewHeader.fromXml(this, R.layout.list_item_prime_product_header); //設(shè)置其滑動事件 mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { //設(shè)置其透明度 float alpha = 0; int scollYHeight = getScollYHeight(true, mRecyclerHeaderHeight); //起始截止變化高度,如可以變化高度為mRecyclerHeaderHeight int baseHeight = mRecyclerHeaderBannerHeight - recyclerItemHeight - mTextViewHeight; if(scollYHeight >= baseHeight) { //完全不透明 alpha = 1; }else { //產(chǎn)生漸變效果 alpha = scollYHeight / (baseHeight*1.0f); } mTextView.setAlpha(alpha); super.onScrolled(recyclerView, dx, dy); } }); //將頭部視圖添加到RecyclerView中 mRecyclerViewHeader.attachTo(mRecyclerView); //第一次進(jìn)來其狀態(tài)顯示 mRecyclerViewHeader.post(new Runnable() { @Override public void run() { mRecyclerHeaderHeight = mRecyclerViewHeader.getHeight(); mTextViewHeight = mTextView.getHeight(); mTextView.setVisibility(View.VISIBLE); mTextView.setAlpha(0); } }); }
第三步:獲取其滑動的距離
/** * 計(jì)算RecyclerView滑動的距離 * @param hasHead 是否有頭部 * @param headerHeight RecyclerView的頭部高度 * @return 滑動的距離 */ private int getScollYHeight(boolean hasHead, int headerHeight) { LinearLayoutManager layoutManager = (LinearLayoutManager) mRecyclerView.getLayoutManager(); //獲取到第一個(gè)可見的position,其添加的頭部不算其position當(dāng)中 int position = layoutManager.findFirstVisibleItemPosition(); //通過position獲取其管理器中的視圖 View firstVisiableChildView = layoutManager.findViewByPosition(position); //獲取自身的高度 int itemHeight = firstVisiableChildView.getHeight(); //有頭部 if(hasHead) { return headerHeight + itemHeight*position - firstVisiableChildView.getTop(); }else { return itemHeight*position - firstVisiableChildView.getTop(); } }
以上:就可以實(shí)現(xiàn)其效果!
以上所述是小編給大家介紹的Android 頂部標(biāo)題欄隨滑動時(shí)的漸變隱藏和漸變顯示效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
- Android中自定義標(biāo)題欄樣式的兩種方法
- 3種Android隱藏頂部狀態(tài)欄及標(biāo)題欄的方法
- Android自定義狀態(tài)欄顏色與應(yīng)用標(biāo)題欄顏色一致
- Android中去掉標(biāo)題欄的幾種方法(三種)
- Android 全屏無標(biāo)題欄的三種實(shí)現(xiàn)方法
- Android中隱藏標(biāo)題欄和狀態(tài)欄的方法
- Android 使用CoordinatorLayout實(shí)現(xiàn)滾動標(biāo)題欄效果的實(shí)例
- Android ScrollView滑動實(shí)現(xiàn)仿QQ空間標(biāo)題欄漸變
- Android中隱藏狀態(tài)欄和標(biāo)題欄的方法匯總(隱藏狀態(tài)欄、標(biāo)題欄的五種方法)
- Android實(shí)現(xiàn)可折疊式標(biāo)題欄
相關(guān)文章
Android基于google Zxing實(shí)現(xiàn)各類二維碼掃描效果
這篇文章主要介紹了Android基于google Zxing實(shí)現(xiàn)各類二維碼掃描效果的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02Android開發(fā)之a(chǎn)ctiviti節(jié)點(diǎn)跳轉(zhuǎn)
這篇文章主要介紹了Android開發(fā)之a(chǎn)ctiviti節(jié)點(diǎn)跳轉(zhuǎn)的相關(guān)資料,需要的朋友可以參考下2016-04-04Flutter?Widget之FutureBuilder使用示例詳解
這篇文章主要為大家介紹了Flutter?Widget之FutureBuilder使用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Android 4.4.2 橫屏應(yīng)用隱藏狀態(tài)欄和底部虛擬鍵的方法
這篇文章主要介紹了Android 4.4.2 橫屏應(yīng)用隱藏狀態(tài)欄和底部虛擬鍵的方法,需要的朋友可以參考下2017-01-01flutter 怎么實(shí)現(xiàn)app整體灰色效果
Flutter 是 Google 開源的 UI 工具包,幫助開發(fā)者通過一套代碼庫高效構(gòu)建多平臺精美應(yīng)用,支持移動、Web、桌面和嵌入式平臺。這篇文章給大家介紹flutter 怎么實(shí)現(xiàn)app整體灰色效果,感興趣的朋友一起看看吧2020-04-04Android 手機(jī)獲取手機(jī)號實(shí)現(xiàn)方法
本文主要介紹Android 獲取手機(jī)號的實(shí)現(xiàn)方法,這里提供了實(shí)現(xiàn)方法,和具體操作流程,并符實(shí)現(xiàn)代碼,有需要的小伙伴可以參考下2016-09-09Android中實(shí)現(xiàn)水平滑動(橫向滑動)ListView示例
這篇文章主要介紹了Android中實(shí)現(xiàn)水平滑動(橫向滑動)ListView示例,本文用自己封裝一個(gè)控件的方法解決了這個(gè)需求,需要的朋友可以參考下2015-06-06Android自定義Dialog內(nèi)部透明、外部遮罩效果
這篇文章主要為大家詳細(xì)介紹了Android自定義Dialog內(nèi)部透明、外部遮罩效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-10-10