CollapsingToolbarLayout

来源：互联网发布：好的监控软件编辑：程序博客网时间：2024/05/21 10:28

效果图

这里写图片描述

代码实现

这里我们主要用到CollapsingToolbarLayout
CollapsingToolbarLayout包裹 Toolbar 的时候提供一个可折叠的 Toolbar，一般作为AppbarLayout的子视图使用。

<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:id="@+id/appbar"        android:background="#00ff99"        android:layout_width="match_parent"        android:layout_height="160dp">        <android.support.design.widget.CollapsingToolbarLayout            android:layout_width="match_parent"            android:layout_height="match_parent"            //标题放大后距离右边的距离            app:expandedTitleMarginEnd="64dp"            //Toolbar被折叠到顶部固定时的背景            app:contentScrim="?attr/colorPrimary"            //标题放大后距离左边的距离            app:expandedTitleMarginStart="48dp"            //状态栏的背景            app:statusBarScrim="?attr/colorPrimary"    //设置北京，滚动退出屏幕，最后折叠在顶端            app:layout_scrollFlags="scroll|exitUntilCollapsed"            >            <ImageView                android:id="@+id/image"//CollapsingToolbarLayout滑动时，子视图的视觉差                app:layout_collapseParallaxMultiplier="0.6"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:scaleType="fitXY"                android:src="@drawable/ym2"                //折叠模式                app:layout_collapseMode="parallax" />    <android.support.v7.widget.Toolbar        android:id="@+id/toolbar"        android:layout_width="match_parent"        //Toolbar的高度必须是固定的，否则不起效果        android:layout_height="?attr/actionBarSize"        app:layout_collapseMode="pin"        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"        ></android.support.v7.widget.Toolbar>        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v7.widget.RecyclerView        android:id="@+id/recview"        android:layout_width="match_parent"        android:layout_height="match_parent"//要滑动的View必须设置这个        app:layout_behavior="@string/appbar_scrolling_view_behavior"        ></android.support.v7.widget.RecyclerView>    <android.support.design.widget.FloatingActionButton        android:layout_width="wrap_content"        android:layout_height="wrap_content"        app:fabSize="normal"        android:src="@drawable/ym1"        android:scaleType="fitXY"        android:layout_gravity="bottom|end"        //设置锚点        app:layout_anchor="@+id/appbar"        app:layout_anchorGravity="bottom|end|right"        /></android.support.design.widget.CoordinatorLayout>

接着我们来修改ToolBar折叠到顶端的背景颜色，上面是白色的，重点就在这句代码

 app:contentScrim="?attr/colorPrimary"

我们把颜色改成黄色

 app:contentScrim="#ff8c00"

这里写图片描述

public class MainActivity extends AppCompatActivity{    private List<String> datas;    private RecyclerView recyclerView;    private AppBarLayout appBarLayout;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        recyclerView = (RecyclerView) findViewById(R.id.recview);        appBarLayout = (AppBarLayout) findViewById(R.id.appbar);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        toolbar.setNavigationIcon(R.mipmap.ic_launcher);        initData();        CustomAdapter adapter = new CustomAdapter(this,datas);        RecyclerView.LayoutManager manager = new LinearLayoutManager(this);        recyclerView.setLayoutManager(manager);        recyclerView.setAdapter(adapter);    }    public void initData() {        datas = new ArrayList<>();        for (int i = 'A'; i < 'K'; i++) {            datas.add(""+(char)i);        }    }}

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.MyViewHolder> {    private Context context;    private List<String> data;    public CustomAdapter(Context context, List<String> data){        this.context = context;        this.data = data;    }    @Override    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {        View itemView = View.inflate(context, R.layout.item_view, null);        MyViewHolder holder = new MyViewHolder(itemView);        return holder;    }    @Override    public void onBindViewHolder(MyViewHolder holder, int position) {            holder.textView.setText(data.get(position));    }    @Override    public long getItemId(int position) {        return position;    }    @Override    public int getItemCount() {        return data.size();    }    class MyViewHolder extends RecyclerView.ViewHolder {        private final TextView textView;        public MyViewHolder(View itemView) {            super(itemView);            textView = (TextView) itemView.findViewById(R.id.tv_item);        }    }}

效果二

这里写图片描述

<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:id="@+id/appbar"        android:layout_width="match_parent"        android:layout_height="180dp"        android:background="#00ff99">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collap"            android:layout_width="match_parent"            android:layout_height="match_parent"            app:contentScrim="#FA7199"            app:expandedTitleMarginEnd="64dp"            app:expandedTitleMarginStart="48dp"            app:layout_scrollFlags="scroll|exitUntilCollapsed"            app:statusBarScrim="?attr/colorPrimary">            <ImageView                android:id="@+id/image"                android:layout_width="match_parent"                android:layout_height="match_parent"                android:scaleType="fitXY"                android:src="@drawable/ym2"                app:layout_collapseMode="parallax"                app:layout_collapseParallaxMultiplier="0.9" />            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar"                android:layout_width="match_parent"                android:layout_height="?attr/actionBarSize"                app:layout_collapseMode="pin"                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">                <android.support.v7.widget.ButtonBarLayout                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:gravity="center"                    >                    <TextView                        android:id="@+id/tv_play"                        android:layout_width="wrap_content"                        android:layout_height="wrap_content"                        android:textColor="#ffffff"                        android:text="立即播放"                        android:textSize="20sp"                        android:layout_gravity="center_vertical"                        />                </android.support.v7.widget.ButtonBarLayout>            </android.support.v7.widget.Toolbar>        </android.support.design.widget.CollapsingToolbarLayout>    </android.support.design.widget.AppBarLayout>    <android.support.v7.widget.RecyclerView        android:id="@+id/recview"        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>

然后我们需要监听AppBarLayout的状态

public abstract 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);}

public class MainActivity extends AppCompatActivity {    private List<String> datas;    private RecyclerView recyclerView;    private AppBarLayout appBarLayout;    private CollapsingToolbarLayout collapsingToolbarLayout;    private TextView tvPlay;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        recyclerView = (RecyclerView) findViewById(R.id.recview);        appBarLayout = (AppBarLayout) findViewById(R.id.appbar);        collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collap);        tvPlay = (TextView) findViewById(R.id.tv_play);        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);        initData();        CustomAdapter adapter = new CustomAdapter(this,datas);        RecyclerView.LayoutManager manager = new LinearLayoutManager(this);        recyclerView.setLayoutManager(manager);        recyclerView.setAdapter(adapter);        appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() {            @Override            public void onStateChanged(AppBarLayout appBarLayout, State state) {                if(state == State.EXPANDED){                    tvPlay.setText("");                }else if(state == State.COLLAPSED){                    tvPlay.setText("立即播放");                }else{                    tvPlay.setText("");                }            }        });    }    public void initData() {        datas = new ArrayList<>();        for (int i = 'A'; i < 'Z'; i++) {            datas.add(""+(char)i);        }    }}

0 0