1、最近做的项目,在主界面中有个5个控件,一张图片,下面为文字说名,主要的功能是点击一个控件(模块)进行页面的跳转:如图
一般的情况下,用线性布局LinearLayout或者相对布局RelativeLayout也可以实现上面的布局;不过对于后期的维护就难过了;所以最终选择了gridview,便于维护:
首先:
在xml布局中添加如下代码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.MainActivity"
android:background="@color/white"
>
<ImageView
android:id="@+id/bgHomePicture"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:src="@mipmap/bg_home"
android:scaleType="fitXY"
/>
<GridView
android:id="@+id/gridView"
android:layout_below="@id/bgHomePicture"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="3"
android:gravity="center_horizontal"
android:verticalSpacing="20dp"
android:layout_marginTop="20dp"
android:stretchMode="columnWidth"
android:scrollbars="none"
/>
</RelativeLayout>
然后在建一个gridview中的item中显示的布局:我这里定义为main_item:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
>
<ImageView
android:id="@+id/images"
android:layout_width="65dp"
android:layout_height="65dp"
android:src="@mipmap/ic_launcher"
android:layout_centerHorizontal="true"
/>
<TextView
android:id="@+id/number"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@android:color/white"
android:background="@drawable/task_number_bg"
android:layout_toRightOf="@+id/images"
/>
<TextView
android:id="@+id/texts"
android:layout_below="@+id/images"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:text="文字"
android:textSize="@dimen/normal_text"
android:textColor="@color/black"
/>
</RelativeLayout>
最后在activity中设置相关数据即可:
public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener{
private static final String TAG ="MainActivity" ;
private int[] icon = {R.mipmap.routine_monitoring,R.mipmap.special_detection,R.mipmap.supervise_check
,R.mipmap.monitoring_statistics,R.mipmap.temporary_record};
private String[] iconName = {"例行监测","专项监测","监督抽查","监测统计","临时备案"};
private ArrayList<Map<String,Object>> list_data = new ArrayList<Map<String,Object>>();
private GridView mGridView;
private SimpleAdapter simpleAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView(){
mGridView = (GridView) findViewById(R.id.gridView);
//获取数据
getData();
//新建适配器
String[] from ={"image","text"};
int[] to = {R.id.images,R.id.texts};
simpleAdapter = new SimpleAdapter(this,list_data, R.layout.main_item,from,to);
//配置适配器
mGridView.setAdapter(simpleAdapter);
//设置mGridView中的item点击为透明,不然会有点击效果,波纹形;
mGridView.setSelector(new ColorDrawable(Color.TRANSPARENT));
//设置mGridView中的item的点击监听事件;
mGridView.setOnItemClickListener(this);
}
//获取item中要添加的数据
private List<Map<String,Object>> getData(){
for (int i = 0; i < icon.length; i++) {
Map<String,Object> map = new HashMap<String,Object>();
map.put("image",icon[i]);
map.put("text",iconName[i]);
list_data.add(map);
}
return list_data;
}
//item的监听事件,实现点击item执行的事件
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
switch (position){
case 0:
Toast.makeText(getApplicationContext(),"你点击了"+iconName[0],Toast.LENGTH_SHORT).show();
break case 1:
break; case 2:Toast.makeText(getApplicationContext(),"你点击了"+iconName[1],Toast.LENGTH_SHORT).show();
break; case 3:Toast.makeText(getApplicationContext(),"你点击了"+iconName[2],Toast.LENGTH_SHORT).show();
break; case 4:Toast.makeText(getApplicationContext(),"你点击了"+iconName[3],Toast.LENGTH_SHORT).show();
break; default: break; } }}Toast.makeText(getApplicationContext(),"你点击了"+iconName[4],Toast.LENGTH_SHORT).show();