如何进行如附图所示的设计?

时间:2017-11-15 07:12:50

标签: android gridview android-recyclerview

enter image description here

我想设计一个这样的屏幕。为了显示网格项,我使用循环视图。但我关心的是如何在用户滑动时应用分页并为下一部分项目实施幻灯片。

如果无法滑动,至少单击布局下方的点。

3 个答案:

答案 0 :(得分:3)

您应该将 GridLayoutManager RecyclerView

一起使用
  

GridLayoutManager RecyclerView.LayoutManager个实现,用于列出grid中的项目。

     

只需将GridLayoutManager设置为recyclerView.setLayoutManager

即可
private RecyclerView mRecyclerView;
mRecyclerView = (RecyclerView) findViewById(R.id.collection_recyclerview);
GridLayoutManager  gridLayoutManager = new GridLayoutManager(YourActivity.this, 2);
//                                                           --Context--,--No of Columns--


mRecyclerView.setLayoutManager(gridLayoutManager);

GridLayoutManager with RecyclerView

的教程演示

答案 1 :(得分:1)

在布局下创建一个新的XML布局,并将其命名为grid_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<GridView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/grid_view"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:numColumns="auto_fit"
    android:columnWidth="90dp"
    android:horizontalSpacing="10dp"
    android:verticalSpacing="10dp"
    android:gravity="center"
    android:stretchMode="columnWidth" >  

</GridView>

通过右键单击(右键单击)src⇒包文件夹来创建一个新类⇒新建⇒类并将您的类命名为ImageAdapter.java从BaseAdapter扩展您的ImageAdapter.java类并使用以下代码填充它。

ImageAdapter.java

package com.example.dilip;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

public class ImageAdapter extends BaseAdapter {
    private Context mContext;

    // Keep all Images in array
    public Integer[] mThumbIds = {
            R.drawable.pic_1, R.drawable.pic_2,
            R.drawable.pic_3, R.drawable.pic_4,
            R.drawable.pic_5, R.drawable.pic_6,
            R.drawable.pic_7, R.drawable.pic_8,
            R.drawable.pic_9, R.drawable.pic_10,
            R.drawable.pic_11, R.drawable.pic_12,
            R.drawable.pic_13, R.drawable.pic_14,
            R.drawable.pic_15
    };

    // Constructor
    public ImageAdapter(Context c){
        mContext = c;
    }

    @Override
    public int getCount() {
        return mThumbIds.length;
    }

    @Override
    public Object getItem(int position) {
        return mThumbIds[position];
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ImageView imageView = new ImageView(mContext);
        imageView.setImageResource(mThumbIds[position]);
        imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        imageView.setLayoutParams(new GridView.LayoutParams(70, 70));
        return imageView;
    }

}

打开您的主要活动课程,如下所示。

AndroidGridLayoutActivity.java

    package com.example.dilip;

    import android.app.Activity;
    import android.content.Intent;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.AdapterView.OnItemClickListener;
    import android.widget.GridView;

    public class AndroidGridLayoutActivity extends Activity {

        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.grid_layout);

            GridView gridView = (GridView) findViewById(R.id.grid_view);

            // Instance of ImageAdapter Class
            gridView.setAdapter(new ImageAdapter(this));
        }
    }

答案 2 :(得分:1)

第一步 - 使用ViewPager

第二步 - 内部片段您可以将RecyclerView与GridLayout一起使用

第三 - 最后你可以使用CirlcePageIndicator

您正在查找的内容实际上是您可以在此区块中找到GridView with Viewpager

您也可以使用 RecyclerView 代替 GridView