开发者社区> 操张林> 正文

仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)

简介: 在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的缺陷,手指和鼠标箭头最大的区别是在于前者有温度和感觉的,这时候Material Design应运而生。
+关注继续查看

在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的缺陷,手指和鼠标箭头最大的区别是在于前者有温度和感觉的,这时候Material Design应运而生。

关于Material Design,材料设计你大概已经知道了,它介于拟物于扁平(qq,旺旺PC端应用)之间的设计。Material Design有着自己的目标,不仅仅为了好看整体而已,它要让不同设备的屏幕表现出一直、美观的视觉体验以及交互。主要包括的控件有TabLayout、TextInputLayout、SwitchCompat、Card、SnackBar、BottomSheet、Shadows、FloatingActionButton、RecycleView、NavigationView....

之前知乎app的登录界面好像是这个效果。这里我们就来体验一下TextInputLayout的具体效果:最终的效果图(在真机上有一定差距)如下:


这篇文章主要分为以下几个部分

  1. 首先通过nuget引入xamarin.android.design.widget 
  2. TextInputLayout布局
  3. TextInputLayout文本框样式修改
  4. 通过单击事件验证TextInputLayout文本框错误的提示

nuget引入xamarin.android.design.widget 

TextInputLayout是设计兼容包下的内容,Material Design仅支持android5.0及以上版本,当V7 AppCompat结合使用才能兼容到android2.1。在引入design包时将自动引入V7兼容包,就是引入Design即可如图:

TextInputLayout布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
     android:background="@color/color_primary">
  <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingTop="30dp"
    android:paddingLeft="40dp"
    android:paddingRight="40dp">
    <TextView
      android:id="@+id/tvTitle"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_alignParentTop="true"
      android:layout_marginBottom="50dp"
      android:gravity="center"
      android:text="登录"
      android:textSize="40sp"
      android:textColor="@color/color_white"/>
  <android.support.design.widget.TextInputLayout
    android:id="@+id/userNameContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@id/tvTitle"
    android:layout_marginTop="4dp">
    <EditText
      android:layout_width="match_parent"
      android:layout_height="50dp"
      android:id="@+id/userName"
      android:inputType="textPassword"
      android:textColor="@color/color_white"
      android:textColorHint="@color/color_dedede"
      android:hint="userName"/>
  </android.support.design.widget.TextInputLayout>
    
  <android.support.design.widget.TextInputLayout
    android:id="@+id/passWordContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="4dp"
    android:layout_below="@id/userNameContainer">
    <EditText
      android:layout_width="match_parent"
      android:layout_height="50dp"
      android:id="@+id/passWord"
      android:inputType="textPassword"
      android:textColor="@color/color_white"
      android:hint="Password"/>
  </android.support.design.widget.TextInputLayout>
  <Button
    android:id="@+id/MyButton"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:layout_below="@id/passWordContainer"
    android:text="@string/Hello"/>
  </RelativeLayout>
</LinearLayout>

注意的是TextInputLayout内只能放TextView控件,并且不能单独使用,只用布局就可以实现这种获取焦点hint上滑的动画效果。当然这和你的界面要求还是有一定差距的,所以这TextView的一些样式还需要自定义。

TextInputLayout文本框样式修改

上面布局的代码中可以发现,属性textColorHint 并没有效果,在style中设置才有效果。看一下Theme
  <style  name="MyTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorAccent">#ffffff</item>
    <item name="android:textColorHint">@color/color_dedede</item>
    <item name="colorControlNormal">@color/color_dedede</item> 
    <item name="colorControlActivated">@color/color_white</item>
  </style>

?colorAccent 是哪里的颜色?是系统特定内容的颜色,类似的颜色statusBarColor、windowBackground,看这张图你就明白了

文本没有获取焦点的文字颜色:android:textColorHint
下划线没有获取焦点的颜色:colorControlNormal
下划线获取焦点的颜色:colorControlActivated
TextInputLayout取值:不需要通过获取TextView这样的string userNameText = userName.EditText.Text;

通过事件验证TextInputLayout文本框错误的提示

