Android滑动导航菜单TabLayout+ViewPager+Fragment

1.主要的Activity——MemberDetailActivity

2.Activity视图的xml文件——R.layout.activity_member_detail

3.自定义的Fragment子类——CustomTrainingFragment

4.Fragment视图的xml文件——

5.自定义Fragment子类的适配器

//1.MemberDetailActivitypackage com.vimems.coach;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.widget.TableLayout;

import com.vimems.Adapter.CustomTrainingFragmentPageAdapter;
import com.vimems.R;

import java.util.ArrayList;
import java.util.List;

import util.BaseActivity;

public class MemberDetailActivity extends BaseActivity {

    private CustomTrainingFragmentPageAdapter pageAdapter;
    private ViewPager viewPager;
    private TabLayout tabLayout;

    List<Fragment> fragmentList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_member_detail);

        // TODO: 2/10/2019 暂时用一个fragment代替
        fragmentList=new ArrayList<>();
        fragmentList.add(new CustomTrainingFragment());
        fragmentList.add(new CustomTrainingFragment());
        fragmentList.add(new CustomTrainingFragment());
        FragmentManager fragmentManager=getSupportFragmentManager();
        pageAdapter=new CustomTrainingFragmentPageAdapter(fragmentManager,fragmentList);
        viewPager=findViewById(R.id.training_mode_viewpager);
        tabLayout=findViewById(R.id.training_mode_tab);
        viewPager.setAdapter(pageAdapter);
        //让TabLayout与viewpager产生联动
        tabLayout.setupWithViewPager(viewPager);
    }
}
//R.layout.activity_member_detail//包含一个TabLayout和一个ViewPager
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">
    <TextView
        android:paddingTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/single_mode"
        android:gravity="center"/>
    <!--todo 可以改为一个TableLa+ViewPage-->

    <android.support.design.widget.TabLayout
        android:id="@+id/training_mode_tab"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill">
    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/training_mode_viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

    </android.support.v4.view.ViewPager>

</android.support.v7.widget.LinearLayoutCompat>
//3CustomTrainingFragment
package com.vimems.coach;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.vimems.R;

public class CustomTrainingFragment extends Fragment {
    public static final String ARG_PAGE="ARG_PAGE";
    private int mPage;

    //使用newInstance的方式,或者在CustomTrainingFragmentPageAdapter中添加一个列表
//    fragments=new ArrayList<>();
//        //将提前写好三个Fragment添加到集合中
//        fragments.add(new FirstFragment());
//        fragments.add(new SecondFragment());
//        fragments.add(new ThirdFragment());
//    在适配器的构造方法中传入参数fragmentManage、fragments
//    在适配器的getItem方法中return fragments.get(position)
    public static CustomTrainingFragment newInstance(int page){

        Bundle bundle=new Bundle();
        bundle.putInt(ARG_PAGE,page);
        CustomTrainingFragment customTrainingFragment=new CustomTrainingFragment();
        customTrainingFragment.setArguments(bundle);
        return customTrainingFragment;
    }

    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mPage=getArguments().getInt(ARG_PAGE);
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view=inflater.inflate(R.layout.fragment_custom_training,container,false);
        return view;
    }
}
//4.Fragment的布局文件,
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.LinearLayoutCompat
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.v7.widget.LinearLayoutCompat
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:paddingLeft="10dp">
        <TextView
            android:text="@string/custom_training_options"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textStyle="bold"
            />
        <RadioGroup
            android:id="@+id/custom_training_options"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <RadioButton
                android:id="@+id/custom_training_options_gain_muscle"
                android:text="@string/custom_training_options_gain_muscle"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>
            <RadioButton
                android:id="@+id/custom_training_options_lose_fat"
                android:text="@string/custom_training_options_lose_fat"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>
            <RadioButton
                android:id="@+id/custom_training_options_shape"
                android:text="@string/custom_training_options_shape"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>
            <RadioButton
                android:id="@+id/custom_training_options_recovery"
                android:text="@string/custom_training_options_recovery"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"/>
        </RadioGroup>

    </android.support.v7.widget.LinearLayoutCompat>
    <FrameLayout
        android:id="@+id/custom_training_options_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></FrameLayout>

</android.support.v7.widget.LinearLayoutCompat>
//fragment的适配器CustomTrainingFragmentPageAdapter
package com.vimems.Adapter;

import android.content.Context;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import com.vimems.coach.CustomTrainingFragment;

import java.util.List;

import util.Constants;

public class CustomTrainingFragmentPageAdapter extends FragmentPagerAdapter {

    private List<Fragment> fragmentList;
    private static final String[] tabTitle=Constants.TRAINING_MODE;
    public CustomTrainingFragmentPageAdapter(FragmentManager fm, List<Fragment> fragmentList) {
        super(fm);
        this.fragmentList=fragmentList;
    }

