Material Design 实现 Android 应用粘性 Header-JavaScript中文网-JavaScript教程资源分享门户

简介

Material Design 是 Google 推出的一种设计语言，旨在提升用户体验和用户界面的一致性。在 Android 应用中，粘性 Header 是一种常见的界面设计元素，它可以让用户在滚动页面时始终看到页面的标题和操作按钮，以提高应用的可用性和易用性。本文将介绍如何使用 Material Design 实现 Android 应用粘性 Header。

实现方法

要实现粘性 Header，我们需要使用 RecyclerView 和 CoordinatorLayout 这两个控件，并在布局文件中将它们组合起来。

首先，我们需要在 Gradle 文件中添加以下依赖：

compile 'com.android.support:recyclerview-v7:25.3.1'
compile 'com.android.support:design:25.3.1'

然后，在布局文件中添加 RecyclerView 和 CoordinatorLayout：

// javascriptcn.com 代码示例
<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical" />

</android.support.design.widget.CoordinatorLayout>

接下来，我们需要为 RecyclerView 添加一个 LayoutManager 和一个 Adapter。在本文中，我们将使用 LinearLayoutManager 和一个简单的 Adapter。

LayoutManager 的作用是确定 RecyclerView 中子项的排列方式。在本例中，我们使用 LinearLayoutManager，它可以将子项按照垂直方向排列。

Adapter 的作用是为 RecyclerView 提供数据。在本例中，我们使用一个简单的 Adapter，它包含一个 TextView 和一个 ImageView。

// javascriptcn.com 代码示例
public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {

    private String[] mData;

    public MyAdapter(String[] data) {
        mData = data;
    }

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

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.mTextView.setText(mData[position]);
    }

    @Override
    public int getItemCount() {
        return mData.length;
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {

        public TextView mTextView;
        public ImageView mImageView;

        public ViewHolder(View itemView) {
            super(itemView);
            mTextView = (TextView) itemView.findViewById(R.id.text);
            mImageView = (ImageView) itemView.findViewById(R.id.image);
        }
    }
}

最后，我们需要为 CoordinatorLayout 添加一个 AppBarLayout 和一个 Toolbar。AppBarLayout 是一个可以滚动的容器，它可以包含一个或多个 Toolbar。Toolbar 是一个可以包含标题和操作按钮的控件。

// javascriptcn.com 代码示例
<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:titleTextColor="@android:color/white"
            app:layout_scrollFlags="scroll|enterAlways" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

在上面的布局文件中，我们为 Toolbar 添加了一个 layout_scrollFlags 属性，它的值为 scroll|enterAlways。这个属性告诉 CoordinatorLayout，当 RecyclerView 滚动时，Toolbar 应该始终保持可见。

示例代码

下面是一个简单的示例代码，演示如何使用 Material Design 实现 Android 应用粘性 Header。

MainActivity.java

// javascriptcn.com 代码示例
public class MainActivity extends AppCompatActivity {

    private RecyclerView mRecyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
        mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
        mRecyclerView.setAdapter(new MyAdapter(new String[]{"Item 1", "Item 2", "Item 3", "Item 4", "Item 5", "Item 6", "Item 7", "Item 8", "Item 9", "Item 10"}));

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }
}

activity_main.xml

// javascriptcn.com 代码示例
<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:title="My App"
            android:titleTextColor="@android:color/white"
            app:layout_scrollFlags="scroll|enterAlways" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

item.xml

// javascriptcn.com 代码示例
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="16dp">

    <ImageView
        android:id="@+id/image"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@mipmap/ic_launcher_round" />

    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:textSize="16sp" />

</LinearLayout>

总结

本文介绍了如何使用 Material Design 实现 Android 应用粘性 Header。我们使用了 RecyclerView 和 CoordinatorLayout 这两个控件，并在布局文件中将它们组合起来。这种实现方法可以提高应用的可用性和易用性，帮助用户更轻松地浏览和使用应用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65727b0dd2f5e1655db5ada4