Android—–AppBarLayout 的使用移动开发Wdani的博客-

AppBarLayout效果:
当向下滑动屏幕是时 顶部就会出现
当向上滑动屏幕时 顶部就会折叠

向下滑动时:
向上滑动后:

接下来 看代码:

Xml总布局(LinearLayout):

可以使用Design工具 找到AppBarLayout这个布局控件(第一次使用需要下载),然后将其拖入我们的总布局,拖入的时候会出现一个弹框:
这里我们选择了这三个选项,第一个是我们需要的一个Toolbar,第三个是设置我们页面里需要的几个tab,也就是需要几个碎片,案例里我们需要三个

成功将APPBarLayout拖入布局之后,代码如下(有些是我们自己添加的,我写了注释,请认真比对查看)

<?xml version="1.0" encoding="utf-8"?> <androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="https://schemas.android.com/apk/res/android"     xmlns:app="https://schemas.android.com/apk/res-auto"     xmlns:tools="https://schemas.android.com/tools"      android:layout_width="match_parent"     android:layout_height="match_parent"> <com.google.android.material.appbar.AppBarLayout         android:id="@+id/appbar"         android:layout_width="match_parent"         android:layout_height="wrap_content"> <androidx.appcompat.widget.Toolbar             android:layout_width="match_parent"             android:layout_height="?attr/actionBarSize"             app:layout_scrollFlags="scroll|enterAlways"> <!--这里面可加入你想设置的toolbar里面的样式--> <ImageView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:src="@mipmap/ic_launcher" /> <TextView                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="首页" /> </androidx.appcompat.widget.Toolbar> <!--        app:layout_scrollFlags="scroll|exitUntilCollapsed"             android:minHeight="20dp"  这两句可以设置向上滑的时候有多少高度是固定的不缩上去 --> <com.google.android.material.tabs.TabLayout             android:id="@+id/tabs"             android:layout_width="match_parent"             android:layout_height="wrap_content"     app:layout_scrollFlags="scroll|enterAlways"//这句是默认的 //app:layout_scrollFlags="scroll|exitUntilCollapsed" //android:minHeight="20dp"              app:tabMode="scrollable"> <com.google.android.material.tabs.TabItem                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="Tab1" /> <com.google.android.material.tabs.TabItem                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="Tab2" /> <com.google.android.material.tabs.TabItem                 android:layout_width="wrap_content"                 android:layout_height="wrap_content"                 android:text="Tab3" /> </com.google.android.material.tabs.TabLayout> </com.google.android.material.appbar.AppBarLayout> <!--android:clipToPadding="true"去掉边距的属性,         android:fillViewport="true"填充满--> <androidx.core.widget.NestedScrollView         android:layout_width="match_parent"         android:layout_height="match_parent"         android:clipToPadding="true"         android:fillViewport="true"         app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior"> <LinearLayout             android:layout_width="match_parent"             android:layout_height="match_parent"             android:orientation="vertical"             tools:context=".AppBarLayoutActivity"> <!--这里面就放整个页面的内容--> <!--这个viewPage是我自己想加在下面的内容,因为我们需要三个碎片--> <androidx.viewpager.widget.ViewPager                 android:id="@+id/viewPager"                 android:layout_width="match_parent"                 android:layout_height="match_parent" /> </LinearLayout> </androidx.core.widget.NestedScrollView> <com.google.android.material.floatingactionbutton.FloatingActionButton         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="bottom|end"         android:layout_margin="16dp"         android:src="@android:drawable/ic_input_add" />" </androidx.coordinatorlayout.widget.CoordinatorLayout> 

既然设置了ViewPager 那么我就需要几个Fragment碎片放进去
(实际有三个item 需要几个碎片就放几个item 我这里就给出一个做示范)
Item1:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"     xmlns:app="https://schemas.android.com/apk/res-auto"     android:orientation="vertical" android:layout_width="match_parent"     android:layout_height="match_parent"> <androidx.core.widget.NestedScrollView         android:layout_width="match_parent"         android:layout_height="match_parent"         android:fillViewport="true"> <LinearLayout             android:layout_width="match_parent"             android:layout_height="wrap_content"             android:orientation="vertical" > <!-- android:scaleType="fitXY"这个属性可以将图片拉伸至填满--> <ImageView                 android:id="@+id/imageView2"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:scaleType="fitXY"                 android:src="@mipmap/bj" /> <ImageView                 android:id="@+id/imageView3"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:scaleType="fitXY"                 android:src="@mipmap/background01" /> <ImageView                 android:id="@+id/imageView4"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:scaleType="fitXY"                 app:srcCompat="@mipmap/img001" /> <ImageView                 android:id="@+id/imageView5"                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:scaleType="fitXY"                 app:srcCompat="@mipmap/img002" /> </LinearLayout> </androidx.core.widget.NestedScrollView> </LinearLayout> 

接下来就到了Java代码的编写

Java代码:
先将fragment的类定义出来:
(需要几个fragment就写几个类,关联上对应的item布局)

Fragment1:

package org.wdan.test008; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.fragment.app.Fragment; public class Fragment1 extends Fragment { @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { //对应上我们的item1         View view=inflater.inflate(R.layout.item1,container,false); return view; } } 

Activity:

package org.wdan.test008; import android.os.Bundle; import android.view.View; import androidx.annotation.NonNull; import androidx.annotation.Nullable; import androidx.appcompat.app.AppCompatActivity; import androidx.fragment.app.Fragment; import androidx.fragment.app.FragmentManager; import androidx.fragment.app.FragmentPagerAdapter; import androidx.viewpager.widget.PagerAdapter; import androidx.viewpager.widget.ViewPager; import com.google.android.material.appbar.AppBarLayout; import com.google.android.material.tabs.TabLayout; import java.util.ArrayList; import java.util.List; public class AppBarLayoutActivity extends AppCompatActivity { private TabLayout tabs; private AppBarLayout appbar; private ViewPager viewPager; //标题     String[] title={"新闻","财经","娱乐"};     List<Fragment> fragments; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_app_bar_layout); initView();         fragments.add(new Fragment1());         fragments.add(new Fragment2());         fragments.add(new Fragment3()); //通过适配器给viewPager添加碎片,我们通过内部类的方式在下面写了一个自定义适配器MyFragmentAdapter         viewPager.setAdapter(new MyFragmentAdapter(getSupportFragmentManager(),fragments)); //关联viewPager与tablayout         tabs.setupWithViewPager(viewPager); } private void initView() {         fragments=new ArrayList<>();         tabs = (TabLayout) findViewById(R.id.tabs);         appbar = (AppBarLayout) findViewById(R.id.appbar);         viewPager = (ViewPager) findViewById(R.id.viewPager); } //自定义适配器 public class MyFragmentAdapter extends FragmentPagerAdapter {         List<Fragment> list; public MyFragmentAdapter(FragmentManager fm,List<Fragment> list) { super(fm); this.list=list; } @Override public Fragment getItem(int position) { return list.get(position); } @Override public int getCount() { return list.size(); } //这个方法可将标题对应上碎片 @Nullable @Override public CharSequence getPageTitle(int position) { return title[position]; } } } 

完成啦,快去运行看一看吧!