android中九宫格布局的实现

前段时间研究了下android中九宫格布局的实现。纵观现在的应用程序,九宫格是非常常见的一种布局方式。很多优秀的手机应用程序都采用了这一布局。下面就android中九宫格布局方式的实现和大家做一个简单的介绍。

首先是main.xml的布局方式如下：

<?xml version="1.0" encoding="utf-8"?>
<!--主界面的布局-->
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"

>
<RelativeLayout
android:id="@+id/MainActivityrlTwo"
android:layout_width="fill_parent"
android:layout_height="45dp"

>

</RelativeLayout>

<GridView
android:id="@+id/MainActivityGrid"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:numColumns="3"
android:columnWidth="50dp"
android:layout_below="@+id/MainActivityrlTwo"
android:layout_marginTop="5dp"
/>

<RelativeLayout
android:id="@+id/MainActivityrlThree"
android:layout_width="fill_parent"
android:layout_height="60dp"
android:layout_alignParentBottom="true"

>
<TextView
android:id="@+id/tvLineBottom"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/line_default"
/>
<Button
android:id="@+id/btmore_MainActivity"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="More"

/>
</RelativeLayout>

</RelativeLayout>

--------------------------------------------------------------------------------------------------

其次就是每一格九宫格的布局方式：

<?xml version="1.0" encoding="utf-8"?>
<!--九宫格每一格的布局-->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<ImageView
android:id="@+id/MainActivityImage"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_horizontal"
/>
<TextView
android:id="@+id/MainActivityText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textSize="18sp"
android:lines="1"
android:layout_marginTop="8dp"
/>
</LinearLayout>

--------------------------------------------------------------------------------------------------

最后就是adapter的编写：

public class ImageAdapter extends BaseAdapter {
private Context context;

public ImageAdapter(Context context) {
this.context=context;
}

private Integer[] images = {
//九宫格图片的设置
R.drawable.icon_1,
R.drawable.icon_2,
R.drawable.icon_3,
R.drawable.icon_4,
R.drawable.icon_5,
R.drawable.icon_6,
R.drawable.icon_7,
R.drawable.icon_8,
R.drawable.icon_9,
};

private String[] texts = {
//九宫格图片下方文字的设置
"记录支出",
"记录收入",
"账本管理",
"类别管理",
"查看图表",
"收支对照",
"记录心得",
"新闻公告",
"系统设置",
};

//get the number
@Override
public int getCount() {
return images.length;
}

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

//get the current selector's id number
@Override
public long getItemId(int position) {
return position;
}

//create view method
@Override
public View getView(int position, View view, ViewGroup viewgroup) {
ImgTextWrapper wrapper;
if(view==null) {
wrapper = new ImgTextWrapper();
LayoutInflater inflater = LayoutInflater.from(context);
view = inflater.inflate(R.layout.item, null);
view.setTag(wrapper);
view.setPadding(15, 15, 15, 15);  //每格的间距
} else {
wrapper = (ImgTextWrapper)view.getTag();
}

wrapper.imageView = (ImageView)view.findViewById(R.id.MainActivityImage);
wrapper.imageView.setBackgroundResource(images[position]);
wrapper.textView = (TextView)view.findViewById(R.id.MainActivityText);
wrapper.textView.setText(texts[position]);

return view;
}
}

class ImgTextWrapper {
ImageView imageView;
TextView textView;

}

--------------------------------------------------------------------------------------------------

当然最后的最后就是你得自己准备九张漂亮的图片啦！

九宫格的主界面大功告成！如果还有什么疑问可以留言哈…欢迎交流

本人QQ：523072842





本文出自 “这一秒不放弃” 博客，请务必保留此出处/article/4386136.html