安卓开发实现CoordinatorLayout+AppBarLayout+TabLayout+RecycleView 悬停效果 滑动列表tabLayout定位

效果 滑动列表tabLayout定位"/>

安卓开发实现CoordinatorLayout+AppBarLayout+TabLayout+RecycleView 悬停效果 滑动列表tabLayout定位

在安卓中实现CoordinatorLayout+AppBarLayout+TabLayout+RecycleView 悬停效果 滑动rv列表tablayout定位效果

效果图

在开发中要用到 写个demo 记录一下，有这个需求的同志也可以做个参考

Xml

<FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"xmlns:android=""xmlns:tools=""xmlns:app=""><android.support.design.widget.CoordinatorLayoutandroid:id="@+id/map"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><android.support.design.widget.AppBarLayoutandroid:id="@+id/app_bar"android:layout_width="match_parent"android:layout_height="wrap_content"><TextViewandroid:layout_width="match_parent"android:layout_height="50dp"android:gravity="center"android:text="哈哈哈哈哈"app:layout_scrollFlags="scroll"/><ImageViewandroid:id="@+id/iv_tag"android:layout_width="match_parent"android:layout_height="200dp"android:background="?attr/colorPrimary"android:scaleType="fitXY"app:layout_collapseMode="parallax"android:src="@drawable/ic_launcher_background"app:layout_scrollFlags="scroll|exitUntilCollapsed" /><android.support.design.widget.TabLayoutandroid:id="@+id/main_tab"android:layout_width="match_parent"android:layout_height="50dp"android:visibility="gone"/><TextViewandroid:id="@+id/tv_test"android:layout_width="match_parent"android:layout_height="50dp"android:text="哈哈哈哈哈"android:visibility="visible"/></android.support.design.widget.AppBarLayout><android.support.v7.widget.RecyclerViewandroid:id="@+id/mian_recy"android:layout_width="match_parent"android:layout_height="wrap_content"app:layout_behavior="@string/appbar_scrolling_view_behavior"/></android.support.design.widget.CoordinatorLayout></FrameLayout>

View

 private List<MainBean> list;private MainAdapter adapter;private RecyclerView recyclerView;private LinearLayoutManager manager;private TabLayout tabLayout;/***关于bug问题，可以在adapter 中给最后一个item 填充一个空视图把整个布局顶上去完成滑动*demo中就给到一个思路了**/private  int pos=0;private TextView tv_test;private AppBarLayout appBarLayout;private String[] str = {"测试1", "测试2", "测试3", "测试4", "测试5", "测试6", "测试7", "测试8", "测试9", "测试10"};private ImageView iv_tag;private int[] str1 = {0, 11, 22, 33, 44, 55, 66, 77, 88, 99};private boolean isScrolled = false;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initData();init();initTab();//因为需求原因这里先放置点击收缩appbar的占位视图tv_test.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {if (pos<250){//这里可以根据实际情况来做出appbar的收缩判断 高度可以通过自己计算appBarLayout.setExpanded(false);}}});}private void initTab() {for (int i = 0; i < str.length; i++) {tabLayout.addTab(tabLayout.newTab().setText(str[i]));}//标签页可以滑动tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {@Overridepublic void onTabSelected(TabLayout.Tab tab) {int pos = tab.getPosition();if (!isScrolled) {manager.scrollToPositionWithOffset(str1[pos], 0);}}@Overridepublic void onTabUnselected(TabLayout.Tab tab) {}@Overridepublic void onTabReselected(TabLayout.Tab tab) {}});}private void init() {recyclerView = findViewById(R.id.mian_recy);tabLayout = findViewById(R.id.main_tab);appBarLayout=findViewById(R.id.app_bar);tv_test=findViewById(R.id.tv_test);iv_tag=findViewById(R.id.iv_tag);manager = new LinearLayoutManager(this);recyclerView.setLayoutManager(manager);adapter = new MainAdapter(list);recyclerView.setAdapter(adapter);adapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {@Overridepublic void onItemClick(BaseQuickAdapter adapter, View view, int position) {//处理自己的事件Toast.makeText(MainActivity.this, "点击的item=" + position, Toast.LENGTH_SHORT).show();}});recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {@Overridepublic void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {super.onScrollStateChanged(recyclerView, newState);//重写该方法主要是判断recyclerview是否在滑动//0停止 ，12都是滑动if (newState == 0) {isScrolled = false;} else {isScrolled = true;}setMsg("isScrolled" + isScrolled + "--newState=" + newState);}@Overridepublic void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {super.onScrolled(recyclerView, dx, dy);/*** 关于滑动rv 定位tab的实现逻辑  可根据自己的项目需要进行修改* **/if (isScrolled) {int top = manager.findFirstVisibleItemPosition();int bottom = manager.findLastVisibleItemPosition();int pos = 0;if (bottom == list.size() - 1) {//先判断滑到底部，tab定位到最后一个pos = str1.length - 1;} else if (top == str1[str1.length - 1]) {//如果top等于指定的位置，对应到tab即可，pos = str1[str1.length - 1];} else {//循环遍历，需要比较i+1的位置，所以循环长度要减1，//  如果 i<top<i+1,  那么tab应该定位到i位置的字符，不管是向上还是向下滑动for (int i = 0; i < str1.length - 1; i++) {if (top == str1[i]) {pos = i;break;} else if (top > str1[i] && top < str1[i + 1]) {pos = i;break;}}}//设置tab滑动到第pos个tabLayout.setScrollPosition(pos, 0f, true);}}});appBarLayout.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {@Overridepublic void onOffsetChanged(AppBarLayout appBarLayout, int i) {Log.e(MainActivity.class.getSimpleName(), "onOffsetChanged: "+i);if (Math.abs(i)==iv_tag.getBottom()){pos=Math.abs(i);tv_test.setVisibility(View.GONE);tabLayout.setVisibility(View.VISIBLE);}else {pos=0;tabLayout.setVisibility(View.GONE);tv_test.setVisibility(View.VISIBLE);}}});}public static void setMsg(String str) {Log.i("tab", str);}private void initData() {list = new ArrayList<>();for (int i = 0; i < 100; i++) {list.add(new MainBean("title--" + i));}}
}

思路就是这些了，也非常的简单。

附上码云链接