TabLayout用法,android顶部导航栏,android底部导航栏
16lz
2022-06-30
TabLayout是android.support.design里的一个控件,使用它可以很方便的做出顶部导航和底部导航。类似于这样的,能设置选中时字体的颜色和选中时的图片。
首先我们引入compile 'com.android.support:design:23.1.1'
它的用法是:
第一种比较简单,就是文本和一个指示器。
布局文件是
<LinearLayout 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"> <android.support.design.widget.TabLayout android:id="@+id/tab" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#32CD32" app:tabIndicatorColor="#f00" app:tabSelectedTextColor="#444" app:tabMode="fixed" app:tabTextColor="#fff" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" /></LinearLayout>顶部是一个TabLayout,可以设置background。app:tabIndicatorColor是设置指示器的背景颜色,app:tabIndicatorHeight设置指示器的高度,app:tabSelectedTextColor是选中时文本的颜色,app:tabTextColor是普通状态的文本颜色,app:tabMode是是否可滑动,有两个fixed和scrollable,fixed是固定的,scrollable是类似于今日头条那种可以滑动的。
java代码
import android.app.Fragment;import android.os.Bundle;import android.support.design.widget.TabLayout;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import com.tianyalei.wolf.mddesignlib.view.titlelayout.TitleFragmentPagerAdapter;import com.tianyalei.wolf.sample.R;import java.util.ArrayList;import java.util.List;import butterknife.Bind;import butterknife.ButterKnife;public class TabActivity extends AppCompatActivity { @Bind(R.id.tab) TabLayout tabLayout; @Bind(R.id.viewpager) ViewPager viewpager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_tab); ButterKnife.bind(this);// tabLayout.setTabTextColors(Color.WHITE, Color.GRAY);//设置文本在选中和为选中时候的颜色// tabLayout.setSelectedTabIndicatorColor(Color.WHITE);//设置选中时的指示器的颜色// tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//可滑动,默认是FIXED List<Fragment> fragments = new ArrayList<>(); fragments.add(new BlankFragment()); fragments.add(new BlankFragment()); fragments.add(new BlankFragment()); TitleFragmentPagerAdapter adapter = new TitleFragmentPagerAdapter(getFragmentManager(), fragments, new String[]{"第一栏", "第二栏", "第三栏"}); viewpager.setAdapter(adapter); tabLayout.setupWithViewPager(viewpager); }}TitleFragmentPagerAdapter是viewpager的适配器,
/* * Copyright (C) 2012 www.amsoft.cn * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */package com.tianyalei.wolf.mddesignlib.view.titlelayout;import android.app.Fragment;import android.app.FragmentManager;import android.support.v13.app.FragmentPagerAdapter;import java.util.ArrayList;import java.util.List;/** * © 2012 amsoft.cn 名称:TitleFragmentPagerAdapter.java 描述:一个通用的Fragment适配器 * * @author wolf * @version v1.0 * @date:2016-3-7 上午10:57:53 */public class TitleFragmentPagerAdapter extends FragmentPagerAdapter { /** * The m fragment list. */ private List<Fragment> mFragmentList = null; private String[] titles; /** * Instantiates a new ab fragment pager adapter. * * @param mFragmentManager the m fragment manager * @param fragmentList the fragment list */ public TitleFragmentPagerAdapter(FragmentManager mFragmentManager, ArrayList<Fragment> fragmentList) { super(mFragmentManager); mFragmentList = fragmentList; } /** * titles是给TabLayout设置title用的 * * @param mFragmentManager * @param fragmentList * @param titles */ public TitleFragmentPagerAdapter(FragmentManager mFragmentManager, List<Fragment> fragmentList, String[] titles) { super(mFragmentManager); mFragmentList = fragmentList; this.titles = titles; } /** * 描述:获取数量. * * @return the count * @see android.support.v4.view.PagerAdapter#getCount() */ @Override public int getCount() { return mFragmentList.size(); } /** * 描述:获取索引位置的Fragment. * * @param position the position * @return the item * @see android.support.v4.app.FragmentPagerAdapter#getItem(int) */ @Override public Fragment getItem(int position) { Fragment fragment = null; if (position < mFragmentList.size()) { fragment = mFragmentList.get(position); } else { fragment = mFragmentList.get(0); } return fragment; } @Override public CharSequence getPageTitle(int position) { if (titles != null && titles.length > 0) return titles[position]; return null; }}需要注意的是getPageTitle方法,返回viewpager对应的title。
以上就是TabLayout和viewpager结合的简单例子。
下面说第二种带图片的底部导航,
其实也很简单,就是把TabLayout放到底部,上面是viewpager,然后给text设置个图片就行了。布局如下
<LinearLayout 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"> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" /> <android.support.design.widget.TabLayout android:id="@+id/tab" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabBackground="@drawable/selector_bg" style="@style/MyCustomTabLayout"/></LinearLayout>style里面设置了一些属性
<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout"> <item name="tabIndicatorColor">?attr/colorAccent</item> <item name="tabIndicatorHeight">0dp</item> <item name="tabPaddingStart">12dp</item> <item name="tabTextColor">#aaa</item> <item name="tabPaddingEnd">12dp</item> <item name="tabSelectedTextColor">#f00</item> </style>tabIndicatorHeight是设置导航那个指示器高度为0,因为不需要那个指示器了。然后app:tabBackground这个属性待会再说。
代码如下
package com.tianyalei.wolf.sample.activity;import android.annotation.TargetApi;import android.app.Fragment;import android.graphics.drawable.Drawable;import android.os.Build;import android.os.Bundle;import android.support.design.widget.TabLayout;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import com.tianyalei.wolf.mddesignlib.view.titlelayout.TitleFragmentPagerAdapter;import com.tianyalei.wolf.sample.R;import java.util.ArrayList;import java.util.List;import butterknife.Bind;import butterknife.ButterKnife;public class TabBottomActivity extends AppCompatActivity { @Bind(R.id.tab) TabLayout tabLayout; @Bind(R.id.viewpager) ViewPager viewpager; @TargetApi(Build.VERSION_CODES.JELLY_BEAN) @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_bottom_tab); ButterKnife.bind(this); List<Fragment> fragments = new ArrayList<>(); fragments.add(new BlankFragment()); fragments.add(new BlankFragment()); fragments.add(new BlankFragment()); fragments.add(new BlankFragment()); TitleFragmentPagerAdapter adapter = new TitleFragmentPagerAdapter(getFragmentManager(), fragments, new String[]{"首页", "流量", "社区", "关于"}); viewpager.setAdapter(adapter); tabLayout.setupWithViewPager(viewpager); for (int i = 0; i < tabLayout.getTabCount(); i++) { TabLayout.Tab tab = tabLayout.getTabAt(i); Drawable d = null; switch (i) { case 0: d = getResources().getDrawable(R.drawable.selector_home); break; case 1: d = getResources().getDrawable(R.drawable.selector_mall); break; case 2: d = getResources().getDrawable(R.drawable.selector_socially); break; case 3: d = getResources().getDrawable(R.drawable.selector_more); break; } tab.setIcon(d); }// viewpager.setCurrentItem(2); }}前面的部分没什么好说的。下面的那块是设置图片的,就是在selected的时候把图片换成选中态的图片。遍历tab,给tab设置icon,icon就是selector。
R.drawable.selector_home
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android = "http://schemas.android.com/apk/res/android"> <item android:drawable = "@drawable/nav_home_pre" android:state_selected = "true" /> <item android:drawable = "@drawable/nav_home" android:state_selected = "false" /></selector>OK,以上做完就可以了,带图片的底部导航栏就做好了。
下面说一下app:tabBackground,这个是设置单项的背景颜色的,见下图
以上的代码可以从oschina的git托管http://git.oschina.net/tianyalei/MDDesignLib获取,TabLayout相关的在Sample的TabActivity那里。
更多相关文章
- android EditText设置不可写
- android“设置”里的版本号
- 在Fragment中设置控件点击方法,执行失败。
- Android(安卓)闹钟管理类的使用
- Android设置通知栏/状态栏透明改变通知栏颜色和app最上部分颜色
- android 设置中划线 下划线等
- Andorid Dialog 示例【慢慢更新】
- android图表ichartjs
- Android(安卓)闹钟管理类的使用