740      阿裏雲  技術社區[雲棲]

創新源於模仿之六：仿iPhone的分組列表做一個配置界麵

這個效果現在很多見了，象新浪微博客戶端的“我的資料”，MIUI中的設置，米聊中的“名片”，，，等等等等。iPhone啊，你讓Android程序員傷不起。

這個功能的實現很簡單，如果你想簡單的話，就是一個圖片和布局的問題。今天繼續拿來主義，反編譯一下米聊的代碼，從它的res裏尋找我們需要的東西。

在res/drawable-hdpi/namecard_xxxxxxx 這些圖片就是我們需要的資源，小米的設計人員做的圖就是精細，比新浪的好多了。

使用上有兩種方法，米聊的“名片”是一個ListActivity，所以，需要定義一個Item類封裝一下每個項目（顯示名稱、彈出文本編輯框還是選擇框、取值等等），然後在ArrayAdapter中的getView中，針對不同的Item分別加載對應的layout顯示出來即可。

但是我覺得更簡單的方法就是直接放在一個layout中，反正設置頁又沒有多少動態的項目，直接用普通的Activity就可以了，ListActivity有點學浪費了。

<RelativeLayout 
    	android:paddingTop="10.0dip" 
    	android:paddingBottom="5.0dip" 
    	android:layout_width="fill_parent" 
    	android:layout_height="wrap_content">
    	
    	<FrameLayout 
    		android:layout_gravity="center" 
    		android:background="@drawable/settings_item_bkg_left"
    		android: 
    		android:paddingLeft="10.0dip" 
    		android:paddingTop="10.0dip" 
    		android:paddingRight="10.0dip" 
    		android:paddingBottom="20.0dip" 
    		android:layout_width="100.0dip" 
    		android:layout_height="110.0dip">
        	<ImageView 	    		
	    		android:layout_gravity="center" 
	    		android: 
	    		android:layout_width="80.0dip" 
	    		android:layout_height="80.0dip" 
	    		android:src="@drawable/avatar_default"
	    		android:scaleType="centerCrop" />
    	</FrameLayout>
    	<LinearLayout 
    		android: 
    		android:background="@drawable/settings_item_rt_bg"
    		android:layout_toRightOf="@id/settings_basic_avatar_cont"
    		android:layout_alignTop="@id/settings_basic_avatar_cont"    		
    		android:layout_width="fill_parent" 
    		android:layout_height="wrap_content">
            <TextView 
            	android:textSize="16.0dip" 
            	android:textColor="#c0000000" 
            	android:layout_gravity="left|center" 
            	android: 
            	android:layout_width="0.0dip" 
            	android:layout_height="wrap_content" 
            	android:layout_marginLeft="10.0dip" 
            	android:text="nick name"
            	android:layout_weight="1.0" />
            <ImageView 
    			android:layout_gravity="center_vertical" 
    			android:layout_width="wrap_content" 
    			android:layout_height="wrap_content" 
    			android:layout_marginRight="10.0dip" 
    			android:scaleType="fitXY"
    			android:src="@drawable/item_clickable" />
    	</LinearLayout>

其實就是每個元素的background，選擇合適的有圓角的白底的圖片做背景就可以達到效果。當然整個頁麵應該是淺灰色的為宜。

這樣就OK了。真得很簡單但是效果一下就出來了。

最後更新：2017-04-02 06:51:59

  上一篇： Android JNI 使用的數據結構JNINativeMethod詳解

  下一篇： 創新源於模仿之二：美化ListView的嚐試