组合控件——顶部导航栏——标签布局TabLayout

Love The Way You Lie 2023-09-28 23:02 121阅读 0赞

![61c036476cab61bb2030593ed877c600.png][]

![edc8e3e8054a45ec8261a5548f9eeea3.png][]

![e5691886b975e1dbed240759f389f5fc.png][]

![cc4f8f2846a94859d4c9268c8cbb1015.png][]

![d93493ae9eed6d7f59c470e05f20f45a.png][]

==========================================================================================

布局：

![5837be0091d83e2259ad24f630737def.png][]

<resources>
    
        
        <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
            
            <item name="colorPrimary">@color/colorPrimary</item>
            <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
            <item name="colorAccent">@color/colorAccent</item>
        </style>
    
    
    
    
        <style name="TabButton">
            <item name="android:layout_width">0dp</item>
            <item name="android:layout_height">match_parent</item>
            <item name="android:layout_weight">1</item>
            <item name="android:padding">5dp</item>
            <item name="android:gravity">center</item>
            <item name="android:background">@drawable/tab_bg_selector</item>
            <item name="android:textSize">12sp</item>
            <item name="android:textColor">@drawable/tab_text_selector</item>
            <item name="android:button">@null</item>
        </style>
    
        <style name="TabText">
            <item name="android:layout_width">match_parent</item>
            <item name="android:layout_height">match_parent</item>
            <item name="android:gravity">center</item>
            <item name="android:textSize">17sp</item>
            <item name="android:textColor">@drawable/toolbar_text_selector</item>
        </style>
    
    </resources>

![b75489ddd08e04e32599800de603fc4f.png][]

![7f02ee2809d8e3d42f944393bf30de57.png][]

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="colorPrimary">#008577</color>
        <color name="colorPrimaryDark">#00574B</color>
        <color name="colorAccent">#D81B60</color>
        <color name="black">#000000</color>
        <color name="white">#ffffff</color>
        <color name="purple_200">#FFBB86FC</color>
        <color name="purple_500">#FF6200EE</color>
        <color name="purple_700">#FF3700B3</color>
        <color name="teal_200">#FF03DAC5</color>
        <color name="teal_700">#FF018786</color>
        <color name="tab_text_selected">#0084e8</color>
        <color name="tab_text_normal">#7597b3</color>
        <color name="blue_light">#aaaaff</color>
        <color name="grey">#888888</color>
        <color name="red">#ff0000</color>
    </resources>

![c7286ca06800fdbc1c977f0280fc5449.png][]

<resources>
        <string name="app_name">My Application</string>
        <string name="title_activity_main2">MainActivity2</string>
        <string name="title_home">Home</string>
        <string name="title_dashboard">Dashboard</string>
        <string name="title_notifications">Notifications</string>
        <string name="title_activity_main3">MainActivity3</string>
        <string name="title_activity_main4">MainActivity4</string>
        <string name="title_activity_main5">MainActivity5</string>
        <string name="menu_first">首页</string>
        <string name="menu_second">分类</string>
        <string name="menu_third">购物车</string>
        <string name="book_name">Android Studio开发实战\n从零基础到App上线</string>
    </resources>

![2baa9863e804d2536317f82a2e844a3e.png][]

package com.example.myapplication.fragment;
    
    import android.content.Context;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import androidx.fragment.app.Fragment;
    import com.example.myapplication.R;
    
    public class BookDetailFragment extends Fragment
    {
        
        protected View mView; // 声明一个视图对象
        protected Context mContext; // 声明一个上下文对象
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
        {
            
            mContext = getActivity(); // 获取活动页面的上下文
            
            // 根据布局文件fragment_book_detail.xml生成视图对象
            mView = inflater.inflate(R.layout.fragment_book_detail, container, false);
            
            return mView;
        }
    
    }

![e6e9c304044290687af43dc8e6dcc908.png][]

![dfdfe23bc0d40b10ce177421fddc47e3.png][]

![b4cbcfb2a64891b6221a8a5000f2c843.png][]

