Material Design之-折叠toolbar与RecyclerView

前两天介绍了MD的一些控件，今天简单写个综合一点demo让大家更加熟悉一点MD的一些用法。
build gradle 的一些简单配置

compileSdkVersion 23
buildToolsVersion "23.0.1"

dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.1.1'
compile 'com.android.support:design:23.1.0'
}

首先是activity_main.xml的布局

 <!--作为顶层布局 协调子布局-->
<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="match_parent">
<!--伴随手势滚动的父容器将其创建出来-->
<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="300dp">

    
    <!--创建一个可以折叠的tollbar的容器-->
    <!--app:contentScrim="#ee22ff" 折叠后布局（容器）的颜色值-->
    <!--app:expandedTitleMarginStart="14dp" 指定文字和左边缘的间距-->

    <!--app:layout_scrollFlags="scroll|exitUntilCollapsed" 设置滚动标记才能滚动-->  
    <!--scroll：现有容器，可以滚动折叠-->
    <!--exitUntilCollapsed：可以让ToolBar固定在最顶部，而不会伴随手势的滚动移除-->
    <!--enterAlways：ToolBar完全在滚动过程中隐藏，如果手势向下移动则此ToolBar再次显示-->
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsingtoolbarlayout"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:contentScrim="#ee22ff"
        app:expandedTitleMarginStart="10dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
       <!-- app:layout_collapseMode="parallax"与  app:layout_collapseParallaxMultiplier="0.7"搭配使用形成视觉差 -->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:background="@mipmap/ic_launcher"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7" />
         <!--app:layout_collapseMode="pin"当CollapsingToolbarLayout收缩的时候，Toolbar还留在屏幕上-->
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin" />


    </android.support.design.widget.CollapsingToolbarLayout>

 </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

当你完成这些的时候运行的话就会出现和下图一般（除去东南西北风的字体）

当然需要你继承的是Activity 如果你继承的是ActionBarActivity或者是AppCompatActivity则会出现ActionBar哦，而ActionBar已经被ToolBar取代。

接下来我们写下东南西北风和文字的渐变色

    @Override
    protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    CollapsingToolbarLayout collapsingtoolbarlayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingtoolbarlayout);
     //设置标题
    collapsingtoolbarlayout.setTitle("东南西北风");
   //        设置颜色变化
    collapsingtoolbarlayout.setExpandedTitleColor(Color.GRAY);
    collapsingtoolbarlayout.setExpandedTitleColor(Color.RED);
   
}

这样简单的折叠toolbar就实现了恩

一般在完成折叠toolbar我们下面会搭配RecyclerView
在activity_main.xml里面CoordinatorLayout布局下即与AppBarLayout布局并列下加上如下代码

   <!--app:layout_behavior="@string/appbar_scrolling_view_behavior"-->
   <!--在RecyclerView或者其他支持嵌套滚动的view中如果添加以上属性将和AppBarLayout绑定-->
   </android.support.design.widget.AppBarLayout>
  <android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

</android.support.v7.widget.RecyclerView>
</android.support.design.widget.CoordinatorLayout>

然后在activity中建立适配器和排列方式
public class MainActivity extends Activity {
public static final String TAG = "MainActivity";

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    CollapsingToolbarLayout collapsingtoolbarlayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingtoolbarlayout);
        //设置标题
    collapsingtoolbarlayout.setTitle("东南西北风");
   // 设置颜色变化
    collapsingtoolbarlayout.setExpandedTitleColor(Color.GRAY);
    collapsingtoolbarlayout.setExpandedTitleColor(Color.RED);
    RecyclerView recyclerview = (RecyclerView) findViewById(R.id.recyclerview);
    recyclerview.setAdapter(new MyAdapter());
    //设置排列方式  上下文 排列方式 是否反转
    recyclerview.setLayoutManager(new LinearLayoutManager(this,LinearLayoutManager.VERTICAL,false));

}

class MyAdapter extends RecyclerView.Adapter<MyHolder>{

    @Override
    public MyHolder onCreateViewHolder(ViewGroup parent, int viewType) {
   //recyclerview.xml 简单的textview布局
    View view= View.inflate(getApplicationContext(),R.layout.recyclerview_item,null);
        return new MyHolder(view);
    }

    @Override
    public void onBindViewHolder(MyHolder holder, int position) {

    }

    @Override
    public int getItemCount() {
        return 10;
    }
}
class MyHolder extends RecyclerView.ViewHolder{

    public MyHolder(View itemView) {
        super(itemView);

    }
  }
 }

最终结果如下图

控件介绍：//www.greatytc.com/p/b4c44d883c48
下一篇介绍剩下的一些控件demo，如果帮助到你了请关注后续。

Material Design之-折叠toolbar与RecyclerView

推荐阅读更多精彩内容