Material Design之-折叠toolbar与Recyc
2016-03-10 本文已影响4422人
许晓北
前两天介绍了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);
}
}
}
最终结果如下图
控件介绍:http://www.jianshu.com/p/b4c44d883c48
下一篇介绍剩下的一些控件demo,如果帮助到你了请关注后续。