package com.example.myapplication.fragment;
    
    import android.content.Context;
    import android.os.Bundle;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    
    import androidx.fragment.app.Fragment;
    
    import com.example.myapplication.R;
    
    public class BookCoverFragment extends Fragment 
    {
        protected View mView; // 声明一个视图对象
        protected Context mContext; // 声明一个上下文对象
        
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) 
        {
            mContext = getActivity(); // 获取活动页面的上下文
            
            // 根据布局文件fragment_book_cover.xml生成视图对象
            mView = inflater.inflate(R.layout.fragment_book_cover, container, false);
            
            return mView;
        }
    
    }

![1173c843b4a98858606b387533851975.png][]

package com.example.myapplication.adapter;
    
    import androidx.fragment.app.Fragment;
    import androidx.fragment.app.FragmentManager;
    import androidx.fragment.app.FragmentPagerAdapter;
    
    import com.example.myapplication.fragment.BookCoverFragment;
    import com.example.myapplication.fragment.BookDetailFragment;
    
    public class GoodsPagerAdapter extends FragmentPagerAdapter {
        private String[] mTitleArray; // 声明一个标题文字数组
    
        // 碎片页适配器的构造方法，传入碎片管理器与标题列表
        public GoodsPagerAdapter(FragmentManager fm, String[] titleArray) {
            super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
            mTitleArray = titleArray;
        }
    
        // 获取指定位置的碎片Fragment
        public Fragment getItem(int position) {
            if (position == 0) { // 第一页展示书籍封面
                return new BookCoverFragment();
            } else if (position == 1) { // 第二页展示书籍详情
                return new BookDetailFragment();
            }
            return new BookCoverFragment();
        }
    
        // 获取碎片Fragment的个数
        public int getCount() {
            return mTitleArray.length;
        }
    
        // 获得指定碎片页的标题文本
        public CharSequence getPageTitle(int position) {
            return mTitleArray[position];
        }
    }

![f91f9f12682b6d9df86477cc5c20ef78.png][]

![3974e2a1109442f20d14ba86adfe2cf6.png][]

