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的尝试