欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android仿QQ登陸窗口實(shí)現(xiàn)原理

 更新時(shí)間：2013年01月03日 09:21:27   作者：  
今天根據(jù)騰訊qq，我們做一個(gè)練習(xí)，來(lái)學(xué)習(xí)如何制作一個(gè)漂亮的布局仿QQ登陸,還是一個(gè)啟動(dòng)畫(huà)面，之后進(jìn)入登錄頁(yè)面，導(dǎo)航頁(yè)面就不介紹了，大家可以參考微信的導(dǎo)航頁(yè)面

今天根據(jù)騰訊qq，我們做一個(gè)練習(xí)，來(lái)學(xué)習(xí)如何制作一個(gè)漂亮的布局。首先看一下官方圖片

還是一個(gè)啟動(dòng)畫(huà)面，之后進(jìn)入登錄頁(yè)面，導(dǎo)航頁(yè)面就不介紹了，大家可以參考微信的導(dǎo)航頁(yè)面。首先程序進(jìn)入SplashActivity，就是啟動(dòng)頁(yè)面，Activity代碼如下：

復(fù)制代碼 代碼如下:

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();//結(jié)束本Activity
}
}, 1000);//設(shè)置執(zhí)行時(shí)間
}
}

xml布局文件就是一個(gè)全屏的圖片，要注意的是設(shè)置android:scaleType ="matrix"這個(gè)屬性。不然不會(huì)全屏
復(fù)制代碼 代碼如下:

<? 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>

過(guò)1秒之后轉(zhuǎn)入登陸頁(yè)面，從圖片我們可以看出，騰訊的UI做的還是相當(dāng)美觀漂亮的，既簡(jiǎn)潔又不失美觀。先分析一下這個(gè)登錄界面，從整體可以看出，根布局的背景色是藍(lán)色的，而那個(gè)QQ 2012 Android其實(shí)是一個(gè)圖片背景色和根布局的背景色一樣，這樣就不會(huì)有視覺(jué)偏差。下面就是兩個(gè)文本框EditText了，注意這里和官方給的不一樣，因?yàn)楹竺嬗幸粋€(gè)小箭頭，當(dāng)點(diǎn)擊這個(gè)箭頭時(shí)，會(huì)在第一個(gè)文本框的下面顯示已經(jīng)輸入的qq號(hào)碼，在qq號(hào)碼的后面還有刪除qq信息的按鈕。這個(gè)地方需要注意一下。再往下就是登陸B(tài)utton以及那連個(gè)“記住密碼”和“注冊(cè)新賬號(hào)”比較簡(jiǎn)單，注意位置的安排即可。最后就是最下面的“更多登陸選項(xiàng)”，當(dāng)點(diǎn)擊的時(shí)候會(huì)向上彈出一些內(nèi)容，其實(shí)就是一個(gè)隱藏的布局，當(dāng)點(diǎn)擊上面的時(shí)候，使下面隱藏的布局顯示。當(dāng)然也可以使用滑動(dòng)抽屜來(lái)做，但是相對(duì)來(lái)說(shuō)比較麻煩。下面看一下xml代碼，相信大家就會(huì)一路了然。
復(fù)制代碼 代碼如下:

< 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 = "登錄" />

<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 = "記住密碼"
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 = "注冊(cè)新賬號(hào)"
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 = "更多登陸選項(xiàng)"
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 = "隱身登陸"
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 = "靜音登錄"
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 = "允許手機(jī)/電腦同時(shí)在心線"
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 = "接受群消息"
android:textColor ="#ffc6e6f9"
android:textSize ="12.0sp" />
</ LinearLayout>
</ LinearLayout>

</LinearLayout >

</ RelativeLayout>

各個(gè)組件的使用沒(méi)有問(wèn)題，關(guān)鍵是如何設(shè)置他們的屬性，來(lái)獲得一個(gè)比較美觀的效果，大家可以參考這個(gè)例子，來(lái)做一下練習(xí)，來(lái)強(qiáng)化UI的設(shè)計(jì)。從這個(gè)例子中就可以學(xué)到很多東西，比如ViwGroup的使用（如何槍套），background的設(shè)置，例如同時(shí)使用兩個(gè)Edittext,設(shè)置android:background ="@null"設(shè)置為空的時(shí)候就不會(huì)產(chǎn)生間隔了。這個(gè)要自己多做設(shè)計(jì)，時(shí)間長(zhǎng)了就會(huì)有感悟了。最后看一下MainActivity的代碼，布局簡(jiǎn)單

復(fù)制代碼 代碼如下:

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, "正在驗(yàn)證賬號(hào)...");
mDialog.show();
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.activity_qq, menu);
return true;
}
}

最后效果如下：


總結(jié)：本文可以作為一個(gè)UI練習(xí)Demo，大家可以自己獨(dú)立去寫(xiě)，有問(wèn)題的可以留下郵箱我給你發(fā)一下源碼作為參考。下一篇將寫(xiě)主頁(yè)面的實(shí)現(xiàn)，歡迎大家關(guān)注。

相關(guān)文章

最新評(píng)論