首页 > 学院 > 开发设计 > 正文

NavigationView+ToolBar+TabLayout+ViewPager+Fragment综合使用

2019-11-07 23:17:58
字体:
来源:转载
供稿:网友
NavigationView:侧滑菜单ToolBar:标题栏TabLayout:顶部导航ViewPager:左右切换当前(滑动)view1.activity_main界面分析(侧滑菜单:NavigationView+内容View:ToolBar(代替ActionBar)+TabLayout(导航)+ViewPager(轮播图))2. ToolBar使用3. DrawerLayout使用同等于NavigationView4. NavigationView使用(添加布局即可出现测滑菜单)需要添加依赖: designapp:headerLayout:导航视图的头布局app:menu:导航视图的菜单部分<android.support.design.widget.NavigationViewandroid:id="@+id/nav_view"android:layout_gravity="start"android:layout_width="wrap_content"app:menu="@menu/activity_main_drawer"app:headerLayout="@layout/nav_header"android:layout_height="match_parent"/>注意:<!--该主内容布局部分必须放在侧滑菜单布局前,否则不能实现侧滑的点击事件-->95.NavigationView的监听事件(点击交互)(1)findViewById找到该控件NavigationView navView= (NavigationView) findViewById(R.id.nav_view);(2)使所在类继承OnNavigationItemSelectedListenerMainActivity extendsAppCompatActivityimplementsNavigationView.OnNavigationItemSelectedListener(3)设置监听器navView.setNavigationItemSelectedListener(this);(4)重写onNavigationItemSelected方法实现监听小细节:引入DrawerLayout实现侧滑菜单的关闭:(1)findViewById找到该控件(2)设置closeDrawers方法即可@Overridepublic booleanonNavigationItemSelected(@NonNullMenuItem item) {drawableLayout.closeDrawers();//单击侧滑菜单,关闭抽屉,隐藏菜单item.setChecked(true);//设置当前的菜单项为选中状态高亮显示switch(item.getItemId()){
case  R.id.nav_camera:    Toast.makeText(this, "拍照", Toast.LENGTH_SHORT).show();    break;case  R.id.nav_gallery:    Toast.makeText(this, "gallery", Toast.LENGTH_SHORT).show();    break;case  R.id.nav_manage:    Toast.makeText(this, "manage", Toast.LENGTH_SHORT).show();    break;}return false;}5.能够独立使用ToolBar (ActionBar操作栏,5.0以后用Toolbar取代 )能自动添加应用名称作为头部(0)布局文件中书写内容<!--Toolbar :取代Actionbar,比ActionBar更灵活--><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:background="@color/colorPRimary"android:layout_height="wrap_content"/>(1)findViewById找到该控件Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar);(2)初始化Toolbar,设置背景颜色(布局文件中设置)以及字体颜色(代码设置)//初始化Toolbar,注意在setSupportActionBar之前初始化Toolbar//设置Toolbar标题颜色toolbar.setTitleTextColor(Color.WHITE);//布局文件中设置背景颜色android:background="@color/colorPrimary"//取代Actionbar//1.设置value文件夹style设置应用主题<stylename="APPTheme.NoActionbar"><itemname="windowActionBar">false</item><itemname="windowNoTitle">true</item></style>//2在清单文件中设置没有ActionBarandroid:theme="@style/AppTheme.NoActionbar"//3.取代Actionbar 注意此步骤必须在ToolBar与Navigationview关联之前进行,否则不生效setSupportActionBar(toolbar);6.设置Toolbar的导航图标同步效果(自动添加导航图标,点击图标会打开侧滑菜单,点击侧滑菜单以外部分会关闭侧滑菜单,当拉动侧滑菜单时,ToolBar有一个动的效果,即侧滑菜单与ToolBar按钮进行关联)// 参数1 当前actionBar所在的activity// 参数2 控制是哪个抽屉// 参数3 ToolBar// 参数4 抽屉打开的描述// 参数5 抽屉关闭的描述ActionBarDrawerToggle barDrawerToggle=newActionBarDrawerToggle(this,drawableLayout,toolbar,R.string.drawer_open,R.string.drawer_close);barDrawerToggle.syncState();//同步状态//设置状态更新的监听drawableLayout.addDrawerListener(barDrawerToggle);将ToolBar的按钮颜色变成白色(默认为黑色)添加style中的属性:(1)增加一种继承自Widget.AppCompat.DrawerArrowToggle的style,这里叫做"DrawerArrowStyle"。在里面加上你想要的颜色<stylename="DrawerArrowStyle"parent="Widget.AppCompat.DrawerArrowToggle"><itemname="color">@color/colorWhite</item></style>(2)在 style "AppTheme" 中增加一行名为 drawerArrowStyle 的这种 style。<itemname="drawerArrowStyle">@style/DrawerArrowStyle</item>(3)改变Navigation内容的颜色使之改变仍然有状态变化:添加状态选择器(selector)7.使用TabLayout(导航滑动)(0)布局文件中书写内容TabLayout:<android.support.design.widget.TabLayoutandroid:id="@+id/tab_layout"android:layout_width="match_parent"app:tabBackground="@color/colorPrimary"app:tabSelectedTextColor="#ff0000"android:layout_height="wrap_content"/>ViewPager<android.support.v4.view.ViewPagerandroid:id="@+id/main_viewpager"android:layout_width="match_parent"android:layout_height="match_parent"/>(1)findViewById找到TabLayout控件并设置模式以及绑定ViewPagerTabLayout tabLayout= (TabLayout) findViewById(R.id.tab_layout);tabLayout.setTabMode((TabLayout.MODE_SCROLLABLE));//滚动模式//与ViewPager 绑定在一起 ,TabLayout的页签标题通过PagerAdpater的getPagerTitle()来取得tabLayout.setupWithViewPager(viewPager);(2)findViewById找到TabLayout控件并设置适配器并书写7个片段继承一个基片段ViewPager viewPager= (ViewPager) findViewById(R.id.main_viewpager);viewPager.setAdapter(newMainPagerAdapter(getSupportFragmentManager()));/*** MainActivity七个导航滑动条和TabLayout的导航标题显示的适配器*/public classMainPagerAdapterextendsFragmentPagerAdapter {String[]tabs;publicMainPagerAdapter(FragmentManager fm) {super(fm);tabs= CommonUtil.getStringArray(R.array.tab_names);}//取得片段@OverridepublicFragment getItem(intposition) {BaseFragment fragment=null;switch(position){
case  0:    fragment=new HomeFragement();    break;
case  1:    fragment=new RecommendFragement();    break;case  2:    fragment=new SubjectFragement();    break;case  3:    fragment=new GameFragement();    break;case  4:    fragment=new HotFragement();    break;case 5:    fragment=new CategoryFragment();    break;case 6:    fragment=new AppFragement();    break;}returnfragment;}@Overridepublic int getCount() {returntabs.length;}//TabLayout的页签标题依赖该方法进行展示,获取TabLayout导航的标题@OverridepublicCharSequence getPageTitle(intposition) {returntabs[position];}}以下是详细的代码:activity_main.xml
<?xml version="1.0" encoding="utf-8"?><!--抽屉布局--><android.support.v4.widget.DrawerLayout    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    android:id="@+id/drag_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    >    <LinearLayout        android:layout_width="match_parent"        android:layout_height="match_parent"        android:orientation="vertical">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@color/colorPrimary"/>       <android.support.design.widget.TabLayout           android:id="@+id/tablayout"           android:layout_width="match_parent"           android:layout_height="wrap_content"           app:tabBackground="@color/colorPrimary"           app:tabSelectedTextColor="#f00"/>        <android.support.v4.view.ViewPager            android:id="@+id/viewpager"            android:layout_width="match_parent"            android:layout_height="wrap_content"/>    </LinearLayout>    <android.support.design.widget.NavigationView        android:id="@+id/nav"        android:layout_gravity="start"        android:layout_width="wrap_content"        android:layout_height="match_parent"        app:menu="@menu/activity_main_drawer"        app:headerLayout="@layout/nav_header"/></android.support.v4.widget.DrawerLayout>
nav_head.xml
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="160dp"    android:background="@color/colorPrimary"    android:gravity="bottom"    android:orientation="vertical"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:theme="@style/ThemeOverlay.AppCompat.Dark">    <ImageView        android:id="@+id/imageView"        android:layout_width="70dp"        android:layout_height="70dp"        android:paddingTop="16dp"        android:src="@mipmap/ic_launcher" />    <TextView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:paddingTop="16dp"        android:text="标题栏"        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />    <TextView        android:id="@+id/textView"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:textSize="12sp"        android:text="副标题栏" /></LinearLayout>
activity_main_drawer.xml
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <group android:checkableBehavior="single">        <item            android:id="@+id/nav_camera"            android:icon="@drawable/ic_menu_camera"            android:title="Import" />        <item            android:id="@+id/nav_gallery"            android:icon="@drawable/ic_menu_gallery"            android:title="Gallery" />        <item            android:id="@+id/nav_slideshow"            android:icon="@drawable/ic_menu_slideshow"            android:title="Slideshow" />        <item            android:id="@+id/nav_manage"            android:icon="@drawable/ic_menu_manage"            android:title="Tools" />    </group>    <item android:title="Communicate">        <menu>            <item                android:id="@+id/nav_share"                android:icon="@drawable/ic_menu_share"                android:title="Share" />            <item                android:id="@+id/nav_send"                android:icon="@drawable/ic_menu_send"                android:title="Send" />        </menu>    </item></menu>
MainActivity 
public class MainActivity extends AppCompatActivity   implements NavigationView.OnNavigationItemSelectedListener{    private NavigationView mNav;    private DrawerLayout mDrawerLayout;    private Toolbar mToolBar;    private TabLayout mTabLayout;    private ViewPager mViewPager;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        initView();    }    private void initView() {        setContentView(R.layout.activity_main);        mNav = (NavigationView) findViewById(R.id.nav);        mDrawerLayout = (DrawerLayout) findViewById(R.id.drag_layout);        mNav.setNavigationItemSelectedListener(this);        mToolBar = (Toolbar) findViewById(R.id.toolbar);        mTabLayout = (TabLayout) findViewById(R.id.tablayout);        mViewPager = (ViewPager) findViewById(R.id.viewpager);        mToolBar.setTitleTextColor(Color.WHITE);//设置toolbar字体颜色为白色        mToolBar.setSubtitleTextColor(Color.WHITE);        //取代actionbar        setSupportActionBar(mToolBar);        //navigationToolBar关联,按住toolbar按钮,弹出侧滑菜单          // 参数1 当前actionBar所在的activity        // 参数2 控制是哪个抽屉          // 参数3  ToolBar        // 参数4 抽屉打开的描述          // 参数5 抽屉关闭的描述        ActionBarDrawerToggle barDrawerToggle=new ActionBarDrawerToggle(this,mDrawerLayout,mToolBar,R.string.drawer_open,R.string.drawer_close);        barDrawerToggle.syncState();//同步状态        //设置状态更新的监听        mDrawerLayout.addDrawerListener(barDrawerToggle);        MainFragmentAdapter adapter=new MainFragmentAdapter(getSupportFragmentManager());        mViewPager.setAdapter(adapter);        mTabLayout.setTabMode((TabLayout.MODE_SCROLLABLE));//设置TabLayout的模式为滚动模式        //viepager进行绑定,TabLayout的标签页通过PagerAdaptergetPagerTitle方法获取        mTabLayout.setupWithViewPager(mViewPager);    }    /**     * navigation的监听事件     * @param item     * @return     */    @Override    public boolean onNavigationItemSelected(@NonNull MenuItem item) {        mDrawerLayout.closeDrawers();//单击侧滑菜单,关闭侧滑菜单,隐藏侧滑菜单        item.setCheckable(true);//设置选项可选        item.setChecked(true);//设置当前的菜单项为选中状态        switch (item.getItemId()){            case  R.id.nav_camera:                Toast.makeText(this, "拍照", Toast.LENGTH_SHORT).show();                break;            case  R.id.nav_gallery:                Toast.makeText(this, "gallery", Toast.LENGTH_SHORT).show();                break;            case  R.id.nav_manage:                Toast.makeText(this, "manage", Toast.LENGTH_SHORT).show();                break;        }        return false;    }}
MainFragmentAdapter 
public class MainFragmentAdapter extends FragmentPagerAdapter {    private  String[] TABLAYOUT_ID={"首页","推荐","专题","游戏","热点","分类","App"};    public MainFragmentAdapter(FragmentManager fm) {        super(fm);    }    @Override    public Fragment getItem(int position) {        BaseFragment fragment=null;        switch (position){            case  0:                fragment=new HomeFragement();                break;            case  1:                fragment=new RecommendFragement();                break;            case  2:                fragment=new SubjectFragement();                break;            case  3:                fragment=new GameFragement();                break;            case  4:                fragment=new HotFragement();                break;            case 5:                fragment=new CategoryFragment();                break;            case 6:                fragment=new AppFragement();                break;        }        return fragment;    }    @Override    public int getCount() {        return TABLAYOUT_ID.length;    }    @Override    public CharSequence getPageTitle(int position) {        return TABLAYOUT_ID[position];    }}
BaseFragment
public class BaseFragment  extends Fragment {    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        TextView tv=new TextView(getActivity());        String msg = this.getClass().getSimpleName();        tv.setGravity(Gravity.CENTER);        tv.setTextSize(16);        tv.setText(msg);        return tv;    }}
HomeFragement 
public class HomeFragement   extends BaseFragment{}
其余六个页面与HomeFragment都是相似的,此处就不将代码一一贴出来Demo下载网址:http://download.csdn.net/detail/k2514091675/9764176 
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表