成语大全网 - 汉语词典 - android怎么做动态的登陆界面

android怎么做动态的登陆界面

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