Android application bar layout AppBarLayout related knowledge points

1. Application bar layout AppBarLayout function

The application bar layout AppBarLayout actually inherits from the linear layout LinearLayout, so it has all the properties and methods of LinearLayout. In addition, the additional functions of the application bar layout are mainly as follows:

  • Supports sliding behavior in response to the main body of the page, that is, when the main body of the page is moved up or down, AppBarLayout can capture the scrolling operation of the main body of the page.
  • After capturing the scrolling operation, you must also notify the head control (usually the Toolbar), how do you want to roll the high-speed head control, whether you like to roll or roll all over the street.

2. The dynamic scrolling effect of the top navigation bar is specific to the previous step

  • Add compilation support for several libraries in build.gradle, including appcompat-v7 library (required for Toolbar), design library (required for AppBarLayout), recyclerview library (required for RecyclerView of the main page). If you are in an AndoridX environment, directly rely on implementation'com.google.android.material:material:1.0.0-rc01'
  • The root layout of the layout file adopts CoordinatorLayout, because the dynamic effect of the design library depends on the control; and the node needs to add the namespace declaration xmlns:app="http://schemas.android.com/apk/res-auto"
  • Use the AppBarLayout node to wrap the Toolbar node, that is, use the Toolbar node as the subordinate node of the AppBarLayout node.
  • Add the scroll attribute app:layout_scrollFlags="scroll|enterAlways" to the Toolbar node to specify the scroll behavior flag of the toolbar.
  • The main body of the demo interface uses the RecyclerView control, and adds a behavior attribute to the control node, namely app:layout_behavior="@string/appbar_scrolling_view_behavior", which means that AppBarLayout is notified to capture the scrolling operation of the RecyclerView.

3. AppBarLayout combined with RecyclerView layout file code example

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/abl_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/tl_title"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="#AAAAFF"
            app:layout_scrollFlags="scroll|enterAlways" />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/rv_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

item_collapse.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/ll_item"
    android:layout_width="match_parent"
    android:layout_height="80dp"
    android:background="#aaffff"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv_seq"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="2"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="17sp" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="8"
        android:gravity="center"
        android:textColor="#000000"
        android:textSize="17sp" />

</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private String[] yearArray = {"鼠年", "牛年", "虎年", "兔年", "龙年", "蛇年",
            "马年", "羊年", "猴年", "鸡年", "狗年", "猪年","鼠年", "牛年", "虎年", "兔年", "龙年", "蛇年",
            "马年", "羊年", "猴年", "鸡年", "狗年", "猪年","鼠年", "牛年", "虎年", "兔年", "龙年", "蛇年",
            "马年", "羊年", "猴年", "鸡年", "狗年", "猪年"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 从布局文件中获取名叫tl_title的工具栏
        Toolbar tl_title = findViewById(R.id.tl_title);
        // 使用tl_title替换系统自带的ActionBar
        setSupportActionBar(tl_title);
        // 从布局文件中获取名叫rv_main的循环视图
        RecyclerView rv_main = findViewById(R.id.rv_main);
        // 创建一个垂直方向的线性布局管理器
        LinearLayoutManager llm = new LinearLayoutManager(this, RecyclerView.VERTICAL, false);
        // 设置循环视图的布局管理器
        rv_main.setLayoutManager(llm);
        // 构建一个十二生肖的线性适配器
        RecyclerCollapseAdapter adapter = new RecyclerCollapseAdapter(this, yearArray);
        // 给rv_main设置十二生肖线性适配器
        rv_main.setAdapter(adapter);
    }
}
RecyclerCollapseAdapter.java
public class RecyclerCollapseAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
    private final static String TAG = "RecyclerCollapseAdapter";
    private Context mContext; // 声明一个上下文对象
    private String[] mTitleArray; // 标题文字数组

    public RecyclerCollapseAdapter(Context context, String[] titleArray) {
        mContext = context;
        mTitleArray = titleArray;
    }

    // 获取列表项的个数
    public int getItemCount() {
        return mTitleArray.length;
    }

    // 创建列表项的视图持有者
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup vg, int viewType) {
        // 根据布局文件item_collapse.xml生成视图对象
        View v = LayoutInflater.from(mContext).inflate(R.layout.item_collapse, vg, false);
        return new TitleHolder(v);
    }

    // 绑定列表项的视图持有者
    public void onBindViewHolder(RecyclerView.ViewHolder vh, final int position) {
        TitleHolder holder = (TitleHolder) vh;
        holder.tv_seq.setText("" + (position + 1));
        holder.tv_title.setText(mTitleArray[position]);
    }

    // 获取列表项的类型
    public int getItemViewType(int position) {
        return 0;
    }

    // 获取列表项的编号
    public long getItemId(int position) {
        return position;
    }

    // 定义列表项的视图持有者
    public class TitleHolder extends RecyclerView.ViewHolder {
        public LinearLayout ll_item; // 声明列表项的线性布局
        public TextView tv_seq; // 声明列表项序号的文本视图
        public TextView tv_title; // 声明列表项标题的文本视图

        public TitleHolder(View v) {
            super(v);
            ll_item = v.findViewById(R.id.ll_item);
            tv_seq = v.findViewById(R.id.tv_seq);
            tv_title = v.findViewById(R.id.tv_title);
        }
    }
}

4. Introduction to NestedScrollView

NestedScrollView inherits from the frame layout FrameLayout, and its usage is similar to ScrollView. For example, both must have only one direct subview, and both allow the inner view to scroll up and down, and so on. The more functions of NestedScrollView are used in conjunction with AppBarLayout. By triggering the scrolling behavior of the Toolbar, it can be regarded as an enhanced version of ScrollView compatible with the new features of Android 5.0.

Guess you like

Origin blog.csdn.net/weixin_38322371/article/details/114978167