Android-----AppBarLayout 的使用
作者:互联网
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];
}
}
}
完成啦,快去运行看一看吧!
标签:AppBarLayout,androidx,viewPager,使用,import,Android,public,android 来源: https://blog.csdn.net/Wdani/article/details/105816645