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

作者: RickGe | 来源:发表于2016-11-16 12:49 被阅读684次

    RadioGroup + Fragment实现

    • 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" >
        <!-- 将该FrameLayout作为Fragment的容器 -->
        <FrameLayout 
            android:id="@+id/fl_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 Activity implements OnCheckedChangeListener {
        // 用于对Fragment进行管理
        private FragmentManager fragmentManager;
        private TalkFragment talkFragment;
        private ContactFragment contactFragment;
        private DiscoveryFragment discoveryFragment;
        private PersonalFragment personalFragment;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            requestWindowFeature(Window.FEATURE_NO_TITLE);
            setContentView(R.layout.activity_main);
            fragmentManager = getFragmentManager();
            initUI();
        }
    
        private void initUI() {
            RadioGroup rg_control = (RadioGroup) findViewById(R.id.rg_control);
            rg_control.setOnCheckedChangeListener(this);
            // 设置默认的Fragment
            setDefaultFragment();
        }
    
        private void setDefaultFragment() {
            FragmentTransaction transaction = fragmentManager.beginTransaction();
            talkFragment = new TalkFragment();
            transaction.add(R.id.fl_content, talkFragment);
            transaction.commit();
        }
    
        // Radio切换的事件处理
        @Override
        public void onCheckedChanged(RadioGroup radioGroup, int checkedId) {
            switch (checkedId) {
            case R.id.rb_talk:
                setTabSelection(0);
                break;
            case R.id.rb_contact:
                setTabSelection(1);
                break;
            case R.id.rb_discovery:
                setTabSelection(2);
                break;
            case R.id.rb_personal:
                setTabSelection(3);
                break;
            }
        }
    
        private void setTabSelection(int index) {
            // 开启一个Fragment事务
            FragmentTransaction transaction = fragmentManager.beginTransaction();
            // 先隐藏掉所有的Fragment
            hideFragments(transaction);
            switch (index) {
            case 0:
                if (talkFragment == null) {
                    // 如果TalkFragment为空,则创建一个并添加到界面上
                    talkFragment = new TalkFragment();
                    transaction.add(R.id.fl_content, talkFragment);
                } else {
                    // 如果TalkFragment不为空,则直接将它显示出来
                    transaction.show(talkFragment);
                }
                break;
            case 1:
                if (contactFragment == null) {
                    contactFragment = new ContactFragment();
                    transaction.add(R.id.fl_content, contactFragment);
                } else {
                    transaction.show(contactFragment);
                }
                break;
            case 2:
                if (discoveryFragment == null) {
                    discoveryFragment = new DiscoveryFragment();
                    transaction.add(R.id.fl_content, discoveryFragment);
                } else {
                    transaction.show(discoveryFragment);
                }
                break;
            case 3:
                if (personalFragment == null) {
                    personalFragment = new PersonalFragment();
                    transaction.add(R.id.fl_content, personalFragment);
                } else {
                    transaction.show(personalFragment);
                }
                break;
            }
            transaction.commit();
        }
    
        /**
         * 将所有的Fragment都置为隐藏状态。
         * 
         * @param transaction
         *            用于对Fragment执行操作的事务
         */
        private void hideFragments(FragmentTransaction transaction) {
            if (talkFragment != null) {
                transaction.hide(talkFragment);
            }
            if (contactFragment != null) {
                transaction.hide(contactFragment);
            }
            if (discoveryFragment != null) {
                transaction.hide(discoveryFragment);
            }
            if (personalFragment != null) {
                transaction.hide(personalFragment);
            }
        }
    }
    
    • 04 横竖屏切换
      如果参考这个Demo后,在横竖屏切换时发现重叠问题,那么在AndroidManifest.xml文件中做如下设置。
      横竖屏切换时,activity不重新创建。
    <activity
                android:name=".MainActivity"
                android:label="@string/app_name"
                android:configChanges="orientation|keyboardHidden|screenSize">
    

    相关文章

      网友评论

      • ximencx:如何解决重叠问题呢?还有状态保存
        RickGe:@ximencx 这个demo里面 切换时只是做了fragment的hide和show

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

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