项目的 github 地址:https://github.com/Qunter/SearchAndCall
------------------------------------------------------------------------
今天课确实有点多了,今天就把登录页面做一下吧,反正 button 的样式定义好了,背景图片找到了之后做注册页面也很快,明天就把注册页面做完以及把对应功能实现
改还是在之前建的那个 activity_login 里改
最后实现的效果大致是这样
从按钮开始说吧,首先得有一个 shape 来定义,让他变成圆角按钮
shape_button.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android">
- <solid android:color="#00ff00ff"/>
- <corners android:radius="8px"/>
- <stroke android:color="#ffffff"
- android:width="2px"/>
- </shape>
solid 里的 color 其实啥颜色不重要,主要是前面的 00,让它变成透明的
然后要实现波纹效果,于是就有了
ripple_button.xml
- <?xml version="1.0" encoding="utf-8"?>
- <ripple xmlns:android="http://schemas.android.com/apk/res/android"
- android:color="#FF21272B">
- <item>
- <shape android:shape="rectangle">
- <solid android:color="#0099FF" />
- <corners android:radius="10dp" />
- </shape>
- </item>
- <item android:drawable="@drawable/shape_button" />
- </ripple>
然后只需要在 button 里的 background 里引用这个 ripple_button 就行了
之后这些控件的那个白色的底色色块,我们用一个 LinearLayout 来实现,还是定义一个 shape,不过这次不用做透明色
background_white.xml
- <?xml version="1.0" encoding="utf-8"?>
- <shape xmlns:android="http://schemas.android.com/apk/res/android"
- android:shape="rectangle">
- <solid
- android:color="#ffffff"/>
- <corners
- android:radius="8dp"/>
- </shape>
最后在 activity_login 里使用一下
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:background="@drawable/background">
- <ImageView
- android:layout_width="200dp"
- android:layout_height="wrap_content"
- android:src="@drawable/backgroundlogo"
- android:id="@+id/imageView"
- android:layout_marginTop="50dp"
- android:layout_alignParentTop="true"
- android:layout_centerHorizontal="true" />
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="170dp"
- android:background="@drawable/background_white"
- android:orientation="vertical"
- android:layout_marginLeft="16dp"
- android:layout_marginRight="16dp">
- <EditText
- android:layout_width="match_parent"
- android:layout_height="50dp"
- android:layout_marginTop="20dp"
- android:layout_marginLeft="16dp"
- android:layout_marginRight="16dp"
- android:id="@+id/login_account"
- android:singleLine="true"
- android:hint="帐号/手机号/邮箱"
- android:drawableRight="@drawable/id"
- android:drawablePadding="5dp"/>
- <EditText
- android:layout_width="match_parent"
- android:layout_height="50dp"
- android:layout_marginTop="20dp"
- android:layout_marginLeft="16dp"
- android:layout_marginRight="16dp"
- android:singleLine="true"
- android:id="@+id/login_password"
- android:drawableRight="@drawable/password"
- android:drawablePadding="5dp"
- android:inputType="textPassword"
- android:hint="登录密码"/>
- <Button
- android:layout_width="match_parent"
- android:layout_height="40dp"
- android:layout_marginTop="20dp"
- android:layout_marginLeft="16dp"
- android:layout_marginRight="16dp"
- android:background="@drawable/ripple_button"
- android:textColor="#ffffff"
- android:text="登录"/>
- <Button
- android:layout_width="match_parent"
- android:layout_height="40dp"
- android:layout_marginTop="20dp"
- android:layout_marginLeft="16dp"
- android:layout_marginRight="16dp"
- android:background="@drawable/ripple_button"
- android:textColor="#ffffff"
- android:text="注册"/>
- <Button
- android:layout_width="match_parent"
- android:layout_height="40dp"
- android:layout_marginTop="16dp"
- android:layout_marginLeft="16dp"
- android:layout_marginRight="16dp"
- android:layout_marginBottom="16dp"
- android:background="@null"
- android:textColor="#0099ff"
- android:text="忘记密码"
- android:id="@+id/button" />
- </LinearLayout>
- </RelativeLayout>
大功告成了
话说今天感觉确实没做多少啊...... 但是上了大半天课,晚上还有事,也是很无奈
来源: http://www.bubuko.com/infodetail-1991679.html