android登录界面,android登录界面布局

android怎么做动态的登陆界面

设计android的登录界面的方法：

UI实现的代码如下：

1、背景设置图片：

background_login.xml

?xml version="1.0" encoding="utf-8"?

shape xmlns: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=""  

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=""  

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、实现效果如下：

相关问答

Q1: App登录界面----布局篇

       我自学了3个月的Android基础，居然一个App都做不出来。在我之前学的同时居然忘记了之前学的内容。所以我现在重新开始复习，这篇文章将是我复习的开始也是基础的稳固，同时也是将来记不得了可以自我回顾的笔记。首先是从App登录开始。

       首先第一是布局，登录界面布局那就要用到控件，登录界面所需控件如下：

1.姓名     输入框   密码 输入框：就要有Textview文本控件 X 2， Editview输入文本框控件 X 2

2.立即注册  忘记密码 登录 ：就要有Button控件 X 3

既然要布局就要有布局控件：可以用RelativeLayout相对布局，LinearLayout线性布局，TableLayout表格布局，FrameLayout帧布局，AbsoluteLayout绝对布局。我要选用就就是前两个布局：RelativeLayout相对布局或者LinearLayout线性布局。

这就是我最终预想所要达到的效果：

首先打开布局文件：展开app---res---layout---activity_main.xml

切换到设计模式Design:

然后从调色板Palette就是控件库拖拽出所需控件:

2个Textview,2个Editview ,3个Button.一开始布局控件就是相对布局控件，RelativeLayout相对布局控件允许通过指定显示对象相对于父容器或其他兄弟控件的相对位置结合margin，padding来进行布局。

然后我们再切换回文本模式Text:

TextView

android:text="TextView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

/这就组成了一个控件。

再来解释解释RelativeLayout相对布局控件是啥意思：

上图所表现的意思就是RelativeLayout相对布局控件的特点：TextView文本控件基于父容器（RelativeLayout相对布局控件）之下，再看图：

它会自动添加默认属性：android:text="文本控件"//这是文本属性可以输入文字

android:textSize="50dp"//这是文本大小属性是控制text属性的大小

android:layout_width="wrap_content"//这是宽，选择的自适应屏幕

android:layout_height="wrap_content"这是高。

android:layout_marginTop="253dp"// 重点就在这里了：在RelativeLayout相对布局下拖出的控件会有这条属性，意思是TextView相距父容器253dp的距离

android:id="@+id/textView"

android:layout_alignParentTop="true"

android:layout_centerHorizontal="true"

好了我们继续：我写的这个布局呢？只用了两个EditView控件和三个Button控件。先说EditView控件。

拖拽出来改好了各种属性但是和我的不一样，哪里不一样？有边框，边框还是圆角。怎么弄的？这是改变了它的样式。首先目录找到drawable文件按下Alt+lns键，点击Drawable resource file

那就会弹出下面这个框框好创建资源文件，File name:这是资源文件的名字，Root element:这是需要创建什么类型的资源文件。

假如没有出现这个对话框而是另外的对话框就请更换模式

将Android 目录模式切换成Project目录模式

找到drawable文件重复上面操作就会出现

名字就自己取吧，类型选择shape文件

这就是我为EditView设置的资源文件，那么怎么加载它呢？

用背景background属性来加载：@drawable/border用@选择文件位置加载就成功了。

文本框就做好了。噢！！！等等还有个属性android:hint="登录"还没介绍，这是提示语：比如请输入用户名，请输入密码，这样的提示语，只起到提示作用。范例：android:hint="请输入用户名"

好吧依次类推，Button按钮也是这样。我们先来看忘记密码，立即注册两控件这两我没这样加载资源文件，我只用了3条属性，

android:background="@null"//这条意思是背景设置路径为空，作用是消除边框。

android:shadowColor="#338AFF"//改变按钮背景颜色，让它看起来和相对布局背景融为一体。

android:textColor="#0066CC"//改变文字颜色

怎么样是不是和QQ登录界面的差不多

那再来看立即登录按钮，这个按钮我用了三个资源文件，为了让按钮按下抬起有一个变色效果，能够反馈用户视觉：您已按下按钮。

首先看按下的资源文件：

这是按下的模样，radius是设置圆角，然后是按下后的颜色。

再来看抬起：

这是抬起时候的样子，圆角按下抬起都要设置一样，不然按下是一个样，抬起又是另一个样子，然后是抬起的颜色。

这是两个资源文件，如何让按钮呈现出按下抬起的不同效果呢？

就需要另一个资源文件来操控：selector资源文件

由他来控制这两个资源文件：

item/这是资源文件的标签，包括shape资源文件的：corners/solid/都是标签

标签item/里面

android:drawable="@drawable/clickroundedcolor"//是加载按下资源文件，

android:state_pressed="true"//true就是对，就是一个判断作用，判断是否按下，按下就加载按下的资源文件

然后再一个子标签item/

item android:drawable="@drawable/roundedcolor"/也就是说当上面pressed不为true的时候执行下面这个标签加载抬起状态的效果。

这就做成了按下深蓝抬起浅蓝的颜色效果。那今天就到这里，复习到了什么Editview Button控件的使用然后在原来的基础上学到了EditView 和Button控件的UI设计一些细节效果。

还熟悉了Android studio。之前用Eclipse学习的Android,现在改用AS还特别不习惯，希望复习后我会熟练Android studio。恩，还有看到忘记密码，立即注册两个按钮是不是还会联想到还有两个布局。没错，忘记密码和立即注册这两个布局文件，就不用记录了，相信会了登录主界面布局，其他两个不在话下。

Q2: 如何设计android的登录界面

在网上在到一个登录界面感觉挺不错的，给大家分享一下~先看效果图：

这个Demo除了按钮、小猫和Logo是图片素材之外，其余的UI都是通过代码实现的。

?

一、背景

背景蓝色渐变，是通过一个xml文件来设置的。代码如下：

background_login.xml

?xml version="1.0" encoding="utf-8"?

shape xmlns:andro

gradient

android:startColor="#FFACDAE5"

android:endColor="#FF72CAE1"

android:angle="45"

/

/shape

startColor是渐变开始的颜色值，endColor是渐变结束的颜色值，angle是渐变的角度。其中#FFACDAE5中，FF是Alpha值，AC是RGB的R值，DA是RGB的G值，E5是RGB的B值，每个值在00~FF取值，即透明度、红、绿、蓝有0~255的分值，像要设置具体的颜色，可以在PS上的取色器上查看设置。

?

?

二、圆角白框

效果图上面的并不是白框，其实框是白色的，只是设置了透明值，也是靠一个xml文件实现的。

background_login_div.xml

?xml version="1.0" encoding="UTF-8"?

shape xmlns:andro

solid android:color="#55FFFFFF" /

!-- 设置圆角

注意： bottomRightRadius是左下角而不是右下角  bottomLeftRadius右下角--

corners android:topLeftRadius="10dp" android:topRightRadius="10dp"

android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp"/

/shape

?

三、界面的布局

界面的布局挺简单的，就直接贴代码啦~

login.xml

?xml version="1.0" encoding="utf-8"?

LinearLayout

   xmlns:andro

   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:

     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:

  android:layout_width="wrap_content"

  android:layout_height="wrap_content"

  android:layout_alignParentTop="true"

  android:layout_marginTop="5dp"

  android:text="@string/login_label_username"

  /

  EditText

  android:

  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:

    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"

    /

   EditText

    android:

    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:

    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:

    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:

   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