美文网首页
TabLayout实现选项卡的动态滑动

TabLayout实现选项卡的动态滑动

作者: 云烟渐成雨 | 来源:发表于2019-06-15 02:09 被阅读0次

    1.主界面的布局

    <?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"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        tools:context=".tablayout.TabLayoutActivity">
    
        <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    
            <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?actionBarSize"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    
            <com.google.android.material.tabs.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:tabIndicatorColor="#ffff"
                app:tabMode="fixed"
                app:tabTextColor="#fff"
                app:tabSelectedTextColor="@color/indicator"
                />
        </com.google.android.material.appbar.AppBarLayout>
    
        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior" />
    
    </LinearLayout>
    

    TabLayout标签:

    • app:tabMode="fixed"表示固定不滑动,"scrollable"为可滑动的
    • app:tabTextColor="#fff"未选中字体的颜色
    • app:tabSelectedTextColor="@color/indicator"选中的字体的颜色
    • app:tabIndicatorColor="@color/indicator"底部指示器的颜色

    2.Activity中引用该布局

    public class TabLayoutActivity extends AppCompatActivity {
    
        private Toolbar mToolbar;
        private ViewPager mViewPager;
        private TabLayout mTabLayout;
        private FragmentAdapter mFragmentAdapter;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_tab_layout);
    
            mToolbar = findViewById(R.id.toolbar);
            setSupportActionBar(mToolbar);
            mViewPager = findViewById(R.id.viewpager);
            initViewPager();
        }
    

    initViewPager()方法的代码

    private void initViewPager() {
            mTabLayout = findViewById(R.id.tabs);
    
            List<String> titles = new ArrayList<>();
            titles.add("精选");
            titles.add("铃铛");
            titles.add("叮当");
            titles.add("测试");
    
            for (int i = 0;i<titles.size();i++){
                mTabLayout.addTab(mTabLayout.newTab().setText(titles.get(i)));
            }
    
            List<Fragment> fragments = new ArrayList<>();
            for (int i=0;i<titles.size();i++){
                fragments.add(new ListFragment());
            }
            //给ViewPager设置适配器
            mFragmentAdapter = new FragmentAdapter(getSupportFragmentManager(), FragmentStatePagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT,fragments,titles);
            mViewPager.setAdapter(mFragmentAdapter);
            //将TabLayout和ViewPager关联起来
            mTabLayout.setupWithViewPager(mViewPager);
        }
    

    3.ListFragment定义

    public class ListFragment extends Fragment {
    
        private RecyclerView mRecycleView;
    
        @Nullable
        @Override
        public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
            mRecycleView = (RecyclerView) inflater.inflate(R.layout.list_fragment,container,false);
    
            return mRecycleView;
        }
    
        @Override
        public void onActivityCreated(@Nullable Bundle savedInstanceState) {
            super.onActivityCreated(savedInstanceState);
            mRecycleView.setLayoutManager(new LinearLayoutManager(mRecycleView.getContext()));
            mRecycleView.setAdapter(new RecyclerViewAdapter(getActivity()));
        }
    }
    

    布局文件

    <?xml version="1.0" encoding="utf-8"?>
    <androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
    </androidx.recyclerview.widget.RecyclerView><?xml version="1.0" encoding="utf-8"?>
    <androidx.recyclerview.widget.RecyclerView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    
    </androidx.recyclerview.widget.RecyclerView>
    

    4.RecyclerViewAdapter定义

    public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
        private Context mContext;
    
        public RecyclerViewAdapter(Context context){
            mContext = context;
        }
    
        @NonNull
        @Override
        public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(mContext).inflate(R.layout.item_recycler,parent,false);
            return new ViewHolder(view);
        }
    
        @Override
        public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
          holder.mView.setOnClickListener(view -> ToastUtil.toastShort(mContext,"菜鸟的学习之路"));
        }
    
        @Override
        public int getItemCount() {
            return 1000;
        }
    
        class ViewHolder extends RecyclerView.ViewHolder{
            TextView textView;
            View mView;
            public ViewHolder(@NonNull View itemView) {
                super(itemView);
                textView = itemView.findViewById(R.id.tv_item);
                mView = itemView;
            }
        }
    }
    

    布局文件

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:background="@android:color/white"
        android:layout_height="wrap_content"
        android:layout_margin="2dp">
    
        <TextView
            android:id="@+id/tv_item"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:gravity="center"
            android:text="test"/>
    
    </FrameLayout>
    

    5.FragmentAdapter定义

    public class FragmentAdapter extends FragmentStatePagerAdapter {
        private List<Fragment> mFragments;
        private List<String> mTitles;
    
    
        public FragmentAdapter(@NonNull FragmentManager fm, int behavior, List<Fragment> fragments,List<String> titles) {
            super(fm, behavior);
            mFragments = fragments;
            mTitles = titles;
        }
    
        @NonNull
        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }
    
        @Override
        public int getCount() {
            return mFragments.size();
        }
    
        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return mTitles.get(position);
        }
    }
    
    VK84PK.jpg

    相关文章

      网友评论

          本文标题:TabLayout实现选项卡的动态滑动

          本文链接:https://www.haomeiwen.com/subject/nhrvfctx.html