package com.example.myapplication;
    
    import android.annotation.SuppressLint;
    import android.os.Bundle;
    import android.view.Menu;
    import android.view.MenuItem;
    import android.widget.Toast;
    import androidx.appcompat.app.AppCompatActivity;
    import androidx.appcompat.widget.Toolbar;
    import androidx.viewpager.widget.ViewPager;
    import com.example.myapplication.adapter.GoodsPagerAdapter;
    import com.example.myapplication.widget.DateUtil;
    import com.google.android.material.tabs.TabLayout;
    
    @SuppressLint("SetTextI18n")
    public class MainActivity extends AppCompatActivity implements TabLayout.OnTabSelectedListener
    {
        private final static String TAG = "TabLayoutActivity";
        private ViewPager vp_content; // 声明一个翻页视图对象
        private TabLayout tab_title; // 声明一个标签布局对象
        private String[] mTitleArray = {"商品", "详情"}; // 标题文字数组
    
        @Override
        protected void onCreate(Bundle savedInstanceState)
        {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
    
            Toolbar tl_head = findViewById(R.id.tl_head); // 从布局文件中获取名叫tl_head的工具栏
            tl_head.setTitle(""); // 设置工具栏的标题文本
            tab_title = findViewById(R.id.tab_title); // 从布局文件中获取名叫tab_title的标签布局
            vp_content = findViewById(R.id.vp_content); // 从布局文件中获取名叫vp_content的翻页视图
            initTabLayout(); // 初始化标签布局
            initTabViewPager(); // 初始化标签翻页
        }
    
        // 初始化标签布局
        private void initTabLayout() {
            // 给标签布局添加一个文字标签
            tab_title.addTab(tab_title.newTab().setText(mTitleArray[0]));
            // 给标签布局添加一个文字标签
            tab_title.addTab(tab_title.newTab().setText(mTitleArray[1]));
            tab_title.addOnTabSelectedListener(this); // 给标签布局添加标签选中监听器
            // 监听器ViewPagerOnTabSelectedListener允许直接关联某个翻页视图
            //tab_title.addOnTabSelectedListener(new ViewPagerOnTabSelectedListener(vp_content));
        }
    
        // 初始化标签翻页
        private void initTabViewPager() {
            // 构建一个商品信息的翻页适配器
            GoodsPagerAdapter adapter = new GoodsPagerAdapter(
                    getSupportFragmentManager(), mTitleArray);
            vp_content.setAdapter(adapter); // 设置翻页视图的适配器
            // 给vp_content添加页面变更监听器
            vp_content.addOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                    tab_title.getTabAt(position).select(); // 选中指定位置的标签
                }
            });
        }
    
        // 在标签被重复选中时触发
        public void onTabReselected(TabLayout.Tab tab) {}
    
        // 在标签选中时触发
        public void onTabSelected(TabLayout.Tab tab) {
            vp_content.setCurrentItem(tab.getPosition()); // 设置翻页视图显示第几页
        }
    
        // 在标签取消选中时触发
        public void onTabUnselected(TabLayout.Tab tab) {}
    
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            // 从menu_overflow.xml中构建菜单界面布局
            getMenuInflater().inflate(R.menu.menu_overflow, menu);
            return true;
        }
    
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
            int id = item.getItemId();
            if (id == android.R.id.home) { // 点击了工具栏左边的返回箭头
                finish(); // 结束当前页面
            } else if (id == R.id.menu_refresh) { // 点击了刷新图标
                Toast.makeText(this, "当前刷新时间: " + DateUtil.getNowDateTime("yyyy-MM-dd HH:mm:ss")
                        , Toast.LENGTH_LONG).show();
                return true;
            } else if (id == R.id.menu_about) { // 点击了关于菜单项
                Toast.makeText(this, "这个是标签布局的演示demo", Toast.LENGTH_LONG).show();
                return true;
            } else if (id == R.id.menu_quit) { // 点击了退出菜单项
                finish(); // 结束当前页面
            }
            return super.onOptionsItemSelected(item);
        }
    
    }

![9a5a0451721f18db04949114b5396128.png][]

![8bbb871b311ab549bc30de0eb4bf592c.png][]

![c9b1b535d9bed395a35b416095fe3f6f.png][]

![f4d0f2a3cda090dd0099ec29857387b2.png][]

![63cbc2fd1212cb6e21cd5e59fc756920.png][]

![d5f66b1a4ac0ba5a41f31988f4b089dd.png][]

![def817431ee85b8311abad76c68b3f2d.png][]

![5de48d0d59819989387fc744c95288bd.png][]

![ca530e840dbb7e64905b3a30fb7419f2.png][]

![354d2f56cfa477bccd5f974cb1da74ef.png][]

![a14abb546e8bcc0ed195c3faacd7bde1.png][]

![21d0ae1e97a165c9e05b595e6c60b61f.png][]

