使用GridView和SimpleAdapter实现九宫格

*使用GridView和SimpleAdapter实现九宫格,这其实与上一次的作业类似,同样分为三个步骤,接下来我将是重复上次作业的的步骤完成

完成此项任务我们应该想象到在布局方面应该有三块需要做到:从大到小说起,1、显示此列表的主界面2、在主界面一行一行显示3、在一行上显示的格式

下面根据上面的想法完成以上三种页面布局

1、显示此列表主界面,这表面上仍然是一个空的界面,目的就是为了显示内容

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

    </LinearLayout>

效果为:

2、在主界面上一行一行的显示,用GridView实现,其实就是一个九宫格显示的模板,这里有很多需要我们学习的属性,书上有详细介绍,可以认真看,学会使用

 <GridView
            android:id="@+id/gridview1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:horizontalSpacing="10dp"
            android:numColumns="3"
            android:verticalSpacing="5dp">

        </GridView>

效果为:*

3、在一行上显示的格式,这其实就是一个简单的显示图片的

<ImageView
        android:id="@+id/imageView1"
        android:layout_width="80dp"
        android:layout_height="80dp" />

效果为:

java代码要有主Java程序和Fragment来加载数据

首先创一个AdapterFragment用来加载数据


public class Grid_ViewFragment extends Fragment {
    

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_grid__view, container, false);

        List<ClassInfo> datas = new ArrayList<>();
        datas.add(new ClassInfo(R.drawable.ccm1));
        datas.add(new ClassInfo(R.drawable.ccm2));
        datas.add(new ClassInfo(R.drawable.ccm3));
        datas.add(new ClassInfo(R.drawable.ccm4));
        datas.add(new ClassInfo(R.drawable.ccm5));
        datas.add(new ClassInfo(R.drawable.ccm7));
        datas.add(new ClassInfo(R.drawable.ccm1));
        datas.add(new ClassInfo(R.drawable.ccm7));
        datas.add(new ClassInfo(R.drawable.ccm3));
        final CustomGridViewAdapter adapter = new CustomGridViewAdapter(getActivity(), datas);


        GridView gridview = (GridView) view.findViewById(R.id.gridview1);
        gridview.setAdapter(adapter);
        return view;
    }

}

为以上数据创建一个对象组

public class ClassInfo extends Fragment {
    private int imgId;

    public ClassInfo(int imgId) {
        this.imgId = imgId;
    }

    public int getImgId() {
        return imgId;
    }

    public void setImgId(int imgId) {
        this.imgId = imgId;
    }
}

获取数据中的每个控件对象以及为每个控件赋值

public class CustomGridViewAdapter extends BaseAdapter {
    private List<ClassInfo> datas;
    private Context context;

    public CustomGridViewAdapter(Context context,List datas){
        this.datas = datas;
        this.context = context;
    }


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

    @Override
    public Object getItem(int i) {
        return datas.get(i);
    }

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

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {

        if(view == null) {
            view = LayoutInflater.from(context).inflate(R.layout.item,null);
        }
        //2、获取View中的每个控件的对象
        ImageView img = (ImageView)view.findViewById(R.id.imageView1);
        //3、给View中的每个控件赋值
        ClassInfo classInfo = datas.get(i);
        img.setImageResource(classInfo.getImgId());
        return view;
    }
    }

最后运行结果为:

这次作业跟上次基本差不多,就是重新回顾上节课的知识,这两块知识点可以联系在一起学习,但是很多的代码跟书上不同,我觉得也需要好好的看看书,结合老师讲的学习

posted @ 2017-05-06 15:14  殇情璃雪  阅读(143)  评论(0编辑  收藏  举报