实战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>
通过以上这些操作就可以实现了。