制作像谷歌通讯录一样的布局

Make a layout like google contacts

提问人:user3298565 提问时间:11/8/2023 最后编辑:user3298565 更新时间:11/8/2023 访问量:28

问:

我是android开发的菜鸟

我想制作一个像 Google Contats 这样的 UI:当点击联系人时:

用户界面

实际上这是我的布局:

<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.activity.ContactActivity">

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

    <com.google.android.material.appbar.CollapsingToolbarLayout
        style="?attr/collapsingToolbarLayoutLargeStyle"
        android:id="@+id/collapsingToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7"
            android:paddingTop="@dimen/appbar_top_padding"
            android:paddingBottom="@dimen/appbar_bottop_padding">

            <ImageView
                android:id="@+id/contactIcon"
                android:layout_marginTop="?attr/actionBarSize"
                android:layout_gravity="center_vertical|center_horizontal"
                android:layout_width="200dp"
                android:layout_height="200dp"
                app:srcCompat="@drawable/ic_default_contact" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/bottom_sheet_title_margin_bottom"
                android:text="Contact Name"
                android:id="@+id/contactName"
                android:textAlignment="center"
                android:layout_gravity="center_horizontal"
                android:textAppearance="?attr/textAppearanceHeadline3"/>

            </LinearLayout>

            <com.google.android.material.appbar.MaterialToolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/AppTheme.PopupOverlay"
                app:titleCentered="true" />

        </com.google.android.material.appbar.CollapsingToolbarLayout>

</com.google.android.material.appbar.AppBarLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recycler_view_actions"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                android:paddingTop="20dp"
                android:orientation="horizontal"
                app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
                android:background="?android:attr/colorBackground"
                android:clipToPadding="true"/>
        </LinearLayout>
            <androidx.recyclerview.widget.RecyclerView
                android:id="@+id/recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"
                android:paddingTop="20dp"
                android:background="?android:attr/colorBackground"
                android:clipToPadding="true"/>
    </LinearLayout>


</androidx.coordinatorlayout.widget.CoordinatorLayout>

说明: 我使用两个回收器视图:一个用于联系人操作,一个用于显示其他内容(不像屏幕截图)。 第一个是水平的,第二个是垂直的。 为什么?因为这样,当我向下滚动时,第一个 Recycler 视图被固定了。 我查看了 goolge 源代码,但发现它应该是一个 FrameLayout。

目前它可以工作,但在第一个回收器视图上,物品一个接一个地放置,而不是像屏幕截图那样使用垫片。

我的联系人操作适配器:

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

    private final Context mContext;
    private final List<ContactActions> contactActions;


    public ContactActionsAdapter(Context context, List<ContactActions> contactActionsList) {
        this.mContext = context;
        this.contactActions = contactActionsList;
    }

    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        ActionItemEntryBinding binding = ActionItemEntryBinding.inflate(LayoutInflater.from(parent.getContext()), parent, false);
        return new ViewHolder(binding);
    }

    @Override
    public void onBindViewHolder(@NonNull ContactActionsAdapter.ViewHolder holder, int position) {
        ContactActions contactAction = contactActions.get(position);
        Log.d("ContactActionsAdapter", "ContactActionsAdapter: " + contactAction.getText());
        holder.binding.actionIcon.setImageResource(contactAction.getIcon());
        holder.binding.actionText.setText(contactAction.getText());
        holder.binding.actionItem.setOnClickListener(contactAction.getOnClickListener());
    }

    @Override
    public int getItemCount() {
        return contactActions.size();
    }

    public static class ViewHolder extends RecyclerView.ViewHolder {

        private final ActionItemEntryBinding binding;

        public ViewHolder(@NonNull ActionItemEntryBinding binding) {
            super(binding.getRoot());
            this.binding = binding;

        }
    }
}

在我向下滑动的 Google UI 中,它会正确折叠工具栏并使用操作按钮固定栏,但在我的 UI 中,只有当我向下滑动第二个回收器视图时。我想达到相同的滚动动作。

我在 onBindViewHolder 中设置了 OnClick,因为我还没有了解如何实际使用 Interface 为项目中的视图实现 onClick 哈哈

安卓 Android-RecyclerView

评论


答: 暂无答案