web-dev-qa-db-fra.com

vue du recycleur horizontal avec défilement horizontal

Im learning Android et je n'arrive pas à trouver un moyen de le faire: enter imdescription here

Je voudrais faire le défilement de droite à gauche avec ce que je suppose être une vue de recylcer, mais je ne sais pas si c'est cela. J'ai juste besoin que quelqu'un me pointe dans la bonne direction. Je suppose que j'aurais besoin d'un aménagement intérieur pour le recyclage.

Si quelqu'un pouvait m'indiquer où trouver cela, je serais tellement reconnaissant!

androidandroid-layoutandroid-recyclerview
7
Juanfri Lira

Étape 1

Créez deux classes de modèle comme ci-dessous.

package-name-here;


public class SingleItemModel {


    private String name;
    private String url;
    private String description;


    public SingleItemModel() {
    }

    public SingleItemModel(String name, String url) {
        this.name = name;
        this.url = url;
    }


    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }


}

  1. Créez l'autre classe de modèle SectionDataModel.Java

    package-name-here;;

import Java.util.ArrayList;


public class SectionDataModel {



private String headerTitle;
private ArrayList<SingleItemModel> allItemsInSection;


public SectionDataModel() {

}
public SectionDataModel(String headerTitle, ArrayList<SingleItemModel> allItemsInSection) {
    this.headerTitle = headerTitle;
    this.allItemsInSection = allItemsInSection;
}



public String getHeaderTitle() {
    return headerTitle;
}

public void setHeaderTitle(String headerTitle) {
    this.headerTitle = headerTitle;
}

public ArrayList<SingleItemModel> getAllItemsInSection() {
    return allItemsInSection;
}

public void setAllItemsInSection(ArrayList<SingleItemModel> allItemsInSection) {
    this.allItemsInSection = allItemsInSection;
}


}

3. Étape: 2

Créez une activité avec RecyclerView pour afficher la liste en ordre vertical.

package-name-here;

import Android.os.Bundle;
import Android.support.v7.app.AppCompatActivity;
import Android.support.v7.widget.LinearLayoutManager;
import Android.support.v7.widget.RecyclerView;
import Android.support.v7.widget.Toolbar;

import com.pratap.gplaystore.adapters.RecyclerViewDataAdapter;
import com.pratap.gplaystore.models.SectionDataModel;
import com.pratap.gplaystore.models.SingleItemModel;

import Java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;


    ArrayList<SectionDataModel> allSampleData;


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

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

        allSampleData = new ArrayList<SectionDataModel>();

        if (toolbar != null) {
            setSupportActionBar(toolbar);
            toolbar.setTitle("G PlayStore");

        }


        createDummyData();


        RecyclerView my_recycler_view = (RecyclerView) findViewById(R.id.my_recycler_view);

        my_recycler_view.setHasFixedSize(true);

        RecyclerViewDataAdapter adapter = new RecyclerViewDataAdapter(this, allSampleData);

        my_recycler_view.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));

        my_recycler_view.setAdapter(adapter);


    }

    public void createDummyData() {
        for (int i = 1; i <= 5; i++) {

            SectionDataModel dm = new SectionDataModel();

            dm.setHeaderTitle("Section " + i);

            ArrayList<SingleItemModel> singleItem = new ArrayList<SingleItemModel>();
            for (int j = 0; j <= 5; j++) {
                singleItem.add(new SingleItemModel("Item " + j, "URL " + j));
            }

            dm.setAllItemsInSection(singleItem);

            allSampleData.add(dm);

        }
    }
}
  • Créer une disposition XML pour la classe d'activités ci-dessus

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        Android:background="?attr/colorPrimary"
        Android:elevation="8dp"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


    <Android.support.v7.widget.RecyclerView
        Android:id="@+id/my_recycler_view"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:scrollbars="none" />


</LinearLayout>

Étape 3

Créez maintenant une classe d'adaptateur pour recyclerView dans MainActivity.

RecyclerViewDataAdapter.Java

package-name-here.adapters;


