wake-up-neo.com

Wie erstelle ich eine horizontale ListView mit RecyclerView?

Ich muss eine horizontale Listenansicht in meiner Android-Anwendung implementieren. Ich habe ein wenig recherchiert und bin auf/gestoßen Wie kann ich eine horizontale ListView in Android erstellen? und Horizontale ListView in Android? Diese Fragen wurden jedoch vor der Veröffentlichung von Recyclerview gestellt. Gibt es eine bessere Möglichkeit, dies jetzt mit Recyclerview zu implementieren?

androidandroid-layoutandroid-recyclerview
264
Andre Perkins

Gibt es eine bessere Möglichkeit, dies jetzt mit Recyclerview zu implementieren?

Ja.

Wenn Sie eine RecyclerView verwenden, müssen Sie eine LayoutManager angeben, die für die Anordnung der einzelnen Elemente in der Ansicht verantwortlich ist. Mit der LinearLayoutManager können Sie eine Ausrichtung angeben, genau wie eine normale LinearLayout.

Um eine horizontale Liste mit RecyclerView zu erstellen, können Sie Folgendes tun:

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

RecyclerView myList = (RecyclerView) findViewById(R.id.my_recycler_view);
myList.setLayoutManager(layoutManager);
595
Tanis.7x
 <Android.support.v7.widget.RecyclerView
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:orientation="horizontal"
        app:layoutManager="Android.support.v7.widget.LinearLayoutManager" />
134
boiledwater

Vollständiges Beispiel

enter image description here

Der einzige wirkliche Unterschied zwischen einer vertikalen RecyclerView und einer horizontalen ist, wie Sie die LinearLayoutManager einrichten. Hier ist das Code-Snippet. Das vollständige Beispiel ist unten.

LinearLayoutManager horizontalLayoutManagaer = new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false);
recyclerView.setLayoutManager(horizontalLayoutManagaer);

Dieses ausführlichere Beispiel ist nach meine vertikale RecyclerView Antwort modelliert.

Aktualisieren Sie Gradle-Abhängigkeiten

Stellen Sie sicher, dass die folgenden Abhängigkeiten in Ihrer App gradle.build-Datei enthalten sind:

implementation 'com.Android.support:appcompat-v7:27.1.1'
implementation 'com.Android.support:recyclerview-v7:27.1.1'

Sie können die Versionsnummern auf das aktuellste aktualisieren.

Aktivitätslayout erstellen

Fügen Sie die RecyclerView zu Ihrem XML-Layout hinzu.

activity_main.xml

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

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

</RelativeLayout>

Artikellayout erstellen

Jedes Element in unserer RecyclerView wird eine einzelne, farbige View über einer TextView haben. Erstellen Sie eine neue Layoutressourcendatei.

recyclerview_item.xml

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

    <View
        Android:id="@+id/colorView"
        Android:layout_width="100dp"
        Android:layout_height="100dp"/>

    <TextView
        Android:id="@+id/tvAnimalName"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:textSize="20sp"/>

</LinearLayout>

Erstellen Sie den Adapter

Die Variable RecyclerView benötigt einen Adapter, um die Ansichten in jeder Zeile (horizontales Element) mit Ihren Daten zu füllen. Erstellen Sie eine neue Java-Datei.

MyRecyclerViewAdapter.Java

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

    private List<Integer> mViewColors;
    private List<String> mAnimals;
    private LayoutInflater mInflater;
    private ItemClickListener mClickListener;

    // data is passed into the constructor
    MyRecyclerViewAdapter(Context context, List<Integer> colors, List<String> animals) {
        this.mInflater = LayoutInflater.from(context);
        this.mViewColors = colors;
        this.mAnimals = animals;
    }

    // inflates the row layout from xml when needed
    @Override
    @NonNull
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View view = mInflater.inflate(R.layout.recyclerview_item, parent, false);
        return new ViewHolder(view);
    }

    // binds the data to the view and textview in each row
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        int color = mViewColors.get(position);
        String animal = mAnimals.get(position);
        holder.myView.setBackgroundColor(color);
        holder.myTextView.setText(animal);
    }

    // total number of rows
    @Override
    public int getItemCount() {
        return mAnimals.size();
    }

    // stores and recycles views as they are scrolled off screen
    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        View myView;
        TextView myTextView;

        ViewHolder(View itemView) {
            super(itemView);
            myView = itemView.findViewById(R.id.colorView);
            myTextView = itemView.findViewById(R.id.tvAnimalName);
            itemView.setOnClickListener(this);
        }

        @Override
        public void onClick(View view) {
            if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition());
        }
    }

    // convenience method for getting data at click position
    public String getItem(int id) {
        return mAnimals.get(id);
    }

    // allows clicks events to be caught
    public void setClickListener(ItemClickListener itemClickListener) {
        this.mClickListener = itemClickListener;
    }

    // parent activity will implement this method to respond to click events
    public interface ItemClickListener {
        void onItemClick(View view, int position);
    }
}

