設計android的登錄界面的方法:
UI實現的代碼如下:
1、背景設置圖片:
background_login.xml
<?xml?version="1.0"?encoding="utf-8"?>?
<shape?xmlns:android="/apk/res/android">?
<gradient
android:startColor="#FFACDAE5"?
android:endColor="#FF72CAE1"?
android:angle="45"?
/>?
</shape>
2、圓角白框
效果圖上面的並不是白框,其實框是白色的,只是設置了透明值,也是靠壹個xml文件實現的。 background_login_div.xml<?xml?version="1.0"?encoding="UTF-8"?>?
<shape?xmlns:android="/apk/res/android">?
<solid?android:color="#55FFFFFF"?/>?
<!--?設置圓角?
註意:?bottomRightRadius是左下角而不是右下角?bottomLeftRadius右下角-->?
<corners?android:topLeftRadius="10dp"?android:topRightRadius="10dp"?
android:bottomRightRadius="10dp"?android:bottomLeftRadius="10dp"/>?
</shape>?
3、界面布局:
login.xml<?xml?version="1.0"?encoding="utf-8"?>?
<LinearLayout?
xmlns:android="/apk/res/android"?
android:orientation="vertical"?
android:layout_width="fill_parent"?
android:layout_height="fill_parent"?
android:background="@drawable/background_login">?
<!--?padding?內邊距layout_margin?外邊距?
android:layout_alignParentTop?布局的位置是否處於頂部?-->?
<RelativeLayout
android:id="@+id/login_div"?
android:layout_width="fill_parent"?
android:layout_height="wrap_content"?
android:padding="15dip"?
android:layout_margin="15dip"
android:background="@drawable/background_login_div_bg"?>?
<!--?賬號?-->?
<TextView
android:id="@+id/login_user_input"?
android:layout_width="wrap_content"?
android:layout_height="wrap_content"?
android:layout_alignParentTop="true"?
android:layout_marginTop="5dp"?
android:text="@string/login_label_username"?
style="@style/normalText"/>?
<EditText
android:id="@+id/username_edit"?
android:layout_width="fill_parent"?
android:layout_height="wrap_content"?
android:hint="@string/login_username_hint"?
android:layout_below="@id/login_user_input"?
android:singleLine="true"?
android:inputType="text"/>?
<!--?密碼?text?-->?
<TextView
android:id="@+id/login_password_input"?
android:layout_width="wrap_content"?
android:layout_height="wrap_content"?
android:layout_below="@id/username_edit"?
android:layout_marginTop="3dp"?
android:text="@string/login_label_password"?
style="@style/normalText"/>?
<EditText
android:id="@+id/password_edit"?
android:layout_width="fill_parent"?
android:layout_height="wrap_content"?
android:layout_below="@id/login_password_input"?
android:password="true"?
android:singleLine="true"?
android:inputType="textPassword"?/>?
<!--?登錄button?-->?
<Button
android:id="@+id/signin_button"?
android:layout_width="wrap_content"?
android:layout_height="wrap_content"?
android:layout_below="@id/password_edit"?
android:layout_alignRight="@id/password_edit"?
android:text="@string/login_label_signin"?
android:background="@drawable/blue_button"?/>?
</RelativeLayout>?
<RelativeLayout
android:layout_width="fill_parent"?
android:layout_height="wrap_content"?>?
<TextView?android:id="@+id/register_link"? android:text="@string/login_register_link"? android:layout_width="wrap_content"? android:layout_height="wrap_content"? android:layout_marginLeft="15dp"? android:textColor="#888"? android:textColorLink="#FF0066CC"?/>?<ImageView?android:id="@+id/miniTwitter_logo"?
android:src="@drawable/cat"?
android:layout_width="wrap_content"?
android:layout_height="wrap_content"?
android:layout_alignParentRight="true"?
android:layout_alignParentBottom="true"?
android:layout_marginRight="25dp"?
android:layout_marginLeft="10dp"?
android:layout_marginBottom="25dp"?/>?
<ImageView?android:src="@drawable/logo"?
android:layout_width="wrap_content"?
android:layout_height="wrap_content"?
android:layout_toLeftOf="@id/miniTwitter_logo"?
android:layout_alignBottom="@id/miniTwitter_logo"?
android:paddingBottom="8dp"/>?
</RelativeLayout>?
</LinearLayout>?
4、java源代碼,Java源文件比較簡單,只是實例化Activity,去掉標題欄。
package?com.mytwitter.acitivity;?
import?android.app.Activity;?
import?android.os.Bundle;?
import?android.view.Window;?
public?class?LoginActivity?extends?Activity?{?
@Override?
public?void?onCreate(Bundle?savedInstanceState)?{?
super.onCreate(savedInstanceState);?
requestWindowFeature(Window.FEATURE_NO_TITLE);?
setContentView(R.layout.login);?
}?
} ?
5、實現效果如下:?