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

来源：互联网发布：知乎新房床选购编辑：程序博客网时间：2024/05/22 11:42

实战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 {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_top);}@Overridepublic 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 {@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_top);}@Overridepublic 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>

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

0 0