頂部標題欄隨滑動時的漸變隱藏和漸變顯示

各位早上好,話很少說,先上效果圖:

注意頂部:首頁TextView的變化(顯示和隱藏)!

首先分析下:UI狀態,其是由RecyclerView添加頭部組成+RecyclerView
頭部添加和RecyclerView分別引用以下:具體的分裝數據的過程這裏就不在說明,下篇博客會更加深刻的寫關於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>

第二步:直接上其餘主要的代碼,其註釋很詳細,很少說

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填充數據(忽略不計)
        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每一個Item之間的距離,和Adapter中設置的距離同樣
        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);

        //設置其滑動事件
        mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                //設置其透明度
                float alpha = 0;
                int scollYHeight = getScollYHeight(true, mRecyclerHeaderHeight);
                //起始截止變化高度,如能夠變化高度爲mRecyclerHeaderHeight
                int baseHeight = mRecyclerHeaderBannerHeight - recyclerItemHeight - mTextViewHeight;
                if(scollYHeight >= baseHeight) {
                    //徹底不透明
                    alpha = 1;
                }else {
                //產生漸變效果
                    alpha = scollYHeight / (baseHeight*1.0f);
                }
                mTextView.setAlpha(alpha);
                super.onScrolled(recyclerView, dx, dy);
            }
        });
        //將頭部視圖添加到RecyclerView中
        mRecyclerViewHeader.attachTo(mRecyclerView);
        //第一次進來其狀態顯示
        mRecyclerViewHeader.post(new Runnable() {
            @Override
            public void run() {
                mRecyclerHeaderHeight =  mRecyclerViewHeader.getHeight();
                mTextViewHeight = mTextView.getHeight();
                mTextView.setVisibility(View.VISIBLE);
                mTextView.setAlpha(0);
            }
        });
    }

第三步:獲取其滑動的距離

/** * 計算RecyclerView滑動的距離 * @param hasHead 是否有頭部 * @param headerHeight RecyclerView的頭部高度 * @return 滑動的距離 */
    private int getScollYHeight(boolean hasHead, int headerHeight) {
        LinearLayoutManager layoutManager = (LinearLayoutManager) mRecyclerView.getLayoutManager();
        //獲取到第一個可見的position,其添加的頭部不算其position當中
        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();
        }
    }

以上:就能夠實現其效果!