Android横向滑动的GridView

GridView的使用在android中是比较频繁的，常规的GridView就是类似于表格形式的存在，说的可能不是特别的确切。而有些时候，我们会使用到单行的横向滑动的GridView的控件，今天就在这里介绍一下横向滑动的GridView的使用。

首先是横向GridView的布局文件：

<HorizontalScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/rela_jieduan"
    android:scrollbars="none">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="220dp">

        <GridView
            android:id="@+id/grid_jieduan"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:gravity="center">

        </GridView>
    </LinearLayout>
</HorizontalScrollView>

这种布局我查看了很多资料，GridView外部的linearlayout是必须的。至于原因，自己也没有研究透彻。然后就是gridview_item的xml文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="170dp"
    android:layout_height="220dp"
    android:background="#353535">

    <LinearLayout
        android:id="@+id/line_my_plan"
        android:layout_width="match_parent"
        android:layout_height="51dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/my_plan_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="10dp"
            android:textColor="#de6654"
            android:textSize="14sp" />

        <TextView
            android:id="@+id/my_plan_num"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginTop="3dp"
            android:textColor="#cccccc"
            android:textSize="12sp" />
    </LinearLayout>

    <ImageView
        android:id="@+id/img_my_plan"
        android:layout_width="wrap_content"
        android:layout_height="170dp"
        android:layout_below="@id/line_my_plan"
        android:layout_marginRight="17dp"
        android:layout_marginTop="5dp"
        android:background="@mipmap/my_plan1" />

</RelativeLayout>

item的布局就看自己的需求了，我只是给大家一个参考。根据自己的需求来进行布局的设定。这时候布局已经准备完毕了，那么我们就要开始重点部分了，就是对我们的item进行适配到gridView，实现我们的显示部分了。下面是adapter的代码：

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;
import java.util.List;

/**
 * Created by Administrator on 2016/8/10 0010.
 */
public class GridViewAdapter extends BaseAdapter {
    Context context;
    List<MyPlan> list;

    public GridViewAdapter(Context _context, List<MyPlan> _list) {
        this.list = _list;
        this.context = _context;
    }

    @Override
    public int getCount() {
        return list.size();
    }

    @Override
    public Object getItem(int position) {
        return list.get(position);
    }
    
    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        LayoutInflater layoutInflater = LayoutInflater.from(context);
        convertView = layoutInflater.inflate(R.layout.myplan_grid_item, null);
        TextView tvTitle = (TextView) convertView.findViewById(R.id.my_plan_title);
        TextView tvNum = (TextView) convertView.findViewById(R.id.my_plan_num);
        MyPlan myPlan = list.get(position);

        tvTitle.setText(myPlan.getMyPlanTitle());
        tvNum.setText(myPlan.getMyPlanNum());
        return convertView;
    }
}

这部分代码可以直接拷贝，然后根据自己的item的布局将inflate的数据绑定进行一个修改，修改成自己的item的layout。这部分涉及到了我们的一个实体类，MyPlan.class代码如下：

import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by Administrator on 2016/8/10 0010.
 */
public class MyPlan {
    private String MyPlanTitle;
    private String MyPlanNum;


    public String getMyPlanTitle() {
        return MyPlanTitle;
    }

    public void setMyPlanTitle(String myPlanTitle) {
        MyPlanTitle = myPlanTitle;
    }


    public String getMyPlanNum() {
        return MyPlanNum;
    }

    public void setMyPlanNum(String myPlanNum) {
        MyPlanNum = myPlanNum;
    }
}

实体类主要就是方便我们在主activity中进行赋值。具体的使用以及我们主activity的代码如下：

List<MyPlan> myplanList;

GridView gridview_jieduan；

gridview_jieduan = (GridView) findViewById(R.id.grid_jieduan);

 /**
     * 设置数据
     */
    private void setData() {
        myplanList_jieduan = new ArrayList<MyPlan>();
        MyPlan item = new MyPlan();
        item.setMyPlanTitle("初级阶段");
        item.setMyPlanNum("共30课时");
        myplanList_jieduan.add(item);
        item = new MyPlan();
        item.setMyPlanTitle("初级阶段");
        item.setMyPlanNum("共31课时");
        myplanList_jieduan.add(item);
        item = new MyPlan();
        item.setMyPlanTitle("初级阶段");
        item.setMyPlanNum("共32课时");
        myplanList_jieduan.add(item);
        item = new MyPlan();
        item.setMyPlanTitle("初级阶段");
        item.setMyPlanNum("共33课时");
        myplanList_jieduan.add(item);
//        myplanList.addAll(myplanList);
    }

 private void setGridView() {
        int listSize = myplanList.size();
        // 得到像素密度
        DisplayMetrics outMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
        float density = outMetrics.density; // 像素密度
        // 根据item的数目，动态设定gridview的宽度,现假定每个item的宽度和高度均为170dp，列间距为10dp
        ViewGroup.LayoutParams params_jieduan = gridview_jieduan.getLayoutParams();
        int itemWidth_jieduan = (int) (170 * density);
        int spacingWidth = (int) (10 * density);
       params_jieduan.width = itemWidth_jieduan * listSize + (listSize - 1) * spacingWidth;
        gridview_jieduan.setStretchMode(GridView.NO_STRETCH); // 设置为禁止拉伸模式
        gridview_jieduan.setNumColumns(listSize);
        gridview_jieduan.setHorizontalSpacing(spacingWidth);
        gridview_jieduan.setColumnWidth(itemWidth_jieduan);
        gridview_jieduan.setLayoutParams(params_jieduan);

        GridViewAdapter adapter = new GridViewAdapter(getApplicationContext(),
                myplanList);
        gridview_jieduan.setAdapter(adapter);
    }

这部分主要设置GridView的LayoutParams，然后对我们的gridview的item之间的间距，也就是setHorizontalSpacing，还有我们的ColumnWidth，这个设置我们的item的宽度，还有params.width设置我们的girdview的宽度，算法就是每个item的宽度，加上我们item之间的间距，就是我们gridview的宽度。

通过上述的步骤，就实现了我们所谓的横向滑动的gridview了。

还有什么好的建议希望大家能够共同探讨，共同进步。如果有更新修改的话或者更好的办法，我还会后续更新。