Android 고전 아래쪽 옵션 통합 방식 2

이 방식 의 디자인 모델 은 RadioGroup + RadioButton + ViewPager + Fragment 입 니 다.그 효 과 는 제 가 지난 블 로그 에서 묘사 한 효과 와 대체적으로 같 습 니 다. 다시 효과 도 를 올 리 지 않 고 소스 코드 를 직접 올 립 니 다.레이아웃 먼저 보기:

<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"
    android:orientation="vertical"
    tools:context=".BottomActivity" >

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

    <RadioGroup
        android:id="@+id/rg"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bottom_tab_bg"
        android:gravity="center_vertical"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/rb1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/selector_home"
            android:gravity="center"
            android:text="  1"
            android:textColor="@color/selector_color_text" />

        <RadioButton
            android:id="@+id/rb2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/selector_center"
            android:gravity="center"
            android:text="  2"
            android:textColor="@color/selector_color_text" />

        <RadioButton
            android:id="@+id/rb3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/selector_smartservice"
            android:gravity="center"
            android:text="  3"
            android:textColor="@color/selector_color_text" />

        <RadioButton
            android:id="@+id/rb4"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/selector_gov"
            android:gravity="center"
            android:text="  4"
            android:textColor="@color/selector_color_text" />

        <RadioButton
            android:id="@+id/rb5"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/selector_setting"
            android:gravity="center"
            android:text="  5"
            android:textColor="@color/selector_color_text" />
    </RadioGroup> </LinearLayout>

Activity 의 코드 보기:

public class BottomActivity extends FragmentActivity {
    private ArrayList<Fragment> fragmentsList = new ArrayList<Fragment>();
    private ViewPager mViewPager;
    private RadioGroup group;

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

        mViewPager = (ViewPager) findViewById(R.id.vp);
        FragmentPagerAdapter adapter = new MyFragmentPageAdapter(
                getSupportFragmentManager());
        mViewPager.setAdapter(adapter);

        group = (RadioGroup) findViewById(R.id.rg);
        OnCheckedChangeListener listener = new MyOnCheckedChangeListener();
        group.setOnCheckedChangeListener(listener);
        group.check(R.id.rb5);

        //  mViewPager    ，       ，       
        OnPageChangeListener listener1 = new MyOnPageChangeListener();
        mViewPager.setOnPageChangeListener(listener1);

    }

    private class MyOnPageChangeListener implements OnPageChangeListener {

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }

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

        }

        @Override
        public void onPageSelected(int arg0) {
            //  page           ，     
            switch (arg0) {
            case 0:
                group.check(R.id.rb1);
                break;
            case 1:
                group.check(R.id.rb2);
                break;
            case 2:
                group.check(R.id.rb3);
                break;
            case 3:
                group.check(R.id.rb4);
                break;
            case 4:
                group.check(R.id.rb5);
                break;

            default:
                break;
            }

        }

    }

    private class MyOnCheckedChangeListener implements OnCheckedChangeListener {

        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {

            switch (checkedId) {
            case R.id.rb1:// viewpager     
                mViewPager.setCurrentItem(0);
                break;
            case R.id.rb2:
                mViewPager.setCurrentItem(1);
                break;
            case R.id.rb3:
                mViewPager.setCurrentItem(2);
                break;
            case R.id.rb4:
                mViewPager.setCurrentItem(3);
                break;
            case R.id.rb5:
                mViewPager.setCurrentItem(4);
                break;

            default:
                break;
            }

        }

    }
private class MyFragmentPageAdapter extends FragmentPagerAdapter {

        public MyFragmentPageAdapter(FragmentManager fm) {
            super(fm);
            fragmentsList.add(new Fragment1());
            fragmentsList.add(new Fragment2());
            fragmentsList.add(new Fragment3());
            fragmentsList.add(new Fragment4());
            fragmentsList.add(new Fragment5());
        }

        @Override
        public Fragment getItem(int arg0) {
            return fragmentsList.get(arg0);
        }

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

    }

}

또한, viewpager 자체 가 좌우 로 미 끄 러 지 는 효 과 를 가지 고 있 기 때문에 상기 코드 로 형 성 된 결 과 는 아래쪽 옵션 을 클릭 할 때 페이지 가 전환 되 는 것 입 니 다.페이지 중간 부분 을 클릭 해도 좌우 로 미 끄 러 지 며 페이지 를 전환 할 수 있 습 니 다.아래쪽 옵션 을 눌 렀 을 때 만 페이지 전환 (즉, viewpager 좌우 미끄럼 금지) 을 하려 면 이벤트 전달 체 제 를 사용 합 니 다.onInterceptTouchEvent 와 onTouchEvent 두 가지 방법 을 다시 씁 니 다. NoSlideViewPager extends ViewPager 를 사용자 정의 합 니 다. 코드 는 다음 과 같 습 니 다.

public class NoSlideViewPager extends ViewPager {

    public NoSlideViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public NoSlideViewPager(Context context) {
        super(context);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent arg0) {
        //       ：true：             
        // false      ，     view  
        return false;
    }

    @Override
    public boolean onTouchEvent(MotionEvent arg0) {
        //    true:      
        //    false：       ，    
        return false;
    }
}

코드 에 있 는 ViewPager 를 NoSlideViewPager 로 바 꾸 면 밑 에 있 는 옵션 을 눌 러 서 페이지 를 전환 할 수 있 습 니 다. viewpager 는 더 이상 스스로 미 끄 러 질 수 없습니다.