将 MVVM 架构中的 Tab 布局与数据绑定库一起使用
Posted
技术标签:
【中文标题】将 MVVM 架构中的 Tab 布局与数据绑定库一起使用【英文标题】：Use Tab layout in MVVM architecture with the data binding library 【发布时间】：2017-06-02 18:28:51 【问题描述】：我正在开发一个具有标签布局作为图像的应用程序。
我想将 MVVM 架构与数据绑定库一起使用，但我是这个框架的新手。
我可以在不使用 MVVM 的情况下执行此操作，方法是使用 ViewPager 作为此示例正常设置选项卡布局。
没有 MVVM 和数据绑定的普通选项卡布局：
activity_main.xml：
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_
android:layout_>
<android.support.design.widget.AppBarLayout
android:layout_
android:layout_
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_
android:layout_
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="@+id/tabs"
android:layout_
android:layout_
app:tabMode="fixed"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_
android:layout_
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
MainActivity.java：
public class MainActivity extends AppCompatActivity
private Toolbar toolbar;
private TabLayout tabLayout;
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
viewPager = (ViewPager) findViewById(R.id.viewpager);
setupViewPager(viewPager);
tabLayout = (TabLayout) findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
private void setupViewPager(ViewPager viewPager)
ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
adapter.addFragment(new OneFragment(), "ONE");
adapter.addFragment(new TwoFragment(), "TWO");
adapter.addFragment(new ThreeFragment(), "THREE");
viewPager.setAdapter(adapter);
class ViewPagerAdapter extends FragmentPagerAdapter
private final List<Fragment> mFragmentList = new ArrayList<>();
private final List<String> mFragmentTitleList = new ArrayList<>();
public ViewPagerAdapter(FragmentManager manager)
super(manager);
@Override
public Fragment getItem(int position)
return mFragmentList.get(position);
@Override
public int getCount()
return mFragmentList.size();
public void addFragment(Fragment fragment, String title)
mFragmentList.add(fragment);
mFragmentTitleList.add(title);
@Override
public CharSequence getPageTitle(int position)
return mFragmentTitleList.get(position);
MVVM 中的选项卡布局：
当使用带有数据绑定库的 MVVM 时，我们将不得不为选项卡布局视图使用视图模型。
而且我不知道如何在 XML 和视图模型中设置选项卡布局。如何使用数据绑定库处理“点击布局的一个选项卡”等事件
有没有在 MVVM 中使用 Tab 布局和数据绑定库的示例？
感谢您的帮助。
【问题讨论】：
【参考方案1】：MainActivity -
public class MainActivity extends Activity
@Override
protected void onCreate(@Nullable final Bundle savedInstanceState)
super.onCreate(savedInstanceState);
App.get(this).component().inject(this);
ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);
binding.setHandler(this);
binding.setManager(getSupportFragmentManager());
@BindingAdapter("bind:handler")
public static void bindViewPagerAdapter(final ViewPager view, final MainActivity activity)
final MainActionsAdapter adapter = new MainActionsAdapter(view.getContext(), activity.getSupportFragmentManager());
view.setAdapter(adapter);
@BindingAdapter("bind:pager")
public static void bindViewPagerTabs(final TabLayout view, final ViewPager pagerView)
view.setupWithViewPager(pagerView, true);
xml -
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<data>
<import type="android.view.View" />
<variable
name="handler"
type="com.ui.main.MainActivity" />
<variable
name="manager"
type="android.support.v4.app.FragmentManager" />
</data>
<LinearLayout
android:layout_
android:layout_
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_
android:layout_
android:animateLayoutChanges="true"
app:title="@string/app_name"
app:titleMarginStart="8dp" />
<android.support.design.widget.TabLayout
android:id="@+id/tab_layout"
android:layout_
android:layout_
app:pager="@(pager)">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_
android:layout_
app:handler="@handler" />
</LinearLayout>
</layout>
适配器 -
public class MainSectionsAdapter extends FragmentPagerAdapter
private static final int CONTACTS = 0;
private static final int CALLS = 1;
private static final int CHATS = 2;
private static final int[] TABS = new int[]CONTACTS, CALLS, CHATS;
private Context mContext;
public MainSectionsAdapter(final Context context, final FragmentManager fm)
super(fm);
mContext = context.getApplicationContext();
@Override
public Fragment getItem(int position)
switch (TABS[position])
case CONTACTS:
return ContactsFragment.newInstance();
case CALLS:
return CallsFragment.newInstance();
case CHATS:
return ChatsFragment.newInstance();
return null;
@Override
public int getCount()
return TABS.length;
@Override
public CharSequence getPageTitle(int position)
switch (TABS[position])
case CONTACTS:
return mContext.getResources().getString(R.string.contacts);
case CALLS:
return mContext.getResources().getString(R.string.calls);
case CHATS:
return mContext.getResources().getString(R.string.chats);
return null;
【讨论】：
你能展示一下 MainActionsAdapter 背后的代码吗？谢谢 加入回答 我正在尝试在片段中添加选项卡布局，这意味着我需要使用 getChildFragmentManager。你知道我该怎么做吗？ @AntonMakov 你找到使用 Fragments 的方法了吗？ 我们没有找到如何使用 childfragmentmanager 来绑定数据的解决方案，最终我们将所有内容都移到了父片段中，因此我们不再需要使用 childfragmentmanager。跨度> 【参考方案2】：这是我使用databinding 对setUpWithViewpager 的解决方案：
public class BindingUtil
@BindingAdapter( "setUpWithViewpager" )
public static void setUpWithViewpager(final TabLayout tabLayout, ViewPager viewPager)
viewPager.addOnAdapterChangeListener(new ViewPager.OnAdapterChangeListener()
@Override
public void onAdapterChanged(@NonNull ViewPager viewPager, @Nullable PagerAdapter oldAdapter, @Nullable PagerAdapter newAdapter)
if (oldAdapter == null && (newAdapter == null || newAdapter.getCount() == 0))
// this function will helpful when
// we don't create viewpager immediately
// when view created (this mean we create
// will pager after a period time)
return;
tabLayout.setupWithViewPager(viewPager);
);
xml
<android.support.design.widget.TabLayout
...
app:setUpWithViewpager="@ viewPager "
/>
<android.support.v4.view.ViewPager
...
android:id="@+id/viewPager"
app:adapter="@viewModel.pagerAdapter"
/>
视图模型
public class MainViewModel extends BaseObservable
@Bindable
public PagerAdapter getPagerAdapter()
return adapter;
private void createViewPagerAdapter()
...
notifyPropertyChanged(BR.pagerAdapter);
full demo project here
【讨论】：
【参考方案3】：我不确定这是否是最近新推出的，但使用 Android 支持版本 27.1.1，您甚至不需要自定义数据绑定适配器，您可以简单地使用：
<android.support.design.widget.TabLayout
android:id="@+id/tl_1"
android:layout_
android:layout_
app:setupWithViewPager="@some_fragment_viewpager"
app:tabSelectedTextColor="@android:color/white"
app:tabTextColor="@color/v5_grey_55"
/>
<android.support.v4.view.ViewPager
android:id="@+id/some_fragment_viewpager"
android:layout_
android:layout_
app:addOnPageChangeListener="@vm.pageChangeListener"
app:setAdapter="@vm.pageAdapter"
app:setCurrentItem="@vm.pageChangeListener.currentPosition"
/>
注意app:setupWithViewPager="@some_fragment_viewpager" 中的viewPager 变量指向android:id="@+id/some_fragment_viewpager"。
这就是对 ViewPager 的引用完成的方式（就像我知道的魔法一样）！
视图模型
public class SomeViewModel
public ViewPager.OnPageChangeListener pageChangeListener;
public SomeFragmentPagerAdapter pagerAdapter;
// ...
FragmentPagerAdapter
public classs SomeFragmentPagerAdapter extends FragmentPagerAdapter
public Boolean currentPosition;
【讨论】：
可以分享一下ViewModel@ericn
@ericn，如果我使用 FragmentPagerAdapter，如何在不使用 fragmentmanager 的情况下在视图模型中创建它？【参考方案4】：
如Phan Van Linh's answer 所示，它对我有用，但显示绑定错误，而我们在括号中提供viewPager 的 ID 作为对tabLayout 的引用。
我通过简单地提供不带括号的 id 并在 camelCase 中提供 ViewPager 的 ID 解决了这个问题。
【讨论】：
以上是关于将 MVVM 架构中的 Tab 布局与数据绑定库一起使用的主要内容，如果未能解决你的问题，请参考以下文章
JetpackDataBinding 架构组件 ( 数据绑定技术简介 | Android 中的 DataBinding 数据绑定 | 启动数据绑定 | 定义数据类 | 布局文件转换 )