【必赢官方网站】说说如何实现这个界面的,从曝光的系统照片来看Android4.4采用全新的界面

 必赢游戏     |      2020-03-01 05:39

日前有国外网站曝光了Nexus5上Android4.4的操作系统界面。从曝光的系统照片来看Android4.4采用全新的界面。与之前的Android4.3相比,谷歌看来是想将扁平化的风格进行到底。

在2016年底写了一个小项目,登录界面一开始是自己随便写的,基本看得过去,也凑活能用,然后美工看了一眼,默默地回去做了一张登陆的图丢给我,看完美工的图,我对自己的审美产生了怀疑,,,

没有对比就没有伤害,所以我绝不会放出自己写的登录界面来对(diu)比(ren)。

在主页面,Android4.4系统功能键取消了黑底,并且中间有小点显示手机主屏数量,之前Andrioid4.3采用的是一条直线的显示方式。


在图标方面,Andrioid4.4对比之前的4.3版本也有微小变化,图标尺寸变大了一些,整体区域更趋向于扁平化风格。

登陆界面

先来看看登录界面写完的效果图

必赢官方网站 1

1 登录界面

必赢官方网站 2

2 监听editText,可以一键清空

必赢官方网站 3

3 checkBox的颜色统一

从安卓这次出现的界面图看,让人纷纷质疑Android4.4相比于Android4.3只是换了一层皮。当然了每次Android系统的升级都会带来功能方面更多的体验。这次的升级到现在还没有重磅消息推出,界面的曝光也只是给用户聊以安慰,只能寄希望于后续猛料的爆出,或者等到发布的正式消息,相信谷歌方面不会让粉丝们失望。

代码

下面,说说如何实现这个界面的,我将代码全部贴出来。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_login"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/logoScreenBackground">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/iv_icon"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="60dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_logo" />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="160dp"
        android:text="AlphaGo"
        android:textColor="#000"
        android:textSize="23sp"
        android:typeface="monospace" />

    <RelativeLayout
        android:id="@+id/rl_userName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_title"
        android:layout_marginTop="40dp"
        android:background="@drawable/rectangle_edittext">

        <ImageView
            android:id="@+id/iv_userIconName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:paddingBottom="15dp"
            android:paddingLeft="30dp"
            android:paddingTop="15dp"
            android:src="@mipmap/ic_edittextuname" />

        <View
            android:id="@+id/viewName"
            android:layout_width="1dip"
            android:layout_height="20dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@id/iv_userIconName"
            android:background="@color/colorCursor" />

        <EditText
            android:id="@+id/et_userName"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@id/viewName"
            android:background="@null"
            android:ems="19"
            android:hint="  用户名"
            android:textColorHint="@color/colorCursor"
            android:textCursorDrawable="@drawable/color_cursor"
            android:textSize="15sp" />

        <ImageView
            android:id="@+id/iv_unameClear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="20dp"
            android:src="@mipmap/ic_backspace_grey600_24dp"
            android:visibility="invisible" />

    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl_userPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/rl_userName"
        android:layout_marginTop="1dp"
        android:background="@drawable/rectangle_edittext">

        <ImageView
            android:id="@+id/iv_userIconPwd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:paddingBottom="15dp"
            android:paddingLeft="30dp"
            android:paddingTop="15dp"
            android:src="@mipmap/ic_edittextupwd" />

        <View
            android:id="@+id/viewPwd"
            android:layout_width="1dip"
            android:layout_height="20dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@id/iv_userIconPwd"
            android:background="@color/colorCursor" />

        <EditText
            android:id="@+id/et_password"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@id/viewPwd"
            android:background="@null"
            android:drawablePadding="5dp"
            android:ems="19"
            android:hint=" 密码"
            android:inputType="textPassword"
            android:textColorHint="@color/colorCursor"
            android:textCursorDrawable="@drawable/color_cursor"
            android:textSize="15sp" />

        <ImageView
            android:id="@+id/iv_pwdClear"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="20dp"
            android:src="@mipmap/ic_backspace_grey600_24dp"
            android:visibility="invisible" />

    </RelativeLayout>

    <CheckBox
        android:id="@+id/cb_checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/rl_userPassword"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="@null"
        android:checked="false"
        android:duplicateParentState="false"
        android:text="记住密码"
        android:textColor="#666666"
        android:textSize="15sp"
        app:buttonTint="@color/colorLoginButton" />

    <Button
        android:id="@+id/btn_login"
        android:layout_width="340dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/cb_checkbox"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:background="@drawable/round_corner_bg"
        android:gravity="center"
        android:padding="10dp"
        android:text="登录"
        android:textColor="#fff"
        android:textSize="18sp" />

