Android TabLayout的使用

原创 2016年08月29日 14:00:38

效果如上,可点击翻页和滑动翻页,当前页面标签变色。


布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context="com.zhang.tablelayoutdemo.MainActivity">

   <android.support.v4.view.ViewPager
       android:id="@+id/viewPager"
       android:layout_width="match_parent"
       android:layout_height="0dp"
       android:layout_weight="1"/>

    <!--可能需要在Module setting 中引入com.android.support:design库-->
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0.05"
        app:tabIndicatorColor="@android:color/transparent" />
    <!--去掉标签栏下方的颜色-->
</LinearLayout>

自定义TabLayout布局

<?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/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|center_vertical" />

    <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|center_vertical"
        android:textColor="@drawable/tab_text_color" />
        <!--自定义字体颜色-->
</LinearLayout>

标签的图片和字体在选中时会变色,这里需要用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="@drawable/note1" />
    <item android:drawable="@drawable/note2"/>
</selector>

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:state_selected="true" android:color="#0000CD" />
    <item android:color= "#000000"/>

</selector>

ViewPager适配器

package com.zhang.tablelayoutdemo;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by Mr.Z on 2016/8/29 0029.
 */
public class ViewPagerAdapter extends FragmentPagerAdapter {

    private Context context;

    private int[] imgId = {
            R.drawable.note,
            R.drawable.note,
            R.drawable.note
    };

    public ViewPagerAdapter(FragmentManager fm, Context context) {
        super(fm);
        this.context = context;
    }

    public View getTableView(int position) {
        View tableView = LayoutInflater.from(context).inflate(R.layout.custom_tab, null);
        TextView tv = (TextView) tableView.findViewById(R.id.tv);
        tv.setText(getPageTitle(position));
        ImageView img = (ImageView) tableView.findViewById(R.id.image);
        img.setImageResource(imgId[position]);
        return tableView;
    }

    @Override
    public Fragment getItem(int position) {
        switch (position){
            case 0:
                return new FragmentOne();
            case 1:
                return new FragmentTwo();
            case 2:
                return new FragmentThree();
        }
        return null;
    }

    @Override
    public int getCount() {
        return 3;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        switch (position){
            case 0:
                return "One";
            case 1:
                return "Two";
            case 2:
                return "Three";
        }
        return null;
    }
}

主Activity

package com.zhang.tablelayoutdemo;

import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager(), this);
        viewPager.setAdapter(adapter);

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        tabLayout.setupWithViewPager(viewPager);
        tabLayout.setTabMode(TabLayout.MODE_FIXED);

        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = tabLayout.getTabAt(i);
            if (tab != null) {
                tab.setCustomView(adapter.getTableView(i));
            }
        }
        tabLayout.getTabAt(0).getCustomView().setSelected(true);//设置选中状态
    }
}

设置AppCompatActivity下的全屏


<!--自定义全屏无标题主题-->
    <style name="FullscreenTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowNoTitle">true</item>
    </style>


版权声明:本文为博主原创文章,未经博主允许不得转载。

Android基础控件——TabLayout的使用、仿爱奇艺导航条

TabLayout的使用、仿爱奇艺导航条 学习,学习,学以致用,让基础控件贴近实战效果 TabLayout是Google新推出的Material Design的控件之一,TabLayout的使用必...

android material design之Tablayout,Recyclerview,Fragment,Viewpager搭配使用(四)

相信大家都用过fragment+viepager的组合,也都比较熟悉,现在说一下美拍,暴风,爱奇艺的高仿实现,这个实用性也很强,先上代码,代码中有注释的就不细说了,没注释的会在下面详细的讲一下, 先来...

Android 开发之 TabLayout + ViewPager 的使用

前言TabLayout提供了一个水平的布局用来展示Tabs,很多应用都有这样的设计,典型的有网易新闻,直播吧,知乎等。TabLayout就可以很好的完成这一职责,当然也或许各家应用的实现方式不尽相同,...

android.support.design.widget.TabLayout 使用

最近入职新公司,看到项目Tab标签用的是  Android Design Support Library 中的TabLayout 以前也没用过~趁机学习一波。 先来看看效果: 首先sdk的版本必须是...

Android M新控件之FloatingActionButton,TextInputLayout,Snackbar,TabLayout的使用

【转载请注明出处:http://blog.csdn.net/feiduclear_up/article/details/46500865 CSDN 废墟的树】 在前不久的谷歌2015 I...
  • s1e1s
  • s1e1s
  • 2015年09月22日 19:01
  • 338

Android中TabLayout使用详解

一、     什么是TabLayout       我们在应用viewpager的时候,经常会使用TabPageIndicator来与其配合或者自定义RadioButton来达到很漂亮的效果。...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android TabLayout的使用
举报原因:
原因补充:

(最多只允许输入30个字)