在我脑子里还没有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的具体效果:最终的效果图(在真机上有一定差距)如下:
这篇文章主要分为以下几个部分
- 首先通过nuget引入xamarin.android.design.widget
- TextInputLayout布局
- TextInputLayout文本框样式修改
- 通过单击事件验证TextInputLayout文本框错误的提示
nuget引入xamarin.android.design.widget
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文本框样式修改
<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
通过事件验证TextInputLayout文本框错误的提示
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:counterEnabled="true"
app:counterMaxLength="4"
作者:张林
标题:仿知乎app登录界面(Material Design设计框架拿来就用TexnInputLayout
原文地址:http : //blog.csdn.net/kebi007/article/details/70470754
转载随意注明出处
仿知乎app登录界面(Material Design设计框架拿来就用的TexnInputLayout)的更多相关文章
-
Android Material Design-Creating Apps with Material Design(用 Material Design设计App)-(零)
转载请注明出处:http://blog.csdn.net/bbld_/article/details/40400031 翻译自:http://developer.android.com/trainin ...
-
超实用!9个目前流行的MATERIAL DESIGN前端框架
http://www.uisdc.com/material-design-frameworks-top-9 谷歌推出的Material Design风格已见有一些APP UI采用,视觉和交互体验都很棒 ...
-
轻量级 Material Design 前端框架 MDUI (纯html,css,与css框架跟react vue不冲突)
MDUI 是一个轻量级的 Material Design 前端框架,对照着 Material Design 文档进行开发,争取 1:1 实现 Material Design 中的组件. 多主题支持 M ...
-
用户登录(Material Design + Data-Binding + MVP架构模式)实现
转载请注明出处: http://www.cnblogs.com/cnwutianhao/p/6772759.html MVP架构模式 大家都不陌生,Google 也给出过相应的参考 Sample, 但 ...
-
Android 使用Toolbar+DrawerLayout快速实现仿“知乎APP”侧滑导航效果
在以前,做策划导航的时候,最常用的组件便是SlidingMenu了,当初第一次用它的时候觉得那个惊艳啊,体验可以说是非常棒. 后来,Android自己推出了一个可以实现策划导航的组件DrawerLay ...
-
Android 仿 窗帘效果 和 登录界面拖动效果 (Scroller类的应用) 附 2个DEMO及源码
在android学习中,动作交互是软件中重要的一部分,其中的Scroller就是提供了拖动效果的类,在网上,比如说一些Launcher实现滑屏都可以通过这个类去实现.下面要说的就是上次Scroller ...
-
Android 仿 窗帘效果 和 登录界面拖动效果 (Scroller类的应用) 附 2个DEMO及源代码
在android学习中,动作交互是软件中重要的一部分.当中的Scroller就是提供了拖动效果的类,在网上.比方说一些Launcher实现滑屏都能够通过这个类去实现.以下要说的就是上次Scroller ...
-
Material UI – Material Design CSS 框架
Material Design 是谷歌推出的全新的设计理念,采用大胆的色彩.流畅的动画播放,以及卡片式的简洁设计.Material Design 风格的设计拥有干净的排版和简单的布局,容易理解,内容才 ...
-
.Net语言 APP开发平台——Smobiler学习日志:仿12306的APP登陆界面
最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便 一.目标样式 我们要实现上图中的效果,需要如下的操作: 1.从工具栏上的”Smobil ...
随机推荐
-
Android真机调试 Android.Util.AndroidRuntimeException: You cannot combine custom titles with other title features
参考连接:http://blog.csdn.net/scyatcs/article/details/9003285 Android.Util.AndroidRuntimeException: You ...
-
Kindle DXG和Win10 64bits无法连接的问题
直入主题:换根数据线. 不要觉得答案简单,我就是不负责任的在调侃. 在得出这条答案之前,我的思路是,既然插上线以后,kindle的充电指示灯会亮,那就应该不是线的问题. 所以实际的过程是我安装了驱动之 ...
-
UML-用例图
用例图是指由参与者.用例以及它们之间的关系构成的用于描述系统功能的视图.用例图是被称为参与者的外部用户所能观察到的系统功能的模型图,呈现了一些参与者和一些用例,以及它们之间的关系,主要用于对系统.子系 ...
-
POJ 2393 贪心 简单题
有一家生产酸奶的公司,连续n周,每周需要出货numi的单位,已经知道每一周生产单位酸奶的价格ci,并且,酸奶可以提前生产,但是存储费用是一周一单位s费用,问最少的花费. 对于要出货的酸奶,要不这一周生 ...
-
2876: [Noi2012]骑行川藏 - BZOJ
Description 蛋蛋非常热衷于挑战自我,今年暑假他准备沿川藏线骑着自行车从成都前往拉萨.川藏线的沿途有着非常美丽的风景,但在这一路上也有着很多的艰难险阻,路况变化多端,而蛋蛋的体力十分有限,因 ...
-
ios UIWebview本地加载H5网页
注意两点 1.拖动文件到工程中选择create folder,文件夹为蓝色 --不要让文件参与编译,而只是让文件加入进来 2.加载方式pathforresorth oftype indire ...
-
C++ 知识点1
typedef的陷阱 严格来说typedef并不是定义别名,而是定义类型,比如typedef int a;按照大部分书本说来,就是把a看做int,这种说法初学看来是正确的,也易于理解,但是遇到type ...
-
listener.ora
EOF YESTERDAY=`cat /database/log/tns_log/yesterday.out` TODAY=`date '+%d-%b-%Y'` echo $YESTERDAY $T ...
-
python一键刷屏
#当按键q的时候,自动输入 "大家好!"并回车键发送! from pynput import keyboard from pynput.keyboard import Key, C ...
-
[转]使用nodejs-koa2-mysql-sequelize-jwt 实现项目api接口
本文转自:https://blog.csdn.net/yibowanbo/article/details/80521849 nodejs-koa2-mysql-sequelize-jwt技术栈:nod ...