    @Override
    public Fragment getItem(int i) {
//        用自定义Fragment的newInstance()方法返回一个实例
//        return CustomTrainingFragment.newInstance(i);

//        自定义的fragment列表
        return fragmentList.get(i);
        //return CustomTrainingFragment.newInstance(i+1);
    }

    @Override
    public int getCount() {
        return tabTitle.length;
    }

// 添加tab的标题title
// 如下这种使用方式好像不行
//    mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
//    TabLayout.Tab tab1 = mTabLayout.newTab()
//                //设置tab项显示的文字
//                .setText("tab1");
//     TabLayout.Tab tab2 = mTabLayout.newTab().setText("tab2");
//    TabLayout.Tab tab3 = mTabLayout.newTab().setText("tab3");
//        mTabLayout.addTab(tab1);
//        mTabLayout.addTab(tab2);
//        mTabLayout.addTab(tab3);
    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitle[position];
    }
}

原文地址:https://www.cnblogs.com/sunupo/p/10360671.html

时间: 2024-11-08 19:56:54

Android滑动导航菜单TabLayout+ViewPager+Fragment的相关文章

Android 滑动导航菜单的快速构建(二) Material Design

原创文章,转载请注明 ( 来自:http://blog.csdn.net/leejizhou/article/details/52046748 李济洲的博客 ) 上一篇 http://blog.csdn.net/leejizhou/article/details/52013343 介绍了几个滑动导航菜单效果的快速构建,这篇文章来总结"当下"如何按照Android的设计标准去设计滑动导航菜单,我为什么说的"当下"呢?因为这个设计标准是会变的. 在material de

Android开发之漫漫长途 Fragment番外篇——TabLayout+ViewPager+Fragment

该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解Android 卷Ⅰ,Ⅱ,Ⅲ>中的相关知识,另外也借鉴了其他的优质博客,在此向各位大神表示感谢,膜拜!!! 前言 上一篇文章中我们使用底部导航+Fragment的方式实现了Android主流App中大都存在的设计.并命名其为"Fragment最佳实践",作为想到单独使用Fragment的用

android项目剖解之ViewPager+Fragment 实现tabhost效果

项目中需要用到底栏导航栏,滑动或者点击会切换上面的视图,如图: 这个效果使用Viewpager+Fragmen实现是主流方案,加入你之前对fragment不太了解,可以先看android之Fragment(官网资料翻译) 整个文件如下: 好了废话少说,先上布局文件:main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://sche

android控件篇:ViewPager+Fragment+GridView的使用(与AndroidQuery框架结合)

最近看了一个AndroidQuery的框架,里面的Demo,有个界面,让博主很喜欢.左右滑动十分顺畅,手感很好,于是拿来和大家分享一下.先看一下效果图: 从图中可以看出,上面的布局是一个Layout里面嵌套有个ViewPager,ViewPager中包含着Fragment,Fragment的布局文件包含了一个简单的GridView,GridView的Item布局很简单,就是一个100*100大小的图片.好啦,先说这么多,然后咱们看代码吧. 最外层Activity的布局文件 <?xml versi

jQuery滑动导航菜单

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <meta name="author" content="abangsir" /> <title>jQuery弹性滑动导航菜单</title> <style type="text/css"> body{ font-famil

Android 导航条效果实现(六) TabLayout+ViewPager+Fragment

TabLayout 一.继承结构 public class TabLayout extends HorizontalScrollView java.lang.Object ? android.view.View ? android.view.ViewGroup ? android.widget.FrameLayout ? android.widget.HorizontalScrollView ? android.support.design.widget.TabLayout 二.TabLayou

Tab 滑动标签,综合ViewPager+Fragment+自定义Tab+ActionBar内容

1.效果图 第二个菜单TAB1,TAB2,TAB3是参照网上的例子,第一个菜单是在它的基础之上改变而来. 2.菜单 这里的菜单是通过两种方式来实现,一种是通过布局文件,一种是通过自定义组件LinearLayout.自定义只需要传入菜单的名字即可,切换时需要监听事件.下面是一个viewpager+fragment实现,在滑动时改变tab的选中项. 自定义tab底部线是采用TranslateAnimation动画来实现滚动,布局文件采用viewpager的方法onPageScrolled和onPag

TabLayout+ViewPager+Fragment制作页卡

本人很懒,直接上代码了. 布局文件: <?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-

关于tablayout+viewpager+fragment配合使用的一点记录

最近在写项目的时候遇到要求使用tablayout和fragment,遇到了这里记录一下大致思路. tablayout是头部可以左右切换的头部控制栏控件,配合viewpager使用,fragment是碎片,可以放在viewpager里面,实现类似网易云音乐首页切换的效果.效果图如下: 首先添在build.gradle里面添加依赖: 1 implementation 'com.android.support:support-v4:28.0.0' 2 implementation 'com.andro