import Android.content.Context;
import Android.support.v7.widget.LinearLayoutManager;
import Android.support.v7.widget.RecyclerView;
import Android.view.LayoutInflater;
import Android.view.View;
import Android.view.ViewGroup;
import Android.widget.Button;
import Android.widget.TextView;
import Android.widget.Toast;

import com.pratap.gplaystore.R;
import com.pratap.gplaystore.models.SectionDataModel;

import Java.util.ArrayList;

public class RecyclerViewDataAdapter extends RecyclerView.Adapter<RecyclerViewDataAdapter.ItemRowHolder> {

    private ArrayList<SectionDataModel> dataList;
    private Context mContext;

    public RecyclerViewDataAdapter(Context context, ArrayList<SectionDataModel> dataList) {
        this.dataList = dataList;
        this.mContext = context;
    }

    @Override
    public ItemRowHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_item, null);
        ItemRowHolder mh = new ItemRowHolder(v);
        return mh;
    }

    @Override
    public void onBindViewHolder(ItemRowHolder itemRowHolder, int i) {

        final String sectionName = dataList.get(i).getHeaderTitle();

        ArrayList singleSectionItems = dataList.get(i).getAllItemsInSection();

        itemRowHolder.itemTitle.setText(sectionName);

        SectionListDataAdapter itemListDataAdapter = new SectionListDataAdapter(mContext, singleSectionItems);

        itemRowHolder.recycler_view_list.setHasFixedSize(true);
        itemRowHolder.recycler_view_list.setLayoutManager(new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false));
        itemRowHolder.recycler_view_list.setAdapter(itemListDataAdapter);


        itemRowHolder.btnMore.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {


                Toast.makeText(v.getContext(), "click event on more, "+sectionName , Toast.LENGTH_SHORT).show();



            }
        });


       /* Glide.with(mContext)
                .load(feedItem.getImageURL())
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .centerCrop()
                .error(R.drawable.bg)
                .into(feedListRowHolder.thumbView);*/
    }

    @Override
    public int getItemCount() {
        return (null != dataList ? dataList.size() : 0);
    }

    public class ItemRowHolder extends RecyclerView.ViewHolder {

        protected TextView itemTitle;

        protected RecyclerView recycler_view_list;

        protected Button btnMore;



        public ItemRowHolder(View view) {
            super(view);

            this.itemTitle = (TextView) view.findViewById(R.id.itemTitle);
            this.recycler_view_list = (RecyclerView) view.findViewById(R.id.recycler_view_list);
            this.btnMore= (Button) view.findViewById(R.id.btnMore);


        }

    }

}
  • Créez maintenant un fichier de mise en page XML pour la classe d'adaptateur ci-dessus.

list_item.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="wrap_content"

    Android:background="?android:selectableItemBackground"
    Android:orientation="vertical"
    Android:padding="5dp">

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:padding="2dp">


        <TextView
            Android:id="@+id/itemTitle"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"
            Android:layout_alignParentLeft="true"
            Android:layout_alignParentStart="true"
            Android:layout_centerVertical="true"
            Android:layout_gravity="center_vertical"
            Android:layout_toLeftOf="@+id/btnMore"
            Android:text="Sample title"
            Android:textColor="@Android:color/black"
            Android:textSize="18sp" />

        <Button
            Android:id="@+id/btnMore"
            Android:layout_width="wrap_content"
            Android:layout_height="42dp"
            Android:layout_alignParentEnd="true"
            Android:layout_alignParentRight="true"
            Android:layout_centerVertical="true"
            Android:theme="@style/MyButton"
            Android:text="more"
            Android:textColor="#FFF" />


    </RelativeLayout>

    <Android.support.v7.widget.RecyclerView
        Android:id="@+id/recycler_view_list"
        Android:layout_width="match_parent"
        Android:layout_height="160dp"
        Android:layout_gravity="center_vertical"
        Android:orientation="horizontal" />


</LinearLayout>

Étape 4

Maintenant, pour créer une RecyclerView horizontale, nous devons créer une disposition et une classe d'adaptateur pour chaque ligne.

