Android视差效果

这次带来的是结合CoordinatorLayout、AppBarLayout、CollapsingToolbarLayout和FloatingActionButton打造炫酷的视觉差效果。

实现步骤

一：需要在主题文件中将Activity的标题栏去掉

二：编写Activity的布局文件

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout 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=".MainActivity"> <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.CollapsingToolbarLayout android:layout_width="match_parent" app:contentScrim="@color/colorPrimary" app:expandedTitleMarginStart="15dp" app:collapsedTitleTextAppearance="@style/ToolbarTextStyle" //设置收缩时的标题样式 app:expandedTitleTextAppearance="@style/CollapseexpandedTextStyle" //设置展开时的标题样式 app:layout_scrollFlags="scroll|exitUntilCollapsed" //这个属性使得CollapsingToolbarLayout在滑动的时候显示隐藏 android:layout_height="wrap_content"> <ImageView android:layout_width="match_parent" android:src="@mipmap/bg" android:scaleType="fitXY" app:layout_collapseMode="parallax" //这个属性使得ImageView在CollapsingToolbarLayout展开的时候显示 android:layout_height="200dp" /> <android.support.v7.widget.Toolbar android:layout_width="match_parent" android:id="@+id/toolbar" app:layout_collapseMode="pin" //这个属性使得Toolbar在CollapsingToolbarLayout收缩的时候显示 android:layout_height="50dp"> </android.support.v7.widget.Toolbar> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <android.support.v7.widget.RecyclerView android:layout_width="match_parent" android:id="@+id/recycle" app:layout_behavior="@string/appbar_scrolling_view_behavior" //这个属性是让控件在AppBarLayout下边 android:layout_height="match_parent"> </android.support.v7.widget.RecyclerView> <android.support.design.widget.FloatingActionButton android:layout_width="wrap_content" android:src="@drawable/ic_logo" app:layout_anchor="@id/appbar" //这个属性是让FloatingActionButton以AppBarLayout为锚点，同时这也是使FloatingActionButton实现显示隐藏的关键 app:layout_anchorGravity="bottom|end" //在AppBarLayout的右下方 app:borderWidth="0dp" app:rippleColor="#E23B74" app:elevation="6dp" app:pressedTranslationZ="12dp" android:clickable="true" android:layout_marginRight="10dp" android:layout_height="wrap_content" /> </android.support.design.widget.CoordinatorLayout> 

style/ToolbarTextStyle和style/CollapseexpandedTextStyle

 <style name="CollapseexpandedTextStyle" parent="TextAppearance.AppCompat"> <item name="android:textColor">#fff</item> <item name="android:textSize">23sp</item> </style> <style name="ToolbarTextStyle" parent="TextAppearance.AppCompat"> <item name="android:textColor">#fff</item> <item name="android:textSize">18sp</item> </style> 

三：编写Activity代码

public class MainActivity extends AppCompatActivity { Toolbar toolbar; RecyclerView recyclerView; AppBarLayout appBarLayout; private BaseQuickAdapter<String, BaseViewHolder> baseQuickAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar=findViewById(R.id.toolbar); appBarLayout=findViewById(R.id.appbar); toolbar.setTitle("我是标题"); setSupportActionBar(toolbar); // 设置条目（可以省略）======================== recyclerView=findViewById(R.id.recycle); recyclerView.setLayoutManager(new LinearLayoutManager(this)); final ArrayList<String> strings = new ArrayList<>(); for(int x=0;x<10;x++){ strings.add("我是条目"+x); } baseQuickAdapter = new BaseQuickAdapter<String, BaseViewHolder>(R.layout.item, strings) { @Override protected void convert(BaseViewHolder helper, String item) { helper.setText(R.id.tv_title, item); } }; baseQuickAdapter.openLoadAnimation(BaseQuickAdapter.SLIDEIN_LEFT); baseQuickAdapter.setOnItemChildClickListener(new BaseQuickAdapter.OnItemChildClickListener() { @Override public void onItemChildClick(BaseQuickAdapter adapter, View view, int position) { } }); recyclerView.setAdapter(baseQuickAdapter); // ================================================== appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() { @Override public void onStateChanged(AppBarLayout appBarLayout, State state) { if( state == State.EXPANDED ) { //展开状态 toolbar.setNavigationIcon(R.drawable.ic_backfour); }else if(state == State.COLLAPSED){ //折叠状态 toolbar.setNavigationIcon(R.drawable.ic_back); }else { //中间状态 toolbar.setNavigationIcon(R.drawable.ic_back); } } }); } private abstract static class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener { public enum State { EXPANDED, COLLAPSED, IDLE } private State mCurrentState = State.IDLE; @Override public final void onOffsetChanged(AppBarLayout appBarLayout, int i) { if (i == 0) { if (mCurrentState != State.EXPANDED) { onStateChanged(appBarLayout, State.EXPANDED); } mCurrentState = State.EXPANDED; } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) { if (mCurrentState != State.COLLAPSED) { onStateChanged(appBarLayout, State.COLLAPSED); } mCurrentState = State.COLLAPSED; } else { if (mCurrentState != State.IDLE) { onStateChanged(appBarLayout, State.IDLE); } mCurrentState = State.IDLE; } } public abstract void onStateChanged(AppBarLayout appBarLayout, State state); } }