Anmerkungen

  • Obwohl dies nicht unbedingt erforderlich ist, habe ich die Funktionalität zum Abhören von Klickereignissen für die Elemente hinzugefügt. Dies war in der alten ListViews verfügbar und wird häufig benötigt. Sie können diesen Code entfernen, wenn Sie ihn nicht benötigen.

Initialisieren Sie RecyclerView in Activity

Fügen Sie Ihrer Hauptaktivität den folgenden Code hinzu.

MainActivity.Java

public class MainActivity extends AppCompatActivity implements MyRecyclerViewAdapter.ItemClickListener {

    private MyRecyclerViewAdapter adapter;

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

        // data to populate the RecyclerView with
        ArrayList<Integer> viewColors = new ArrayList<>();
        viewColors.add(Color.BLUE);
        viewColors.add(Color.YELLOW);
        viewColors.add(Color.Magenta);
        viewColors.add(Color.RED);
        viewColors.add(Color.BLACK);

        ArrayList<String> animalNames = new ArrayList<>();
        animalNames.add("Horse");
        animalNames.add("Cow");
        animalNames.add("Camel");
        animalNames.add("Sheep");
        animalNames.add("Goat");

        // set up the RecyclerView
        RecyclerView recyclerView = findViewById(R.id.rvAnimals);
        LinearLayoutManager horizontalLayoutManager
                = new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false);
        recyclerView.setLayoutManager(horizontalLayoutManager);
        adapter = new MyRecyclerViewAdapter(this, viewColors, animalNames);
        adapter.setClickListener(this);
        recyclerView.setAdapter(adapter);
    }

    @Override
    public void onItemClick(View view, int position) {
        Toast.makeText(this, "You clicked " + adapter.getItem(position) + " on item position " + position, Toast.LENGTH_SHORT).show();
    }
}

Anmerkungen

  • Beachten Sie, dass die Aktivität die ItemClickListener implementiert, die wir in unserem Adapter definiert haben. Dies ermöglicht uns, Elementklickereignisse in onItemClick zu behandeln.

Fertig

Das ist es. Sie sollten jetzt in der Lage sein, Ihr Projekt auszuführen und etwas Ähnliches wie das Bild oben zu erhalten.

Anmerkungen

55
Suragch

Wenn Sie eine RecyclerView mit der GridLayoutManager verwenden möchten, erzielen Sie auf diese Weise einen horizontalen Bildlauf. 

recyclerView.setLayoutManager(
new GridLayoutManager(recyclerView.getContext(), rows, GridLayoutManager.HORIZONTAL, false));
11
José Cabrera

Der Versuch, eine horizontale ListView zu erstellen, dauert zu lange. Ich habe es auf zwei Arten gelöst.

1.Verwenden Sie einen ViewPager, dessen Adapter sich von PagerAdapter erstreckt. 

2.Verwenden Sie RecyclerView genauso wie oben. Sie müssen LayoutManager wie im folgenden Code anwenden:

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

RecyclerView myList = (RecyclerView) findViewById(R.id.my_recycler_view);
myList.setLayoutManager(layoutManager);
9
Jayman Jani

Wenn Sie die horizontale Ansicht des Recyclers als ViewPager verwenden möchten, ist dies jetzt mit Hilfe von LinearSnapHelper möglich, das in der Support Library Version 24.2.0 hinzugefügt wird.

Zuerst füge RecyclerView deiner Aktivität/Fragment hinzu 

<Android.support.v7.widget.RecyclerView
        Android:layout_below="@+id/sign_in_button"
        Android:layout_width="match_parent"
        Android:orientation="horizontal"
        Android:id="@+id/blog_list"
        Android:layout_height="match_parent">
    </Android.support.v7.widget.RecyclerView>

In meinem Fall habe ich eine CardView innerhalb der RecyclerView verwendet.

blog_row.xml 

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.CardView 

    xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        xmlns:app="http://schemas.Android.com/apk/res-auto"
        Android:layout_margin="15dp"
        Android:orientation="vertical">

        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:gravity="center"
            Android:orientation="vertical">

            <com.Android.volley.toolbox.NetworkImageView
                Android:id="@+id/imageBlogPost"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:adjustViewBounds="true"
                Android:paddingBottom="15dp"
                Android:src="@drawable/common_google_signin_btn_text_light_normal" />

            <TextView
                Android:id="@+id/TitleTextView"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
               Android:layout_marginBottom="20dp"

                Android:text="Post Title Here"
                Android:textSize="16sp" />

            <TextView
                Android:id="@+id/descriptionTextView"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:text="Post Description Here"
                Android:paddingBottom="15dp"
                Android:textSize="14sp" />
        </LinearLayout>

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

In deiner Aktivität/Fragment 

    private RecyclerView mBlogList;




 LinearLayoutManager layoutManager
                    = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
            mBlogList = (RecyclerView) findViewById(R.id.blog_list);

            mBlogList.setHasFixedSize(true);
            mBlogList.setLayoutManager(layoutManager);

