九宫格图片

任务要求:javascript

使用GridView和SimpleAdapter实现手机界面常见的的九宫格,图片能够任意选择,注意图片的大小要一致java

思路:android

布局就不说了,代码实现部分先准备数据源 声明一个List集合,集合中的对象是map对象,map对象调用方法传入数据完成数据源准备 而后建立simpleaapter绑定,最后为图片添加了一个监听器,点击图片后会在九宫格图片下方显示这张图片。ide

布局:
main_activity布局

TextView
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        style="@style/hello" />
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <fragment
            android:id="@+id/fragment"
            android:name="com.example.administrator.ninephoto.GridFragment"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:layout="@layout/fragment_grid"/>
    </LinearLayout>

fragment_gridui

<GridView
        android:id="@+id/grid_photo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numColumns="3"/>
    <LinearLayout
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <ImageView
            android:id="@+id/img1"
            android:layout_width="180dp"
            android:layout_height="180dp" />
    </LinearLayout>

grid_itemcode

<ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

java代码:
GridFragment:对象

public class GridFragment extends Fragment {
    private GridView grid_photo;
    private SimpleAdapter simpleAdapter;
    private ArrayList< HashMap<String, Object>> photo;
    private ImageView img1;
    //将图片资源打包到集合中
    private int []icon = {
            R.drawable.a1,R.drawable.a2,R.drawable.a3,R.drawable.a4,R.drawable.a5,
            R.drawable.a6,R.drawable.a7,R.drawable.a8,R.drawable.a9};

    public GridFragment() {
        // Required empty public constructor
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_grid, container, false);
    //加载相关控件
        grid_photo = (GridView)view.findViewById(R.id.grid_photo);
        img1 = (ImageView)view.findViewById(R.id.img1);
//建立适配器并绑定
        simpleAdapter = new SimpleAdapter(getActivity(),getData(),
                R.layout.grid_item,new String[]{"cat"},new int[]{R.id.img});
        grid_photo.setAdapter(simpleAdapter);
//为九宫格图片添加监听器
        grid_photo.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                img1.setImageResource(icon[position]);
            }
        });

        return view;
    }

//相关数据源的获取
    public ArrayList<HashMap<String, Object>> getData() {
        photo = new ArrayList<HashMap<String, Object>>();

        for (int i=0;i<icon.length;i++){
            HashMap<String, Object> map = new HashMap<String, Object>();
            map.put("cat", icon[i]);
            photo.add(map);
        }
        
        return (ArrayList<HashMap<String, Object>>) photo;
    }
}

在相关数据源的获取这里本来的添加数据的方法是一个个put,后面找到个是代码简洁的方法是利用一个for循环这样只用写一个put方法就能够获取9个数据源blog

完成效果
图片

相关文章
相关标签/搜索