ViewPage+RadioGroup实现Tab切换

最新推荐文章于 2022-11-07 18:11:35 发布

星旅zl

最新推荐文章于 2022-11-07 18:11:35 发布

阅读量445

点赞数 1

分类专栏： Android

本文链接：https://blog.csdn.net/nzzl54/article/details/79448475

版权

Android 专栏收录该内容

64 篇文章 1 订阅

订阅专栏

以前写过一篇也是Tab切换的文章，当时做安卓一年左右，单纯觉得这样能实现功能，但是没有注意到性能和代码简洁性的问题，文章为 http://blog.csdn.net/nzzl54/article/details/52537320

今天的文章些许借鉴了这篇文章，这里面也介绍了几种Tab切换的设计，有兴趣的可以去看看：

http://blog.csdn.net/u010583599/article/details/52056894

现在有更好的方法来实现Tab的切换，这里我用的是ViewPage+RadioGroup的方法，当然，最快捷的一定是ViewPage+TabLayout的方法，只是TabLayout的切换支持的效果比较少，用RadioGroup我们可以设计一些自定义的图标或者别的花样，这里我打算简单点，设计上图标下文字的Tab，这里给出主要代码。

一、设计点击时的文字颜色切换（放在res文件夹的color文件夹下，如果没有自己建立文件夹）radio_button_text.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/blue" android:state_checked="true"/>
    <item android:color="@color/ps_999999"/>
</selector>

radioButton的样式：

<style name="rb_bottom_style">
    <item name="android:textSize">@dimen/font_12</item>
    <item name="android:textColor">@color/gray_666666</item>
    <item name="android:ellipsize">marquee</item>
    <item name="android:gravity">center</item>
    <item name="android:button">@null</item>
    <item name="android:singleLine">true</item>
    <item name="android:background">@null</item>
    <item name="android:drawablePadding">@dimen/space_5</item>
    <item name="android:paddingTop">@dimen/space_5</item>
</style>

二、布局文件

（1）main_botton_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <FrameLayout
        android:id="@+id/flBottom"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:paddingTop="@dimen/space_5"
        android:paddingBottom="@dimen/space_5"
        android:background="#F7F7F7">

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >

            <RadioGroup
                android:id="@+id/main_radio"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:gravity="center_vertical"
                android:orientation="horizontal" >

                <RadioButton
                    android:id="@+id/rbtab0"
                    style="@style/rb_bottom_style"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1.0"
                    android:checked="true"
                    android:drawableTop="@drawable/rb_main_news_selector"
                    android:text="嘻嘻"
                    android:textColor="@color/radio_button_text"/>

                <RadioButton
                    android:id="@+id/rbtab1"
                    style="@style/rb_bottom_style"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1.0"
                    android:drawableTop="@drawable/rb_main_news_selector"
                    android:text="哈哈"
                    android:textColor="@color/radio_button_text"/>

                <RadioButton
                    android:id="@+id/rbtab2"
                    style="@style/rb_bottom_style"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1.0"
                    android:drawableTop="@drawable/rb_main_news_selector"
                    android:text="呵呵"
                    android:textColor="@color/radio_button_text"/>

                <RadioButton
                    android:id="@+id/rbtab3"
                    style="@style/rb_bottom_style"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1.0"
                    android:drawableTop="@drawable/rb_main_news_selector"
                    android:text="其他"
                    android:textColor="@color/radio_button_text"/>
            </RadioGroup>
        </RelativeLayout>
    </FrameLayout>
</RelativeLayout>

（2）fragment_test.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white_ffffff">

    <LinearLayout
        android:id="@+id/layout_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:gravity="center">
        <TextView
            android:id="@+id/tv_fragment"
            android:padding="@dimen/space_10"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="测试Fragment"
            android:textColor="@color/white_ffffff"
            android:gravity="center"
            android:background="@color/red"/>
    </LinearLayout>

</LinearLayout>

(3)activity_main_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white_ffffff">

    <include layout="@layout/include_toolbar"/>

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

    <include layout="@layout/main_botton_tab" />
</LinearLayout>

三、代码

（1）Fragment：就展示TextView，布局已在上面给出

/**
 * Created by lan.zheng on 2018/3/5.
 *
 */

@SuppressLint("ValidFragment")
public class tabTestFragment extends BaseFragment{
    private TextView tv_fragment;
    private String setText = "";

    @SuppressLint("ValidFragment")
    public tabTestFragment(String s){
        setText = s;
    }

    private View view;
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_test, container, false);
        return view;
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        initView();
    }

    private void initView(){
        tv_fragment = (TextView)view.findViewById(R.id.tv_fragment);
        tv_fragment.setText(setText);
        tv_fragment.setBackgroundColor(getResources().getColor(R.color.test_green));
    }

}

（2）Activity：四个Fragement和Viewpage+Radiogroup的用法

/**
 * Created by lan.zheng on 2018/3/5.
 * tab切换的首页
 */
public class MainTabActivity extends AppCompatActivity {

    public Toolbar mToolbar;
    public ToolBarManager mToolBarManager;
    private ViewPager viewPager;
    private FragmentPagerAdapter mAdapter;
    private List<Fragment> mFragments = new ArrayList<Fragment>();

    /**
     * fragment页面
     */
    private Fragment fragment0;
    private Fragment fragment1;
    private Fragment fragment2;
    private Fragment fragment3;

    /**
     * tab切换控制
     */
    private RadioGroup main_radio;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main_tab);
        findView();
        initToolBar();
        initData();
        initTab();
    }

    private void findView(){
        main_radio = (RadioGroup)findViewById(R.id.main_radio);
        main_radio.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.rbtab0:
                        viewPager.setCurrentItem(0);
                        break;
                    case R.id.rbtab1:
                        viewPager.setCurrentItem(1);
                        break;
                    case R.id.rbtab2:
                        viewPager.setCurrentItem(2);
                        break;
                    case R.id.rbtab3:
                        viewPager.setCurrentItem(3);
                        break;
                    default:
                        break;
                }

            }
        });

    }

    private void initToolBar() {
        mToolbar = (Toolbar) findViewById(R.id.toolbar);
        mToolBarManager = new ToolBarManager(mToolbar, this);
        mToolBarManager.init()
                .showBack(true).setTitle("测试");
        mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
        viewPager = (ViewPager)findViewById(R.id.container);
        viewPager.setOffscreenPageLimit(4); //防止Fragment被回收
    }

    private void initData(){
        fragment0 = new tabTestFragment("第一个页面");
        fragment1 = new tabTestFragment("第二个页面");
        fragment2 = new tabTestFragment("第三个页面");
        fragment3 = new tabTestFragment("第四个页面");
        mFragments.add(fragment0);
        mFragments.add(fragment1);
        mFragments.add(fragment2);
        mFragments.add(fragment3);
        mAdapter = new FragmentPagerAdapter( getSupportFragmentManager()) {

            @Override
            public int getCount() {
                return mFragments.size();
            }

            @Override
            public Fragment getItem(int arg0) {
                return mFragments.get(arg0);
            }
        };
        viewPager.setAdapter(mAdapter);
    }

    private void initTab(){
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                //当前选中的Fragment 下标
                int checkButtonId = 0;
                switch (main_radio.getCheckedRadioButtonId()){
                    case R.id.rbtab0:
                        checkButtonId = 0;
                        LogUtils.LogError("lenita","currentItem = "+arg0+",checkButtonId = "+checkButtonId);
                        break;
                    case R.id.rbtab1:
                        checkButtonId = 1;
                        LogUtils.LogError("lenita","currentItem = "+arg0+",checkButtonId = "+checkButtonId);
                        break;
                    case R.id.rbtab2:
                        checkButtonId = 2;
                        LogUtils.LogError("lenita","currentItem = "+arg0+",checkButtonId = "+checkButtonId);
                        break;
                    case R.id.rbtab3:
                        checkButtonId = 3;
                        LogUtils.LogError("lenita","currentItem = "+arg0+",checkButtonId = "+checkButtonId);
                        break;
                }
                if(arg0 == checkButtonId){
                    //当一样的时候，不需要改变tab项，原因是在点击的时候已经把页面也定位到了对应的Fragment
                    return;
                }
                setCheckButton(arg0);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }


    private void setCheckButton(int position){
        switch (position){
            case 0:
                main_radio.check(R.id.rbtab0);
                break;
            case 1:
                main_radio.check(R.id.rbtab1);
                break;
            case 2:
                main_radio.check(R.id.rbtab2);
                break;
            case 3:
                main_radio.check(R.id.rbtab3);
                break;
        }
    }

}

注意：fragment过多的时候，有可能被回收，因此要写 viewPager.setOffscreenPageLimit(4)

具体可以参考这篇文章，方法很多，可以参考文章点击打开链接http://blog.csdn.net/nzzl54/article/details/68944000

效果图如下：

星旅zl

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ViewPage+RadioGroup实现Tab切换

以前写过一篇也是Tab切换的文章，当时做安卓一年左右，单纯觉得这样能实现功能，但是没有注意到性能和代码简洁性的问题，文章为 http://blog.csdn.net/nzzl54/article/details/52537320今天的文章些许借鉴了这篇文章，这里面也介绍了几种Tab切换的设计，有兴趣的可以去看看：http://blog.csdn.net/u010583599/article/de...
复制链接

扫一扫