</RelativeLayout>

按之前透露的消息,Andrioid4.4系统将会在年底前正式发布,率先获得升级的机型仍然是谷歌自己的Nexus系列设备。4399手机游戏会继续跟踪谷歌方面消息,欢迎大家继续关注哦!

几个重点的问题

从图中可以看出整个布局是从上到下的分布,那我们就按这样的顺讯来分析

  • 1.如何一张图片圆形化的展示出来
  • 2.整体输入框的布局(输入框中竖线的实现)
  • 3.监听edittext是否有输入
  • 4.将checkbox的颜色与界面统一

1.如何将一张图片圆形化的展示出来
我是用的是一个开源的项目CircleImageView,它可以用来轻松的实现图片的圆形化
首先在build.gradle中添加依赖compile 'de.hdodenhof:circleimageview:2.1.0'
在xml布局中用<de.hdodenhof.circleimageview.CircleImageView>来代替ImageView

  <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/iv_icon"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="60dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_logo" />

2.整体输入框的布局(输入框中竖线的实现)
整个输入框就是常规的ImageView加上textView实现的,分隔图片和提示文字的竖线,需要我们用view自己去写。

        <View
            android:id="@+id/viewPwd"
            android:layout_width="1dip"
            android:layout_height="20dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:layout_toRightOf="@id/iv_userIconPwd"
            android:background="@color/colorCursor" />

这样一条竖线就写好了,距离大小根据你的输入框去调就好。
在写editText的时候要想十分的简洁,需要将背景设置为"@null",自己去写一个"shape"

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <size android:width="1dp"/>
    <solid android:color="@color/colorCursor"/>
</shape>

"colorCursor"是自己界面的风格

3.监听EditText是否有输入
我先将代码贴出来

public class EditTextClearTools {
    public static void addClearListener(final EditText et , final ImageView iv){
        et.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {

            }

            @Override
            public void afterTextChanged(Editable s) {
                //如果有输入内容长度大于0那么显示clear按钮
                String str = s + "" ;
                if (s.length() > 0){
                    iv.setVisibility(View.VISIBLE);
                }else{
                    iv.setVisibility(View.INVISIBLE);
                }
            }
        });

        iv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                et.setText("");
            }
        });
    }

}

首先大家可以从布局中看出删除按钮默认是隐藏的android:visibility="invisible"
然后监听EditText的输入事件,输入的内容长度如果大于0,就将删除图标显示出来,并可以清空输入。
上面的代码是一个工具类参考这篇博客--AndroidMsky,这篇博客也写了一个登录的界面。
在程序中调用的代码:

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_logo_activty);
        init();
    }

    private void init(){
        EditText userName = (EditText) findViewById(R.id.et_userName);
        EditText password = (EditText) findViewById(R.id.et_password);
        ImageView unameClear = (ImageView) findViewById(R.id.iv_unameClear);
        ImageView pwdClear = (ImageView) findViewById(R.id.iv_pwdClear);

        EditTextClearTools.addClearListener(userName,unameClear);
        EditTextClearTools.addClearListener(password,pwdClear);
    }

以上就是个登录界面的整体实现,这里只是一个Demo级的例子,大家有更好的实现方法,可以多多交流
如有错误请您不吝赐教。

还有如果你看到这里了,很感谢你,读完我的文章,Android的路上又多了一个可以一起探讨和交流的伙伴。

如要转载请著名重余和原文的链接http://www.jianshu.com/p/56605c1427ea,谢谢。
项目地址:https://github.com/DongXUU/LoginDemo,大家可以下载完整的项目