设计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"?>
<TextViewandroid: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、实现效果如下:?