【新手--android日记】实现IOS风格电话界面

【前言--新手日记】

开始学习android开发，通过做一个通讯录练习，打算实现各种自己想实现的功能。

新手作品，技术含量很浅。主要是记录自己的学习过程。

纯学习之用，求评论，求建议，求教导。

【正题】

一、下了好多通话软件，感觉都不怎么样，表示还是比较喜欢原来的QQ通讯录。现在换成微信通讯录，没以前的感觉好。

　　最后还是倾向于选择IOS的电话界面。

　　先附图：

　　IOS的：

　　      　

　　

　　元器件很简单，主要问题还是在布局方面。

　　分底部和顶部两部分说吧。

二、底部设计：

　　底部设计，RadioGroup加四个RadioButton。

　　

　　（1）布局方面

　　布局的均匀分布。（突然怀念WPF的UniformGrid）

　　实现均匀分布刚开始自己做的时候感觉还是很棘手，学会了就很简单了。

　　相关知识网站：http://blog.csdn.net/xiechengfa/article/details/38334327

　　看了这个就明白的。其实就是layout_weight的应用。

　　（2）效果设计

　　个性化RadioButton--没有选择框框，一个图片在上面的这种定义

　　代码：

　　

 <RadioButton
             android:id="@+id/contact"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
             android:layout_weight="1"
             android:layout_gravity="bottom"
             android:gravity="center_horizontal"
             android:text="@string/contact"
             android:button="@null"
             android:textColor="@drawable/rbtn_textcolor_selector"
             android:drawableTop="@drawable/rbtn_contact_icon_selector"
             android:background="@drawable/rbtn_menu_background_selector" />

图片资源就不上传了

　　

　　由于这里是点击之后一直保持那种状态，所以选择checked作为标准。

　　直接上代码，很好理解的。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/callpress" />
    <item android:drawable="@mipmap/call" />
</selector>

　　

三、顶部设计

　　（1）布局设计

　　采用的是RelativeLayout布局，Button+RadioGroup+Button。

　　直接上代码，只展示了布局的那一部分：

  <Button
         android:layout_alignParentStart="true"
         android:layout_alignParentLeft="true"
         android:layout_centerInParent="true"
         android:layout_marginStart="5dp"
         android:layout_marginLeft="5dp"
         android:gravity="center"
       />

左边Button

 <Button
         android:layout_alignParentEnd="true"
         android:layout_alignParentRight="true"
         android:layout_centerInParent="true"
         android:layout_marginEnd="5dp"
         android:layout_marginRight="5dp"
         android:gravity="center"
         />

右边Button

中间的RadioGroup只有两句句

android:layout_centerInParent="true"

android:gravity="center"

【但是这样写会有warning，意思是屏幕小的话这样Button与RadioGroup会产生重叠。】
【如果有好的布局方式，请评论给我，谢谢】

（2）效果设计
主要需要了解的是中间的那一块效果。
也是直接上代码+网站吧。这些，其实看了就会了。
网站：http://blog.csdn.net/brokge/article/details/9713041

这里只是左边部分，右边部分省略。

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item>
         <shape>
             <solid android:color="@color/white" />
             <corners android:bottomRightRadius="0dp" android:bottomLeftRadius="10dp" android:topRightRadius="0dp" android:topLeftRadius="10dp" />
             <stroke android:width="1dp" android:color="@color/themecolor" />
             <padding android:left="10dp" android:top="5dp" android:right="5dp" android:bottom="5dp" />
         </shape>
     </item>
 </selector>

默认时候的background

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item>
         <shape>
             <solid android:color="@color/themecolor" />
             <corners android:bottomRightRadius="0dp" android:bottomLeftRadius="10dp" android:topRightRadius="0dp" android:topLeftRadius="10dp" />
         </shape>
     </item>
 </selector>

press后的background

 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:state_checked="true" android:drawable="@drawable/nvgbar1_background_press" />
     <item android:drawable="@drawable/nvgbar1_background_default" />
 </selector>

RadioButton的selector