先看效果图，类似于支付宝首页的效果。由于九宫格显示的帖子网上已经很多，但是像这样九宫格全屏显示的例子还不是太多。本实例的需求是九宫格全屏显示，每个子view的高度是根据全屏高度三等分之后自适应高度，每行散列是固定的，通过自己重写adapter实现功能需求。
代码结构如下图框中标图部分：
布局文件test_gridview.xml:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".SimpleGridViewTest"> <android.support.v7.widget.Toolbar
android:id="@+id/grid_view_all_toolbar"
android:layout_height="48sp"
android:layout_width="match_parent"
android:background="@color/allApp_toolbar_bg"
app:popupTheme="@style/MyTheme"> <TextView
android:id="@+id/grid_view_allApp_toolbar_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="全部应用"
android:textStyle="bold"
android:layout_gravity="center"
android:textSize="16sp" />
</android.support.v7.widget.Toolbar> <com.view.JuheGridView
android:id="@+id/juhe_gridview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:horizontalSpacing="0.0dip"
android:listSelector="@null"
android:numColumns="3"
android:scrollbars="none"
android:stretchMode="columnWidth"
android:verticalSpacing="0.0dip"
android:layout_weight="1" />
</LinearLayout>
子view布局文件test_gridview_item.xml:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_margin="0.0dip"
android:background="@color/grid_view_item_bg"> <RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_centerInParent="true"
android:background="@drawable/gridview_selector"
android:padding="12.0dip"> <ImageView
android:id="@+id/iv_item"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_marginTop="40dp"
android:layout_centerHorizontal="true" /> <TextView
android:id="@+id/tv_item"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/iv_item"
android:layout_centerHorizontal="true"
android:layout_marginTop="90px"
android:maxLines="1"
android:textColor="@color/allApp_btn_text"
android:textSize="38px" />
</RelativeLayout> </FrameLayout>
java 代码 view 层 JuheGridView.java:
package com.view; import android.content.Context;
import android.util.AttributeSet;
import android.widget.GridView; /**
* Created by jihe on 16/8/22.
*/
public class JuheGridView extends GridView {
private final int ROW_NUMBER = 3; public JuheGridView(Context context, AttributeSet attrs) {
super(context, attrs);
} public JuheGridView(Context context) {
super(context);
} public JuheGridView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
} /**
* 计算控件的大小
*/
@Override
public void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int measureWidth = measureWidth(widthMeasureSpec);
int measureHeight = measureHeight(heightMeasureSpec); // 计算自定义的ViewGroup中所有子控件的大小
measureChildren(widthMeasureSpec, heightMeasureSpec); // 设置自定义的控件MyViewGroup的大小
setMeasuredDimension(measureWidth, measureHeight); } private int measureWidth(int pWidthMeasureSpec) {
int result = 0;
int widthMode = MeasureSpec.getMode(pWidthMeasureSpec);// 得到模式
int widthSize = MeasureSpec.getSize(pWidthMeasureSpec);// 得到尺寸 switch (widthMode) {
case MeasureSpec.AT_MOST:
case MeasureSpec.EXACTLY:
result = widthSize;
break;
}
return result;
} private int measureHeight(int pHeightMeasureSpec) {
int result = 0; int heightMode = MeasureSpec.getMode(pHeightMeasureSpec);
int heightSize = MeasureSpec.getSize(pHeightMeasureSpec); switch (heightMode) {
case MeasureSpec.AT_MOST:
case MeasureSpec.EXACTLY:
result = heightSize;
break;
}
return result;
}
}
model层 picture.java:
package com.model; /**
* Created by jihe on 16/8/22.
*/
public class Picture {
private String title;
private Integer imageId; public Picture() {
super();
} public Picture(String title, Integer imageId) {
super();
this.title = title;
this.imageId = imageId;
} public String getTitle() {
return title;
} public void setTitle(String title) {
this.title = title;
} public Integer getImageId() {
return imageId;
} public void setImageId(Integer imageId) {
this.imageId = imageId;
}
}
重写adapter, MyAdapter.java， 这里需要提前准备9张图片:
package com.adapter; import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;
import android.widget.TextView; import com.dev.jh.juhedidi.R;
import com.model.Picture; import java.util.ArrayList;
import java.util.List; /**
* Created by jihe on 16/8/23.
*/
public class MyAdapter extends BaseAdapter {
private Context context;
private GridView mGv;
private List<Picture> pictures;
private static int ROW_NUMBER = 3; /**
* 数据资源：标题 ＋ 图片
* */
private String[] arrText = new String[]{
"京东商品", "滴滴出行", "话费流量",
"油卡充值", "火车票", "飞机票",
"京东优选", "游戏卡", "Q币"
};
private int[] arrImages = new int[]{
R.mipmap.jd_before_click, R.mipmap.didi_before_click, R.mipmap.phone_before_click,
R.mipmap.oil_before_click, R.mipmap.train_before_click, R.mipmap.plane_before_click,
R.mipmap.gift_before_click, R.mipmap.game_before_click, R.mipmap.qq_before_click
}; public MyAdapter(Context context, GridView gv) {
this.context = context;
this.mGv = gv;
pictures = new ArrayList<>();
for (int i = 0; i < 9; i++) {
Picture pt = new Picture(arrText[i], arrImages[i]);
pictures.add(pt);
} } @Override
public int getCount() {
if (null != pictures) {
return pictures.size();
} else {
return 0;
}
} @Override
public Object getItem(int position) {
return pictures.get(position);
} @Override
public long getItemId(int position) {
return position;
} @Override
public View getView(int position, View convertView, ViewGroup parent) { Holder holder;
if (convertView == null) {
holder = new Holder();
convertView = LayoutInflater.from(context).inflate(R.layout.test_gridview_item, null);
holder.iv = (ImageView) convertView.findViewById(R.id.iv_item);
//设置显示图片
holder.iv.setBackgroundResource(arrImages[position]);
holder.tv = (TextView) convertView.findViewById(R.id.tv_item);
//设置标题
holder.tv.setText(arrText[position]);
convertView.setTag(holder);
} else {
holder = (Holder) convertView.getTag();
} //高度计算
AbsListView.LayoutParams param = new AbsListView.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
mGv.getHeight() / ROW_NUMBER); convertView.setLayoutParams(param);
return convertView;
} class Holder {
ImageView iv;
TextView tv;
}
}
主界面， SimpleGridViewTest.java:
package com.dev.jh.juhedidi; import android.content.Intent;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView; import com.adapter.MyAdapter;
import com.kepler.jd.login.KeplerApiManager;
import com.model.Picture;
import com.sdu.didi.openapi.DiDiWebActivity; import java.util.HashMap; import cn.juhe.sdk.JHAppMgr; /**
* Created by jihe on 16/8/16.
*/
public class SimpleGridViewTest extends BaseActivity implements AdapterView.OnItemClickListener { /**
* 京东相关信息
*/
public final static String oneDealUrl = "http://union.click.jd.com/jdc?p=AyIOZRprFQoSAlcZWCVGTV8LRGtMR1dGXgVFSR1JUkpJBUkcU0QLTh"
+ "9HRwwHXRteFwARGAxeB0gMVQsQDAFBSkVEC0dXZUNTcRFFBEFaakIBR2tOX1RkHUU5XWFuVyIYC00AZFsJXidlDh43VhleHAYSB1UfaxUFF"
+ "jdlfSYlVHwHVBpaFAMTBFASaxQyEgJRHV4cBBoFVBNfEjIVNwpPHkFSUFMdRR9AUkw3ZRo%3D&t=W1dCFBBFC14NXAAECUteDEYWRQ5RUFc"
+ "ZVRNbEAAQBEpCHklfHEBZXkxPVlpQFkUHGXJTRiNfBUpWSn8QTwc%3D&e=25840255236224";
public final static String listJson = "{\"type\": \"3\",\"blockId\":\"0\"}";//导航页 /**
* 新版界面相关信息：九宫格风格
*/
private GridView mGridView;
private String IMAGE_ITEM = "imgage_item";
private String TEXT_ITEM = "text_item"; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.test_gridview);
Toolbar toolbar = (Toolbar) findViewById(R.id.grid_view_all_toolbar);
toolbar.setTitle(""); mGridView = (GridView) findViewById(R.id.juhe_gridview); MyAdapter saImageItems = new MyAdapter(this, mGridView); // 设置GridView的adapter。GridView继承于AbsListView。
mGridView.setAdapter(saImageItems);
mGridView.setOnItemClickListener(this);
} /**
* 重写点击事件
* */
@Override
public void onItemClick(AdapterView<?> adapter, View view, int position, long rowid) { // 根据元素位置获取对应的值
Picture textView = (Picture) adapter.getItemAtPosition(position);
String itemText = textView.getTitle(); //京东商品
if ("京东商品".equals(itemText)) {
//sdk1.3
try {
JHAppMgr.initialize(this);
KeplerApiManager.getWebViewService().openNavigationWebViewPage(listJson);
} catch (Exception ex) {
ex.printStackTrace();
}
} //滴滴出行
if ("滴滴出行".equals(itemText)) {
HashMap<String, String> map = new HashMap<String, String>();
map.put("maptype", "wgs84"); DiDiWebActivity.showDDPage(SimpleGridViewTest.this, map);
} //京东优选
if ("京东优选".equals(itemText)) {
JHAppMgr.initialize(this);
// 跳转到京东
JHAppMgr.getInstance().getJHApi().openJingXunActivity(SimpleGridViewTest.this);
} //话费流量
if ("话费流量".equals(itemText)) {
Intent intent = new Intent(this.getApplicationContext(), PhoneActivity.class);
startActivity(intent);
} //油卡充值
if ("油卡充值".equals(itemText)) {
Intent intent = new Intent(this.getApplicationContext(), OilActivity.class);
startActivity(intent);
} //火车票
if ("火车票".equals(itemText)) {
Intent intent = new Intent(this.getApplicationContext(), TicketActivity.class);
startActivity(intent);
} //飞机票
if ("飞机票".equals(itemText)) {
Intent intent = new Intent(this.getApplicationContext(), PlaneTicketActivity.class);
startActivity(intent);
} //游戏卡
if ("游戏卡".equals(itemText)) {
Intent intent = new Intent(this.getApplicationContext(), GameCardActivity.class);
startActivity(intent);
} //Q币
if ("Q币".equals(itemText)) {
Intent intent = new Intent(this.getApplicationContext(), QMoneyActivity.class);
startActivity(intent);
} }
}
注：在第一张效果图中的顶部，加了一个toolbar，在代码中也有体现，唯一没有贴出的代码就是在BaseActivity.java中，可以在SimpleGridViewTest.java中加上， supportRequestWindowFeature(Window.FEATURE_NO_TITLE);