实战Walker之登录界面的实现分析

             实战Walker之登录界面的实现分析

一.界面效果图

二.登录界面的布局分析

1.login.xml

Stepl:首先建立drawable文件夹,创建logintopbg_roundcorner.xml

<span style="font-size:10px;"><span style="font-size:10px;"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#70ffffff"/>
	<corners android:radius="10dp"/>
</shape></span></span>

Step2:创建btn_select.xml

<span style="font-size:10px;"><span style="font-size:10px;"><?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/btn_shape_before" android:state_pressed="false"></item>
    <item android:drawable="@drawable/btn_shape_after" android:state_pressed="true"></item>
</selector></span></span>

Step3:创建btn_shape.xml文件

<span style="font-size:10px;"><span style="font-size:10px;"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#FF72CAE1"/>
	<corners android:radius="10dp"/>
</shape></span></span>


Step4:创建btn_shape_after.xml

 

<span style="font-size:10px;"><span style="font-size:10px;"><?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#87cefa"/>
	<corners android:radius="10dp"/>
</shape></span></span>

Stem5:定义login.xml文件

2.activity_login.xml

<<span style="font-size:10px;">pre class="html" name="code"><span style="font-size:10px;"><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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".LoginActivity" 
    android:background="@drawable/btn_shape_before">

    <include 
        android:id="@+id/include1"
        layout="@layout/activity_top"/>

    <TextView
        android:id="@+id/forgetpassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignRight="@+id/include1"
        android:layout_below="@+id/include1"
        android:layout_marginTop="27dp"
        android:text="@string/forgetpassword"
         >

</span> <span style="font-size:10px;">       <requestFocus />
    </TextView>

	<ImageView
	    android:id="@+id/image1"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:layout_alignLeft="@+id/forgetpassword"
	    android:layout_alignParentBottom="true"
	    android:src="@drawable/monkey" />

</RelativeLayout>


</span></span>


 

3.建立activity_top.xml文件

<span style="font-size:10px;"><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="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".TopActivity" 
    android:background="@drawable/logintopbg">

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:orientation="vertical" >

        <EditText
            android:id="@+id/etname"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="@string/etname"
            android:background="@android:drawable/edit_text"
            android:drawableLeft="@drawable/icons_user_img" >

            <requestFocus />
        </EditText>

        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="30dp"
            android:ems="10"
            android:inputType="textPassword" 
            android:hint="@string/etpassword"
            android:background="@android:drawable/edit_text"
            android:drawableLeft="@drawable/icons_password_img"
            />
       <LinearLayout
        android:id="@+id/linearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:orientation="horizontal" >

           <Button
               android:id="@+id/btnlogin"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/btnlogin" 
               android:layout_weight="1"
               android:background="@drawable/btn_select"/>
      
           <Button
               android:id="@+id/btnzhure"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="@string/btnzhure" 
               android:layout_weight="1"
               android:background="@drawable/btn_select"
               android:layout_marginLeft="5dp"/>
      
    </LinearLayout>
        
    </LinearLayout>

   
</RelativeLayout></span>

Stpe6:建立LoginActivity文件

<span style="font-size:10px;">public class TopActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_top);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.top, menu);
		return true;
	}

}</span>

Stpe7:建立TopActivity文件

<span style="font-size:10px;">public class TopActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_top);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.top, menu);
		return true;
	}

}
</span>

通过以上这些操作就可以实现了。

 



 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值