"Novice--android Diary" for iOS-style phone interface

"Preface--Beginner's Diary"

Start learning Android Development by doing an address book and plan to implement a variety of functions that you want to implement.

Novice works, the technical content is very shallow. The main is to record their own learning process.

Pure learning, seeking comment, seeking advice, seeking guidance.

Point

First, a lot of phone calls software, feeling is not good, say or prefer the original QQ address book. Now change to the address book, not before the feeling good.

Finally, I prefer to choose the phone interface of iOS.

First drawings:

for iOS:

　　

The components are simple, the main problem is the layout.

Point to the bottom and the top two parts.

Second, the bottom design:

Bottom design, Radiogroup plus four x radiobutton.

　　

(1) Layout aspects

Uniform distribution of the layout. (Suddenly miss the UniformGrid of WPF)

Achieve even distribution when I first started doing it, it was tricky, and it was easy to learn.

Related Knowledge Website: http://blog.csdn.net/xiechengfa/article/details/38334327

See this to understand. is actually the application of layout_weight.

(2) Effect design

Personalization radiobutton--No selection box, a picture in the above definition of this

Code:

　　

1 <RadioButton2             Android:id= "@+id/contact"3 Android:layout_width= "0DP"4 Android:layout_height= "Wrap_content"5 Android:layout_weight= "1"6 android:layout_gravity= "Bottom"7 android:gravity= "Center_horizontal"8 Android:text= "@string/contact"9 Android:button= "@null"Ten Android:textcolor= "@drawable/rbtn_textcolor_selector" One Android:drawabletop= "@drawable/rbtn_contact_icon_selector" A Android:background= "@drawable/rbtn_menu_background_selector" />

picture resources will not be uploaded.

　　

Since this is the state that has been maintained after a click, choose Checked as the standard.

Directly on the code, very well understood.

<selectorxmlns:android= "Http://schemas.android.com/apk/res/android">    <Itemandroid:state_checked= "true"android:drawable= "@mipmap/callpress" />    <Itemandroid:drawable= "@mipmap/call" /></selector>

View Code

Third, the design of the top

(1) Layout design

The relativelayout layout is used, Button+radiogroup+button.

Directly on the code, showing only that part of the layout:

1  <Button2         Android:layout_alignparentstart= "true"3 Android:layout_alignparentleft= "true"4 android:layout_centerinparent= "true"5 Android:layout_marginstart= "5DP"6 Android:layout_marginleft= "5DP"7 android:gravity= "Center"8       />

left button

1 <Button2         Android:layout_alignparentend= "true"3 Android:layout_alignparentright= "true"4 android:layout_centerinparent= "true"5 Android:layout_marginend= "5DP"6 Android:layout_marginright= "5DP"7 android:gravity= "Center"8         />

Right Button

There are only two sentences in the middle Radiogroup.

Android:layout_centerinparent= "true"

android:gravity= "Center"

"But this will be warning, meaning that if the screen is small, then the button and the radiogroup will overlap." 】
"If there is a good layout, please comment to me, thank you"



(2) Effect design
The main need to understand is the middle of that piece of effect.
It is also directly on the Code + website. These, in fact, can be seen.
Website: http://blog.csdn.net/brokge/article/details/9713041

This is just the left part and the right part is omitted.

1 <selectorxmlns:android= "Http://schemas.android.com/apk/res/android">2     <Item>3         <Shape>4             <SolidAndroid:color= "@color/white" />5             <CornersAndroid:bottomrightradius= "0DP"Android:bottomleftradius= "10DP"Android:toprightradius= "0DP"Android:topleftradius= "10DP" />6             <StrokeAndroid:width= "1DP"Android:color= "@color/themecolor" />7             <paddingAndroid:left= "10DP"Android:top= "5DP"Android:right= "5DP"Android:bottom= "5DP" />8         </Shape>9     </Item>Ten </selector>

default time of background

1 <selectorxmlns:android= "Http://schemas.android.com/apk/res/android">2     <Item>3         <Shape>4             <SolidAndroid:color= "@color/themecolor" />5             <CornersAndroid:bottomrightradius= "0DP"Android:bottomleftradius= "10DP"Android:toprightradius= "0DP"Android:topleftradius= "10DP" />6         </Shape>7     </Item>8 </selector>

post-Press background

1 <selectorxmlns:android= "Http://schemas.android.com/apk/res/android">2     <Itemandroid:state_checked= "true"android:drawable= "@drawable/nvgbar1_background_press" />3     <Itemandroid:drawable= "@drawable/nvgbar1_background_default" />4 </selector>

RadioButton's selector

"Novice--android Diary" for iOS-style phone interface