Today, according to Tencent QQ, we do an exercise to learn how to make a beautiful layout. First look at the official picture
Or a splash screen, and then enter the login page, navigation page is not introduced, you can refer to the micro-letter navigation page. First the program into the Splashactivity, is the start page, the activity code is as follows:
Copy Code code as follows:
Package com.example.imitateqq;
Import android.app.Activity;
Import android.content.Intent;
Import Android.os.Bundle;
Import Android.os.Handler;
public class Splashactivity extends activity {
Private Intent Intent;
@Override
protected void OnCreate (Bundle savedinstancestate) {
Super.oncreate (savedinstancestate);
Setcontentview (R.layout.splash);
Startmainavtivity ();
}
private void Startmainavtivity () {
New Handler (). postdelayed (New Runnable () {
public void Run () {
Intent=new Intent (Splashactivity.this,qq.class);
StartActivity (Intent);
SplashActivity.this.finish ()//end of this activity
}
}, 1000);//Set Execution time
}
}
The XML layout file is a full-screen picture, and note that setting
Android:scaletype ="Matrix" this attribute. Or it won't be full-screen.
Copy Code code as follows:
? XML version= "1.0" encoding = "Utf-8"?>
< LinearLayout xmlns:android = "Http://schemas.android.com/apk/res/android"
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
android:orientation= "Vertical" >
< ImageView
Android:layout_width = "Match_parent"
Android:layout_height = "Match_parent"
Android:scaletype = "Matrix"
ANDROID:SRC = "@drawable/splash"/>
</linearlayout>
After 1 seconds into the landing page, from the picture we can see, Tencent's UI to do is still quite beautiful, both concise and not without losing beauty. First analysis of this login interface, from the whole can be seen that the root layout of the background color is blue, and that QQ, Android is actually a picture background color and root layout of the background color, so there will be no visual deviation. The following is two text box edittext, note here and the official gave a different, because there is a small arrow, when clicked this arrow, will be in the first text box below display has entered the QQ number, QQ number behind there is the deletion of QQ information button. This place needs to be noticed. Further down is the landing button and that even a "remember the password" and "register a new account" is relatively simple, attention to the location of the arrangement. The last is the bottom of the "more landing options", when clicked will pop up some content, in fact, is a hidden layout, when clicked above, so that the following hidden layout display. Of course, you can also use the sliding drawer to do, but relatively difficult. Let's take a look at the XML code, and I'm sure everyone will know.
Copy Code code as follows:
< Relativelayout xmlns:android = "Http://schemas.android.com/apk/res/android"
Xmlns:tools= "Http://schemas.android.com/tools"
Android:layout_width= "Match_parent"
android:layout_height= "Match_parent"
android:background= "@drawable/LOGIN_BG" >
< ImageView
Android:id = "@+id/loginbutton"
Android:layout_width = "Wrap_content"
Android:layout_height = "Wrap_content"
Android:layout_centerhorizontal = "true"
Android:layout_margintop = "50DP"
ANDROID:SRC = "@drawable/login_pic"/>
<linearlayout
Android:id = "@+id/input"
Android:layout_width = "Fill_parent"
Android:layout_height = "Wrap_content"
Android:layout_below = "@id/loginbutton"
Android:layout_marginleft = "28.0dip"
Android:layout_marginright = "28.0dip"
Android:background = "@drawable/login_input"
Android:orientation = "vertical" >
< LinearLayout
Android:layout_width = "Fill_parent"
Android:layout_height = "44.0dip"
Android:background = "@drawable/login_input"
android:gravity = "Center_vertical"
Android:orientation = "Horizontal" >
< EditText
Android:id = "@+id/searchedittext"
Android:layout_width = "0DP"
Android:layout_height = "Fill_parent"
Android:layout_weight = "1"
Android:background = "@null"
Android:ems = "10"
Android:imeoptions = "Actiondone"
Android:singleline = "true"
Android:textsize = "16SP" >
< Requestfocus/>
</edittext>
< Button
Android:id = "@+id/button_clear"
Android:layout_width = "20dip"
Android:layout_height = "20dip"
Android:layout_marginright = "8dip"
Android:background = "@drawable/login_input_arrow"
android:visibility = "visible"/>
</linearlayout>
< View
Android:layout_width = "Fill_parent"
Android:layout_height = "1.0px"
Android:layout_marginleft = "1.0px"
Android:layout_marginright = "1.0px"
Android:background = "#ffc0c3c4"/>
< EditText
Android:id = "@+id/password"
Android:layout_width = "Fill_parent"
Android:layout_height = "44.0dip"
Android:background = "#00ffffff"
android:gravity = "Center_vertical"
Android:inputtype = "Textpassword"
Android:maxlength = "16"
Android:maxlines = "1"
Android:textcolor = "#ff1d1d1d"
Android:textcolorhint = "#ff666666"
Android:textsize = "16.0sp"/>
</linearlayout >
<button
Android:id = "@+id/buton1"
Android:layout_width = "270DP"
Android:background = "@drawable/chat_send_button_bg"
Android:paddingtop = "5.0dip"
Android:layout_height = "50DP"
Android:layout_marginleft = "28.0dip"
Android:layout_marginright = "28.0dip"
Android:layout_margintop = "12.0dip"
Android:layout_below = "@+id/input"
android:gravity = "Center"
Android:textsize = "20DP"
Android:text = "Login"/>
<relativelayout
Android:id = "@+id/relative"
Android:layout_width = "Fill_parent"
Android:layout_height = "Wrap_content"
Android:layout_alignleft = "@+id/input"
Android:layout_alignright = "@+id/input"
Android:layout_below = "@id/buton1" >
< CheckBox
Android:id = "@+id/auto_save_password"
Android:layout_width = "Wrap_content"
Android:layout_height = "Wrap_content"
Android:layout_alignparentleft = "true"
Android:background = "@null"
Android:button = "@null"
android:checked = "true"
Android:drawableleft = "@drawable/checkbox_bg1"
android:drawablepadding = "4.0dip"
Android:text = "Remember Password"
Android:textcolor = "#ffffffff"
Android:textsize = "12.0sp"/>
< Button
Android:id = "@+id/regist"
Android:layout_width = "Wrap_content"
Android:layout_height = "Wrap_content"
Android:layout_alignparentright = "true"
Android:background = "@drawable/login_reg_normal"
Android:clickable = "true"
android:gravity = "Left|center"
Android:paddingleft = "8.0dip"
Android:paddingright = "18.0dip"
Android:text = "Register a new account"
Android:textcolor = "#ffffffff"
Android:textsize = "12.0sp"/>
</relativelayout >
<linearlayout
Android:id = "@+id/more_bottom"
Android:layout_width = "Fill_parent"
Android:layout_height = "Wrap_content"
Android:layout_alignparentbottom = "true"
Android:background = "@drawable/login_moremenu_back"
Android:orientation = "vertical" >
<relativelayout
Android:id = "@+id/input2"
Android:layout_width = "Fill_parent"
Android:layout_height = "40DP"
Android:background = "@drawable/login_moremenu_back"
Android:orientation = "vertical" >
< ImageView
Android:id = "@+id/more_image"
Android:layout_width = "Wrap_content"
Android:layout_height = "Wrap_content"
Android:layout_centervertical = "true"
Android:layout_marginright = "5.0dip"
Android:layout_toleftof = "@+id/more_text"
Android:clickable = "false"
ANDROID:SRC = "@drawable/login_more_up"/>
< TextView
Android:id = "@+id/more_text"
Android:layout_width = "Wrap_content"
Android:layout_height = "Wrap_content"
Android:layout_centerinparent = "true"
Android:background = "@null"
android:gravity = "Center"
Android:maxlines = "1"
Android:text = "More login Options"
Android:textcolor = "#ffc6e6f9"
Android:textsize = "14.0sp"/>
</relativelayout >
<linearlayout
Android:id = "@+id/morehidebottom"
Android:layout_width = "Fill_parent"
Android:layout_height = "Wrap_content"
Android:orientation = "vertical"
Android:visibility = "Gone" >
< View
Android:layout_width = "Fill_parent"
Android:layout_height = "1.0px"
Android:background = "#ff005484"/>
< View
Android:layout_width = "Fill_parent"
Android:layout_height = "1.0px"
Android:background = "#ff0883cb"/>
< LinearLayout
Android:layout_width = "Fill_parent"
Android:layout_height = "Wrap_content"
Android:layout_marginleft = "30.0dip"
Android:layout_marginright = "30.0dip"
Android:layout_margintop = "12.0dip"
Android:orientation = "Horizontal" >
< CheckBox
Android:id = "@+id/hide_login"
Android:layout_width = "1.0px"
Android:layout_height = "Wrap_content"
Android:layout_weight = "2.0"
Android:background = "@null"
Android:button = "@null"
android:checked = "false"
Android:drawableleft = "@drawable/checkbox_bg1"
android:drawablepadding = "4.0dip"
Android:text = "Stealth Landing"
Android:textcolor = "#ffc6e6f9"
Android:textsize = "12.0sp"/>
< CheckBox
Android:id = "@+id/silence_login"
Android:layout_width = "1.0px"
Android:layout_height = "Wrap_content"
Android:layout_weight = "1.0"
Android:background = "@null"
Android:button = "@null"
android:checked = "false"
Android:drawableleft = "@drawable/checkbox_bg1"
android:drawablepadding = "4.0dip"
Android:text = "Mute Login"
Android:textcolor = "#ffc6e6f9"
Android:textsize = "12.0sp"/>
</linearlayout>
< LinearLayout
Android:layout_width = "Fill_parent"
Android:layout_height = "Wrap_content"
Android:layout_marginbottom = "18.0dip"
Android:layout_marginleft = "30.0dip"
Android:layout_marginright = "30.0dip"
Android:layout_margintop = "18.0dip"
Android:orientation = "Horizontal" >
< CheckBox
Android:id = "@+id/accept_accounts"
Android:layout_width = "1.0px"
Android:layout_height = "Wrap_content"
Android:layout_weight = "2.0"
Android:background = "@null"
Android:button = "@null"
android:checked = "true"
Android:drawableleft = "@drawable/checkbox_bg1"
android:drawablepadding = "4.0dip"
Android:singleline = "true"
Android:text = "Allow cell phone/computer to be in the heart line"
Android:textcolor = "#ffc6e6f9"
Android:textsize = "12.0sp"/>
< CheckBox
Android:id = "@+id/accept_troopmsg"
Android:layout_width = "1.0px"
Android:layout_height = "Wrap_content"
Android:layout_weight = "1.0"
Android:background = "@null"
Android:button = "@null"
android:checked = "true"
Android:drawableleft = "@drawable/checkbox_bg1"
android:drawablepadding = "4.0dip"
Android:text = "Accept Group message"
Android:textcolor = "#ffc6e6f9"
Android:textsize = "12.0sp"/>
</linearlayout>
</linearlayout>
</linearlayout >
</relativelayout>
The use of each component is not a problem, the key is how to set their properties, to obtain a more beautiful effect, you can refer to this example, to do a practice to strengthen the design of the UI. From this example you can learn a lot of things, such as the use of viwgroup (how to holster),background settings, such as the use of two edittext at the same time, set android:background = The interval is not generated when the @null is set to empty. This is to do their own design, a long time will have a feeling. Finally look at the mainactivity code, simple layout
Copy Code code as follows:
Package com.example.imitateqq;
Import Android.os.Bundle;
Import android.app.Activity;
Import Android.app.Dialog;
Import Android.view.Menu;
Import Android.view.View;
Import Android.view.View.OnClickListener;
Import Android.widget.Button;
Import Android.widget.ImageView;
public class QQ extends activity implements onclicklistener{
Private Button Login_button;
Private View Morehidebottomview,input2;
Private ImageView More_imageview;
Private Boolean mshowbottom = false;
@Override
public void OnCreate (Bundle savedinstancestate) {
Super.oncreate (savedinstancestate);
Setcontentview (R.LAYOUT.ACTIVITY_QQ);
Initview ();
}
private void Initview () {
login_button= (Button) Findviewbyid (R.id.buton1);
Login_button.setonclicklistener (this);
Morehidebottomview=findviewbyid (R.id.morehidebottom);
more_imageview= (ImageView) Findviewbyid (r.id.more_image);
Input2=findviewbyid (R.ID.INPUT2);
Input2.setonclicklistener (this);
}
public void Showbottom (Boolean bshow) {
if (bshow) {
Morehidebottomview.setvisibility (View.gone);
More_imageview.setimageresource (R.DRAWABLE.LOGIN_MORE_UP);
Mshowbottom = true;
}else{
Morehidebottomview.setvisibility (view.visible);
More_imageview.setimageresource (R.drawable.login_more);
Mshowbottom = false;
}
}
public void OnClick (View v) {
Switch (V.getid ())
{
Case R.ID.INPUT2:
Showbottom (!mshowbottom);
Break
Case R.id.buton1:
Showrequestdialog ();
Break
Default
Break
}
}
Private Dialog mdialog = null;
private void Showrequestdialog ()
{
if (Mdialog!= null)
{
Mdialog.dismiss ();
Mdialog = null;
}
Mdialog = Dialogfactory.creatrequestdialog (This, "Verifying account ...");
Mdialog.show ();
}
@Override
public boolean Oncreateoptionsmenu (Menu menu) {
Getmenuinflater (). Inflate (r.menu.activity_qq, menu);
return true;
}
}
The final effect is as follows:
Summary : This article can be used as a UI practice demo, we can write their own independent, there are problems can leave the mailbox I send you the source code as a reference. The next article will write the implementation of the main page, you are welcome to pay attention.
