简介
Goolgle工程师为了让暂时无法升级到5.0的设备使用上Material Design的控件,推出了support.design包,全部都是MD风格的控件。这次我就来介绍一部分控件的使用,包括CoordinatorLayout、Toolbar、ActionbarLayout、RecyclerView、CollapsingToolbarLayout、FloatingActionButton。废话少说,直接上代码。
添加引用
compile 'com.android.support:appcompat-v7:22.2.1'
compile 'com.jakewharton:butterknife:7.0.1'
compile 'com.android.support:design:22.2.1'
compile 'com.android.support:recyclerview-v7:22.2.1'
除了recyclerview以外,这次用到的其余控件都在design包里面,所以你也可以只导入一个design包,用listview或者gridview代替recyclerview来使用,但是一定要是一个可以滑动的控件!
代码
activity_main
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.AppBarLayout
android:id="@+id/layout_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/ad"
android:minHeight="100dp"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
android:contentDescription="@string/app_name"/>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:src="@android:drawable/ic_input_add"
app:layout_anchor="@id/rv"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
MainActivity
public class MainActivity extends AppCompatActivity {
@Bind(R.id.toolbar)
Toolbar toolbar;
@Bind(R.id.rv)
RecyclerView rv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
setSupportActionBar(toolbar);
ActionBar actionBar = getSupportActionBar();
assert actionBar != null;
actionBar.setDisplayHomeAsUpEnabled(true);
final String[] strings = new String[]{
"item1",
"item2",
"item3",
"item4",
"item5",
"item6",
"item7",
"item8",
"item9",
"item10",
"item11"
};
rv.setLayoutManager(new LinearLayoutManager(this));
rv.setAdapter(new TestAdapter(strings, this));
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
TestAdapter
public class TestAdapter extends RecyclerView.Adapter<TestAdapter.ViewHolder> {
private String[] strings;
private Context context;
public TestAdapter(String[] strings, Context context) {
this.strings = strings;
this.context = context;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup viewGroup, int i) {
View view = LayoutInflater.from(context).inflate(R.layout.item_test, viewGroup, false);
return new ViewHolder(view);
}
@Override
public void onBindViewHolder(ViewHolder viewHolder, int i) {
viewHolder.tv.setText(strings[i]);
}
@Override
public int getItemCount() {
return strings.length;
}
public class ViewHolder extends RecyclerView.ViewHolder {
@Bind(R.id.tv_item)
TextView tv;
public ViewHolder(View itemView) {
super(itemView);
ButterKnife.bind(this, itemView);
}
}
}
可以看到,代码里面其实主要就是给RecyclerView设置了一个adapter,实现上拉收起ImageView其实是在xml里面去做的,主要是层次要和下面一样,最外层是CoordinatorLayout,下面第一个第一个元素是可滑动的View,第二个元素是AppBarLayout,里面只有一个子元素CollapsingToolbarLayout,CollapsingToolbarLayout里面包含了ToolBar和ImageView。
<CoordinatorLayout>
<RecyclerView>
</RecyclerView>
<AppBarLayout>
<CollapsingToolbarLayout>
<ImageView/>
</ImageView>
<Toolbar>
</Toolbar>
</CollapsingToolbarLayout>
</AppBarLayout>
</CoordinatorLayout>
单单这么布局还不能达到上拉收起View的效果,还需要在你想要收起的View(比如这次的ImageView)的布局文件上添加
app:layout_collapseMode="parallax"
这条属性的作用是将需要上滑上去的View标示出来,当上滑的时候带有app:layout_collapseMode这个属性,且值设置为parallax的View将被隐藏。而如果你想让某个View在上滑的时候停留在屏幕顶端,你可以将该属性值设置为pin。
为了实现上滑隐藏toolbar的功能,需要为toolbar添加属性
app:layout_scrollFlags="scroll|exitUntilCollapsed"
添加了这些东西就可以实现了,大家快来体验MD风格控件吧。