Android布局案例之人人android九宮格
人人android是人人網(wǎng)推出的一款優(yōu)秀的手機應(yīng)用軟件,我們在使用的時候發(fā)現(xiàn)他的首頁布局是九宮格模式的,讓人覺得很別致,因為現(xiàn)在很多的 android軟件很少使用這種布局模式,人人android使用的很成功,使人覺得簡潔大方美觀,下面我們來看看人人android的布局
其實這種布局是使用了一種叫“GridView”的表格布局,下面我來給大家講一下:
首先,請大家理解一下“迭代顯示”這個概念,這個好比布局嵌套,我們在一個大布局里面重復(fù)的放入一些布局相同的小布局,那些重復(fù)的部分是由圖片和文字組成的小控件,圖片在上方,文字在下方,之后我們只需要把這些小控件迭代進(jìn)入主容器里即可。
我們來看看實際做出來的效果圖:
我們來看看主容器的布局(GridView)
main.xml
<?xmlversion="1.0"encoding="utf-8"?> <GridViewxmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/GridView" android:layout_width="fill_parent" android:layout_height="fill_parent" android:numColumns="auto_fit" android:columnWidth="90dp" android:stretchMode="columnWidth" android:gravity="center"> </GridView>
介紹一下里面的某些屬性:
android:numColumns=”auto_fit” ,GridView的列數(shù)設(shè)置為自動
android:columnWidth=”90dp”,每列的寬度,也就是Item的寬度
android:stretchMode=”columnWidth”,縮放與列寬大小同步
在這里需要關(guān)注的屬性是columnWidth,這里指定了列的寬度,一個列對象,對應(yīng)一個 “可重復(fù)的子項”,這個子項就是我們 的圖片項和圖片下方文字顯示的部分。如果不指定這個寬度的話,默認(rèn)是每行(展示的行,界面)僅僅只顯示一個 “可重復(fù)的子項”,而當(dāng)指定了寬度時,本文指定為90dp,如果每行實際行尺寸大于90,他就會繼續(xù)將下一個的“可重復(fù)的子項”,放置在本行。于是就呈現(xiàn)一種 一行顯示多個子項的情況。numColumns屬性,指定一個自動填充的值,指示了自動填充行。
接下來我們需要再創(chuàng)建一個XML布局文件,這里我們寫需要“被迭代”的子項(RelativeLayout)
不熟悉RelativeLayout布局的請看我寫的上一篇博客:android布局基礎(chǔ)及范例(一)
item.xml
<?xmlversion="1.0"encoding="utf-8"?> <RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" > <ImageView android:layout_width="wrap_content" android:id="@+id/ItemImage" android:layout_height="wrap_content" android:layout_centerHorizontal="true"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/ItemImage" android:id="@+id/ItemText" android:layout_centerHorizontal="true" /> </RelativeLayout>
這里使用了一個相對布局,在TextView 里使用屬性android:layout_below=”@+id/ItemImage”指示了文本在圖片的下方。
最后一步,我們需要把這些東西拼在一起,并且實現(xiàn)
這里我們采用了java中的數(shù)據(jù)結(jié)構(gòu):HashMap,用法這里不多說了,可以自行百度。
然后構(gòu)建ArrayList作為數(shù)據(jù)源,再構(gòu)建SimpleAdapter 作為數(shù)據(jù)適配器,為gridView指定適配器對象。
以下是java代碼:
layout_gridview.java
packagejiabin.activity; importjava.util.ArrayList; importjava.util.HashMap; importandroid.app.Activity; importandroid.os.Bundle; importandroid.view.View; importandroid.widget.AdapterView; importandroid.widget.AdapterView.OnItemClickListener; importandroid.widget.GridView; importandroid.widget.SimpleAdapter; importandroid.widget.Toast; publicclasslayout_gridviewextendsActivity { /** Called when the activity is first created. */ @Override publicvoidonCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); GridView gridview = (GridView) findViewById(R.id.GridView); ArrayList<HashMap<String, Object>> meumList =newArrayList<HashMap<String, Object>>(); for(inti =1;i <10;i++) { HashMap<String, Object> map =newHashMap<String, Object>(); map.put("ItemImage", R.drawable.i1); map.put("ItemText",""+i); meumList.add(map); } SimpleAdapter saItem =newSimpleAdapter(this, meumList,//數(shù)據(jù)源 R.layout.item,//xml實現(xiàn) newString[]{"ItemImage","ItemText"},//對應(yīng)map的Key newint[]{R.id.ItemImage,R.id.ItemText}); //對應(yīng)R的Id //添加Item到網(wǎng)格中 gridview.setAdapter(saItem); //添加點擊事件 gridview.setOnItemClickListener( newOnItemClickListener() { publicvoidonItemClick(AdapterView<?> arg0, View arg1,intarg2,longarg3) { intindex=arg2+1;//id是從0開始的,所以需要+1 Toast.makeText(getApplicationContext(),"你按下了選項:"+index,0).show(); //Toast用于向用戶顯示一些幫助/提示 } } ); } }
點擊事件響應(yīng)使用Toast,我們可以用此方法顯示用戶點擊的效果和觸發(fā)動作,上面代碼使用了Toast默認(rèn)效果,
我們來看看效果圖:
這種布局是不是很拉風(fēng)呢,希望本文所述對大家學(xué)習(xí)Android軟件編程有所幫助。
相關(guān)文章
詳解Android使用OKHttp3實現(xiàn)下載(斷點續(xù)傳、顯示進(jìn)度)
本篇文章主要介紹了詳解Android使用OKHttp3實現(xiàn)下載(斷點續(xù)傳、顯示進(jìn)度),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-02-02Android音頻錄制MediaRecorder之簡易的錄音軟件實現(xiàn)代碼
這篇文章主要介紹了Android音頻錄制MediaRecorder之簡易的錄音軟件實現(xiàn)代碼,有需要的朋友可以參考一下2014-01-01Android Textview實現(xiàn)顏色漸變滾動效果
這篇文章主要為大家詳細(xì)介紹了Android Textview實現(xiàn)顏色漸變滾動效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10Android用 Mob 實現(xiàn)發(fā)送短信驗證碼實例
這篇文章主要介紹了Android用 Mob 實現(xiàn)發(fā)送短信驗證碼實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06