Android之高仿微信“登录导航”（二）

这节内容是第（一）节内容中Start2.class类的实现。

首先是效果图：

从这个布局可以看到，有以下关键点：

1、将最底层的布局背景设置成银白色；

2、位于最底层布局顶部的“LOGO”和“微信”放在一个LinearLayout里，设置水平布局；

3、剩下的控件均垂直放入到最底层布局；

4、后台代码实现监听器。

一、实现界面

layout\start2.xml

<?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" 
    android:background="#eee" >
    
    <LinearLayout android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingTop="50dp"
        android:gravity="center" >
            
        <ImageView android:layout_width="80dp"
            android:layout_height="80dp"
            android:src="@drawable/copyright" 
            />
            
        <TextView android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:text="微信"
            android:textColor="#000000"
            android:textSize="35sp" />
            
    </LinearLayout>
     

    <Button android:id="@+id/login"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/state_btn_green"
        android:gravity="center"
        android:layout_marginLeft="12dp"
        android:paddingLeft="130dp"
        android:paddingRight="130dp"
        android:layout_marginTop="80dp"
        android:text="登录"
        android:textColor="#ffffff"
        android:textSize="18sp"
        />

   <TextView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="6dp"
        android:layout_marginLeft="70dp"
        android:gravity="center"
        android:text="使用QQ号或者微信号登录"
        android:textSize="14sp"
        android:textColor="#444" 
        />

   <Button android:id="@+id/regist"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@drawable/state_btn_white"
        android:gravity="center"
        android:paddingLeft="130dp"
        android:paddingRight="130dp"
        android:text="注册"
        android:layout_marginLeft="12dp"
        android:textColor="#000000"
        android:textSize="18sp"
        />
        

  
</LinearLayout>

二、绿色按钮状态机的实现

drawable\state_btn_green.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

     <item android:state_enabled="false" 
         android:drawable="@drawable/btn_style_one_disabled" 
         />   
         
     <item android:state_pressed="true" 
         android:drawable="@drawable/btn_style_one_pressed" 
         />
            
     <item android:state_focused="true" 
         android:drawable="@drawable/btn_style_one_focused" 
         />    
        
     <item android:drawable="@drawable/btn_style_one_normal" 
         /> 
 
</selector>

三、白色按钮状态机的实现

drawable\state_btn_white.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

     <item android:state_enabled="false" 
         android:drawable="@drawable/btn_style_one_disabled" 
         />            
           
     <item  android:state_pressed="true" 
         android:drawable="@drawable/btn_style_two_pressed" 
         />
         
     <item android:state_focused="true" 
         android:drawable="@drawable/btn_style_two_focused" 
         />    
        
     <item android:drawable="@drawable/btn_style_two_normal" 
         />
    

</selector>

四、后台代码：

Start2.java

package t.first;

import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class Start2 extends Activity{
	
	public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
             
        setContentView(R.layout.start2);
        
        Button login = (Button)findViewById(R.id.login);
        Button regist = (Button) findViewById(R.id.regist);
        
        login.setOnClickListener(new OnClickListener() {
			
			public void onClick(View v) {
				// TODO 自动生成的方法存根
				
				Intent intent = new Intent(Start2.this,Login.class); //在第（三）节内容中实现该类				
				startActivity(intent);
				
				
				
			}
		});
        
      
       regist.setOnClickListener(new OnClickListener() {
		
		public void onClick(View v) {
			// TODO 自动生成的方法存根
			
		Uri uri = Uri.parse("http://3g.qq.com"); 
	    	Intent intent = new Intent(Intent.ACTION_VIEW, uri); 
	    	startActivity(intent);
			
		}
	});
        
	}

}

仔细观察微信，在进入这个界面的时候不是安卓自带的动画效果，而是采用了淡入淡出的效果，接下来就来实现这个效果。要实现这个效果，就必须借助anim和style来实现了，然后设置在AndroidManifest.xml中。

五、实现淡入动画效果：

anim\fade_in.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromAlpha="0.0" 
    android:toAlpha="1.0"
    android:duration="300" 
    />

六、实现淡出动画效果：

anim\fade_out.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromAlpha="1.0" 
    android:toAlpha="0.0"
    android:duration="300" 
    />

七、实现延时动画效果：

anim\hold.xml

<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:fromXDelta="0" 
    android:toXDelta="0"
    android:duration="300" 
    />

八、在styles.xml中设置淡入淡出、无标题、全屏：

values\styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <!-- 淡入淡出效果 -->
    <style name="AnimFade" parent="@android:style/Animation.Activity">  
    	<item name="android:activityOpenEnterAnimation">@anim/fade_in</item>  
    	<item name="android:activityOpenExitAnimation">@anim/hold</item>        
    	<item name="android:activityCloseEnterAnimation">@anim/fade_in</item>  
    	<item name="android:activityCloseExitAnimation">@anim/fade_out</item> 
	</style>
	
    <!-- 无标题、全屏、淡入淡出  -->
    <style name="Fullscreen_Notitle_Fade" parent="android:Theme.NoTitleBar.Fullscreen">
        <item name="android:windowAnimationStyle">@style/AnimFade</item>        
    </style>

</resources>

九、在AndroidManifest.xml设置以下语句：

  <activity android:name=".Start2" android:theme="@style/Fullscreen_Notitle_Fade"/>

十、所用素材：