how to create Horizontal scroll-able CardView

问题:

Hi I am try to create a page as below,

I have a drawer layout and in the home screen I want to display notifications as in the screen shot. I am trying to do it by CardView but I didn't got any tutorial explaining how I can achieve this in CardView. I got tutorials for Cardview in the listView but not for my requirement. Can anybody tell me how I can achieve this?. What all the possible options I have for this in android?

回答1:

Search for RecyclerView in android, and Cardview. The below example is just a purpose to show how to create like the pic you added. To add n numbers of CardView read "How to use RecyclerView in android".

        <HorizontalScrollView
        android:layout_width="your_size"
        android:layout_height="your_size"
        android:id="@+id/horizontalScrollView"
        android:layout_below="@+id/your_id"
        android:scrollbars="none">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:padding="2dp">

            <android.support.v7.widget.CardView
                android:layout_width="250dp"
                android:layout_height="match_parent"
                android:layout_marginStart="2dp"
                android:padding="2dp"
                android:id="@+id/cardThree"
                android:layout_toEndOf="@+id/cardTwo"
                android:background="@color/card_color">

                //your view here like a Layout including textView.

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="250dp"
                android:layout_height="match_parent"
                android:padding="2dp"
                android:id="@+id/cardOne"
                android:background="@color/card_color">

                <//your view here like a Layout including textView.

            </android.support.v7.widget.CardView>

            <android.support.v7.widget.CardView
                android:layout_width="250dp"
                android:layout_height="match_parent"
                android:layout_marginStart="2dp"
                android:padding="2dp"
                android:id="@+id/cardTwo"
                android:layout_toEndOf="@+id/cardOne"
                android:background="@color/card_color">

                //your view here like a Layout including textView.

            </android.support.v7.widget.CardView>
        </RelativeLayout>
    </HorizontalScrollView>

回答2:

custom_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="120dp">

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="match_parent">


</android.support.v7.widget.CardView>

<ImageView
    android:id="@+id/imageView"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true"
    android:contentDescription="@string/imageview"
    android:src="@android:drawable/ic_menu_add" />

<ImageView
    android:id="@+id/imageView2"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:layout_toEndOf="@+id/imageView"
    android:layout_toRightOf="@+id/imageView"
    android:contentDescription="@string/imageview2"
    android:src="@android:drawable/ic_delete" />

<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignLeft="@+id/imageView2"
    android:layout_alignStart="@+id/imageView2"
    android:layout_below="@+id/imageView2" />


<TextView
    android:id="@+id/textview2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true"
    android:layout_below="@+id/textview"
    android:layout_margin="16dp"
    android:gravity="center" />

activity_recycler_main.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:orientation="vertical"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin">

<android.support.v7.widget.RecyclerView
    android:id="@+id/rv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Information_Object.java

public class InformationObject {
private String post, time;

public String getTime() {
    return time;
}

public void setTime(String time) {
    this.time = time;
}

public String getPost() {
    return post;
}

public void setPost(String post) {
    this.post = post;
}

}

RecyclerAdapter.java

public class RecyclerAdapter extends RecyclerView.Adapter<RecyclerAdapter.MyRecyclerHolder> {
private LayoutInflater inflater;
private List<InformationObject> list;

RecyclerAdapter(Context context, List<InformationObject> list) {
    inflater=LayoutInflater.from(context);
    this.list = list;
}

@Override
public MyRecyclerHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    return new MyRecyclerHolder(inflater.inflate(R.layout.custom_layout, parent, false));
}

@Override
public void onBindViewHolder(MyRecyclerHolder holder, int position) {
    holder.time.setText(list.get(position).getTime());
    holder.post.setText(list.get(position).getPost());
}

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

public class MyRecyclerHolder extends RecyclerView.ViewHolder {
    private ImageView imageview, imageview2;
    private TextView post, time;

    public MyRecyclerHolder(View itemView) {
        super(itemView);
        post = (TextView) itemView.findViewById(R.id.textview);
        time = (TextView) itemView.findViewById(R.id.textview2);
        imageview = (ImageView) itemView.findViewById(R.id.imageView);
        imageview2 = (ImageView) itemView.findViewById(R.id.imageView2);
    }
}

}

MainActivity.java

public class RecyclerMain extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_recycler_main);
    RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rv);
    RecyclerAdapter recyclerAdapter = new RecyclerAdapter(this, getData());
    recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false));
    recyclerView.setAdapter(recyclerAdapter);
}

private List<InformationObject> getData() {
    //add information each of cardview
    //load imageView by picasso
    return null;
}

}

回答3:

studviewseat = findViewById(R.id.seats);
    studviewseat.setNestedScrollingEnabled(true);

        GridLayoutManager layoutManager = new GridLayoutManager(this,10
                ,GridLayoutManager.HORIZONTAL, false);
        studviewseat.setLayoutManager(layoutManager);
    int spanCount = 10;
    int spacing = 50;
    boolean includeEdge = true;
        studviewseat.addItemDecoration(new Gridspcae(spanCount, spacing, includeEdge));
        studviewseat.setItemAnimator(new DefaultItemAnimator());
        list = new ArrayList<>();

    if(studviewseat.getResources().getConfiguration().orientation == Configuration.ORIENTATION_PORTRAIT){
        studviewseat.setLayoutManager(new GridLayoutManager(this, 3));
    }
    else if (studviewseat.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE){
        studviewseat.setLayoutManager(new GridLayoutManager(this, 5));
    }