android滑动toolbar 很炫的标题栏

最新推荐文章于 2022-06-23 09:32:29 发布

梦与千寻

最新推荐文章于 2022-06-23 09:32:29 发布

阅读量10w+

点赞数 1

分类专栏： UI 文章标签：布局

本文链接：https://blog.youkuaiyun.com/tiandiyinghun/article/details/50969252

版权

UI 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用CoordinatorLayout、AppBarLayout及CollapsingToolbarLayout等组件创建一个可随滚动伸缩的标题栏。通过布局文件配置与Java代码实现，展示了一个具有动态效果的Android应用界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">作为一名程序员，要不断的学习新的技术。不断汲取新的知识。</span>

CoordinatorLayout 坐标局AppBarLayout 用于替换早起的actionbar 
CollapsingToolbarLayout 可折叠的toolbar Toolbar   标题栏
通过以上组件 写一个简单的可折叠的标题栏  先看三张图片

通过这个三张图可以看出来，标题栏的大小会随着recyclerview 的滑动伸张折叠
下面简单说下 是如何实现的
先上布局文件
<?xml version="1.0" encoding="utf-8"?>
<!--做出一个可折叠的toolbar 必须做到以下三点
    1，coordiantorlayout 作为父容器的布局
    2，给需要滑动的组件设置 layout_behavior
    3，collapsingtoolbarlayout 包含一个imageview 和 toolbar
-->
<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:fitsSystemWindows="true"
    >
    <!--appbar layout 新的android appbarlayout-->
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="256dp"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        >
        <!--包含一个可折叠的toolbarlayout
        layout_scrollFlags
        scroll 若想让toolbar 滚动就必须设置这个属性
        enterAlways  向下移动时 立即显示view
        exitUntilCollapsed  向上移动时 收缩view 但可以固定toolbar 在上面
        enterAlwaysCollapsed 当你的View已经设置minHeight属性又使用此标志时，你的View只能以最小高度进入，只有当滚动视图到达顶部时才扩大到完整高度
        -->
    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collap_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >
        <!--layout_collapseMode 1，pin 没有视觉差！ 2，parallax  有视觉差   可以配合layout_collapseParallaxMultiplier 视觉差因子 设置  val  0-1-->
        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:src="@drawable/toolbar"
            app:layout_collapseParallaxMultiplier="0.7"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"
            />
        <!--toolbar-->
        <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.Toolbar>

    </android.support.design.widget.CollapsingToolbarLayout>
    </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:scrollbars="none" />

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


布局文件也没什么好说的了  里面都有注释 。
直接上代码：
<pre name="code" class="java">package com.lefeng.lfvideo.myndk;

import android.os.Bundle;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.Toolbar;

import com.lefeng.lfvideo.myndk.adapter.RecylerAdapter;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by CYL on 2016/3/23.
 * email:670654904@qq.com
 */
public class CollapingActivity extends AppCompatActivity {
    private Toolbar toolbar;
    private CollapsingToolbarLayout collapsingToolbarLayout;
    private RecyclerView recyclerView;
    private List<String> dataSource;
    private RecylerAdapter adapter;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.applayout);
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collap_layout);
        recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
<span style="white-space:pre">	</span>//这个主意下   这个activity的theme 设置为noactionbar
<span style="white-space:pre">	</span>//设置actionbar 为toolbar 
        setSupportActionBar(toolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
<span style="white-space:pre">	</span>//这里设置标题的时候需要在collapsingtoolbarlayout上设置  否则没有效果
        collapsingToolbarLayout.setTitle("collapsingToolbarLayout");

        initData();
        adapter = new RecylerAdapter(dataSource,getApplicationContext());
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        recyclerView.setAdapter(adapter);
    }

    private void initData(){
        dataSource = new ArrayList<>();
        for (int i = 0;i<100;i++){
            dataSource.add("recylerview");
        }

    }
}
里面还有个recylerview 的适配器贴出啦  其实很简单和 listview 的适配器差不多
package com.lefeng.lfvideo.myndk.adapter;

import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.lefeng.lfvideo.myndk.R;
import com.lefeng.lfvideo.myndk.utils.Sp2Px;

import java.util.List;

/**
 * Created by CYL on 2016/3/22.
 * email:670654904@qq.com
 */
public class RecylerAdapter extends RecyclerView.Adapter<RecylerAdapter.MyViewHolder> {
    private List<String> dataSource;
    private LayoutInflater mInflater;
    private Context context;

    public RecylerAdapter(List<String> dataSource,Context context) {
        this.dataSource = dataSource;
        mInflater = LayoutInflater.from(context);
        this.context = context;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        MyViewHolder viewHolder = new MyViewHolder(mInflater.inflate(R.layout.recycler_item,parent,false));
        return viewHolder;
    }

    @Override
    public void onBindViewHolder(MyViewHolder holder, final int position) {
        ViewGroup.LayoutParams params = holder.container.getLayoutParams();
        params.height = (int) Sp2Px.sp2px(mInflater.getContext(), (float) (100+(150*Math.random())));
        holder.container.setLayoutParams(params);
        holder.tv.setText(dataSource.get(position));
        holder.tv.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(position%2==0){
                    removeItem(position);
                }
                else{
                    addItem();
                }
            }
        });
    }
    public final class MyViewHolder extends  RecyclerView.ViewHolder{
        private TextView tv ;
        private LinearLayout container;
        public MyViewHolder(View itemView) {
            super(itemView);
            tv = (TextView) itemView.findViewById(R.id.t1);
            container = (LinearLayout) itemView.findViewById(R.id.main_container);
        }
    }
    @Override
    public int getItemCount() {
        return dataSource.size();
    }

    /**
     * 给recyclerview 添加一个条目
     */
    public void addItem(){
        dataSource.add("hello recyler");
        notifyDataSetChanged();
    }

    /**
     * 根据指定的位置删除一个条目
     * @param postion
     */
    public void removeItem(int postion){
        dataSource.remove(postion);
        notifyDataSetChanged();
    }
}

每个条目的布局文件就不贴出来了，就一个简单的textview
这样就可以出来一个比较绚丽的可折叠的标题栏了 。。。。