Android-----AppBarLayout 的使用

2024-03-05 10:19:24

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

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

接下来看代码:

Xml总布局(LinearLayout):

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

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

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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">

    <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="http://schemas.android.com/apk/res/android"
    xmlns:app="http://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];
        }
    }

}

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

码农公寓

相关文章