提问人:user3298565 提问时间:11/8/2023 最后编辑:user3298565 更新时间:11/8/2023 访问量:28
制作像谷歌通讯录一样的布局
Make a layout like google contacts
问:
我是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 哈哈
答: 暂无答案
评论