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

RadioGroup + Fragment实现

  • 01 效果图
    该实现方式只能通过切换RadioButton来切换页面,并不能通过滑动来实现。

MainInterface.png
  • 02 layout
    4个fragment的相似布局文件
    contact_fragment.xml
    
    <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>
    主布局文件
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="vertical" >
      
      <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">


文/RickGe(简书作者)
原文链接:http://www.jianshu.com/p/3ccbe1a94b5b
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

你可能感兴趣的:(UI部分)