android 练习之路

Posted 2020-09-06 Qunter

项目的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:id="@+id/login_username"
            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:hint="帐号/手机号/邮箱"
            android:drawableRight="@drawable/id"
            android:drawablePadding="5dp"/>

        <EditText
            android:id="@+id/login_password"
            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: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="忘记密码"/>

    </LinearLayout>

</RelativeLayout>

 

大功告成了

话说今天感觉确实没做多少啊......但是上了大半天课，晚上还有事，也是很无奈