???? 相信很多人都喜歡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); } }?
?
?
?
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
