为彼此实现具有相同设计的 RecyclerView 和 CardView 项目

Question

我需要知道，当用户点击一个项目（或者例如，whatsApp 联系人）时，WhatsApp 会向用户显示一个带有这张图片示例的设计：

这里是回收视图项目：

我正在使用：

http://code.tutsplus.com/tutorials/getting-started-with-recyclerview-and-cardview-on-android--cms-23465

主要-activity:

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView rv = (RecyclerView)findViewById(R.id.rv);
        rv.setHasFixedSize(true);
        LinearLayoutManager llm = new LinearLayoutManager(context);
        rv.setLayoutManager(llm);
        RVAdapter adapter = new RVAdapter(persons);
        rv.setAdapter(adapter);
    }
}

主要activity Xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    android:orientation="vertical">
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/cv"
        >
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_photo"
                android:src="@mipmap/ic_launcher"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:layout_marginRight="16dp"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_name"
                android:layout_toRightOf="@+id/person_photo"
                android:layout_alignParentTop="true"
                android:textSize="30sp"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/person_age"
                android:layout_toRightOf="@+id/person_photo"
                android:layout_below="@+id/person_name"
                />
        </RelativeLayout>
    </android.support.v7.widget.CardView>
    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rv"/>
</LinearLayout>

这是适配器：

public class RVAdapter extends RecyclerView.Adapter<RVAdapter.PersonViewHolder>{

        @Override
        public PersonViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
            View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.activity_main, viewGroup, false);
            PersonViewHolder pvh = new PersonViewHolder(v);
            return pvh;
        }
    
        @Override
        public void onBindViewHolder(PersonViewHolder personViewHolder, int i) {
            personViewHolder.personName.setText(persons.get(i).name);
            personViewHolder.personAge.setText(persons.get(i).age);
            personViewHolder.personPhoto.setImageResource(persons.get(i).photoId);
        }
        @Override
        public void onAttachedToRecyclerView(RecyclerView recyclerView) {
            super.onAttachedToRecyclerView(recyclerView);
        }
    
        @Override
        public int getItemCount() {
            return persons.size();
        }
        List<Person> persons;
    
        RVAdapter(List<Person> persons){
            this.persons = persons;
        }
    
        public static class PersonViewHolder extends RecyclerView.ViewHolder {
            CardView cv;
            TextView personName;
            TextView personAge;
            ImageView personPhoto;
    
            PersonViewHolder(View itemView) {
                super(itemView);
                cv = (CardView)itemView.findViewById(R.id.cv);
                personName = (TextView)itemView.findViewById(R.id.person_name);
                personAge = (TextView)itemView.findViewById(R.id.person_age);
                personPhoto = (ImageView)itemView.findViewById(R.id.person_photo);
            }
        }
    
    }

目前，MainActivity Java 代码有错误：

无法解析符号 Contect 以及 Person！

所以，在这之后（我希望这个修复）。

我需要当用户点击每个项目时，它向我们展示相似的设计，但是，每个项目都有名称。

示例： 用户点击了项目 2：Lavery Maiss

然后转到另一个 activity 或布局并显示此名称。

如果用户单击项目 1：Emma Wilson 它会向我们展示另一个 activity 每个项目的相同设计，但是，带有 Emma Wilson 的名字。

我应该怎么做以及我的代码有什么问题？

我们可以做些什么来展示这个？

干杯！

Answer 1

在研究这个之后，我找到了一个很好的教程，但没有人提到它。 https://github.com/tarek360/Material-Animation-Samples

因此，我们需要一个适配器来执行以下操作：

public class BlogRecyclerAdapter extends 

    RecyclerView.Adapter<BlogRecyclerAdapter.SimpleItemViewHolder> {

        private List<Blog> items;

        // Provide a reference to the views for each data item
        // Provide access to all the views for a data item in a view holder
        public final static class SimpleItemViewHolder extends RecyclerView.ViewHolder {
            ImageView image;
            TextView title;
            TextView subTitle;
            CardView cardView;

            public SimpleItemViewHolder(View itemView) {
                super(itemView);
                image = (ImageView) itemView.findViewById(R.id.imageThumb);
                title = (TextView) itemView.findViewById(R.id.title);
                subTitle = (TextView) itemView.findViewById(R.id.subTitle);
                cardView = (CardView) itemView.findViewById(R.id.cardView);
            }
        }

        // Provide a suitable constructor (depends on the kind of dataset)
        public BlogRecyclerAdapter(List<Blog> items) {
            this.items = items;
        }

        // Return the size of your dataset (invoked by the layout manager)
        @Override
        public int getItemCount() {
            return this.items.size();
        }

        // Create new items (invoked by the layout manager)
        // Usually involves inflating a layout from XML and returning the holder
        @Override
        public SimpleItemViewHolder onCreateViewHolder(ViewGroup viewGroup, int viewType) {
            View itemView = LayoutInflater.from(viewGroup.getContext()).
                    inflate(R.layout.blog_item, viewGroup, false);
            return new SimpleItemViewHolder(itemView);
        }

        // Replace the contents of a view (invoked by the layout manager)
        // Involves populating data into the item through holder
        @Override
        public void onBindViewHolder(SimpleItemViewHolder viewHolder, int position) {

            viewHolder.image.setImageResource(items.get(position).getImageRes());
            viewHolder.image.setTag(position);
            viewHolder.title.setText(items.get(position).getTitle());
            viewHolder.subTitle.setText(items.get(position).getSubTitle());
            viewHolder.cardView.setCardBackgroundColor(items.get(position).getBackGroundColor());

        }
    }

看看这些代码：

// Replace the contents of a view (invoked by the layout manager)
        // Involves populating data into the item through holder
        @Override
        public void onBindViewHolder(SimpleItemViewHolder viewHolder, int position) {

            viewHolder.image.setImageResource(items.get(position).getImageRes());
            viewHolder.image.setTag(position);
            viewHolder.title.setText(items.get(position).getTitle());
            viewHolder.subTitle.setText(items.get(position).getSubTitle());
            viewHolder.cardView.setCardBackgroundColor(items.get(position).getBackGroundColor());

        }

这是一个很好的例子，用动画来做这个：

https://github.com/tarek360/Material-Animation-Samples/tree/master/app/src/main/java/com/tarek360/animationsamples

正是我们所需要的 ;)

为彼此实现具有相同设计的 RecyclerView 和 CardView 项目

Implementing an RecycleView or CardView items with the same design for eachother

android

android-adapter

material-design

android-cardview

android-recyclerview