天天看點

CoordinatorLayout+AppBarLayout實作抽屜布局

CoordinatorLayout+AppBarLayout實作抽屜布局

最近因為一些事情耽誤了很久沒有持續更新部落格了,真的是非常抱歉,很感謝這段時間以來大家的支援,我會持續努力保持更新的,好了廢話不多說先上效果圖

效果

CoordinatorLayout+AppBarLayout實作抽屜布局

下面是我的布局xml檔案代碼

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".MainActivity">
    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <!-- app:layout_scrollFlags="scroll|exitUntilCollapsed"
                     設定目前view随滾動伸縮 -->
        <LinearLayout
            android:id="@+id/ll_header_layout"
            android:orientation="vertical"
            app:layout_scrollFlags="scroll|enterAlways"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FFFFFF">
            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recy_head"
                android:overScrollMode="never"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"/>
        </LinearLayout>

    </com.google.android.material.appbar.AppBarLayout>
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recy_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
           

對于這個布局的代碼有幾個注意的地方

第一,請務必使用CoordinatorLayout限制布局

第二,需要設定抽屜的布局請放在一個LinearLayout裡面因為AppBar隻允許有一個子view

第三,給你的LinearLayout設定app:layout_scrollFlags=“scroll|exitUntilCollapsed"屬性,因為還有其他很多屬性,隻需要修改它就可以達到你想要的其他效果了,可能你需要的效果和我的這個不一樣,但是你隻需要修改這個就可以了,這裡還沒有詳細的列出屬性,下面會簡單介紹一下

第四,在抽屜下方的布局最好設定在一個布局裡該布局要想在appbar下方的話需設定app:layout_behavior=”@string/appbar_scrolling_view_behavior"

想要使用這些控件你還需要在build.gradle裡面導入

implementation 'androidx.appcompat:appcompat:1.0.0'
    implementation 'com.google.android.material:material:1.0.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.1.0'
           
Activity裡面我就貼一下,就是一個随便弄個adapter填充一下RecyclerView

```java
package com.android.demo;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
    RecyclerView mHeadRecy;
    RecyclerView mContent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mHeadRecy = findViewById(R.id.recy_head);
        mContent = findViewById(R.id.recy_content);
        mHeadRecy.setLayoutManager(new LinearLayoutManager(this));
        mContent.setLayoutManager(new LinearLayoutManager(this));
        mHeadRecy.setAdapter(new ContentAdapter(5));
        mContent.setAdapter(new ContentAdapter(30));
    }

    public class ContentAdapter extends RecyclerView.Adapter<ContentAdapter.ViewHolder>{

        private int itemNum = 0;
        public ContentAdapter(){

        }
        public ContentAdapter(int itemNum){
            this.itemNum = itemNum;
        }

        @NonNull
        @Override
        public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.rv_item_content,parent,false);
            return new ViewHolder(view);
        }

        @Override
        public void onBindViewHolder(@NonNull ViewHolder holder, int position) {

        }

        @Override
        public int getItemCount() {
            return itemNum;
        }

        public class ViewHolder extends RecyclerView.ViewHolder {
            public ViewHolder(@NonNull View itemView) {
                super(itemView);
            }
        }
    }

}

           

如果還有遺漏的歡迎下方評論,好了這裡是布局下面說一下

app:layout_scrollFlags=""屬性

scroll

子View伴随着scrollingView的滾動事件而滾出或滾進螢幕

scroll|enterAlways

使用要兩個一塊使用;

enterAlways當向下滾動時Scrolling View和子View之間的滾動優先級。

scroll|exitUntilCollapsed

這裡涉及到最小高度。當發生向上滾動時,

子View向上滾動退出直至最小高度,

然後Scrolling View開始滾動。子View不會完全退出螢幕。

scroll|snap

snap就是子View滾動帶一個吸附效果。

也就是說,子View不會存在局部顯示,之滾動子View的部分的情況;

當我們松開手指時,子View要麼向上全部滾出螢幕,要麼向下全部滾進螢幕

還有其他屬性這裡就不詳解啦,喜歡的小夥伴歡迎在下方評論或者私信。感謝你們的支援!!!^ _ ^