在做项目中,需要建立一个主界面框架,尝试过使用ViewPager,后来又换成了使用Activity动态加载Fragment实现选项卡的效果。总结一下方便以后回顾。
先给出总体效果:
要实现上述效果,首先来大体上阐述步骤:
步骤一:
创建一个界面框架布局文件activity_frame.xml ,一个垂直现行布局包含:从上到下第一个帧布局FrameLayout用于动态加载Fragment,命其id为content;第二个布局是一个相对布局,用于放置三个标签按钮,其中三个线性布局嵌套分别一个ImageView,为了能均分,权重都为1;图标自己制作。同时创建一个FrameActivity.java文件,来显示主界面框架。
activity_frame.xml 代码:
<?xml version="1.0" encoding="UTF-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <FrameLayout android:id="@+id/content" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"></FrameLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="45dp" android:background="#c0c0c0"> <RelativeLayout android:id="@+id/main_layout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical"> <ImageView android:id="@+id/main_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/img_main" /> </LinearLayout> </RelativeLayout> <RelativeLayout android:id="@+id/shop_layout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical"> <ImageView android:id="@+id/shop_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/img_shop" /> </LinearLayout> </RelativeLayout> <RelativeLayout android:id="@+id/shop_layout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical"> <ImageView android:id="@+id/shop_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/img_shop" /> </LinearLayout> </RelativeLayout> <RelativeLayout android:id="@+id/my_layout" android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="1"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:orientation="vertical"> <ImageView android:id="@+id/my_image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:src="@drawable/img_my" /> </LinearLayout> </RelativeLayout> </LinearLayout> </LinearLayout>
步骤二:
分别创建四个布局文件:
其中布局内容根据自己想要的布局设置;
步骤三:
然后再为这四个布局创建对应的Fragment:
其中每个Fragment加载布局的代码都是差不多,都是在onCreateView中获得一个View对象,其它代码根据业务需要而编写,如图:
步骤四:
四个Fragment创建好了之后,此时需要在FrameActivity中,通过界面底边的三个标签注册单击事件监听器来动态地加载Fragment,
业务代码如下:
setTabSelection中包含一个switch函数,根据判断id来动态加载fragment(动态加载fragent的步骤这里不给出,csdn有相应的文章):
FrameActivity的完整代码如下:
package com.android.activity;import com.android.client.R;import com.android.fragment.MainFragment;import com.android.fragment.MyFragment;import com.android.fragment.ShopFragment;import android.app.Activity;import android.app.AlertDialog;import android.app.FragmentManager;import android.app.FragmentTransaction;import android.app.AlertDialog.Builder;import android.content.DialogInterface;import android.os.Bundle;import android.view.KeyEvent;import android.view.View;import android.view.View.OnClickListener;import android.view.Window;import android.widget.ImageView;public class FrameActivity extends Activity implements OnClickListener { private MainFragment mainFragment; private ShopFragment shopFragment; private MyFragment myFragment; private View mainLayout; private View shopLayout; private View myLayoutView; private ImageView mainImg; private ImageView shopImg; private ImageView myImg; private FragmentManager fragmentManager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_frame); initViews(); fragmentManager = getFragmentManager(); setTabSelection(0); } private void setTabSelection(int i) { clearSelection(); FragmentTransaction transaction = fragmentManager.beginTransaction(); hideFragments(transaction); switch (i) { case 0: mainImg.setImageResource(R.drawable.img_main_pressed); if (mainFragment == null) { mainFragment = new MainFragment(); transaction.add(R.id.content, mainFragment); } else { transaction.show(mainFragment); } break; case 1: shopImg.setImageResource(R.drawable.img_shop_pressed); if (shopFragment == null) { shopFragment = new ShopFragment(); transaction.add(R.id.content, shopFragment); } else { transaction.show(shopFragment); } break; case 2: default: myImg.setImageResource(R.drawable.img_my_pressed); if (myFragment == null) { myFragment = new MyFragment(); transaction.add(R.id.content, myFragment); } else { transaction.show(myFragment); } break; } transaction.commit(); } private void hideFragments(FragmentTransaction transaction) { if (mainFragment != null) { transaction.hide(mainFragment); } if (shopFragment != null) { transaction.hide(shopFragment); } if (myFragment != null) { transaction.hide(myFragment); } } private void clearSelection() { // TODO Auto-generated method stub mainImg.setImageResource(R.drawable.img_main); shopImg.setImageResource(R.drawable.img_shop); myImg.setImageResource(R.drawable.img_my); } private void initViews() { // TODO Auto-generated method stub mainLayout = findViewById(R.id.main_layout); shopLayout = findViewById(R.id.shop_layout); myLayoutView = findViewById(R.id.my_layout); mainImg = (ImageView) findViewById(R.id.main_image); shopImg = (ImageView) findViewById(R.id.shop_image); myImg = (ImageView) findViewById(R.id.my_image); mainLayout.setOnClickListener(this); shopLayout.setOnClickListener(this); myLayoutView.setOnClickListener(this); } @Override public void onClick(View arg0) { switch (arg0.getId()) { case R.id.main_layout: setTabSelection(0); break; case R.id.shop_layout: setTabSelection(1); break; case R.id.my_layout: setTabSelection(2); break; default: break; } // TODO Auto-generated method stub } //框架中的退出提示代码,常规代码重用率很高可以抽象出来 @Override public boolean onKeyDown(int keyCode, KeyEvent event) { // TODO Auto-generated method stub if (keyCode == KeyEvent.KEYCODE_BACK) { if (keyCode == KeyEvent.KEYCODE_BACK) { Builder builder = new Builder(FrameActivity.this); builder.setTitle("提示"); builder.setMessage("你确定要退出吗?"); builder.setIcon(R.drawable.ic_launcher); DialogInterface.OnClickListener dialog = new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface arg0, int arg1) { // TODO Auto-generated method stub if (arg1 == DialogInterface.BUTTON_POSITIVE) { arg0.cancel(); } else if (arg1 == DialogInterface.BUTTON_NEGATIVE) { FrameActivity.this.finish(); } } }; builder.setPositiveButton("取消", dialog); builder.setNegativeButton("确定", dialog); AlertDialog alertDialog = builder.create(); alertDialog.show(); } } return false; }}
到此,界面框架已经建好,接下来就根据自己的业务需要实现代码。
犯了错,总之要改,改之后呢,最好还是记录。因为这些难题在后来的日子还是会遇到。不妨到时候回过头看看自己当时记录的错误。毕竟是自己的错,资以改正。
纸上得来终觉浅,书到用时方恨少。希望对你有所帮助。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/115080.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...