android UI进阶之仿iphone的tab效果 （Android九宫格）
16lz
2021-12-04
相信很多人都喜欢iphone 酷炫的界面，虽然android的原生控件已经足够漂亮，但是往往不能满足用户越来越挑剔的眼光。其实，我们完全可以自己来绘制界面。今天我就来分享下做一个和iphone一样的tab界面。下面先来看下iphone上的效果
Android九宫格
主界面的布局：
<?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="40dp" > </RelativeLayout> <GridView android:id="@+id/gridview" 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" /> </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>
适配器：
package com.easyway.ninebox;import com.easyway.ninebox.R;import android.content.Context;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.ImageView;import android.widget.TextView;/** * * 前段时间研究了下android中九宫格布局的实现。 * 纵观现在的应用程序,九宫格是非常常见的一种布局方式。 * 很多优秀的手机应用程序都采用了这一布局 * @Title: * @Description: 实现TODO * @Copyright:Copyright (c) 2011 * @Company:易程科技股份有限公司 * @Date:2012-7-14 * @author longgangbai * @version 1.0 */public class ImageAdapter extends BaseAdapter { private Context context; public ImageAdapter(Context context) { this.context=context; } private Integer[] images = { //九宫格图片的设置 R.drawable.railway, R.drawable.railway, R.drawable.railway, R.drawable.railway, R.drawable.railway, R.drawable.railway, R.drawable.railway, R.drawable.railway, R.drawable.railway }; 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.grid_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; } } 主页面：
package com.easyway.ninebox;import android.app.Activity;import android.os.Bundle;import android.widget.GridView;/** * 九宫格的实现 * * @Title: * @Description: 实现TODO * @Copyright:Copyright (c) 2011 * @Company:易程科技股份有限公司 * @Date:2012-7-14 * @author longgangbai * @version 1.0 */public class NineBoxActivity extends Activity { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); //实例化一个适配器 ImageAdapter adapter = new ImageAdapter(this); //获得GridView实例 GridView gridview = (GridView)findViewById(R.id.gridview); //gridview.setNumColumns(3);//可以在xml中设置 //gridview.setGravity(Gravity.CENTER);//同上 //将GridView和数据适配器关联 gridview.setAdapter(adapter); }}
更多相关文章
- 浅谈Java中Collections.sort对List排序的两种方法
- python list.sort()根据多个关键字排序的方法实现
- Android(安卓)创建与解析XML（一）—— 概述
- QCom Camera Development
- 「Android问卷调查类型页面及逻辑实现」RadioButton、CheckBox、
- Android与Unity交互调用mUnityPlayer.quit()方法退出返回上一个A
- android 学习技术点 网址集锦
- 【小萌伴Android】相关文章目录
- Android(安卓)创建与解析XML（一）—— 概述