本篇大部分内容学习自第一行代码第二版加上部分自己理解。介绍了,Snakebar、FloatingActionButton、CoordinateLayout、ToolBar四个控件,会的请自行跳过。
首先需要在build.gradle中依赖:
implementation 'com.android.support:design:28.0.0'
1.Snackbar
我感觉是一个增强版的Toast,可以实现Toast的功能的基础上增加了与用户的交互事件,效果如下:
使用方法:
xml布局:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:id="@+id/root"
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"
tools:context=".Main2Activity">
</FrameLayout>
java代码:
public class Main2Activity extends AppCompatActivity {
@BindView(R.id.root)
FrameLayout root;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
ButterKnife.bind(this);
//基本使用方法与Toast类似
//构建普通不带点击事件的Snakebar
Snackbar.make(root, "Hello, I am is a Snakebar.", Snackbar.LENGTH_SHORT).show();
new Thread(new Runnable() {
@Override
public void run() {
SystemClock.sleep(5000);
runOnUiThread(new Runnable() {
@Override
public void run() {
//构建带点击事件的Snakebar
Snackbar.make(root, "Would you want to delete the first item?", Snackbar.LENGTH_SHORT)
.setAction("确定", new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(root, "Delete Successful.", Snackbar.LENGTH_SHORT).show();
}
}).show();
}
});
}
}).start();
}
}
2.FloatingActionButton
立体悬浮按钮是ImageButton的子类,是一个圆形加上点阴影效果的按钮。可以通过style里的colorAccent指定背景颜色,通过src指定图片
xml布局:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
android:id="@+id/root"
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"
tools:context=".Main2Activity">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_delete"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"/>
</FrameLayout>
java代码:
public class Main2Activity extends AppCompatActivity {
@BindView(R.id.fab)
FloatingActionButton fab;//悬浮按钮
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
ButterKnife.bind(this);
//设置悬浮按钮点击事件
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//构建带点击事件的Snakebar
Snackbar.make(fab, "Would you want to delete the first item?", Snackbar.LENGTH_SHORT)
.setAction("确定", new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(fab, "Delete Successful.", Snackbar.LENGTH_SHORT).show();
}
}).show();
}
});
}
}
3.CoordinatorLayout
加强版的FrameLayout,由Design Support库提供,使用方法参照FrameLayout,加强的地方在于可以监听其所有子控件的各种事件,然后自动帮我们做出最为合理的响应。注意layout_behavior这个新的属性,可以让被监听view随着指定该属性的子view做出反应,默认的常用值有@string/appbar_scrolling_view_behavior,大概意思就是指定了这个属性值的view并且这个view支持竖向和嵌套滑动时,appbar就可以自动的跟随view做滑动。可能说了这些还是不明白这个属性到底干什么用的,不过不要紧,那就先忽略这个属性吧,反正后面会用到,看到直观效果你就知道是干嘛用的了,别着急。
先看看CoordinatorLayout的简单用法,就是替代FrameLayout,还记得刚才FloatingActionButton的效果图吧?点击按钮Snakebar会挡住FloatingActionButton一半,而上边我们的xml布局里一直用的都是FrameLayout,现在改为CoordinateLayout我们看看效果吧。
xml代码:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/root"
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"
tools:context=".Main2Activity">
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_delete"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"/>
</android.support.design.widget.CoordinatorLayout>
java代码没有改动。
4.Toolbar
大家都很熟悉吧?actionBar的替代,之所以还要写是我之前没怎么用过,记笔记。
menu布局:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<!--showAsAction的值always一直显示,ifRoom如果有地方就显示,没有则隐藏,never一直隐藏-->
<item android:id="@+id/backup"
android:title="BackUp"
android:icon="@drawable/ic_backup"
app:showAsAction="always"/>
<item
android:id="@+id/delete"
android:title="Delete"
android:icon="@drawable/ic_delete"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/setting"
android:title="Setting"
android:icon="@drawable/ic_settings"
app:showAsAction="never"/>
</menu>
xml布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/root"
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"
tools:context=".Main2Activity">
<!--定义theme指定toolBar中的子view的主题,popupTheme指定toolBar隐藏的menu打开时的主题-->
<android.support.v7.widget.Toolbar
android:id="@+id/toolBar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
android:background="@color/colorPrimary"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_delete"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"/>
</android.support.design.widget.CoordinatorLayout>
java代码:
public class Main2Activity extends AppCompatActivity {
@BindView(R.id.fab)
FloatingActionButton fab;//悬浮按钮
@BindView(R.id.toolBar)
Toolbar toolbar;//toolBar
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
ButterKnife.bind(this);
//设置toolBar的title文字
toolbar.setTitle("ActionBar");
//将toolBar设置为actionBar
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
//显示返回按钮
actionBar.setDisplayHomeAsUpEnabled(true);
//设置悬浮按钮点击事件
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
//构建带点击事件的Snakebar
Snackbar.make(fab, "Would you want to delete the first item?", Snackbar.LENGTH_SHORT)
.setAction("确定", new View.OnClickListener() {
@Override
public void onClick(View v) {
Snackbar.make(fab, "Delete Successful.", Snackbar.LENGTH_SHORT).show();
}
}).show();
}
});
}
//设置toolBar上的menu
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.toolbar, menu);
return true;
}
}