UI界面设计和HorizontalScrollView与GridView配合

先看效果图：

主要就是HorizontalScrollView与GridView配合，其余就是UI界面设计（该项目只在320x480下测试）

代码里都有注释，不多说了

首先写一个GridView，给他数据。

/****SubTitleGridView.java*****/

protected GridView gvSubTitle;
    protected SimpleAdapter saSubTitle;// 适配器
    protected ArrayList<HashMap<String, String>> srcSubTitle;// 数据源

public SubTitleGridView(Context context,int itemWidth,ArrayList<HashMap<String, String>> data) {
        super(context);
        this.setOrientation(VERTICAL);

        gvSubTitle = new GridView(context);
        gvSubTitle.setColumnWidth(itemWidth);// 设置每个分页按钮的宽度
        gvSubTitle.setNumColumns(GridView.AUTO_FIT);// 分页按钮数量自动设置
        addView(gvSubTitle, new LayoutParams(LayoutParams.FILL_PARENT,
                LayoutParams.WRAP_CONTENT));
        srcSubTitle = data;
        
        saSubTitle = new SimpleAdapter(context, data,// 数据来源
                R.layout.gv_subtitle_item,// XML实现
                new String[] { "ItemText" },// 动态数组与ImageItem对应的子项
                new int[] { R.id.ItemText });

        gvSubTitle.setAdapter(saSubTitle);

        gvSubTitle.setOnItemClickListener(new OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,
                    long arg3) {
                gvSubTitle.setSelection(arg2);
                if (switchListener != null) {// 标题切换时
                    
                    switchListener.onSubTitleSwitchListener(arg2, srcSubTitle
                            .size());
                }
            }

        });
    }

接着给这个gridview抛出一个接口，以便给外部操作调用

protected OnSubTitleSwitchListener switchListener;// 标题切换时的回调函数
    // ---------------------------------------------------------
    /**
     * 标题栏被点击时的回调函数
     */
    public void setOnSubTitleSwitchListener(OnSubTitleSwitchListener listen) {
        this.switchListener = listen;
    }

    public interface OnSubTitleSwitchListener {
        public void onSubTitleSwitchListener(int pageID, int pageCount);
    }

/****Gridview.java*****/

private final int per = 4;// 每行显示的个数
    private GridView gridView;
    private ImageButton webnav_left;
    private ImageButton webnav_right;
    ArrayList<HashMap<String, String>> data;
    HorizontalScrollView horizontalview;

//计算屏幕，然后给gridview里面的Columns宽带定长
        DisplayMetrics dm = new DisplayMetrics();
        dm = getApplicationContext().getResources().getDisplayMetrics();
        int menuWidth = dm.widthPixels - 16;
        menuWidth = menuWidth - 120;

        int itemWidth = menuWidth / per;

        data = new ArrayList<HashMap<String, String>>();
        HashMap<String, String> map;
        for (int i = 0; i < 10; i++) {
            map = new HashMap<String, String>();
            map.put("ItemText", "GG" + i);
            data.add(map);
        }

//这里就是gridview抛出的接口，可根据点击的不同从而显示不同的view界面
        SubTitleGridView subtitle = new SubTitleGridView(this, itemWidth, data);
        subtitle.setOnSubTitleSwitchListener(new OnSubTitleSwitchListener() {

            @Override
            public void onSubTitleSwitchListener(int pageID, int pageCount) {
                String str = "共有" + String.valueOf(pageCount) + " 当前第"
                        + String.valueOf(pageID) + "页" + "  内容:"
                        + data.get(pageID).get("ItemText").toString();
                Toast.makeText(Gridview.this, str, 1000).show();

            }
        });

这里是两边的按钮操作HorizontalScrollView左右滑动效果

horizontalview = (HorizontalScrollView) findViewById(R.id.horizontalview);
        
        webnav_left = (ImageButton) findViewById(R.id.webnav_left);
        webnav_left.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                System.out.println("filing");
                horizontalview.fling(-500);
            }
        });
        webnav_right = (ImageButton) findViewById(R.id.webnav_right);
        webnav_right.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                horizontalview.fling(500);
            }
        });

好！介绍到这里。^-^

项目代码

https://files.cnblogs.com/not-code/seaHorizontalScrollView.rar

本文为原创，如需转载，请注明作者和出处，谢谢！