TabLayout实现底部导航栏
2017-04-23 22:08
337 查看
前面的博文写到了TabLayout实现了选项卡的布局,今天练习一个app发现需要一个导航栏在底部的app,在此记录一下,其实就是TabLayout和ViewPager布局顺序换一下就可以了。
效果图先放上来:
接下来开始详细记录:
一、在库中添加依赖
老规矩,先加依赖(依版本添加)
二、创建主布局
这里上方为ViewPager,下面是TabLayout
三、写ViewPager的Adapter文件
ViewPagerAdapter.java
布局:tab_layout.xml
导航栏文字选择器:tv_tab_selector.xml
导航栏图片选择器:tab_mine_selector.xml(这里以其中一个为例,“我” 的选中效果)
五、Activity代码:
MainActivity.java
图标素材下载
效果图先放上来:
接下来开始详细记录:
一、在库中添加依赖
老规矩,先加依赖(依版本添加)
compile 'com.android.support:design:25.2.0'
二、创建主布局
这里上方为ViewPager,下面是TabLayout
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" ></android.support.v4.view.ViewPager> <android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="@dimen/tab_height" style="@style/CustomTab" ></android.support.design.widget.TabLayout> </LinearLayout>
三、写ViewPager的Adapter文件
ViewPagerAdapter.java
import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentStatePagerAdapter; import java.util.List; public class ViewPagerAdapter extends FragmentStatePagerAdapter { private Fragment[] mFragments; public ViewPagerAdapter(FragmentManager fm, Fragment[] fragments) { super(fm); mFragments = fragments; } @Override public Fragment getItem(int position) { return mFragments[position]; } @Override public int getCount() { return mFragments.length; } }四、导航栏布局文件、导航栏选择器文件
布局:tab_layout.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="match_parent" android:orientation="vertical" > <ImageView android:id="@+id/img_tab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" /> <TextView android:id="@+id/tv_tab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:textColor="@drawable/tv_tab_selector" /> </LinearLayout>选择器:
导航栏文字选择器:tv_tab_selector.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:color="@color/black"></item> <item android:state_selected="false" android:color="@color/darkgray"></item> </selector>
导航栏图片选择器:tab_mine_selector.xml(这里以其中一个为例,“我” 的选中效果)
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_selected="true" android:drawable="@mipmap/ic_action_mine_selected"></item> <item android:state_selected="false" android:drawable="@mipmap/ic_action_mine_normal"></item> </selector>
五、Activity代码:
MainActivity.java
import android.support.design.widget.TabLayout; import android.support.v4.app.Fragment; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.widget.ImageView; import android.widget.TextView; import com.example.wjy329.bodybuilding.adapter.ViewPagerAdapter; import com.example.wjy329.bodybuilding.fragment.BuildFragment; import com.example.wjy329.bodybuilding.fragment.DynamicFragment; import com.example.wjy329.bodybuilding.fragment.FindFragment; import com.example.wjy329.bodybuilding.fragment.MineFragment; public class MainActivity extends AppCompatActivity { private TabLayout mTabLayout; //Tab文字 private final int[] TAB_TITLES = new int[]{ R.string.build,R.string.find,R.string.dynamic,R.string.mine }; //Tab图片 private final int[] TAB_IMGS = new int[]{ R.drawable.tab_build_selector,R.drawable.tab_find_selector,R.drawable.tab_dynamic_selector,R.drawable.tab_mine_selector }; //Tab数目 private final Fragment[] TAB_FRAGMENTS = new Fragment[]{ new BuildFragment(),new FindFragment(),new DynamicFragment(),new MineFragment() }; private ViewPagerAdapter mViewPagerAdapter;//适配器 private ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initViews(); } private void initViews() { mTabLayout = (TabLayout) findViewById(R.id.tablayout); setTabs(mTabLayout,this.getLayoutInflater(),TAB_TITLES,TAB_IMGS); mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager(),TAB_FRAGMENTS); mViewPager = (ViewPager) findViewById(R.id.viewpager); mViewPager.setAdapter(mViewPagerAdapter); mViewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(mTabLayout));//滑动效果 mTabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(mViewPager));//点击效果 } private void setTabs(TabLayout tabLayout, LayoutInflater inflater, int[] tabTitlees, int[] tabImgs) { for (int i = 0; i < tabImgs.length; i++) { TabLayout.Tab tab = tabLayout.newTab(); View view = inflater.inflate(R.layout.tab_custom,null); tab.setCustomView(view); TextView tvTitle = (TextView)view.findViewById(R.id.tv_tab); tvTitle.setText(tabTitlees[i]); ImageView imgTab = (ImageView) view.findViewById(R.id.img_tab); imgTab.setImageResource(tabImgs[i]); tabLayout.addTab(tab); } } }
图标素材下载
相关文章推荐
- Android底部导航栏实现(四)之TabLayout+ViewPager
- Android开发之TabLayout真正实现底部导航栏(可实现点击文字颜色图片切换)
- Tablayout + ViewPager + fragment 实现底部或顶部导航栏
- TabLayout + ViewPager 实现底部导航栏
- Android开发:顶部&底部Tab导航栏实现(TabLayout+ViewPager+Fragment)
- TabLayout+ViewPager+Fragment实现顶部或底部导航栏
- 用TabLayout实现底部导航栏
- Android 用 TabLayout + ViewPager + Fragment 实现顶部、底部导航栏
- Android开发之TabLayout实现底部导航栏
- TabLayout+ViewPager实现滑动底部导航栏
- TabLayout+ViewPager+Fragment实现带图标和文字的底部导航栏
- 使用Tablayout实现安卓导航栏效果
- TabLayout+ViewPager+Fragment实现底部导航
- 首页-底部&顶部Tab导航(菜单栏)的实现:TabLayout+ViewPager+Fragment
- kotlin 底部导航栏(tabLayout + fragment)
- 使用TabLayout快速实现一个导航栏
- TabLayout ViewPager Fragment 实现底部按钮菜单 Fragment 实现懒加载
- Android--------TabLayout实现新闻客户端顶部导航栏
- Android 底部导航栏中间凸起、动态配置替换底部导航栏Tab图标(按钮、标签)的实现方案
- 首页、底部导航栏:TabLayout+ViewPager+Fragment使用