Android CoordinatorLayout实现多列表切换并和头布局联动;

注意:不是双列表联动,是多列表和头布局联动;

大概就是和饿了么店铺首页类似的布局框架吧,头布局显示时,列表RecyclerView或ScrollView和头布局一起滚动,头布局完全隐藏后列表再去滚动,可以多个列表切换;

有空再上图看效果吧;

1、主要的布局文件,注释写的很清楚;

1<?xml version="1.0" encoding="utf-8"?> 2<android.support.design.widget.CoordinatorLayout 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 xmlns:tools="http://schemas.android.com/tools" 5 xmlns:app="http://schemas.android.com/apk/res-auto" 6 android:layout_width="match_parent" 7 android:layout_height="match_parent" 8 tools:context=".MainActivity"> 9 <android.support.design.widget.AppBarLayout 10 android:id="@+id/appbar" 11 android:layout_width="match_parent" 12 android:layout_height="222dp"> 13 14 <!--最为重要的属性就是 app:layout_scrollFlags :设置上半部分滑动的方式 15 1.scroll 表示CollapsingToolbarLayout可以滚动(不设置的话头部的ImageView将不能折叠) 16 2.enterAlways 表示底部的滚动控件只要向下滚动,头部就显示出来 17 3.enterAlwaysCollapsed 表示当底部滚动控件滚动见顶时,头部显示出来 18 4.exitUntilCollapsed 表示头部折叠到最小高度时(Toolbar的高度),就不再折叠 19 5.snap 表示在滑动过程中如果停止滑动,则头部会就近折叠(要么恢复原状,要么折叠成一个Toolbar)--> 20 <!--app:contentScrim="@color/colorWhite" 折叠后的颜色--> 21 22 <android.support.design.widget.CollapsingToolbarLayout 23 android:layout_width="match_parent" 24 app:contentScrim="@color/colorWhite" 25 app:layout_scrollFlags="scroll|exitUntilCollapsed" 26 android:layout_height="match_parent"> 27 28 <!--app:layout_collapseParallaxMultiplier="0.6" 视差效果--> 29 30 <RelativeLayout 31 android:layout_width="match_parent" 32 android:layout_height="match_parent" 33 android:background="@drawable/banner" 34 app:layout_collapseMode="parallax" 35 app:layout_collapseParallaxMultiplier="0.6" 36 ></RelativeLayout> 37 38 <!--app:layout_collapseMode="pin" Toolbar的状态,是否一直显示--> 39 40 <android.support.v7.widget.Toolbar 41 app:layout_collapseMode="pin" 42 app:contentInsetStart="0dp" 43 android:layout_width="match_parent" 44 android:layout_height="48dp"> 45 <TextView 46 android:layout_width="match_parent" 47 android:layout_height="match_parent" 48 android:background="#00ffffff" 49 android:text="点击开始搜索" 50 android:textSize="16dp" 51 android:gravity="center" 52 android:id="@+id/tv" 53 ></TextView> 54 </android.support.v7.widget.Toolbar> 55 </android.support.design.widget.CollapsingToolbarLayout> 56 </android.support.design.widget.AppBarLayout> 57 58 <!--app:layout_behavior="@string/appbar_scrolling_view_behavior" 在整体布局的下面--> 59<RelativeLayout 60 app:layout_behavior="@string/appbar_scrolling_view_behavior" 61 android:layout_width="match_parent" 62 android:background="@color/colorWhite" 63 android:layout_height="match_parent"> 64 <android.support.design.widget.TabLayout 65 android:id="@+id/tab" 66 android:layout_width="match_parent" 67 android:layout_height="46dp"> 68 </android.support.design.widget.TabLayout> 69 <c.c.b.listortoolbar.NotConflictViewPager 70 android:id="@+id/vp" 71 android:layout_width="match_parent" 72 android:layout_height="match_parent" 73 android:layout_below="@id/tab" 74 ></c.c.b.listortoolbar.NotConflictViewPager> 75 76</RelativeLayout> 77 78</android.support.design.widget.CoordinatorLayout>

2、该布局中的Activity写法:

1public class MainActivity extends AppCompatActivity { 2 3 private TabLayout tabLayout; 4 private NotConflictViewPager vp; 5 private TextView tv; 6 private AppBarLayout appbar; 7 private List<String> datas = Arrays.asList("呢呢","嘿嘿","哈哈"); 8 @Override 9 protected void onCreate(Bundle savedInstanceState) { 10 super.onCreate(savedInstanceState); 11 setContentView(R.layout.activity_main); 12 tabLayout = (TabLayout)findViewById(R.id.tab); 13 vp = (NotConflictViewPager)findViewById(R.id.vp); 14 tv = (TextView) findViewById(R.id.tv); 15 appbar = (AppBarLayout) findViewById(R.id.appbar); 16 tabLayout.setupWithViewPager(vp); 17 vp.setAdapter(new Ap(getSupportFragmentManager())); 18 19 appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() { 20 @Override 21 public void onOffsetChanged(AppBarLayout appBarLayout, int i) { 22 if (i == 0){ //打开 23 tv.setTextColor(getResources().getColor(R.color.colorWhite)); 24 }else if (Math.abs(i) >= appbar.getTotalScrollRange()){ //折叠 25 tv.setTextColor(getResources().getColor(R.color.defaultTextview)); 26 }else { 27// 中间 28 } 29 } 30 }); 31 } 32 33 class Ap extends FragmentStatePagerAdapter{ 34 35 public Ap(FragmentManager fm) { 36 super(fm); 37 } 38 39 @Override 40 public Fragment getItem(int i) { 41 return new cFragment(datas.get(i)); 42 } 43 44 @Override 45 public int getCount() { 46 return datas.size(); 47 } 48 49 @Nullable 50 @Override 51 public CharSequence getPageTitle(int position) { 52 return datas.get(position); 53 } 54 } 55}

3、填充ViewPager的Fragment;

R.layout.fragment_c (子条目的layout就不写了,随便一个有内容的布局就行)

1<?xml version="1.0" encoding="utf-8"?> 2<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" 6 tools:context=".cFragment"> 7 8<android.support.v7.widget.RecyclerView 9 android:id="@+id/rv" 10 android:layout_width="match_parent" 11 android:layout_height="match_parent"></android.support.v7.widget.RecyclerView> 12 13</FrameLayout> 14 15public class cFragment extends Fragment { 16 17 18 public cFragment() { 19 20 } 21 private String title; 22 @SuppressLint("ValidFragment") 23 public cFragment(String title) { 24 this.title = title; 25 } 26 27 28 @Override 29 public View onCreateView(LayoutInflater inflater, ViewGroup container, 30 Bundle savedInstanceState) { 31 View v = inflater.inflate(R.layout.fragment_c, container, false); 32 initView(v); 33 return v; 34 } 35 36 private void initView(View view) { 37 RecyclerView rv = view.findViewById(R.id.rv); 38 if("嘿嘿".equals(title)){ 39 rv.setLayoutManager(new GridLayoutManager(getActivity(),2)); 40 rv.addItemDecoration(new GridDividerItemDecoration(getActivity())); //分割线,报错删除就行了; 41 }else { 42 rv.addItemDecoration(new DividerItemDecoration(getActivity(),1)); 43 rv.setLayoutManager(new LinearLayoutManager(getActivity())); 44 } 45 rv.setAdapter(new Ap()); 46 } 47 48 class Ap extends RecyclerView.Adapter<Ap.Vh>{ 49 @Override 50 public Vh onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) { 51 return new Vh(LayoutInflater.from(getContext()).inflate(R.layout.item_rv, viewGroup, false)); 52 } 53 54 @Override 55 public void onBindViewHolder(@NonNull Vh vh, int i) { 56 vh.tv.setText(title); 57 } 58 59 @Override 60 public int getItemCount() { 61 return 20; 62 } 63 64 class Vh extends RecyclerView.ViewHolder{ 65 TextView tv; 66 public Vh(@NonNull View itemView) { 67 super(itemView); 68 tv = itemView.findViewById(R.id.tv); 69 70 } 71 } 72 } 73}

   列表和ViewPager冲突解决;

1public class NotConflictViewPager extends ViewPager { 2 public NotConflictViewPager(Context context) { 3 super(context); 4 } 5 6 public NotConflictViewPager(Context context, AttributeSet attrs) { 7 super(context, attrs); 8 } 9private float mX; 10 private float mY; 11 @Override 12 public boolean dispatchTouchEvent(MotionEvent ev) { 13 switch (ev.getAction()){ 14 case MotionEvent.ACTION_DOWN: 15 mX = ev.getX(); 16 mY = ev.getY(); 17 getParent().requestDisallowInterceptTouchEvent(true); 18 break; 19 case MotionEvent.ACTION_MOVE: 20 if (Math.abs(mX-ev.getX())> Math.abs(mY-ev.getY())){ 21 getParent().requestDisallowInterceptTouchEvent(true); 22 }else{ 23 getParent().requestDisallowInterceptTouchEvent(false); 24 } 25 break; 26 case MotionEvent.ACTION_UP: 27 case MotionEvent.ACTION_CANCEL: 28 getParent().requestDisallowInterceptTouchEvent(false); 29 break; 30 } 31 return super.dispatchTouchEvent(ev); 32 } 33}
点赞
收藏

评论区

加载中...

相关推荐

MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1

文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s

Oracle 分组与拼接字符串同时使用

SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(

MySQL部分从库上面因为大量的临时表tmp_table造成慢查询

背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

java将前端的json数组字符串转换为列表

记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang

2020年前端实用代码段,为你的工作保驾护航

有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )