App主界面布局的实现方式(一)
来源:互联网 发布:怎么开启80端口 编辑:程序博客网 时间:2024/06/06 17:48
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>
<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
- App主界面布局的实现方式(一)
- App主界面布局的实现方式(一)
- 界面的布局(一)
- 多种多样的App主界面Tab实现方法(一):Viewpager
- 实现微信布局的四种方式(一)
- UI界面--多种布局方式实现的工具栏
- APP启动界面的实现,第一种方式
- 使用ViewPager实现主界面的布局
- 聊天界面的制作(一)——基本布局的实现
- 2.仿微信--登录界面(LoginActivity)布局界面的实现
- Android 端天气预报APP的实现(一)天气显示界面之上下滑动
- 移动APP界面布局
- Delphi D10.1 移动开发中APP界面基本布局(一)
- iOS界面布局的几种方式
- FlexStore研究一:FlexStore主界面的布局
- 以编码的方式实现Auto Layout自动布局(一)
- 以编码的方式实现Auto Layout自动布局(一)
- APP页面的三种基本实现方式:storyboard,xib,代码实现 与自动布局
- 每周一报2017/12/13
- 做高B格年终总结PPT
- HDU-4348 To the moon (主席树)
- 输入10个整数,用函数编程将其中最大数于最小数位置互换,然后输出互换后的数组。
- 上海之行——所见、所感、所想、所做
- App主界面布局的实现方式(一)
- go build 命令
- Unity3D——在运行时修改Animator Controller状态机中的动画片段
- eclipse安装checkstyle、PMD、FindBugs、VisualVM
- 修复dede织梦undefined function pasterTempletDiy报错
- 《Learning Sentiment-Specific Word Embedding for Twitter Sentiment Classificaton》阅读笔记
- 链路聚合技术
- ERROR ITMS-90022,90023,问题已解决
- 25 仿函数与函数对象(学自Boolean)