APP市场中大多数新闻App都有导航菜单,导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面,今日头条, 网易新闻等。
先演示下效果:
话不多说,直接开撸:
一、添加依赖
compile 'com.android.support:appcompat-v7:23.4.0' compile 'com.android.support:design:23.4.0' compile 'com.android.support:recyclerview-v7:23.4.0' compile 'com.android.support:cardview-v7:23.4.0'
二、在布局文件中加入Layout
activity_main.xml
<?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=".activity.MainActivity"> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#E0E0E0" app:tabIndicatorColor="@color/colorAccent" app:tabIndicatorHeight="5dp" app:tabMode="fixed" app:tabSelectedTextColor="@color/colorPrimary" app:tabTextAppearance="@style/TabStyle" /> <android.support.v4.view.ViewPager android:id="@+id/tab_viewpager" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="@android:color/white" /> </LinearLayout>
附:几个参数说明下
app:tabMode="scrollable" 设置tabMode属性为可以左右滚动,
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);
tabLayout.setTabMode(TabLayout.MODE_FIXED);
三、Java代码中绑定
package com.jack.apptabview.activity; import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.Window; import com.jack.apptabview.R; import com.jack.apptabview.fragment.TabFragment; public class MainActivity extends AppCompatActivity { private TabLayout tabLayout = null; private ViewPager viewPager; private Fragment[] mFragmentArrays = new Fragment[8]; private String[] mTabTitles = new String[8]; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); supportRequestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); initView(); bindData(); } private void initView() { tabLayout = (TabLayout) findViewById(R.id.tab_layout); viewPager = (ViewPager) findViewById(R.id.tab_viewpager); } private void bindData() { mTabTitles[0] = "推荐"; mTabTitles[1] = "热点"; mTabTitles[2] = "科技"; mTabTitles[3] = "体育"; mTabTitles[4] = "健康"; mTabTitles[5] = "军事"; mTabTitles[6] = "娱乐"; mTabTitles[7] = "热点"; // tabLayout.setTabMode(TabLayout.MODE_FIXED); //固定模式,也就是说 tab顶部不能滚动 tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); //滚动模式 ,可左右滚动,类 今日头条 mFragmentArrays[0] = TabFragment.newInstance(); mFragmentArrays[1] = TabFragment.newInstance(); mFragmentArrays[2] = TabFragment.newInstance(); mFragmentArrays[3] = TabFragment.newInstance(); mFragmentArrays[4] = TabFragment.newInstance(); mFragmentArrays[5] = TabFragment.newInstance(); mFragmentArrays[6] = TabFragment.newInstance(); mFragmentArrays[7] = TabFragment.newInstance(); PagerAdapter pagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager()); viewPager.setAdapter(pagerAdapter); //将ViewPager和TabLayout绑定 tabLayout.setupWithViewPager(viewPager); } final class MyViewPagerAdapter extends FragmentPagerAdapter { public MyViewPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return mFragmentArrays[position]; } @Override public int getCount() { return mFragmentArrays.length; } @Override public CharSequence getPageTitle(int position) { return mTabTitles[position]; } } }
四、其他实现Fragment等
这里不多说。
五、Talk is cheap. Show me the code
话不多说,代码在这里下载!
https://github.com/wukong1688/AppTabView
如果觉得有帮助,欢迎在 Github 为我 star!
本博客地址: wukong1688
本文原文地址:https://www.cnblogs.com/wukong1688/p/10733603.html
转载请著名出处!谢谢~~