Android Design Library之一

使用Design包后,瞬间感觉自己APP逼格高了呢。妈妈再也不用担心我个人APP设计丑了。

Snackbar

Snackbar可以很方便的替换Toast。实现一种更优雅的轻量级提示功能。而且还可以设置Action。在同一时间,只能有一个Snackbar在界面上显示。下面来看下怎么使用:

1
Snackbar.make(mView, "hello Magicer", Snackbar.LENGTH_SHORT).show();

简单的一行代码,跟Toast一样。我们还可以通过设置Action来实现轻量级的交互。

1
2
3
4
5
6
7
Snackbar.make(mView, "hello Magicer", Snackbar.LENGTH_SHORT)
.setAction("ok", new View.OnClickListener() {
@Override
public void onClick(View v) {
//点击事件
}
}).show();

不过这个时候,可能你会发现,Snackbar出现的时间太短了,可能来不及点。没有关系。只需要将Snackbar.LENGTH_SHORT换成Snackbar.LENGTH_INDEFINITE
有时候我们需要跟APP设计风格匹配更换其他背景颜色。这个时候也很简单。

1
2
3
4
5
6
7
8
9
10
11
12
Snackbar snackbar = Snackbar.make(mView, "hello Magicer", Snackbar.LENGTH_INDEFINITE)
.setAction("ok", new View.OnClickListener() {
@Override
public void onClick(View v) {
//点击事件
}
});
//更改Snackbar背景颜色
snackbar.getView().setBackgroundColor(Color.parseColor("#009688"));
//设置Action文字的颜色
snackbar.setActionTextColor(Color.parseColor("#9E9E9E"));
snackbar.show();

TextInputLayout

TextInputLayout做为EditText的父容器使用,当用户输入内容的时候,hint会移动到上方。
使用方法很简单。看下代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<android.support.design.widget.TextInputLayout
android:id="@+id/til_username"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="@+id/et_username"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="Username"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="@+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterMaxLength="4"
app:counterTextAppearance="@style/counter"
app:counterOverflowTextAppearance="@style/counter_over"
app:passwordToggleEnabled="true">
<EditText
android:id="@+id/et_password"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="Password"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
1
2
3
4
5
6
<style name="counter">
<item name="android:textColor">@color/color_teal</item>
</style>
<style name="counter_over">
<item name="android:textColor">@color/color_red</item>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
mEtUsername.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) {
if (s.length() <5){
mTilUsername.setError("最少5个字符");
mTilUsername.setErrorEnabled(true);
}else {
mTilUsername.setErrorEnabled(false);
}
}
@Override
public void afterTextChanged(Editable s) {
}
});

FloatingActionButton

来看下FloatingActionButton的集成关系

clipboard.png

在来个简单使用的例子

1
2
3
4
5
6
7
8
9
<android.support.design.widget.FloatingActionButton
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_margin="20dp"
app:elevation="2dp"
app:fabSize="normal"
android:src="@drawable/ic_delete_white_36dp"/>

好了。这货就说这些吧。没什么好些的。详细的方法讲解就看文档呗,没啥好说的。

TabLayout

在使用TabLayout的时候,很多时候都是跟ViewPager结合使用。看下结合后的简单例子。

clipboard.png

其实实现这种效果也很简单,用不几行代码就搞定了。
看下布局文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="#00BCD4"
app:tabGravity="fill"
app:tabIndicatorColor="#009688"
app:tabIndicatorHeight="5dp"
app:tabMode="fixed"
app:tabSelectedTextColor="#F44336"
app:tabTextColor="#FFFFFF"/>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>

其中TabLayout的几个属性的意思为:

  • tabGravity:有两个值:fill表示tab充满屏幕,每个tab均分宽度,center表示根据默认的宽度,tab显示在屏幕中间
    例如这样clipboard.png

  • tabIndicatorColor:表示tab底部的指示器的颜色。

  • tabIndicatorHeight: 表示指示器的高度
  • tabMode: 有两个值:scrollable表示当tab多了之后可以滚动。fixed宽度固定
    当数量为9个时fixed会显示成clipboard.png 而为scrollable会显示成clipboard.png
    详细的方法属性等请看TabLayout官方文档

其他部分代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_tab_layout);
ButterKnife.bind(this);
init();
mAdapter = new ImagePageAdapter(mViews);
mViewPager.setAdapter(mAdapter);
mTabLayout.setupWithViewPager(mViewPager);
}
private void init() {
mViews = new ArrayList<>();
LayoutInflater inflater = LayoutInflater.from(this);
for (int i = 0; i < 9; i++) {
ImageView view = (ImageView) inflater.inflate(R.layout.item_tab, null);
view.setImageResource(R.mipmap.ic_launcher);
mViews.add(view);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
public class ImagePageAdapter extends PagerAdapter {
private List<View> mViews;
public ImagePageAdapter(@NonNull List<View> views) {
mViews = views;
}
@Override
public int getCount() {
return mViews.size();
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
container.addView(mViews.get(position));
return mViews.get(position);
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(mViews.get(position));
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
@Override
public CharSequence getPageTitle(int position) {
return "TAB"+position;
}
}