App主界面布局的实现方式(一)
2016-11-16 本文已影响684人
RickGe
RadioGroup + Fragment实现
- 01 效果图
该实现方式只能通过切换RadioButton来切换页面,并不能通过滑动来实现。
- 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">