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

来源:互联网 发布:怎么开启80端口 编辑:程序博客网 时间:2024/06/06 17:48

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>
    主布局文件
    <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">

阅读全文
0 0
原创粉丝点击