登录界面与Android软键盘显示、隐藏的交互设计

在我们的Android应用中最常与Android的软键盘打交道的要属登录界面了，下面是本人感觉比较好的几个登录界面如下

1，微信

2，糗百

以上两个都是弹出软键盘之后布局上没什么变化的，也就是巧用布局正好登录的按钮不被软键盘挡到，假如我们的UI是登录按钮被挡到的情况下我们该如何处理呢？

3，陌陌

这种交互我个人感觉是很良好的。

那么这块布局是怎么处理的呢？登录页面的布局如下

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="fill_parent"
 4     android:layout_height="fill_parent"
 5     android:background="@color/white" >
 6 
 7     <LinearLayout
 8         android:id="@+id/layout_header"
 9         android:layout_width="fill_parent"
10         android:layout_height="wrap_content"
11         android:layout_alignParentTop="true"
12         android:background="@drawable/bg_topbar"
13         android:focusable="true" />
14 
15     <LinearLayout
16         android:id="@+id/layout_content"
17         android:layout_width="fill_parent"
18         android:layout_height="fill_parent"
19         android:layout_below="@+id/layout_header"
20         android:orientation="vertical" >
21 
22         <ScrollView
23             android:layout_width="fill_parent"
24             android:layout_height="fill_parent"
25             android:layout_weight="1.0"
26             android:scrollbars="vertical" >
27 
28             <LinearLayout
29                 android:layout_width="fill_parent"
30                 android:layout_height="fill_parent"
31                 android:orientation="vertical"
32                 android:paddingLeft="10.0dip"
33                 android:paddingRight="10.0dip"
34                 android:paddingTop="15.0dip" >
35 
36                 <EditText
37                     android:id="@+id/login_et_momoid"
38                     android:layout_width="fill_parent"
39                     android:layout_height="wrap_content"
40                     android:layout_marginBottom="8.0dip"
41                     android:background="@drawable/edittext_default"
42                     android:inputType="text"
43                     android:singleLine="true" />
44 
45                 <EditText
46                     android:id="@+id/login_et_pwd"
47                     android:layout_width="fill_parent"
48                     android:layout_height="wrap_content"
49                     android:layout_marginBottom="8.0dip"
50                     android:background="@drawable/edittext_default"
51                     android:imeOptions="actionDone"
52                     android:inputType="textPassword"
53                     android:singleLine="true" />
54 
55                 <TextView
56                     android:id="@+id/login_tv_forgotpassword"
57                     android:layout_width="wrap_content"
58                     android:layout_height="wrap_content"
59                     android:clickable="true"
60                     android:text="忘记密码？"
61                     android:textSize="16.0sp" />
62             </LinearLayout>
63         </ScrollView>
64 
65         <RelativeLayout style="@style/Style_BottomBar" >
66 
67             <Button
68                 android:id="@+id/btn_back"
69                 style="@style/Style_Login_register_btn"
70                 android:layout_width="wrap_content"
71                 android:layout_height="wrap_content"
72                 android:layout_alignParentLeft="true"
73                 android:text="返回" />
74 
75             <Button
76                 android:id="@+id/btn_ok"
77                 style="@style/Style_Login_register_btn"
78                 android:layout_width="wrap_content"
79                 android:layout_height="wrap_content"
80                 android:layout_alignParentRight="true"
81                 android:text="登录" />
82         </RelativeLayout>
83     </LinearLayout>
84 
85     <ImageView
86         android:id="@+id/layout_shadow"
87         android:layout_width="fill_parent"
88         android:layout_height="wrap_content"
89         android:layout_below="@id/layout_header"
90         android:background="@drawable/bg_topbar_shadow"
91         android:focusable="false" />
92 
93 </RelativeLayout>

 下面附上代码下载地址：http://115.com/file/bev90tpb#Imomo.zip

posted on 2012-07-24 11:26  oasis2008  阅读(2936)  评论(0)  编辑  收藏  举报

导航