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 5.0新控件 Tablayout | 导航栏 介绍及使用详情

Android Material Design 风格之 Tablayout | 导航栏 介绍及使用详情extends HorizontalScrollView TabLayout provides...

Android学习之TabLayout的使用解析

今天在群里听见群友说在使用Tablayout的时候报类无法找到异常,TabLayout以前项目中也做过,没觉得遇见什么问题,所以在晚上又来体验一把,果然报错了,尴尬!java.lang.NoClass...

Android开发之TabLayout组件的使用

5.0新组件TabLayout TabLayout提供了一个水平布局来显示选项卡。 要显示的选项卡的人口数是通过TabLayout.Tab实例完成的。 您可以通过newTab()创建选项卡...

Android之TabLayout使用和默认选中+移动(解决)

Android之TabLayout使用和默认选中+移动 文章链接: 知识点: 1、TabLayout的静态使用; 2、TabLayout动态加入tab; 3、默认选中某一个tab,并移动到选中...

Android 5.X TabLayout 使用简介

TabLayout 在开发中一般是作为选项卡,一般结合ViewPager和Frament使用。只是说明下使用的步骤,没有原理上的分析,因为这玩意真的会忘,之前刚开始用的时候,感觉自己已经会用了,但是时...

android Tablayout的使用

以往我们想要实现这样的效果,要么去找三方开源库,要么自己动手写viewpager,然后根据viewpager的滑动计算指示器的滑动距离来实现。现在在google提供的design包里有一个tablay...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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