list_single_card.xml

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.CardView xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="horizontal"
    app:cardCornerRadius="5dp"
    app:cardUseCompatPadding="true"
    >

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:padding="0dp"
        Android:background="?android:selectableItemBackground"
        Android:orientation="vertical">

        <ImageView
            Android:id="@+id/itemImage"
            Android:layout_width="100dp"
            Android:layout_height="100dp"
            Android:layout_gravity="center_horizontal"
            Android:scaleType="fitCenter"
            Android:src="@drawable/Android" />


        <TextView
            Android:id="@+id/tvTitle"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_below="@id/itemImage"
            Android:gravity="center"
            Android:padding="5dp"
            Android:text="Sample title"
            Android:textColor="@Android:color/black"
            Android:textSize="18sp" />


    </LinearLayout>

</Android.support.v7.widget.CardView>
  • Enfin, la classe d'adaptateurs pour Horizontal RecyclerView

SectionListDataAdapter.Java

package-name-here.adapters;


import Android.content.Context;
import Android.support.v7.widget.RecyclerView;
import Android.view.LayoutInflater;
import Android.view.View;
import Android.view.ViewGroup;
import Android.widget.ImageView;
import Android.widget.TextView;
import Android.widget.Toast;

import com.pratap.gplaystore.R;
import com.pratap.gplaystore.models.SingleItemModel;

import Java.util.ArrayList;

public class SectionListDataAdapter extends RecyclerView.Adapter<SectionListDataAdapter.SingleItemRowHolder> {

    private ArrayList<SingleItemModel> itemsList;
    private Context mContext;

    public SectionListDataAdapter(Context context, ArrayList<SingleItemModel> itemsList) {
        this.itemsList = itemsList;
        this.mContext = context;
    }

    @Override
    public SingleItemRowHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
        View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.list_single_card, null);
        SingleItemRowHolder mh = new SingleItemRowHolder(v);
        return mh;
    }

    @Override
    public void onBindViewHolder(SingleItemRowHolder holder, int i) {

        SingleItemModel singleItem = itemsList.get(i);

        holder.tvTitle.setText(singleItem.getName());


       /* Glide.with(mContext)
                .load(feedItem.getImageURL())
                .diskCacheStrategy(DiskCacheStrategy.ALL)
                .centerCrop()
                .error(R.drawable.bg)
                .into(feedListRowHolder.thumbView);*/
    }

    @Override
    public int getItemCount() {
        return (null != itemsList ? itemsList.size() : 0);
    }

    public class SingleItemRowHolder extends RecyclerView.ViewHolder {

        protected TextView tvTitle;

        protected ImageView itemImage;


        public SingleItemRowHolder(View view) {
            super(view);

            this.tvTitle = (TextView) view.findViewById(R.id.tvTitle);
            this.itemImage = (ImageView) view.findViewById(R.id.itemImage);


            view.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {


                    Toast.makeText(v.getContext(), tvTitle.getText(), Toast.LENGTH_SHORT).show();

                }
            });


        }

    }

}
13
Jasper Kinoti

Vous pouvez implémenter ce type de mise en page en utilisant recyclerview

Lorsque vous utilisez un RecyclerView, vous devez spécifier un LayoutManager responsable de la présentation de chaque élément de la vue. Le LinearLayoutManager vous permet de spécifier une orientation, tout comme le ferait un LinearLayout normal.

Pour créer une liste horizontale avec RecyclerView, vous pouvez faire quelque chose comme ceci:

LinearLayoutManager linearLayoutManager
    = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);

RecyclerView recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
recyclerView.setLayoutManager(linearLayoutManager);

J'espère que cette aide vous ... si vous avez besoin d'aide, vous pouvez demander

6
Lokesh Desai

Voici un tutoriel rapide pour votre recyclage horizontal

fichier XML

 <Android.support.v7.widget.RecyclerView
                Android:id="@+id/recyclerView"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:scrollbars="horizontal"/>

Code Java

RecyclerView recyclerView= (RecyclerView) findViewById(R.id.recyclerView);
    LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
    recyclerView.setLayoutManager(layoutManager);
2
Amrish Kakadiya