LinearSnapHelper snapHelper = new LinearSnapHelper() {
            @Override
            public int findTargetSnapPosition(RecyclerView.LayoutManager lm, int velocityX, int velocityY) {
                View centerView = findSnapView(lm);
                if (centerView == null)
                    return RecyclerView.NO_POSITION;

                int position = lm.getPosition(centerView);
                int targetPosition = -1;
                if (lm.canScrollHorizontally()) {
                    if (velocityX < 0) {
                        targetPosition = position - 1;
                    } else {
                        targetPosition = position + 1;
                    }
                }

                if (lm.canScrollVertically()) {
                    if (velocityY < 0) {
                        targetPosition = position - 1;
                    } else {
                        targetPosition = position + 1;
                    }
                }

                final int firstItem = 0;
                final int lastItem = lm.getItemCount() - 1;
                targetPosition = Math.min(lastItem, Math.max(targetPosition, firstItem));
                return targetPosition;
            }
        };
        snapHelper.attachToRecyclerView(mBlogList);

Letzter Schritt besteht darin, den Adapter auf RecyclerView einzustellen 

mBlogList.setAdapter(firebaseRecyclerAdapter);
6
AndroidBeginner

Mit der Veröffentlichung der RecyclerView-Bibliothek können Sie nun eine Liste von Bildern einfach an Text ausrichten. Sie können den LinearLayoutManager verwenden, um die Richtung festzulegen, in die Sie Ihre Liste vertikal oder horizontal ausrichten möchten (siehe unten). 

 enter image description here

Sie können eine vollständige Arbeitsdemo von diesem Beitrag herunterladen

4
Daniel Nyamasyo

Es gibt eine RecyclerView-Unterklasse mit dem Namen HorizontalGridView , die Sie verwenden können, um die horizontale Richtung zu haben . VerticalGridView für die vertikale Richtung

1
Andrew Luca

Recycler-Ansicht in horizontaler Dynamik.

Implementierung von Recycler View

RecyclerView musicList = findViewById(R.id.MusicList);

// RecyclerView musiclist = findViewById(R.id.MusicList1);
// RecyclerView musicLIST = findViewById(R.id.MusicList2);
LinearLayoutManager layoutManager = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false);
musicList.setLayoutManager(layoutManager);

String[] names = {"RAP", "CH SHB", "Faheem", "Anum", "Shoaib", "Laiba", "Zoki", "Komal", "Sultan","Mansoob Gull"};
musicList.setAdapter(new ProgrammingAdapter(names));'

Adapterklasse für die Recycler-Ansicht, in der sich ein Ansichtshalter befindet, der die Ansicht dieses Recyclers enthält

public class ProgrammingAdapter 
     extendsRecyclerView.Adapter<ProgrammingAdapter.programmingViewHolder> {

private String[] data;

public ProgrammingAdapter(String[] data)
{
    this.data = data;
}

@Override
public programmingViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
    LayoutInflater inflater = LayoutInflater.from(parent.getContext());
    View view = inflater.inflate(R.layout.list_item_layout, parent, false);

    return new programmingViewHolder(view);
}

@Override
public void onBindViewHolder(@NonNull programmingViewHolder holder, int position) {
    String title = data[position];
    holder.textV.setText(title);
}

@Override
public int getItemCount() {
    return data.length;
}

public class programmingViewHolder extends RecyclerView.ViewHolder{
    ImageView img;
    TextView textV;
    public programmingViewHolder(View itemView) {
        super(itemView);
        img =  itemView.findViewById(R.id.img);
        textV =  itemView.findViewById(R.id.textt);
    }
}
0
Faheem Khan

Es ist sowohl für Horizontal als auch für Vertikal.

RecyclerView recyclerView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_recycler);
    recyclerView = (RecyclerView)findViewById(R.id.recyclerViewId);

    RecyclAdapter adapter = new RecyclAdapter();

    //Vertical RecyclerView
    RecyclerView.LayoutManager mLayoutManager = new LinearLayoutManager(getApplicationContext());
    recyclerView.setLayoutManager(mLayoutManager);

    //Horizontal RecyclerView
    //recyclerView.setLayoutManager(new LinearLayoutManager(getApplicationContext(),LinearLayoutManager.HORIZONTAL,false));

    recyclerView.setAdapter(adapter);

}
0
akbar khan

Versuche dies:

myrecyclerview.setLayoutManager(
        new LinearLayoutManager(getActivity(),
                                LinearLayoutManager.HORIZONTAL,false));
myrecyclerview.setAdapter(recyclerAdapter);

nur für den Fall, dass Sie eine Recycling-Ansicht mit einigen Fragmenten erhalten haben. 

0
John Vergara
    <HorizontalScrollView
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    >
<Android.support.v7.widget.RecyclerView
    Android:id="@+id/recycler_view"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="horizontal"
    Android:scrollbars="vertical|horizontal" />
</HorizontalScrollView>
0
Syed Danish Haider