在客户端必须的做字段的验证,所以我们通过TextView的TextChanged事件和FoucsChange事件来看看。
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            SetContentView(Resource.Layout.Main);
            TextInputLayout userName = FindViewById<TextInputLayout>(Resource.Id.userNameContainer);
            TextInputLayout passWord= FindViewById<TextInputLayout>(Resource.Id.passWordContainer);
            passWord.EditText.TextChanged += (s, e) =>
            {
                System.Diagnostics.Debug.WriteLine(e.Start);
                System.Diagnostics.Debug.WriteLine(e.Text);
                if (e.Start > 8)
                {
                    passWord.ErrorEnabled = true;
                    passWord.Error = "密码不能大于8位";
                }
                else
                {
                    passWord.ErrorEnabled = false;
                }
            };
            userName.EditText.FocusChange += (s, e) =>
            {
                if (!e.HasFocus)
                {
                    if (ValidateTel(userName.EditText.Text))
                    {
                        userName.ErrorEnabled = false;
                    }
                    else
                    {
                         userName.ErrorEnabled = true;
                        userName.Error = "userName不正确";
                    }
                }
            };
        }
        private bool ValidateTel(string tel)
        {
            string matchReg = "^1[3|4|5|7|8][0-9]{9}$";
            return System.Text.RegularExpressions.Regex.IsMatch(tel,matchReg);
        }
虽然你也可以在TextInputLayout自带的属性带实现这个效果,那样太死板了。如果你真的要写在Xml文件里你可以这样的,首先在根布局中添加   xmlns:app="http://schemas.android.com/apk/res-auto" 使用自带控件的属性。常见的属性:
app:errorEnabled="true"
app:counterEnabled="true"
app:counterMaxLength="4"
app:counterTextAppearance="@style/style1" 默认的文本框颜色和大小
app:counterOverflowTextAppearance="@style/style1" 超出计数默认的文本框颜色和大小。还有一些样式也可以通过TextInputlayout自带的属性设置

作者:张林

标题:仿知乎app登录界面(Material Design设计框架拿来就用TexnInputLayout

原文地址:http : //blog.csdn.net/kebi007/article/details/70470754

转载随意注明出处


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《精通react/vue组件设计》之用纯css打造类materialUI的按钮点击动画并封装成react组件
作为一个前端框架的重度使用者,在技术选型上也会非常注意其生态和完整性.笔者先后开发过基于vue,react,angular等框架的项目,碧如vue生态的elementUI, ant-design-vue, iView等成熟的UI框架, react生态的ant-design, materialUI等,这些第三方UI框架极大的降低了我们开发一个项目的成本和复杂度,使开发者更专注于实现业务逻辑和服务化. 但随着对用户体验的越来越重视,对交互体验要求的提高以及css3等新标准的出现,使得web更加大放异彩, 各种动效的实现都变得非常容易.笔者在研究materialUI框架时对于它的交互及其赞叹.所以为
15 0
仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)
在我脑子里还没有Material Design这种概念,就我个人而言,PC端应用扁平化设计必须成为首选,手当其冲的两款即时通讯旺旺和QQ早就完成UI扁平化的更新,然而客户端扁平化的设计本身就存在天生的缺陷,手指和鼠标箭头最大的区别是在于前者有温度和感觉的,这时候Material Design应运而生。
1387 0
Material Design设计的开源代码
https://github.com/telly/FloatingAction http://www.csdn.net/article/2014-11-21/2822753-material-design-libs/1 android 属性动画的开源代码: http://www.
478 0
相亲交友app开发,不同登录方式的实现要点
相亲交友app开发,不同登录方式的实现要点
33 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
13862 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18989 0
uni-app 中保持用户登录状态
在应用中保持登录状态是一个应用常见的需求,本文简单介绍下在 uni-app 中如何保存用户登录状态。 简介 uni-app 中不支持读写 cookie,所以不能如传统的应用那样通过读取 cookie 来判断是否是登录状态。
11588 0
介绍一个Material设计风格的Chrome开发者工具增强扩展
介绍一个Material设计风格的Chrome开发者工具增强扩展
33 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
25229 0
一款基于Material Desgin设计的APP
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/50413625 源码小编已经上传到github上了,求star啊 https://github.
851 0
+关注
63
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载