水平回收视图与水平滚动

时间:2017-05-27 00:06:49

标签: android android-layout android-recyclerview

我正在学习android,我似乎无法找到一种方法来做到这一点: enter imdescription here

我想做左侧滚动的权利我想是一个recylcer视图,但不确定它是否是这个。我只需要有人指出我正确的方向。 我想我需要一个Recyclerview的内部布局。

如果有人能指出我在哪里弄清楚这一点我会非常感激!

3 个答案:

答案 0 :(得分:11)

步骤:1

创建两个模型类,如下所示。

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. 创建另一个模型类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;
    }
    
    
    }
    
  2. 3。步骤:2

    使用RecyclerView创建一个活动,以垂直顺序显示列表。

    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);
    
            }
        }
    }
    
    • 为上述活动类
    • 创建XML布局

    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>
    

    步骤:3

    现在为MainActivity中的recyclerView创建一个Adapter Class。

    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);
    
    
            }
    
        }
    
    }
    
    • 现在为上述适配器类创建一个xml布局文件。

    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>
    

    步骤:4

    现在,为了制作水平的RecyclerView,我们需要为每一行创建一个布局和Adapter类。

    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>
    
    • 最后,适用于Horizo​​ntal 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();
    
                    }
                });
    
    
            }
    
        }
    
    }
    

答案 1 :(得分:4)

  

你可以使用recyclerview

实现这种布局

使用RecyclerView时,需要指定一个LayoutManager,负责布置视图中的每个项目。 LinearLayoutManager允许您指定方向,就像普通的LinearLayout一样。

要使用RecyclerView创建水平列表,您可以执行以下操作:

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

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

希望这有助于你...如果你需要任何帮助,你可以问

答案 2 :(得分:2)

以下是Horizo​​ntal Recyclerview的快速教程

XML文件

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

Java代码

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