注意:不是双列表联动,是多列表和头布局联动;
大概就是和饿了么店铺首页类似的布局框架吧,头布局显示时,列表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}