1. 程式人生 > >Android可滑動的Tab頁

Android可滑動的Tab頁

RadioGroup+ViewPager+Fragment實現的可滑動的Tab頁,非常的靈活。

最終效果圖

 

部分原始碼

MainActivity

package com.example.shen.tabtest.activity;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.widget.RadioButton;
import android.widget.RadioGroup;

import com.example.shen.tabtest.R;
import com.example.shen.tabtest.adapter.myFragmentPagerAdapter;
import com.example.shen.tabtest.fragment.EvaluationFragment;
import com.example.shen.tabtest.fragment.MerchantFragment;
import com.example.shen.tabtest.fragment.OrderFragment;

import java.util.ArrayList;


public class MainActivity extends FragmentActivity implements RadioGroup.OnCheckedChangeListener{
    private ViewPager viewPager;
    private RadioGroup radioGroup;
    private RadioButton rbOrder,rbEvaluation,rbMerchant;
    private ArrayList<Fragment> alFragment;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化介面元件
        initView();
        //初始化ViewPager
        initViewPager();
    }

    private void initView(){
        viewPager=(ViewPager) findViewById(R.id.viewpager);
        radioGroup=(RadioGroup) findViewById(R.id.radiogroup);
        rbOrder=(RadioButton) findViewById(R.id.rb_order);
        rbEvaluation=(RadioButton) findViewById(R.id.rb_evaluation);
        rbMerchant=(RadioButton) findViewById(R.id.rb_merchant);
        radioGroup.setOnCheckedChangeListener(this);
    }

    private void initViewPager(){
        OrderFragment orderFragment=new OrderFragment();
        EvaluationFragment evaluationFragment=new EvaluationFragment();
        MerchantFragment merchantFragment=new MerchantFragment();
        alFragment=new ArrayList<>();
        alFragment.add(orderFragment);
        alFragment.add(evaluationFragment);
        alFragment.add(merchantFragment);
        //ViewPager設定介面卡
        viewPager.setAdapter(new myFragmentPagerAdapter(getSupportFragmentManager(), alFragment));
        //ViewPager顯示第一個Fragment
        viewPager.setCurrentItem(0);
        //ViewPager頁面切換監聽
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }
            //滑動ViewPager,RadioButton選中狀態做相應變換
            @Override
            public void onPageSelected(int position) {
                switch (position){
                    case 0:
                        radioGroup.check(R.id.rb_order);
                        break;
                    case 1:
                        radioGroup.check(R.id.rb_evaluation);
                        break;
                    case 2:
                        radioGroup.check(R.id.rb_merchant);
                        break;
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    /**
     * 點選RadioButton切換ViewPager中相應的Fragment
     * @param group
     * @param checkedId
     */
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        switch (checkedId){
            case R.id.rb_order:
                viewPager.setCurrentItem(0,false);
                break;
            case R.id.rb_evaluation:
                viewPager.setCurrentItem(1,false);
                break;
            case R.id.rb_merchant:
                viewPager.setCurrentItem(2,false);
                break;
        }
    }
}
activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white">

    <RadioGroup
        android:id="@+id/radiogroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp">
        <RadioButton
            android:id="@+id/rb_order"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/order"
            android:checked="true"
            style="@style/style_radiobutton"/>
        <RadioButton
            android:id="@+id/rb_evaluation"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/evaluation"
            style="@style/style_radiobutton"/>
        <RadioButton
            android:id="@+id/rb_merchant"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/merchant"
            style="@style/style_radiobutton"/>
    </RadioGroup>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/radiogroup">
    </android.support.v4.view.ViewPager>
</RelativeLayout>
myFragmentPagerAdapter
package com.example.shen.tabtest.adapter;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.ArrayList;

/**
 * Created by Administrator on 2015/6/24.
 */
public class myFragmentPagerAdapter extends FragmentPagerAdapter {
    private ArrayList<Fragment> list;
    public myFragmentPagerAdapter(FragmentManager fm, ArrayList<Fragment> list){
        super(fm);
        this.list=list;
    }
    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    @Override
    public int getCount() {
        return list.size();
    }
}
style_radiobutton
    <style name="style_radiobutton">
        <item name="android:layout_weight">1</item>
        <item name="android:button">@null</item>
        <item name="android:background">@null</item>
        <item name="android:gravity">center</item>
        <item name="android:drawablePadding">10dp</item>
        <item name="android:drawableBottom">@drawable/radiobutton_selector</item>
        <item name="android:textColor">@drawable/textcolor_selector</item>
        <item name="android:textSize">16sp</item>
    </style>