App主界面布局的实现方式(二)

作者: RickGe | 来源:发表于2016-11-18 17:35 被阅读246次

    RadioGroup + Fragment + ViewPager + FragmentPagerAdapter实现

    • 01 效果图
      该实现方式既可以通过切换RadioButton来切换页面,也可以通过左右滑动来切换页面。
    MainInterface.png
    • 02 layout
      4个fragment的相似布局文件
    contact_fragment.xml
    <?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"
        android:gravity="center">
        <TextView 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Contact fragment"
            android:textSize="30sp"/>
    </LinearLayout>
    

    主布局文件

    activity_main.xml
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
        <!--  使用ViewPager来管理页面 -->
        <android.support.v4.view.ViewPager 
            android:id="@+id/vp_content"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>
        <RadioGroup 
            android:id="@+id/rg_control"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="bottom"
            android:gravity="center">
            <RadioButton
                android:id="@+id/rb_talk"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_marginLeft="30dp"
                android:button="@drawable/radio_talk_selector"
                android:checked="true" />
            <RadioButton 
                android:id="@+id/rb_contact"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:button="@drawable/radio_contact_selector"/>
            <RadioButton 
                android:id="@+id/rb_discovery"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:button="@drawable/radio_discovery_selector"/>
            <RadioButton 
                android:id="@+id/rb_personal"
                android:layout_width="0dp"
                android:layout_weight="1"
                android:layout_height="wrap_content"
                android:button="@drawable/radio_personal_selector"/>
        </RadioGroup>
    </LinearLayout>
    
    • 03 Activity
      4个Fragment的相似Java代码
    public class ContactFragment extends Fragment {
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            // 这里注意inflate的第三个参数要设置为false
            View view = inflater.inflate(R.layout.contact_fragment, container, false);
            return view;
        }
    }
    

    MainActivity.java

    public class MainActivity extends FragmentActivity implements OnCheckedChangeListener {
        // 用于对Fragment进行管理
        FragmentManager fragmentManager;
        private ViewPager vp_content;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            requestWindowFeature(Window.FEATURE_NO_TITLE);
            setContentView(R.layout.activity_main);
            fragmentManager = getSupportFragmentManager();
            initUI();
        }
    
        private void initUI() {
            vp_content = (ViewPager) findViewById(R.id.vp_content);
            final RadioGroup rg_control = (RadioGroup) findViewById(R.id.rg_control);
            rg_control.setOnCheckedChangeListener(this);
            final int radioIds[] = new int[]{R.id.rb_talk, R.id.rb_contact, R.id.rb_discovery, R.id.rb_personal};
            vp_content.setAdapter(new MyViewPagerAdpater(fragmentManager));
            vp_content.setOffscreenPageLimit(2);
            vp_content.setOnPageChangeListener(new OnPageChangeListener() {
                @Override
                public void onPageSelected(int position) {
                    rg_control.check(radioIds[position]);
                }
                
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                }
                
                @Override
                public void onPageScrollStateChanged(int arg0) {
                }
            });
        }
        
        class MyViewPagerAdpater extends FragmentPagerAdapter{
            private ArrayList<Fragment> mFragments;
            
            public MyViewPagerAdpater(android.support.v4.app.FragmentManager fm) {
                super(fm);
                initData();
            }
            
            private void initData() {
                mFragments= new ArrayList<Fragment>();
                TalkFragment talkFragment = new TalkFragment();
                ContactFragment contactFragment = new ContactFragment();
                DiscoveryFragment discoveryFragment = new DiscoveryFragment();
                PersonalFragment personalFragment = new PersonalFragment();
                mFragments.add(talkFragment);
                mFragments.add(contactFragment);
                mFragments.add(discoveryFragment);
                mFragments.add(personalFragment);
            }
            // 返回Fragment
            @Override
            public Fragment getItem(int position) {
                return mFragments.get(position);
            }
            // 返回Fragment的数量
            @Override
            public int getCount() {
                return mFragments.size();
            }
        }
    
        // Radio切换的事件处理
        @Override
        public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
            switch (checkedId) {
            case R.id.rb_talk:
                vp_content.setCurrentItem(0, true);
                break;
            case R.id.rb_contact:
                vp_content.setCurrentItem(1, true);
                break;
            case R.id.rb_discovery:
                vp_content.setCurrentItem(2, true);
                break;
            case R.id.rb_personal:
                vp_content.setCurrentItem(3, true);
                break;
            }
        }
    }
    
    • 04 横竖屏切换
      如果参考这个Demo后,在横竖屏切换时发现重叠问题,那么在AndroidManifest.xml文件中做如下设置。
      横竖屏切换时,activity不重新创建。
    <activity
                android:name=".MainActivity"
                android:label="@string/app_name"
                android:configChanges="orientation|keyboardHidden|screenSize">
    
    • 05 注意
      上述代码中需要使用android-support-v4.jar里面的Class:
      import android.support.v4.app.Fragment;
      import android.support.v4.app.FragmentActivity;
      import android.support.v4.app.FragmentManager;
      import android.support.v4.app.FragmentPagerAdapter;
      import android.support.v4.view.ViewPager;
      import android.support.v4.view.ViewPager.OnPageChangeListener;

    相关文章

      网友评论

        本文标题:App主界面布局的实现方式(二)

        本文链接:https://www.haomeiwen.com/subject/zckspttx.html