[61c036476cab61bb2030593ed877c600.png]: https://img-blog.csdnimg.cn/img_convert/61c036476cab61bb2030593ed877c600.png
[edc8e3e8054a45ec8261a5548f9eeea3.png]: https://img-blog.csdnimg.cn/img_convert/edc8e3e8054a45ec8261a5548f9eeea3.png
[e5691886b975e1dbed240759f389f5fc.png]: https://img-blog.csdnimg.cn/img_convert/e5691886b975e1dbed240759f389f5fc.png
[cc4f8f2846a94859d4c9268c8cbb1015.png]: https://img-blog.csdnimg.cn/img_convert/cc4f8f2846a94859d4c9268c8cbb1015.png
[d93493ae9eed6d7f59c470e05f20f45a.png]: https://img-blog.csdnimg.cn/img_convert/d93493ae9eed6d7f59c470e05f20f45a.png
[5837be0091d83e2259ad24f630737def.png]: https://img-blog.csdnimg.cn/img_convert/5837be0091d83e2259ad24f630737def.png
[b75489ddd08e04e32599800de603fc4f.png]: https://img-blog.csdnimg.cn/img_convert/b75489ddd08e04e32599800de603fc4f.png
[7f02ee2809d8e3d42f944393bf30de57.png]: https://img-blog.csdnimg.cn/img_convert/7f02ee2809d8e3d42f944393bf30de57.png
[c7286ca06800fdbc1c977f0280fc5449.png]: https://img-blog.csdnimg.cn/img_convert/c7286ca06800fdbc1c977f0280fc5449.png
[2baa9863e804d2536317f82a2e844a3e.png]: https://img-blog.csdnimg.cn/img_convert/2baa9863e804d2536317f82a2e844a3e.png
[e6e9c304044290687af43dc8e6dcc908.png]: https://img-blog.csdnimg.cn/img_convert/e6e9c304044290687af43dc8e6dcc908.png
[dfdfe23bc0d40b10ce177421fddc47e3.png]: https://img-blog.csdnimg.cn/img_convert/dfdfe23bc0d40b10ce177421fddc47e3.png
[b4cbcfb2a64891b6221a8a5000f2c843.png]: https://img-blog.csdnimg.cn/img_convert/b4cbcfb2a64891b6221a8a5000f2c843.png
[1173c843b4a98858606b387533851975.png]: https://img-blog.csdnimg.cn/img_convert/1173c843b4a98858606b387533851975.png
[f91f9f12682b6d9df86477cc5c20ef78.png]: https://img-blog.csdnimg.cn/img_convert/f91f9f12682b6d9df86477cc5c20ef78.png
[3974e2a1109442f20d14ba86adfe2cf6.png]: https://img-blog.csdnimg.cn/img_convert/3974e2a1109442f20d14ba86adfe2cf6.png
[9a5a0451721f18db04949114b5396128.png]: https://img-blog.csdnimg.cn/img_convert/9a5a0451721f18db04949114b5396128.png
[8bbb871b311ab549bc30de0eb4bf592c.png]: https://img-blog.csdnimg.cn/img_convert/8bbb871b311ab549bc30de0eb4bf592c.png
[c9b1b535d9bed395a35b416095fe3f6f.png]: https://img-blog.csdnimg.cn/img_convert/c9b1b535d9bed395a35b416095fe3f6f.png
[f4d0f2a3cda090dd0099ec29857387b2.png]: https://img-blog.csdnimg.cn/img_convert/f4d0f2a3cda090dd0099ec29857387b2.png
[63cbc2fd1212cb6e21cd5e59fc756920.png]: https://img-blog.csdnimg.cn/img_convert/63cbc2fd1212cb6e21cd5e59fc756920.png
[d5f66b1a4ac0ba5a41f31988f4b089dd.png]: https://img-blog.csdnimg.cn/img_convert/d5f66b1a4ac0ba5a41f31988f4b089dd.png
[def817431ee85b8311abad76c68b3f2d.png]: https://img-blog.csdnimg.cn/img_convert/def817431ee85b8311abad76c68b3f2d.png
[5de48d0d59819989387fc744c95288bd.png]: https://img-blog.csdnimg.cn/img_convert/5de48d0d59819989387fc744c95288bd.png
[ca530e840dbb7e64905b3a30fb7419f2.png]: https://img-blog.csdnimg.cn/img_convert/ca530e840dbb7e64905b3a30fb7419f2.png
[354d2f56cfa477bccd5f974cb1da74ef.png]: https://img-blog.csdnimg.cn/img_convert/354d2f56cfa477bccd5f974cb1da74ef.png
[a14abb546e8bcc0ed195c3faacd7bde1.png]: https://img-blog.csdnimg.cn/img_convert/a14abb546e8bcc0ed195c3faacd7bde1.png
[21d0ae1e97a165c9e05b595e6c60b61f.png]: https://img-blog.csdnimg.cn/img_convert/21d0ae1e97a165c9e05b595e6c60b61f.png