Design Support Library是在Google I/O2015上发布的一个全新兼容函数库,主要包括:
- Snackbar
- TextInputLayout
- TabLayout
- FloatingActionButton
- Navigation View
首先看下使用TextInputLayout的效果
- 加入依赖
compile 'com.android.support:design:26.0.0-alpha1'
- 使用TextInputLayout包含一个EditTextView控件
<android.support.design.widget.TextInputLayout
android:id="@+id/un_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
app:errorEnabled="true"
app:errorTextAppearance="@style/TextAppearance.Design.Error">
<EditText
android:id="@+id/et_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入用户名"
android:textSize="14sp" />
</android.support.design.widget.TextInputLayout>
- 完整的布局文件代码
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
tools:context="com.tlkg.welcome.textinputlayoutdemo.MainActivity">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:focusable="true"
android:focusableInTouchMode="true" />
<android.support.design.widget.TextInputLayout
android:id="@+id/un_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="40dp"
app:errorEnabled="true"
app:errorTextAppearance="@style/TextAppearance.Design.Error">
<EditText
android:id="@+id/et_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入用户名"
android:textSize="14sp" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/ps_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/un_input_layout"
app:errorEnabled="true"
app:errorTextAppearance="@style/TextAppearance.Design.Error">
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入密码"
android:inputType="textPassword"
android:textSize="14sp" />
</android.support.design.widget.TextInputLayout>
<Button
android:id="@+id/btn_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/ps_input_layout"
android:enabled="false"
android:text="登 录" />
<ProgressBar
android:id="@+id/pb_loading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/btn_login"
android:layout_centerHorizontal="true"
android:visibility="gone" />
</RelativeLayout>
- MainActivity代码
public class MainActivity extends AppCompatActivity implements TextWatcher, View.OnClickListener {
private TextInputLayout unInputLayout, psInputLayout;
private EditText etUserName, etPassWord;
private Button btnLogin;
private ProgressBar pbLoading;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
initEvent();
}
private void initViews() {
unInputLayout = (TextInputLayout) findViewById(R.id.un_input_layout);
psInputLayout = (TextInputLayout) findViewById(R.id.ps_input_layout);
etUserName = (EditText) findViewById(R.id.et_username);
etPassWord = (EditText) findViewById(R.id.et_password);
btnLogin = (Button) findViewById(R.id.btn_login);
pbLoading = (ProgressBar) findViewById(R.id.pb_loading);
}
private void initEvent() {
etUserName.postDelayed(new Runnable() {
@Override
public void run() {
etUserName.requestFocus();//延时获取焦点
}
}, 1000);
etUserName.addTextChangedListener(this);
etPassWord.addTextChangedListener(this);
btnLogin.setOnClickListener(this);
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
unInputLayout.setError("");
}
@Override
public void afterTextChanged(Editable s) {
String userName = etUserName.getText().toString();
String passWord = etPassWord.getText().toString();
if (TextUtils.isEmpty(userName) || TextUtils.isEmpty(passWord)) {
btnLogin.setEnabled(false);
return;
}
btnLogin.setEnabled(true);
}
@Override
public void onClick(View v) {
final String userName = etUserName.getText().toString();
final String passWord = etPassWord.getText().toString();
hideKeyboard();
pbLoading.setVisibility(View.VISIBLE);
new Thread(new Runnable() {
@Override
public void run() {
SystemClock.sleep(2000);
runOnUiThread(new Runnable() {
@Override
public void run() {
pbLoading.setVisibility(View.GONE);
if ("admin".equals(userName) && "12345".equals(passWord)) {
Toast.makeText(MainActivity.this, "登录成功", Toast.LENGTH_SHORT).show();
} else {
unInputLayout.setError("用户名或密码错误");
}
}
});
}
}).start();
}
/**
* 隐藏键盘
*/
private void hideKeyboard() {
if (getCurrentFocus() != null) {
((InputMethodManager) getSystemService(INPUT_METHOD_SERVICE)).
hideSoftInputFromWindow(getCurrentFocus().getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
}
}
}
首先在initViews()方法findViewById绑定控件,然后在initEvent()方法在设置监听事件,当etUserName和etPassWord控件都输入内容的时候,将登录按钮设置为可用,点击登录按钮时,模拟显示加载圈,延时2s,显示结果,这里模拟用户名是admin,密码是12345,当输入结果正确时,显示登录成功。